のたりのたりと

毎日を気楽にのんびり生きたい主婦が綴る育児のこと、おすすめのもの、子連れお出かけ情報

はてなブログのカスタマイズ、グローバルナビゲーションを作ってみた

こんにちは。カラナシです。今日はブログのカスタマイズの話です。子育ての話は一切出てきませんのであしからず。それと有料プランである「はてなブログPro」に入っていることが前提のカスタマイズになります。

 

プライバシーポリシーと運営者情報を作るにあたりブログのデザインをカスタマイズしたい

こんなへっぽこブログで言うのもお恥ずかしいのですが、以前からgoogleアドセンスを導入したいなーと思っていました。調べてみると、それにはプライバシーポリシーと運営者情報を置く必要があるとか。

それなら上部に「プライバシーポリシー」「このブログについて(運営者情報)」「ホーム」等のリンクメニューが並んでいるもの(グローバルナビゲーション)を作りたいと思いました。でも何だか難しそう……。簡単な見出しのカスタマイズくらいはしたことあるけど、コードを見ても何がなんだかさっぱりだし。

けれど、詳しい解説付きでカスタマイズ用のコードを載せてくださっているサイトがあったのでなんとかなりました。ありがたいです。

他にも少々いじったので、参考になるかは分かりませんが、備忘録も兼ねてカスタマイズでやったことと、参考にしたサイトをまとめておきます。

HTMLやらCSSやらの知識はほぼ0の人間がやっているので、詳しい方には何の参考にもならないと思うし、おかしなことをしているかもしれませんがご容赦下さい。

 

カスタマイズでやったことまとめ

 

レスポンシブデザインのグローバルナビゲーションを作る

理想のグロナビは上一列にメニューが数個並んでいて、記事カテゴリーだけドロップダウンになっているもの。けれど、スマホだとトグルメニュー(クリックするとメニューが表示されるもの)になるというものばかり。できればスマホでもメニューが常時表示されて、レスポンシブデザインのものがいいなぁ……。

すると、はてなブログのデザインテーマ「Minimal Green」のデモブログで理想のカスタマイズを見つけました。

blog.minimal-green.com

特徴
・レスポンシブ対応 特定のclassを付与しデスクトップのみ、タブレットのみなど表示を限定
・PC・タブレット:表示する項目5個→スマートフォン:項目4個
・スマホでナビゲーションのコンテンツが隠れない

見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり) - Hatena Blog Theme Custom

右のメニュー1つだけドロップダウンになっており、記事カテゴリーを表示させるのにぴったりです。こちらのコードを書き込むと無事グロナビが表示されました。

オリジナルティーを出すため文字の色と背景色を変えてみました。

color: #------;

background: #------;

この部分を好きなカラーコードに書き換えました。

 

配色を決める際に参考にしたサイトはこちら。

www.colordic.org

たくさんの色を見ているだけでも楽しいです。

 

テーマを変更して、記事中の見出しをカスタマイズする

ついでに「Minimal Green」のデザインが可愛かったのでテーマもこちらに変更。デモブログには可愛いいカスタマイズもたくさん載っています。

Minimal Green - テーマ ストア

ダッシュボード>デザイン>スマートフォン>レスポンシブデザイン

にチェックを入れておきます。

記事中の見出しのデザインを変えることに。ところがCSSを書き込んでも「Minimal Green」デフォルトのデザインと重複して表示されてしまいます。

どうしたものかと悩んでいると「Minimal Green」デモサイトに解決策が。

テーマのCSSと被ってうまく上書きできないときは、リセット用CSSを先に記述し、その後から各見出しのデザインのCSSを追記してください。

ガーリーなデザインの見出しのCSS はてなブログへコピペで使えます。 - Hatena Blog Theme Custom

 こちらに書かれていたリセット用CSSを書き込むと、デフォルトのデザインが消えて無事カスタマイズできました。

 

グローバルナビゲーションにアイコンフォントを表示させる

私が使用したグロナビでは右端のメニューに3本線のアイコンが表示されるようになっていました。他のメニューにもアイコンを表示させたいと思い、はてなブログ純正のアイコンフォントを使用することに。

こちらに詳しい使い方が載っていました。有難いです。

shirokai.hatenablog.com

  

サイドバーの見出しを変更

サイドバーの見出しも変更。リセット用CSSの「.entry-content h3」の部分を「.hatena-module-title」に書き換えてデザインCSSに書き込むとうまくいきました。

 

プライバシーポリシーとこのブログについて(運営者情報)を作る

プライバシーポリシーとこのブログについて(運営者情報)は固定ページに作りました。

固定ページの作り方についてはこちら。

help.hatenablog.com

固定ページのURLをグロナビのHTMLの該当箇所に書き込むとリンクが貼れます。

 

プライバシーポリシーもできたことだし目指せアドセンス取得!

カスタマイズはこれでひと段落。デザインっていじり始めると楽しくて延々とやってしまいそうですね。自分好みのデザインだとブログに愛着も湧くしね。そのうちヘッダーに画像も置きたいなぁ。

無事プライバシーポリシーも出来たことだしgoogle アドセンス合格を目指したいと思います。