はてなブログ”minimalism”の初期設定と、カスタマイズ【ほぼコピペで完結】

はてなブログテーマ「Minimalism」の、初期設定・カスタマイズをまとめました。

https://www.karochoa.com/wp-content/uploads/2020/02/komatta.png

最近はてなブログのテーマ「minimalism」を使い始めました。
カスタマイズをどうしたらいいか分からず困ってます…。
記事を書くのに集中したいから、最低限のカスタマイズを教えて!

という方に向けて書いています。

こだわりだすとキリがないのが、ブログのカスタマイズです。

ここでは、最低限の初期設定・デザインを仕上げることを目的としています。

この記事の内容

  • 「{ }デザインCSS」のカスタマイズ
  • アフィリエイトの設定

僕が実際にやってきた初期設定・カスタマイズをご紹介します。
もちろん、「Minimalism」以外のテーマにも使えますので、他のテーマを使っている方も参考にしてみてくださいね。


なお、当ブログは「はてなブログ」から「ワードプレス」移行しています。
ワードプレスのメリット・デメリット、移行方法が知りたい方は、次のページをどうぞ。

関連記事【保存版】はてなブログからWordPressに移行するためのロードマップ

{ }デザインCSS【ブログデザインを見やすくカスタマイズ】

pc

ブログデザインを変えるには、「{ }デザインCSS」にコードをコピペするだけでOKです。

コードを貼り付ける場所は全て同じ場所で、下へ下へと追加していけば大丈夫です。
貼り付ける場所は、こちらです。

コードを貼り付ける場所

  • 左側のメニューの「デザイン」を選択し、
  • その中の「スパナマーク」>「{ } デザインCSS」にコピペします。

このセクションで紹介するコードは、全てここにコピペすればOKです。

文字サイズを変更する【必須です】

いちばん最初にとりかかって欲しいのが、文字サイズの変更です。

はてなブログのテーマ全般に言えますが、文字サイズが小さくて読みにくい。
中でも「minimalism」は文字サイズ15pxと、かなり小さめです。
そこで、文字サイズを変えるだけで、見違えるように文章が読みやすくなるというわけです。

ブログのメインコンテンツは、あくまで文章。
文字サイズのせいで文章が読みにいなんて、もったいないハナシ。
まっさきに改善しちゃいましょう。

まずは、このコードを「{ }デザインCSS」に貼り付けてください。
仮に「17px」になっていますが、「17」の部分を好きな数字に変えることで文字サイズを自由にカスタマイズできます。

HTML
/*フォントサイズ*/
.entry-content p {font-size: 17px;}

第一線で活躍されているブロガーの方の文字サイズは?

第一線で活躍されているブロガーの皆さんはどれくらいの文字サイズにしているんでしょうか?

ここでは文字サイズをざっとまとめてみました。

有名ブロガーさんのフォントサイズ

ブロガー名ブログ名本文の文字サイズ
ヨスさんヨッ!センス19px
イケダハヤトさんイケハヤ大学【ブログ版】18px
マナブさんmanablog17px
☆←ヒトデさん今日はヒトデ祭りだぞ!17px
けいろーさんぐるりみち。16px
ちきりんさんChikirinの日記15px
はあちゅうさん旦那観察日記14px

やはりフォントサイズ大きめの方が多い印象でした。

一方で、ちきりんさん、はあちゅうさんのように、小さめのフォントを使われている方もいらっしゃいます。
実際に読み比べてみてみてくださいね。

MEMO
GoogleChromeの拡張機能「WhatFont」で、文字サイズを調べることができます。

行の高さを変更する

行の高さも、文章の読みやすさを左右します。

「フォントサイズなどを変えたのに読みづらい…」と思ったときにはお試しください。

HTML
/*行の高さ*/
.entry-content {line-height:2.0em;}

フォントの設定をする

文字サイズと並んで読みやすさを左右するのが、フォントです。

Apple系端末(macやiPhone)とWindows系端末で表示するフォントが最適化されるコードです。

どこかのサイトで紹介されていたのですが、どこか分からなくなってしまいました…とにかく使い勝手がよく、当サイトでもこれを設定しています。

HTML
/*フォント*/
body{
font-family:-apple-system, BlinkMacSystemFont,'Avenir','Helvetica Neue','Helvetica','Hiragino Sans','ヒラギノ角ゴシック','游ゴシック Medium',YuGothicM,YuGothic,'メイリオ', Meiryo,'MS Pゴシック','MS PGothic';
}

見出しを変更

↑こんな感じのやつを見出しといいます。
これのデザインを変えるコードです。

「Minimalism」はデフォルトで見出しデザインがないので、これを設定するだけで全く違った雰囲気になります。

