ブログ初心者向け｜はてなブログPro グローバルメニューの設定

ブログ記事を数件書いてみて（なんとなく記事が見辛い）と思うことありませんか？

せっかく書いた記事を色々な人に読んでもらえるように、少しでも見た目や操作性を良くしたいですよね？

今回は、はてなブログやWordPressのお洒落ブロガーさんのようなTOPページを目指す為にブログページのカスタマイズについて紹介します。とは言っても、一気に全ての設定をするのは大変なので、今回は操作性が劇的に改善する＜グローバルメニュー＞の設定方法について紹介します。

こんなブログ初心者さんにオススメ！！

　・ブログ開設したけど何から始めたらいいか分からない。
　・プログラミングはできないけどお洒落な見た目にしたい。
　・TOPページの操作性を良くしてアクセス数を上げたい。

ちなみに、グローバルメニューとはこれのことです。

HTMLコードのコピー

当ブログのグローバルメニューのソースコードは以下になります。

Yukihy Life様のブログで紹介されているコードを編集して使用しています。

まずは以下のコードを全て選択してコピーします。

 HTMLコードの貼り付け

1. アイコンをクリックしてプルダウンメニューを展開
2. プルダウンメニューからデザインタブを選択
3. デザインウィンドウからレンチマークを選択
4. ヘッダを選択
5. タイトル下にコピーしたコードを貼り付け

　　　　　　

HTMLコードの編集

<li><a href='url'>カテゴリ１</a></li>

コードの４行目に記載されている内容を以下に変更します。

カテゴリを追加したい場合はコピペで増やせます。

　url：リンク先のURLを貼り付け

　カテゴリ１：表示したいラベル名称

CSSコードのコピー

CSSコードもHTMLコード同様にYukihy Life様のブログで紹介されているコードになります。

こちらはそのまま使わせてもらっています。

CSSコードの貼り付け

１~３まではHTMLコードの貼り付けと同じ手順です。

1. アイコンをクリックしてプルダウンメニューを展開
2. プルダウンメニューからデザインタブを選択
3. デザインウィンドウからレンチマークを選択
4. デザインCSSを選択
5. タイトル下にコピーしたコードを貼り付け

　　　　　　　

以上となります、お疲れ様でした。 

サンプルコードを公開してくれているYukihy Life様に感謝です。

参考サイト

www.yukihy.com