薬剤師よっしーのブログ

健康食品・サプリや業界の裏話、最新ニュース、バーベキューレシピ、子育て、雑談などなど。

はてなブログのテーマを「Minimalism」にしてみたよ|カスタマイズ備忘録

今までは「Brooklyn」を使用していたのですが、妻のブログの「Minimalism」が良さげだったのでテーマストアで変更してみました。

モバイル表示のナビゲーションメニューを変えたいと思っていたので試してみたのですが、すごく気に入ってます。

カスタマイズ方法も紹介されているので助かります。

hitsuzi.hatenablog.com


私が追加でカスタマイズした点を紹介します。

記事下シェアボタン上のアドセンス

どうしてもこの場所にモバイル表示でレクタングル、PC表示でダブルレクタングルを入れたかったのですが、Minimalismでもできました。

Brooklynの時と方法が違うのですが、

【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常

で紹介されているコードの間に

Google AdSenseのダブルレクタングルをスマホ表示の時に片方だけ消す方法 - FOXISM

こちらで紹介されているコードを入れました。


なぜかトップページが全文形式だと、トップページと「次のページにすすむ」で移動した場合にアドセンスが表示されません。

一覧形式だと表示されるので一覧形式で様子みてみます。

はてなの一覧形式が好きじゃないのと、トップページはアドセンス無くてもいいかとも思うので、今後は未定です。

ナビゲーションメニュー

「グローバルナビ」というのか正式名称分かりませんが、Minimalismを選んだ一番の理由がこれです。

Brooklynの場合、スクロールして付いてくるのが気に入っていたのですが、スマホ表示が気付き難いかなと・・・

font-weight: boldのコードを消して太字から普通の文字に変えた記憶があります。

アイコンもいつか付けたいと思います。


流行りのモバイル表示で少し流れる設定にしたのですが、ページ読み込み後にスライドするようであまり意味がないかもしれません。

ドロップダウンに出来るのかは分かりません。

カテゴリ用の固定ページを作るのもありな気がしてます。

その他デザインもついでに設定

こどみすさんのブログで見出し等の変更方法を知ったため、デザインCSSにいろいろ追加してみました。
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選


中見出し

 

小見出し

 

【内部リンクとアフィリンクで使う予定】

 

旅行先をチラ見

旅ならるるぶトラベル

 

【ページ下部の関連記事として使う予定】

この「合わせて読みたい」は記事毎に貼り付けるので、タイトル変えたら修正しないといけないんですよね…

ワードプレスだと一括で変更できたりするのでしょうか。ご存知の方いらっしゃいましたら教えてください。

はてなのリンクカードはかさばるので複数記事を紹介する場合に向かないし、
 
自動挿入はブログタイトルも入っているので、文中に使い難いのが不便。

いろいろ使い分けてやってみます。

表示速度

体感としてはブルックリンと変わらない気がしています。

テーマで多少の差があるとしても、それ以前に当ブログ内で改善すべき点が沢山あるので気になりません。

自分的にこのくらいの早さならまあいいかと思っているのですが、遅いなと感じる方がいましたら教えて下さい。

ブログのデザインについて

ブログ感を出したい時と、サイト感を出したいときがあります。

あんまりおしゃれにしすぎるとブログ感が無くなってしまいそうで、タイトル付近はシンプルにしてみました。

大手が使っている色には根拠があるのだろうと思い、

  • 本文の文字色は楽天やアマゾンと同じらしい#333333
  • Check!のボックスはカエレバのアマゾンのオレンジと同じ色
  • ナビゲーションメニューと合わせて読みたいは大見出しのアンダーラインの色

にしてみました。

おすすめのカスタマイズ方法や、当記事の間違い等ございましたらご連絡いただけましたら幸いです。