2022年12月12日
ナビゲーションメニューも自作できる2
ナビゲーションメニューを設置するためのCSSとアイコン準備はお済でしょうか?
まだの方はさっさとここを見て準備しちゃいましょう。
準備万端ですか?
それじゃHTML触りますよ!
1.テンプレートのカスタマイズ画面から、

変更といってもそれぞれ<div id="content">という記述があるので、その上にこの記述を追加するだけです。
このままコピーして使ってしまってOKです。
くれぐれも <div id="content"> の後には貼らないでくださいね。
トップページ: 、個別記事: 、アーカイブ:それぞれプレビューして確認してみてください。
(プレビューボタンはここのことだよ)
これで "工事中" というメニューが5個横並びで出来ているはずです。
まだ安心しないでください。
ここまでの状態では工事中というメニューが表示されただけですよー
メニューに命を吹き込みます。
"XXXXXXXXXX" の部分にはそれぞれ飛ばしたい先のURLを貼り付けてください。
工事中 の部分はそれぞれ好きなメニュータイトルに変更してください。
お品書き、料金、趣味の部屋、何でも良いデス。
参考までにしーますブログを見ていただき、実際にメニューをクリックしていただければわかるかと思います。
それぞれ、対応したブログ記事にリンクが飛ぶようになっていますよね。
このリンク先のURLは自分のブログ以外でもなんでもOKです。
これでまたトップページ: 、個別記事: 、アーカイブ: をプレビューして、メニュークリックしてみてください。
命、吹き込まれていましたか?
実際に動くと面白いですよね?面白いのは自分だけかな?
自分がよく使うホームページでも良いし、お好みでメニューにリンクを貼って楽しんでみてください!

まだの方はさっさとここを見て準備しちゃいましょう。
準備万端ですか?
それじゃHTML触りますよ!
1.テンプレートのカスタマイズ画面から、
トップページ: 、個別記事: 、アーカイブ:、このそれぞれに変更を加えます。
変更といってもそれぞれ<div id="content">という記述があるので、その上にこの記述を追加するだけです。
このままコピーして使ってしまってOKです。
くれぐれも <div id="content"> の後には貼らないでくださいね。
<DIV id="header_menu">
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
</DIV>
<hr class="style10">
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
<span class="d_Link03"><A href="XXXXXXXXXX">工事中</A></span>
</DIV>
<hr class="style10">
トップページ: 、個別記事: 、アーカイブ:それぞれプレビューして確認してみてください。
(プレビューボタンはここのことだよ)
これで "工事中" というメニューが5個横並びで出来ているはずです。
2.1.で貼り付けた部分にタイトルとリンクを埋め込みます
まだ安心しないでください。
ここまでの状態では工事中というメニューが表示されただけですよー
メニューに命を吹き込みます。
"XXXXXXXXXX" の部分にはそれぞれ飛ばしたい先のURLを貼り付けてください。
工事中 の部分はそれぞれ好きなメニュータイトルに変更してください。
お品書き、料金、趣味の部屋、何でも良いデス。
参考までにしーますブログを見ていただき、実際にメニューをクリックしていただければわかるかと思います。
それぞれ、対応したブログ記事にリンクが飛ぶようになっていますよね。
このリンク先のURLは自分のブログ以外でもなんでもOKです。
これでまたトップページ: 、個別記事: 、アーカイブ: をプレビューして、メニュークリックしてみてください。
命、吹き込まれていましたか?
実際に動くと面白いですよね?面白いのは自分だけかな?
自分がよく使うホームページでも良いし、お好みでメニューにリンクを貼って楽しんでみてください!

Posted by イロイロ at 15:11│Comments(0)
│ナビゲーションメニューを自作する
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。