しーまブログ コンピュータ・IT奄美大島 ブログがホームページに!しーま新機能のお知らせ! さばくる~イベント情報受付中!~
はじめに  もくじ  トップ画像を変更する方法  ファビコンを設定する方法  画像一覧

2022年12月12日

ナビゲーションメニューも自作できる2

ナビゲーションメニューを設置するためのCSSとアイコン準備はお済でしょうか?
まだの方はさっさとここを見て準備しちゃいましょう。

準備万端ですか?
それじゃ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">


トップページ: 、個別記事: 、アーカイブ:それぞれプレビューして確認してみてください。
(プレビューボタンはここのことだよ)
これで "工事中" というメニューが5個横並びで出来ているはずです。



2.1.で貼り付けた部分にタイトルとリンクを埋め込みます


まだ安心しないでください。
ここまでの状態では工事中というメニューが表示されただけですよー

メニューに命を吹き込みます。
 "XXXXXXXXXX" の部分にはそれぞれ飛ばしたい先のURLを貼り付けてください。
 工事中 の部分はそれぞれ好きなメニュータイトルに変更してください。
  お品書き、料金、趣味の部屋、何でも良いデス。

参考までにしーますブログを見ていただき、実際にメニューをクリックしていただければわかるかと思います。
それぞれ、対応したブログ記事にリンクが飛ぶようになっていますよね。
このリンク先のURLは自分のブログ以外でもなんでもOKです。


これでまたトップページ: 、個別記事: 、アーカイブ: をプレビューして、メニュークリックしてみてください。
命、吹き込まれていましたか?

実際に動くと面白いですよね?面白いのは自分だけかな?
自分がよく使うホームページでも良いし、お好みでメニューにリンクを貼って楽しんでみてください!



ナビゲーションメニューも自作できる2



同じカテゴリー(ナビゲーションメニューを自作する)の記事
 ナビゲーションメニューも自作できる1 (2022-12-11 10:55)

※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

削除
ナビゲーションメニューも自作できる2
    コメント(0)