薬剤師とザリガニの奮闘記

~薬ザリ(yakuzari)の備忘録~

はてなブログのテーマ「Minimalism」のカスタマイズについて

【スポンサーリンク】

minimalismをカスタマイズ
僕には、いつかやろうと思っていたことがあります。

それは、ブログのテーマ変更!!

とうとうそれを実行に移すことが出来ましたので、カスタマイズなどを自分の備忘録も兼ねて書き連ねておこうと思います。

ブログは記事の内容が一番!と言われていますが、ブログ自体のデザインも大事です!!

これからはてなブログのデザインを変更しようかな?Minimalismにしようかな?と考えている方は是非ご覧ください。

なぜMinimalismへテーマ変更??

元々は公式テーマの「Aero」を使用していましたが、レスポンシブデザインではないこと、記事の横幅を拡げたかったけどなかなかできなかったこと、などの理由で新しいテーマを探していました。

1度テーマを変更して、気に入らなかったらまた変更して…と時間を無駄に過ごすことは回避するためにも、まずは新しいテーマに求めることを明確にしておきましょう。

Minimalismなどのテーマを決める上で大事な事

誰しもがブログを立ち上げてテーマを決めることかと思いますが、そこでいくつかポイントがありそうなので紹介します。

レスポンシブデザインを選ぶこと!!

これに尽きます。レスポンシブにしていればデザインの設定はPCのみの設定で可能ですが、レスポンシブ非対応ですとPC、スマホそれぞれのデザインを設定しなければなりません。面倒くさがりの僕からするとこれはいただけませんでした。

デザイン変更は大変…

デザインの変更はいつでも可能です(やる気と時間があれば(笑))。しかし、今までCSSで設定していたことが白紙に戻るため、元のCSSで必要な部分をコピペするだけでも大変です。

人気のテーマを選ぶ

CSS等の知識がない人は、これは大分重要です。ちなみに僕は全く知識がありません。そんな中で最初設定していた「Aero」のカスタマイズにはすごく手間取りました。理由は、

「Aero」のカスタマイズ情報がほとんどなかったから

です。もちろん他のデザインでのカスタマイズを参考にすることも可能ですが、中にはデザインの関係からかうまく設定できないカスタマイズも多々ありました。

自分好みのデザインにする

これは当たり前と言えば当たり前ですね!!自分が好きなテーマであれば、ブログを書く意欲にもつながりそうです。実際にデザインを変更出来て、清々しく書くことが出来ています!

変更先のデザインは「Minimalism」に決定

上で紹介したデザインを決める上で大事なことを踏まえ、今回僕は「Minimalism」に決めました。

hitsuzi.hatenablog.com

はてなブログを使用している方であればほとんどの方が知っているであろうMinimalism!人気度も抜群で、はてなブログのテーマストアで人気No1です。

人気No1ということもあり、カスタマイズ情報も多々出てきます!!これであれば僕でもなんとか使いこなせるのではないかということで「Minimalism」にしました。

「Minimalism」カスタマイズ集

僕が行ったカスタマイズを列挙していきます。参考になるものがあれば、幸いです。

ちなみに

ここから下はデザイン変更について行ったことを羅列しますが、もしデザイン変更・CSSの追加や修正を考えている方がいらっしゃいましたら、必ずCSS等のバックアップを取っておくことをおススメします。デザイン変更中に思わぬ操作でデザインが崩れてしまう可能性もありますので、慎重に行ってください。

ナビゲーションメニュー

まずは「Minimalism」配布サイトに記載の通り、「デザイン」→「ヘッダ」→「タイトル下」に指定されたCSSをコピペします。

その際、URLと記載されているところに自分の該当のURL(HOMEやカテゴリ等)を、デフォルトで「HOME」「ABOUT」「TIPS」等と記載されているところを自分が表示させたいタイトル(カテゴリ名等)に変更が必要です。

その他メニュー毎にデフォルトでアイコンが表示されていますが、変更することができます。変更するには「FontAwesome」というものを使用します。この「FontAwesome」の使用方法は下の記事が大変参考になります。

saruwakakun.com

このページで紹介されている「CDNを使う」という方法で僕は変更しました。

レスポンシブ

まずはこれです!このために変更したと言っても過言ではない「レスポンシブ」!

レスポンシブデザインにするためにㇾ点にチェックを入れる
ㇾ点を入れるだけです

操作は簡単で、上の図のように「ブログの概要」→「デザイン」で表示されるスマホのようなマークを押すと、レスポンシブにするためにチェックを入れるところがあります。ただ、ここにチェックを入れるのみです。これでとりあえず「レスポンシブ」になりました。

文字の大きさ

Minimalismに変更して最初に思ったことは

「字が小さい!!」

なんとかして大きくしたいと思い、下記のサイトを参考にさせて頂きました。

www.karochoa.com

参考までに、このブログは16pxで設定しています。

ヘッダ

ここはMinimalismだからというわけではありませんが、以前からなんとなく作成していた画像を張り付けてみました。

はてなブログでお馴染みのデザイン
お馴染みのデザインの画面です

