Teaprog.com

とあるエンジニアの日々の記録。

グローバルメニューのカスタマイズへの第一歩

f:id:tk0137:20210801235207j:plain

イメージ図

目次

はじめに

 

今回はサイト上で新たにグローバルメニューを作ろうと思いました。

 

右も左も分からない状態から、自分なりに調べてなんとか作成することができました。

 

 参考サイト

 

・【はてなブログカスタマイズ】ドロップダウンメニューを付けてみた。 - スキナモノート

 

今回は書籍ではなく、サイトを参考にさせていただきました。

 

グローバルメニューの設置に関するサイト様は数多くありました。

 

中でも上で紹介させていただいたものが一番分かりやすいと思いましたので、このサイト様の内容を中心にグローバルサイト作成に取り組んでみました。

 

手順

 

今回は中核となるHTMLコードとCSSコードがあります。

 

今回はその2つのコードは参考にさせていただいたサイト様へお預けさせていただきます。

 

HTMLコードとCSSコードはそれぞれ貼り付ける場所がありますので、確認しておきます。

 

 HTMLコードの記述場所

 

HTMLコードを記述する場所を以下に手順を追って示します。

 

まず、はてなブログ編集画面に入り、最初に見える左にあるメニューより「デザイン」をクリックします。

 

f:id:tk0137:20210801211617j:plain

 

すると以下のような画面に移ります。

 

左上のアイコンよりレンチのマークの「カスタマイズ」をクリックします。

 

するとその下にさらにメニューが表示されます。

 

今回はサイトの上部にグローバルメニューを作成したいので、現れたメニューの中から「ヘッダ」をクリックします。

 

f:id:tk0137:20210801211628j:plain

 

ここに参考にさせていただいたサイトよりHTMLを貼り付けます。

 

この状態で左上にある「変更を保存する」をクリックしてコードを保存しておきます。

 

f:id:tk0137:20210801211637j:plain

 表示結果

 

HTMLのみを貼り付けた状態でのプレビューを以下に示します。

 

サイトの上部のヘッダ部分にリストが表示されました。

 

ここにさらにCSSを記述することで見た目が格段に良くなります。

 

CSSについては次の項目で示させていただきます。

 

f:id:tk0137:20210801211646j:plain

 CSSコードの記述場所

 

CSSコードの記述する場所についてです。

 

先ほどのHTMLコードを貼り付ける場所にたどり着く過程である、「カスタマイズ」をクリックするところまでは同じです。

 

CSSコードは「カスタマイズ」のメニューの一番下部にある「{}デザインCSS」をクリックします。

 

f:id:tk0137:20210801211657j:plain

 

「{}デザインCSS」をクリックすると、コードを入力するフォームが現れます。

 

ここに参考にさせていただいたサイトに示されているCSSコードを貼り付けます。

 

CSSコードを貼り付けたら左上にある青色の「変更を保存する」をクリックして編集を保存しておきます。

 

f:id:tk0137:20210801211707j:plain

 表示結果

 

以下にHTMLコードに加えて、CSSコードを記述した状態でのプレビュー結果を示します。

 

HTMLコードのみでは縦にリスト表示されていたものが、横に表示されるようになりました。

 

さらにそれぞれの項目にカーソルを合わせると、さらにその下にメニューが表示されるようになりました。

おまけ

 自身での編集後の表示結果

 

最後に、私が実際にHTMLコードとCSSコードを編集してみた結果を以下に示します。

 

項目を6つ横にならべ、関連するいくつかのキーワードがあれば、その下に項目を表示されるようにしました。

 編集した箇所

 

以下に私が実際にサイトで使用できる最低限度まで編集したコードを示します。

 

CSSコードについては、各サイト向けに編集する際に重要な変更すべき項目があるのですが、変更した箇所は1箇所だけです。

 

なので、CSSコードは変更した部分周辺を抜き出して以下に示させていただきます。

HTMLコード

<!--HTML-->
<nav>
<ul id="globalmenu">
<li><a href="ページのURL">TOP</a>
</li>
<li><a href="#">ブログ作成記録</a>
<ul>
<li><a href="ページのURL">ブログ作成</a></li>
<li><a href="ページのURL">HTML</a></li>
<li><a href="ページのURL">CSS</a></li>
<li><a href="ページのURL">jQuery</a></li>
</ul>
</li>
<li><a href="#">プログラミング</a>
<ul>
<li><a href="ページのURL">アプリ作成</a></li>
<li><a href="ページのURL">Ruby</a></li>
<li><a href="ページのURL">Python</a></li>
<li><a href="ページのURL">VBA</a></li>
</ul>
</li>
<li><a href="#">PC関連</a>
<ul>
<li><a href="ページのURL">Windows</a></li>
<li><a href="ページのURL">Linux</a></li>
</ul>
</li>
<li><a href="ページのURL">その他</a>
</li>
<li><a href="#">About</a>
<ul>
<li><a href="ページのURL">Profile</a></li>
<li><a href="ページのURL">Contact</a></li>
<li><a href="ページのURL">Privacy Policy</a></li>
</ul>
</ul>
</nav>

CSSコード

/*CSS一部抜粋*/
#globalmenu li{
position: relative;
float: left;
text-align: center;
width: 16%; /*編集した箇所*/
margin: 0;
padding: 0;
}

 

CSSは15行め辺りにある

 

width

 

の数値を変更しただけです。

 

この値は1つの項目に対する横幅を100%のうちどれだけ割り当てるかということを指定します。

 

上に示させていただいた私のサイトを例に取ります。

 

「TOP」「ブログ作成記録」「プログラミング」「PC関連」「その他」「About」という6つの項目を作成しましたので、

 

100% ÷ 6 ≒ 16%

 

という計算になります。

 

なので項目が4つなら25%、5つなら20%となります。

 

↑目次に戻る

 

最後に

 

今回は、サイトにグローバルメニューを設置し、サイトにどんな記事が存在するのかを見やすくしました。

 

Webデザインに関しては初心者でありますので、他のサイト様からコードを拝借する形にはなりましたが、これを機にオリジナル性の高いデザインを作成できるようにし、デザイン案を紹介できるようになりたいと思います。

 

最近は記事の構成が固まりつつあるので、サイトのデザインに力を入れています。

 

次の目標は「見出しのデザインの一新」です。

 

例えば「目次」と表示されている部分のデザインです。

 

最近、記事の更新頻度が少し落ちてはいますが、かなり大胆に変えることも検討しておりますので、楽しみにしていただけましたらと存じます。

 

最後までありがとうございました。