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

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

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

f:id:yakuzari:20190407221957p:plain

ここ数週間、いつかやろうと思っていたことがあります。

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

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

なぜMinimalismへテーマ変更??

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

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を使う」という方法で僕は変更しました。

レスポンシブ

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

f:id:yakuzari:20190301140009p:plain
ㇾ点を入れるだけです

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

文字の大きさ

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

「字が小さい!!」

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

www.karochoa.com

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

ヘッダ

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

f:id:yakuzari:20190301140530p:plain
お馴染みのデザインの画面です

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

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

blog.minimal-green.com

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

f:id:yakuzari:20190301145333j:plain

ヘッダが見切れてる!!

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

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

f:id:yakuzari:20190301145340p:plain

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

見出しデザイン

次は本文のカスタマイズです。以前の記事でも書きましたが、僕は自分で敢えて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

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

目次

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

www.yukihy.com

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

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

②目次の背景色を変える

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

www.yakuzari.work

Minimalismカスタマイズのまとめ

とりあえず行ったこととしてはこれぐらいでしょうか??

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

Minimalismだけではなく、はてなブログのカスタマイズを勉強したい方はこんな本もありますのでチェックしてみてはいかがですか?