画像自体にタイトルを入れているため、表示設定は「画像だけ表示」としてみました。

さらにこのままですと、やたらヘッダの部分が広いと感じたため下のページを参考に画像の上下のスペースを取り除きました

blog.minimal-green.com

この時点でなんとなくスマホでブログを確認してみると、こんなことになっていました。

ヘッダが見切れている問題
ザリガニが半分しか写っていない

ヘッダが見切れてる!!

なんだこれは??とのことで調べてみると、下記のサイトが凄く参考になりました。
yuzumochi.com

上のページに記載されている「レスポンシブヘッダー調整」と説明書きのあるCSSをコピペすると

ヘッダを改善
ようやくザリガニの全身が見えるようになりました

と改善!!自分の理想通りになりました!

見出しデザイン

次は本文のカスタマイズです。以前の記事でも書きましたが、僕は自分で敢えてh2から設定しており、便宜的にh4まで使用しています。

そのため、h2・h3・h4それぞれのデザインを設定する必要がありました。ここの作業は、以前も行ったことがあったためスムーズに出来ました。

下記のページより好きなデザインを選び、その好きなデザインのCSSをコピペするのみです!

saruwakakun.com

本文中のマーカー

以前より本文中にマーカーを使用していました。
こんな感じ!

これを設定するためには下記のページを参考にさせていただいていました。

www.crypto-ksw.com


CSSの中に記載されている%や色(#●●●)を適宜変更することで、自分好みのラインを作成することが出来ます。

色のカラーコードについては下記のページをいつも参考にさせていただいています。

www.colordic.org


本文中のボックス

以前より本文中にボックスを使用していました。

お試し

こんな感じ!

これを設定するためには下記のページを参考にさせていただいていました。
saruwakakun.com

ラインと同様、色を適宜変更することで自分好みのものにカスタマイズできます。

記事の上へ戻る、HOMEへ戻るボタン

今このページの右下に↑マークとHOMEマークの2種類が表示されているかと思います。↑マークを押すと記事の一番上に、HOMEマークを押すとブログのトップページに飛ぶようになっています。

この機能は絶対に付けたいと思っており、調べたところこちらのページが大変参考になりました。

www.imuza.com

「はてなコード用」と親切にもはてなブログ用のコードまで公開してくれています。記載の通りの手順で問題なく導入できました。

記事の更新日を記載

デフォルトですとブログの記事を書いた日だけ表示されていますが、情報を新しくしたり、ページを読みやすくするために記事をリライトすることがあるかと思います。そんな時、手作業で更新日を書いてもよいのですが、何せ手間になりますので自動で表示させたいと思い下記のサイトを参考にさせていただきました。

kurokinomizuiwa.hatenablog.com

これでリライトした日付が記載されるようになるので、記事の内容が最新かどうかを一目で確認できるようになりました。

※こちらの方法で設定すると、更新日時の表記がおかしくなることがあります。その際の対処方法は別記事でまとめていますので参考にしてください。

www.yakuzari.work

目次

Minimalismではカスタマイズしなくても目次を表示させることが出来ますが、なんとなく自分用にカスタマイズしてみました。
参考にさせていただいた記事はこちらです↓

www.yukihy.com

カスタマイズの目標としては、

①目次を常に表示させるわけではなく「表示」というボタンを押して初めて目次の一覧が表示されるようにする。

②目次の背景色を変える

です。なんとか思い通りになったので、別ページにまとめてみました。興味がある方は見てみて下さい。

www.yakuzari.work

サイトマップ

サイトマップと言うとGoogle search consoleに送信するサイトマップのこと?

と思う方もいらっしゃるかもしれませんが、ここで言うサイトマップは訪問者様のサイトマップです。

サイトマップ - 薬剤師とザリガニの奮闘記

このリンクをナビゲーションマップに入れることで、ブログ内の記事を探してもらいやすくするようにしています。

訪問者の方に有効活用していただいているかは不透明ですが、少なくても内部リンク対策になったりするのかな?と思っています。

サイトマップのページは固定ページで作成しています。

作成の様子はこちらの記事でまとめていますのでご覧ください。

www.yakuzari.work

本文の一部を隠す

「表示する」というボタンを押すことで本文の一部を表示させてみました。

試しに下記の「表示する」ボタンを押してみて下さい。


表示する
見本です。うまく表示されているでしょうか??

こんな感じです。

「Minimalism」だからというカスタマイズではありませんが、設定は簡単!

詳細は別記事で紹介していますので、ご興味ある方はご覧ください。

www.yakuzari.work

※ちなみにレスポンシブルに対応していますので、レスポンシブルの設定をしていればPC・スマホともに同様の見え方となります。

Minimalismカスタマイズのまとめ

デザイン変更は結構大がかりな事で躊躇されている方もいらっしゃるかもしれませんが、少なくてもMinimalismであればこの程度で形になるのか、とひとつ参考にしていただければ幸いです。

はてなブログでブログを運営されている方で非公式グループを探している方!

こちらのページでまとめていますのでお時間ある方は是非読んでみて下さい。

www.yakuzari.work
www.yakuzari.work