着せ替えしーます:ナビゲーションメニューを自作する

2022年12月12日

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

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

準備万端ですか？
それじゃHTML触りますよ！

１．テンプレートのカスタマイズ画面から、
トップページ：　、個別記事：　、アーカイブ：、このそれぞれに変更を加えます。

変更といってもそれぞれ<div id="content">という記述があるので、その上にこの記述を追加するだけです。
このままコピーして使ってしまってOKです。
くれぐれも <div id="content"> の後には貼らないでくださいね。

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

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

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

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

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

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

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

Posted by イロイロ at 15:11 │Comments(0) │ナビゲーションメニューを自作する

2022年12月11日

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

我が「着せ替えしーます」ブログにはいつの間にか、シレッとナビゲーションメニューが設置されております。
これですね

これのお陰で一気に、ブログの風味がホームページの風味になりました。

お店のブログの時、来訪者に一律してお知らせしたい情報がありますよね。
（自分がそういうのをまず知りたい。）

例えば
　お店の自己紹介
　スタッフの紹介
　メニュー表　
　問い合わせ先　

すみません、今これしか思いつかなかった・・・

トップのサブタイトルやサイドメニューに入れるには情報量が多い。
でもお知らせしたい内容。
こんな時、このナビゲーションメニューにその内容のリンクを貼っておくと便利です。

作り方をここに保存しておきますので、作ってみたい方はじゃんじゃんコピペしていじってください。

１．テンプレートのカスタマイズ画面から、スタイルシート：　を開いてください

（１）一番下までスクロールして
（２）最後尾の行にカーソルをもっていきます

（３）（２）のカーソルのところに下記#header_menuから border-bottom: 1px dotted #fff;}までを追加します。
↓　コピーして貼り付けてしまってOKです。

#header_menu{
font-size : 14px;
height : 14px;
width : 1040px;
text-align : left;
font-family : Verdana;
line-height : normal;
margin-top : 3px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
}

.d_Link03 {
color : gray;
text-decoration: none;
background-image : url("https://XXXXXXXXXXXXXX/icon_link03.png");
background-repeat : no-repeat;
padding-left : 17px;
margin-left : 14px;
line-height : 16px;
font-size : 12px;
font-weight : bold;}

/*メニューボタンの下の線*/
hr.style10 {
border-top: 1px dotted #8c8b8b;
border-bottom: 1px dotted #fff;
}

この呪文はCSSというもので、サイトの表示の装飾をえらく細かく指定できるものです。
あまり深く考えなくても大丈夫です。
でもすごく興味あるよという人はCSSについて検索するといくらでも出てくるので、調べてみると超面白いですよ。

２．またアイコンを作成します。

もうこの手順は、着せ替えしーます名物となっております。

アイコンの作成方法は、ここで詳しくは割愛しますね。
ネットで検索すると無料でアイコンを配布しているところや、自動生成してくれるところがありますのでそういうのを利用するのもアリかと思います。

自分はPhotoshopを使っていますが、ペイントでも作ることができます。
今回は縦横16px の画像を作成して、ファイル名を　icon_link03.png　にしておきます。
注意）しーまではicoファイルを画像ファイルとして扱っていないようなのでPNGで作成します

作ったものがコレ→　