未分類の記事一覧

最近作ったサイトでサイドメニューで子メニューをドロップダウンで表示するものを作ってみた。
ドロップダウンで表示するメニューはグローバルメニューでは良くあるのだが、今回はサイドメニューで作りたかった。
JavaScriptは出来るだけ使わないでCSSだけで作ってみました。

サンプルページはこちら 実際に設置したサイトはこちら→コミュニケーションツールでコミュニケーションを企画する?ちよだ
ファイルのダウンロードはこちら→menu.zip

XHTMLはこんな感じ

<div id="sidebar-left">
	<div class="menu">
	<div class="title">●Menu●</div>
	<ul id="left-menu">
		<li class="pnk" onmouseover="this.className='pnk1'" onmouseout="this.className='pnk'"><a href="#">会社案内</a>
			<ul class="sub">
				<li><a href="#">経営理念・概要・沿革</a></li>
				<li><a href="#">アクセスマップ</a></li>
				<li><a href="#">お問い合わせ</a></li>
				<li><a href="#">サンプル・資料請求</a></li>
				<li><a href="#">採用情報</a></li>
				<li><a href="#">スタッフ紹介</a></li>
				<li><a href="#">特定商取引に関する記述</a></li>
				<li><a href="#">個人情報保護方針</a></li>
			</ul>
		</li>
		<li class="orang" onmouseover="this.className='orang1'" onmouseout="this.className='orang'"><a href="#">商業ツール</a>
			<ul class="sub">
			<li><a href="#">はがき</a></li>
			<li><a href="#">インプレッション名刺</a></li>
			</ul>
		</li>
		<li class="gren" onmouseover="this.className='gren1'" onmouseout="this.className='gren'"><a href="#">コミュニケーション</a>
			<ul class="sub">
				<li><a href="#">出版</a></li>
				<li><a href="#">心の心髄</a></li>
				<li><a href="#">心理劇</a></li>
			</ul>
		</li>
		<li class="yelow" onmouseover="this.className='yelow1'" onmouseout="this.className='yelow'"><a href="#">社長ブログ</a></li>
		<li class="yelow" onmouseover="this.className='yelow1'" onmouseout="this.className='yelow'"><a href="#">スタッフブログ</a></li>
		<li class="blu" onmouseover="this.className='blu1'" onmouseout="this.className='blu'"><a href="#">ちよだのチャレンジ</a></li>
		<li class="blu" onmouseover="this.className='blu1'" onmouseout="this.className='blu'"><a href="#">お客様の声</a></li>
		<li class="blu" onmouseover="this.className='blu1'" onmouseout="this.className='blu'"><a href="#">リンク</a></li>
	</ul>

	</div>
</div>

CSSはこれ

/* サイドメニュー全体の設定 */
div#sidebar-left {
	float: left;
	margin-left: 20px;
	width: 185px;
}
/*サイドメニューのタイトルの部分の設定*/
div#sidebar-left div.menu div.title{
	width:172px;
	height: 37px;
	border: 1px solid #ccc;
	line-height: 37px;
	text-align: center;
	background: url(images/side-menu/gray.jpg);
}
/*メニュー本体部分の設定*/
div#sidebar-left ul#left-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*メニューのリストの設定*/
ul#left-menu li {
	display: block;
	width:172px;
	height: 37px;
	border: 1px solid #ccc;
	line-height: 37px;
	text-align: left;
	margin: 0;
	padding: 0;
}

/*リストのリンクの設定*/
ul#left-menu li a {
	font-size: 14px;
	color: #000;
	display: block;
	text-align: left;
	text-decoration: none;
	width: 162px;
	_width:172px;
	padding-left: 10px;
}

/*子メニューのulの設定*/
ul#left-menu ul.sub{
	position: relative;
	left: 50px;
	margin: 0;
	padding: 0;
}
/*子メニューのliの設定*/
ul#left-menu ul.sub li{
	display: block;
	width: 162px;
	height: 27px;
	background: url(images/side-menu/gray-s.jpg);
	padding: 0;
	margin: 0;
	line-height: 0;
}

