ブログ初心者向け|はてなブログPro グローバルメニューの設定
ブログ記事を数件書いてみて(なんとなく記事が見辛い)と思うことありませんか?
せっかく書いた記事を色々な人に読んでもらえるように、少しでも見た目や操作性を良くしたいですよね?
今回は、はてなブログやWordPressのお洒落ブロガーさんのようなTOPページを目指す為にブログページのカスタマイズについて紹介します。とは言っても、一気に全ての設定をするのは大変なので、今回は操作性が劇的に改善する<グローバルメニュー>の設定方法について紹介します。
ちなみに、グローバルメニューとはこれのことです。
HTMLコードのコピー
当ブログのグローバルメニューのソースコードは以下になります。
Yukihy Life様のブログで紹介されているコードを編集して使用しています。
まずは以下のコードを全て選択してコピーします。
HTMLコードの貼り付け
- アイコンをクリックしてプルダウンメニューを展開
- プルダウンメニューからデザインタブを選択
- デザインウィンドウからレンチマークを選択
- ヘッダを選択
- タイトル下にコピーしたコードを貼り付け
HTMLコードの編集
<li><a href='url'>カテゴリ1</a></li>
コードの4行目に記載されている内容を以下に変更します。
カテゴリを追加したい場合はコピペで増やせます。
url:リンク先のURLを貼り付け
カテゴリ1:表示したいラベル名称
CSSコードのコピー
CSSコードもHTMLコード同様にYukihy Life様のブログで紹介されているコードになります。
こちらはそのまま使わせてもらっています。
CSSコードの貼り付け
1~3まではHTMLコードの貼り付けと同じ手順です。
- アイコンをクリックしてプルダウンメニューを展開
- プルダウンメニューからデザインタブを選択
- デザインウィンドウからレンチマークを選択
- デザインCSSを選択
- タイトル下にコピーしたコードを貼り付け
以上となります、お疲れ様でした。
サンプルコードを公開してくれているYukihy Life様に感謝です。
参考サイト