メエちゃんねる | パパの秘密基地

初めまして、ヒツジと申します | 育児を通じて勉強したことや感じたことを記事にしていきたいと思います。Twitterやブログを通じて子育て世代のママパパと交流できれば嬉しいです。

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

Webサイト制作で役に立つWebページ・Webアプリ | SSAITSのブログ

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

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

 

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

 

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

 

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

f:id:creatorsLAB:20200817220614p:plain


 

HTMLコードのコピー

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

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

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

 HTMLコードの貼り付け

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

 

    f:id:creatorsLAB:20200817184556p:plain  f:id:creatorsLAB:20200817212542p:plain

 

HTMLコードの編集

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

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

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

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

 カテゴリ1:表示したいラベル名称

 

 

CSSコードのコピー

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

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

  

CSSコードの貼り付け

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

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

    f:id:creatorsLAB:20200817184556p:plain   f:id:creatorsLAB:20200817220309p:plain

 


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

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

 

参考サイト


www.yukihy.com