/*子メニューのリンクの設定*/
ul#left-menu ul.sub li a {
	color: #000;
	font-size: 12px;
	font-weight: normal;
	width: 152px;
	_width: 162px;
	height: 27px;
	padding-left: 10px;
	background: url(images/side-menu/gray-s.jpg);
	line-height: 27px;
}

ul#left-menu ul.sub li a:hover {
	color: #000;
}

/*子メニューの初期値では表示しない*/
ul#left-menu li.pnk ul,
ul#left-menu li.orang ul,
ul#left-menu li.yelow ul,
ul#left-menu li.gren ul,
ul#left-menu li.blu ul{
	display: none;
}

ul#left-menu li.pnk1 ul,
ul#left-menu li.orang1 ul,
ul#left-menu li.yelow1 ul,
ul#left-menu li.gren1 ul,
ul#left-menu li.blu1 ul{
	display: block;
}


/*親メニューのデフォルトの設定*/
ul#left-menu li.pnk {
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu{
	background: url(images/side-menu/bule.jpg) no-repeat;
}

/*親メニューのa要素の設定*/
ul#left-menu li.pnk1 a{
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren1 a{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow1 a{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang1 a{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu1 a{
	background: url(images/side-menu/blue.jpg) no-repeat;
}


/*親メニューのリンクの設定*/
ul#left-menu li.blu a:link{
	background: url(images/side-menu/blue.jpg) no-repeat;
}
ul#left-menu li.pnk a:link{
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren a:link{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow a:link{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang a:link{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu a:link{
	background: url(images/side-menu/blue.jpg) no-repeat;
}


/*親メニューのマウスホバーの設定*/
ul#left-menu li.pnk1 a:hover{
	background: url(images/side-menu/pink1.jpg) no-repeat;
}
ul#left-menu li.gren1 a:hover{
	background: url(images/side-menu/green1.jpg) no-repeat;
}
ul#left-menu li.yelow1 a:hover{
	background: url(images/side-menu/yellow1.jpg) no-repeat;
}
ul#left-menu li.orang1 a:hover{
	background: url(images/side-menu/orange1.jpg) no-repeat;
}
ul#left-menu li.blu1 a:hover{
	background: url(images/side-menu/blue1.jpg) no-repeat;
}


/*子メニューのマウスホバーの設定*/
ul#left-menu li.pnk1 ul.sub li a:hover{
	background: url(images/side-menu/pink-s.jpg) no-repeat;
}
ul#left-menu li.gren1 ul.sub li a:hover{
	background: url(images/side-menu/green-s.jpg) no-repeat;
}
ul#left-menu li.orang1 ul.sub li a:hover{
	background: url(images/side-menu/orange-s.jpg) no-repeat;
}

/*親メニューのvisitedの設定*/
ul#left-menu li.blu a:visited{
	background: url(images/side-menu/blue.jpg) no-repeat;
}
ul#left-menu li.pnk a:visited{
	background: url(images/side-menu/pink.jpg) no-repeat;
}
ul#left-menu li.gren a:visited{
	background: url(images/side-menu/green.jpg) no-repeat;
}
ul#left-menu li.yelow a:visited{
	background: url(images/side-menu/yellow.jpg) no-repeat;
}
ul#left-menu li.orang a:visited{
	background: url(images/side-menu/orange.jpg) no-repeat;
}
ul#left-menu li.blu a:visited{
	background: url(images/side-menu/blue.jpg) no-repeat;
}

こんなのを作ってみましたが、SEO的には全ページが全ページからリンクを貼られるので良くないかもです。

ご自由にダウンロード、カスタマイズして使ってください。

SEO

既存のウェブサイトをリニューアルするときに、自分で更新しやすくして欲しい、携帯にも対応させて欲しいと要望がある場合は迷わずWordpressを使います。

WordPress同様、無料で使えるプラグインがたくさんあるからです。