68種類もの見出しコードが紹介されている、「サルワカ」さんがオススメです。

参考 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選サルワカ

見出しの色を変更

続いて、見出しの色を変えます。

CSSでは、色を記号で表します。(例えば「#000」)
まずは、下のサイトで設定したい好みの色を探してみてください。

参考 color-sample.comcolor-sample.com

設定したい色の色番号(#から始まる記号)をメモしておきます。

続いて、「見出しのコード」を確認してみましょう。

「#」で始まる3桁、または6桁の色番号に当たる部分があるはずです。
これを、メモしておいた色に置き換えると見出しの色が変わるはず。

2つ以上の色番号がコードに書かれている場合には、見出しに2色以上の色が使われている可能性が高いです。
その場合には、一つづつ変更してみてどの部分の色が変更されているか確認しながら作業を進めてみてください。

色番号についてさらに知りたい場合には、次の本が参考になります。

» 参考:1冊ですべて身につくHTML & CSSとWebデザイン入門講座

シェアボタンの配置

SNSにシェアしてもらうための、シェアボタンを配置しましょう。

デフォルトでも設置はできますが、ボタンがキレイになるだけでがぜん、やる気が出てきます(笑)

シェアボタンのデザインは、Yukihiさんのサイトが参考になります。

ちなみに、こちらのコードを使うときには「コピペコード①」貼り付けないと正常に動作しません。

参考 はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)Yukihy Life

ページの先頭に戻るボタン

ページの先頭に戻るボタンを設置します。

スマホで記事を読んでいるとき、「ページの先頭に戻りたい」と思ったときにあると便利なのが「ページの先頭に戻る」ボタンです。

iPhoneなどは、画面の上の方をタップするとページの先頭に戻れはしますが、これを知らない読者の方には重宝する機能になるかも。

念のためつけておく、というのも親切かもしれません。

参考 ページトップへ戻るスムーズスクロール(jQueryなし)IMUZA.com

強調(B)にマーカーを付ける

蛍光ペンで塗ったようなギミックも、デザインCSSで実現できます。

初期設定では、強調(Bold)にするとただ単に太字になりますが、CSSに

現在僕はマーカー設定は使っていませんが、以前設定していたときには下のサイトが参考になりました。

参考 ブログで蛍光ペンのような「色の付いた下線」を引く方法トレードが10倍楽になる基礎講座

コピーライトを設置

フッターに「Copyright ©かろちょあ  All rights reserved.」のように表示します。

実は、著作権法上はあってもなくても保護されるようですが…当サイトは「かっこいい」という理由でだけで設置しています。

HTML
/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: gray;/*背景色*/
font-size: 14px;
color:#fff;/*文字の色*/
}

続いて「フッタ」にこれを貼り付けましょう。
フッタの場所は”デザインCSS”の一つ上です。

<div id=”copyright”>Copyright ©**あなたのブログ名** All rights reserved.</div>

アフィリエイトの設定

はてなブログのアフィリエイト周りの設定をしていきましょう。

アドセンス【非ダブルレクタングル】

ダブルレクタングルではない、アドセンスの貼り方を解説しているサイトがありました。

収益が2倍になったというから、驚きです。
試してみる価値があるかもしれません。

参考 ダブルレクタングルは時代遅れ。収益2倍のカスタマイズ3秒だけ本気出すブログ

アドセンス【スポンサードリンクの文字を小さく】

スポンサードリンクの文字サイズを小さくします。

こちらのサイトを参考にしました。

参考 はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまり

ヨメレバ・カエレバ【CSSのカスタマイズ】

ヨメレバ・カエレバのデザインをカスタマイズします。

基本的には、こちらのサイトを参考にさせていただきました。

デザインはこれで完璧!かと思いきや…

参考 Yukihy Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!

僕の場合にはボタンのずれが発生。

ダメ人間ブログさんの記事を参考に修正させていただきました。

参考 カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログ

はてなデフォルトリンク【Amazonと楽天のマークをつける】

はてなのAmazon、楽天リンクにマークをつけます。

そのままでも見栄えは良いですが、ロゴを追加するとさらにそれっぽく。

参考 はてなブログの Amazon と楽天の商品リンクにアイコンを付けたCorredor

あとがき

以上、これまでやってきた中でデザインを改善できたものをピックアップしました。

カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。

とりあえず、この記事を参考にザッと変更してしまって、気になるところを修正すると記事を書くのに集中できるかな?と思います。

なお、はてなブログからワードプレスへの移行を考えている方は、次の記事も参考になるかもしれません。
よろしかったら、チェックしてみてくださいね。

関連記事はてなブログからワードプレスの比較と移行方法【ステップアップ】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です