初心者でもわかるカスタム編。←いつからこんな名称に（笑

今回は、横型メニューの追加の仕方です。

どんな感じかと言うと、当ブログのカレンダーの上にあるBOX型のメニューです♪



本日のブログランキングの注目は！
こちら↓から確認です♪

【続きを閉じる】

まず、挿入する場所ですが、どこにでも挿入は可能です。（ＨＴＭＬの編集だけで可能です）

私のテンプレート同様にトップ画像の下に挿入する場合ですが。

横型のカレンダーを挿入したように、

<!-- ▼ヘッダ --> この中にも色々と書かれています。 <!-- ▲ヘッダ END -->

このような場所を探してください。（ＨＴＭＬ編集）

この下に次のタグを挿入します（コピペOK）

<!-- ▼ヘッダ --> この中にも色々と書かれています。 <!-- ▲ヘッダ END --> <!--横メニュー部分--> <STYLE TYPE="text/css"> <!-- #menu2 { width: 790px; /* メニュー全体の横幅 */ } #menu2 DIV { float: left; /* 回り込み */ width: 20%; /* ボタンの横幅 */ } #menu2 A { display: block; /* ブロック要素 */ background-color: #F7F7F7; /* 背景色 */ border-width: 2px; /* 枠線の太さ */ border-style: solid; /* 枠線のスタイル */ border-color: #006600 #001100 #001100 #006600; /* 枠線の色（上・右・下・左） */ padding: 3px; /* リンク部分の余白 */ text-align: center; /* リンク文字の位置 */ text-decoration: none; /* リンク文字の下線 */ font-size: 10pt; /* リンク文字のサイズ */ font-weight: bold; /* リンク文字の太さ */ } #menu2 A:hover { color: #FF0000; /* ポイント時の文字色 */ } --> </STYLE> <DIV ID="menu2"> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> </DIV> <!--/横メニュー部分-->

これだけで終了です♪これまた簡単でしょう。

今回は色指定などがどこに影響するか、横に記入してあるので分かりやすいかな？

<!--横メニュー部分-->　 〜　<!--/横メニュー部分-->をコピペして挿入するといいので簡単ですね♪

※もちろん、テンプレートの種類によっては・・・簡単に挿入が出来ない場合があるのでご了承ください♪

---

まず、挿入する場所ですが、どこにでも挿入は可能です。（ＨＴＭＬの編集だけで可能です）

私のテンプレート同様にトップ画像の下に挿入する場合ですが。

横型のカレンダーを挿入したように、

<!-- ▼ヘッダ --> この中にも色々と書かれています。 <!-- ▲ヘッダ END -->

このような場所を探してください。（ＨＴＭＬ編集）

この下に次のタグを挿入します（コピペOK）

<!-- ▼ヘッダ --> この中にも色々と書かれています。 <!-- ▲ヘッダ END --> <!--横メニュー部分--> <STYLE TYPE="text/css"> <!-- #menu2 { width: 790px; /* メニュー全体の横幅 */ } #menu2 DIV { float: left; /* 回り込み */ width: 20%; /* ボタンの横幅 */ } #menu2 A { display: block; /* ブロック要素 */ background-color: #F7F7F7; /* 背景色 */ border-width: 2px; /* 枠線の太さ */ border-style: solid; /* 枠線のスタイル */ border-color: #006600 #001100 #001100 #006600; /* 枠線の色（上・右・下・左） */ padding: 3px; /* リンク部分の余白 */ text-align: center; /* リンク文字の位置 */ text-decoration: none; /* リンク文字の下線 */ font-size: 10pt; /* リンク文字のサイズ */ font-weight: bold; /* リンク文字の太さ */ } #menu2 A:hover { color: #FF0000; /* ポイント時の文字色 */ } --> </STYLE> <DIV ID="menu2"> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> <DIV><A HREF="URLを入力">文字を入れる</A></DIV> </DIV> <!--/横メニュー部分-->

これだけで終了です♪これまた簡単でしょう。

今回は色指定などがどこに影響するか、横に記入してあるので分かりやすいかな？

<!--横メニュー部分-->　 〜　<!--/横メニュー部分-->をコピペして挿入するといいので簡単ですね♪

※もちろん、テンプレートの種類によっては・・・簡単に挿入が出来ない場合があるのでご了承ください♪

[ 2008/01/19 14:52 ] 【カスタム】 | トラックバック(-) | CM(0)