今まで運用履歴があるウェブサイトの場合はトップページだけでなくトップページ以外もページランクがついていたり、検索エンジンに登録されています。

Yahooはまだまだサブページの登録が少ないようですが、Googleはきちんと拾ってくれています。

リニューアルしたらアクセスが減ったのでは本末転倒ですよね。

これをきちんと引き継がなくてはいけません、そんな時に使えるプラグインは.html on PAGES

ほとんどの既存のサイトは.htmlが付いているのでこのプラグインを入れることで全て解決します。

また、携帯に対応させるにはKtai Styleを入れるだけでOK！

その他、良く使うプラグインを上げておきます。

• All in One SEO Pack タイトルタグやメタタグを投稿ごとに設定できます。
• Contact Form 7 お問い合わせやアンケートのフォームを簡単に作れます。
• Counterize II 簡易のアクセス解析です
• Dagon Design Sitemap Generator 人間用のサイトマップを自動で作ってくれます。
• Google Analyticator Googleのアクセス解析のタグを各ページに吐き出してくれます。
• Google XML Sitemaps Google,Yahoo，Bingのロボット向けのサイトマップを吐き出してくれます。
• Lightbox 2 WordPressでLightboxを使えるようにしてくれます。

まだ他にも、データベースのバックアップを取ってくれたり、Wordpressが自動で吐き出す

タグを吐き出さないようにしてくれたりするプラグインも使っています。

本当に便利なWordpressです。

bing、google、SEO、ｗｏｒｄｐｒｅｓｓ、yahoo

1年ほど前からSEOが得意なウェブサイト制作の仕事をしています。 ウェブサイトの作り方、SEOの手法は京都のSEOコンサルタント松尾さんに教えていただいたと思っています。 もちろん、松尾さんを知るまでは自分なりにホームページビルダーでサイトを作っていましたよ＾＾； おかげで9年前からやっているレストランバーの集客は良くなっていますし、アフィリエイトの目的で作った最初のサイトは月間12000件のページビューがあります。 今日感じるものがあって地元のデザイン家WAKTALさんと2時間ほどパートナーの西原君と一緒に話をしました。 話の内容は「感性」「瞑想」など、 まぁ、ぶっ飛んだ話だったかもしれません そこで、私が感じたものは SEO、ウェブマーケティングなどは手法の一つだってこと、関わる人たち、一緒に仕事をさせていただく人たちを豊かにさせていただくお手伝いをするのが自分の仕事なのではないかと気付きました。 ウェブやインターネットだけでなくマーケティングを駆使してこだわりのある人、真面目に事業に取り組んでいる人と一緒に仕事をして求めている人と繋ぐ仕事ができればいいなって。。。 幸せな、豊かな人には魁文堂がからんでいる、そんな風になればいいと思ってます。

SEO、インターネット、ウェブマーケティング、マーケティング

こちらのサイトでも書かれているように日本でもGoogleがシェアを拡大しています。 当然と言えば当然なのですがGoogleの世界的な独占状態になるのにも一抹の不安を感じます。 しかし、SERP（検索エンジンの検索結果のページ：Search Engine Result Pege）を見れば明らかにGoogleのほうが目当てにしている検索結果が表示されています。 私の場合は何かを探すために検索エンジンを使う時はほぼ１００％Googleです。 クライアントの被リンクやYahooの検索結果を確かめる以外Yahooは使うことはありません。 ただ、SEOのブログなどで語られている内容は8割近くがGoogleについてです、アメリカから輸入したテクニックだからしょうがないでしょう。 もし、このままYahooがシェアを減らしてGoogleが増え続けるとYahoo自体の存在が危なくなってしまいますね、いつも35日?40日ごとにインデックスやアルゴリズムを変更して、その検索結果に振り回されているので少しは楽になるかな＾＾ Google分割などはありえないだろうし。。。 最近、仮に作ったばっかりのサイトです「西条市の二次会にはスナック【シークレット】」、忘年会のシーズンです使ってあげてくださいね＾＾

google、SEO、yahoo