TOP > スポンサー広告 > title - Fc2ブログでグローバルメニューを表示させる HTML初心者講座3TOP > HTML講座 > title - Fc2ブログでグローバルメニューを表示させる HTML初心者講座3

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

Fc2ブログでグローバルメニューを表示させる HTML初心者講座3

HTML初心者講座と書いておきながら、今日はちょっと難しいかもしれません。

質問をいただいたので、記事にしてみようと思います。

だら奥のカテゴリー一覧というのは、サイトマップでからしか見ることができません。
以前は、カテゴリー一覧があったのですが、すべてサイドバーに記載させると、
1P当たりの発リンクが異常に多くなるんです。

また、「これぞ!」とイチオシ部分もぼやけちゃうんで、いっそのこと、本当に読んでもらいたい記事を
サイドバーに掲載して、カテゴリーとして見てほしいものはグローバルメニューにまとめてしまえ!
と思ったわけです。

私のトップのグローバルメニュー↓これですね。
グローバルメニュー

一応、タグを記載します。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
</ul>
<!--▲ メニューバー ▲-->


そして、スタイルシートに下記のタグを追加します。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */


このタグを、ヘッダー直下とか、ブログタイトル直下に記載すればOKです。
ブログタイトル直下、ヘッダー直下はテンプレによって箇所が変わるため
「ココデスヨ」というレクチャーはできませんが、質問コメントをいただければお答できると思います。

えー、さて。追記です。

FC2ブログはファイルアップロードでHTMLファイルが利用できる


上記のグローバルメニューの中から
「SEOの秘訣」と、「ブログで副収入」をクリックしていただけるとわかると思うのですが
ブログと違う表示でページが表示されます。
これは、別に他のレンタルサーバーで借りて作成したのではなく
ブログのファイルのアップロードを利用して、HTMLファイルをアップロードするとできちゃうものなんです。

SEOの秘訣もブログライターのまとめも読んでもらいたい部分はたくさんあるんですが
やっぱりきちんとまとめてみたほうがユーザビリティにも優れるんじゃないか、
と思って作成しました。

このHTMLファイル。URLが
http://blog-imgs-30-origin.fc2.com/g/e/k/gekiyasuotoku/seotop.html
とブログの画像ファイルURLになるので、SEO的にどうなのかしら
と思っていたのですが、安心ござれ!
きちんと検索エンジンで拾ってもらえるんですよ。

さらに、このHTMLファイル、ちゃんとした普通のサイトを作れます。
スタイルシートもアップできますし、HTMLの中にブログとは別に
メタタグ指定もできるので、やってみたい!という方は、コメントくださいね。

こういうブログのまとめ方もありますよ、という程度ですが、
だら奥を開設して、1年でページランクも3になり、ブログライター比較というカテゴリーページもページランクが1ですが、つくようになったのは、こういうチマチマっとした作業も影響しているのかな、
という気がしています。

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /
Comments

さすらい@とよの

なるほど!

気になってたんですよね。
やり方わからなくって^^;

ありがとございました!

再度アドセンス単価ガタガタのとよのよりぃ(:.;゚;Д;゚;.:)

2010/08/26 Thu 02:07 | URL

miffy.burian@http://miffyburian.blog.fc2.com/ よろしければ・・・

はじめまして、こんばんは。
グローバルメニューの挿入について
検索していましたところ
こちらのサイトに辿り着きました。
すごくわかりやすいブログですね。
私も早くページランク上げたいです(笑)

さて、現在私は grey_3column という
テンプレを使用していますが
上記の『タイトル直下』がどの部分かがわかりません。
もしよろしければ教えていただけないでしょうか。

2011/02/21 Mon 23:22 | URL

miffy.burian@http://miffyburian.blog.fc2.com/ 解決しました!

早速の回答ありがとうございます。
無事グローバルメニュー導入できました。
後はボタンの高さや幅、リンク等をいじってみます。

急に失礼なお願いをしてしまいましたが
快く対応してくださり
本当にありがとうがざいました。

2011/02/22 Tue 22:00 | URL

承認待ちコメント

このコメントは管理者の承認待ちです

2012/04/17 Tue 01:05 | URL

Add a comment


管理者にだけ表示を許可する

 | BLOG TOP | 

私も利用中!

ブックマーク

Yahoo!ブックマークに登録

検索フォーム

執筆しました!

GoogleAdSense グーグルアドセンスで<本気で稼ぐ>コレだけ!技 (得するコレだけ!技)

新品価格
¥1,974から
(2011/2/10 22:55時点)

私が執筆させていただきました!

ブログ情報


最新コメント

リンク

特集記事

最新記事

必見記事

アフィリエイト初心者講座

お小遣いサイトの作り方

お役立ちツール

つぃぃと

ケアプロスト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。