Top Page > スポンサー広告 > ヘッダー下へ メニューボタン設置ブログのカスタマイズについて > ヘッダー下へ メニューボタン設置

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ヘッダー下へ メニューボタン設置

このエントリーをはてなブックマークに追加
メニューバー

ブログのカスタマイズですが、

このブログのヘッダーへメニューボタンを設置してみました。

自己紹介をしているのですが、一番最初に書いている記事のため

どうしてもブログだと後ろへ行ってしまいます。

そのほかにも、カテゴリーをヘッダー下のメニューに持ってきたりすると使いやすくなるのでは?

と思ったので、設置を考えました。

今回は自己紹介ページへ行けるようにしてみました。
このテンプレート( b a s i c _ w h i t e )のみでの編集だとは思うのですが、ご参考までに☆

まだまだ勉強不足のため、ほかのサイトさんからCSSコードやHTMLコードをお借りしてきました。
うちの横は遊歩道さんです。

こちらのページでメニューバーの付け方を学ばせていただきましたので、参考にどうぞ☆
場所はヘッダーの下付近なので、

HTML編集で ( b o d y )~( / b o d y )の上の方に( ! / - - h e a d e r - - )

というタグがあると思うのですが、その下へ持ってきました。

そうするとヘッダーのすぐ下にメニューボタンが追加されます。

この b a s i c _ w h i t e の場合はもともと設置しているので、これに追加するだけです。

最初は
 ( p c l a s s = " a r c h i v e s " ) ( a h r e f = " ( % u r l ) a r c h i v e s . h t m l " ) 記事一覧 ( / a ) ( / p )

このHTMLコードを

( u l i d = " m e n u " )
( l i ) ( a h r e f = " . / " ) トップページ ( / a ) ( / l i )
( l i ) ( a h r e f = " a r c h i v e s . h t m l " ) 記事一覧 ( / a ) ( / l i )

と変更しております。

その下に
( l i ) ( a h r e f = "クリック先のU R L" )自己紹介 ( / a ) ( / l i )( / u l )

を付け加えます。

そのほかにCSSも編集しておりますが、これは勉強中ですので先ほどご紹介させていただいた

ページからお借りしたものをコピーし、一番下に張り付けました。


( p c l a s s ~)~( / p )を ( l i )~ ( / l i )変更しております。

おそらく、HTMLはページの骨組み、CSSはデザインということから、

HTMLの骨組みに、CSSがデザインの指定をしているのではないかと思います。

つまりHTMLで名前を(A)付けたところにCSSでデザインする場所を指定して(A)という場所にリンクさせて、

HTMLの(A)という箇所にはCSSでこういうデザインをしてくださいって伝えているのだと思います。
H T M L ( A ) ⇔ C S S ( A )

まだまだ勉強不足のため、もう少し勉強してからわかったことを追記していきます。

今回は、ヘッダーにメニューバーを付けたのでどういう風にしたかのご紹介でした。

もう少しCSSの勉強もして、どういう仕組みなのかを後日ですがこの記事に追記したいと思います。

最後まで読んでいただきありがとうございました。

今回はお役に立てるような情報かどうかは定かではないですが、

次回からはこういう情報も精度を上げて、お伝えしたいと思います。

それではまた(*^。^*)




人気ブログランキングへ
にほんブログ村 美容ブログ 男磨きへ
にほんブログ村
関連記事
スポンサーサイト

コメント

コメントの投稿

非公開コメント

Top Page > スポンサー広告 > ヘッダー下へ メニューボタン設置ブログのカスタマイズについて > ヘッダー下へ メニューボタン設置

検索フォーム

ブロとも申請フォーム

月別アーカイブ

プロフィール

清潔感,身だしなみ

Author:gottz0703
ご訪問していただきありがとうございます。
夢をかなえたい元サラリーマンのGottzと申します。
ここでは、これまでに自分がコンプレックスを持っていたこと、
今もコンプレックスを持っていること(薄毛)をはじめ、
流行っているダイエット方法や商品の紹介をしていきます。
色々な悩みを抱えている人の励みになればと思いますので、
どうかよろしくお願いいたします。

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