はてなブログテーマ「Minimalism」の、初期設定・カスタマイズをまとめました。
- ブログデザインが気になって記事執筆に集中できない
- 必要最低限のデザインを先にサクッと終わらせたい
- デザイン変更に役立つサイトを一気に知りたい
- アフィリエイトのデザインもいじりたい
はてなブログのカスタマイズって、めちゃくちゃ時間かかりますよね。
こだわりだすとキリがなく、夢中になってエンドレスでやってしまうのがカスタマイズ。
「気付いたら4時間経っていた」という経験もあるのではないでしょうか？
とはいえ、ブログでいちばん肝心なのは記事を書くこと。
ここでは、最低限の初期設定・デザインをサクッと仕上げ、記事を書くのに集中するための準備を終わらせてしまおう！というテーマで書いていきます。
- { }デザインCSSのカスタマイズ
- アフィリエイトの設定
多くの人が悩む、「デザインCSS」と「アフィリエイト」の設定を中心に解説します。
{ }デザインCSS【ブログを見やすくカスタマイズ】
ブログデザインの変更には、「{ }デザインCSS」にコードを書き込みます。
「コード！？そんな難しそうなの、できないよ！」
そう思いますよね。
でも、やることは簡単なのでご安心ください（笑）
このCSSコードは、いろいろな方が公開しており、僕らはそれらから気に入ったものをコピペすればOKです。
「ダッシュボード」＞「デザイン」の順にクリックします。
「スパナマーク」の中の、一番下にある「{ }デザインCSS」にコードをコピペすればOKです。
「ブログ全体の文字サイズ」を変更する
まず、ブログ全体のフォントサイズを17pxに設定しましょう。
- Googleが推奨するフォントサイズである
- 多くのブログで17pxが採用されている
はてなブログのテーマは、どれも文字サイズが小さすぎます。
中でも「minimalism」は、かなり小さめの15px。
文章のメディアであるブログは「読者に読むストレスをかけない」のは基本です。
最近では、SXO（読者体験最適化）が検索エンジン上位表示のポイントになっています。
このことからも「文字サイズが小さすぎて読みづらい・・・」ということは、なんとしても避けねばなりません。
コードはこちらです。
文字サイズを変更したいときには、「17」となっている部分をお好きな数字に変更してみてください。
/*フォントサイズ*/
.entry-content p {font-size: 17px;}行の高さを変更する
行の高さも、文章の読みやすさを左右します。
イジり出すと沼にはまっていきますので、デフォルトで問題なければそのままでOKです。
文章が読みにくい場合には、下のコードを参考にカスタムしてみてください。
/*行の高さ*/
.entry-content {line-height:2.0em;}見出しを変更する方法
↑こんな感じのを「見出し」といいます。
ブログ始めたての頃は、見出しをつけないで文章を書いてしまいがち。
でも、絶対に付けるべきです。
Minimalismのデフォルトでは「ほぼ装飾なし」なので、ここを変更するだけで「やった感」がグッと出ますね。
見出しも他のカスタマイズと同様、先人たちの残してくれたものをコピペすればOKです。
以下が参考になります。
68種類もあるので、迷ったらここを参考にしましょう。
» 参考：CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
シンプルな見出しなら、 NxWrorldが参考になると思います。
» 参考：シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50
超有名ブログのmanablogさんのようにチェックマーク【✔️】をつけたい場合には、次のサイトが参考になります。
» 参考：CSSでシンプルなチェックマークをいくつか作ってみた
はてなブログではh3, h4, h5と見出しが振られていますので注意が必要です。
コピペしたコードの「#」で始まる記号が、色を表しています。
まずは設定したい色のコードを「Color-Sample.com」から検索します。
» 参考：「Color-Sample.com」でカラーコード を検索
そして、先ほどのコピペしたコードの色番号を置き換えればOKです。
シェアボタンの配置方法
SNSシェアボタンはおしゃれなYukihiさんのものがオススメです。
なお、「コピペコード①」を貼り付けないと動作しませんので注意です。
» 参考：はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)
ページの先頭に戻るボタンを設置する方法
ページの先頭に戻るボタンを設置します。
スマホで記事を読んでいて「ページの先頭に戻りたい」と思ったときにあると親切かも。
» 参考：ページトップへ戻るスムーズスクロール（jQueryなし）
マーカーをひく方法
よくみる蛍光ペンで塗ったような効果も、CSSで実装できます。
» 参考：ブログで蛍光ペンのような「色の付いた下線」を引く方法” site=”トレードが10倍楽になる基礎講座
引用ボックスのカスタマイズ方法
「引用ボックス」のデザイン変更は、以下のサイトが参考になりました。
参考 はてなブログ★引用デザインをかっこ良くカスタマイズ！コピペでOK！元CAバンビのずぼら日記その他のカスタマイズ
「{ }デザインCSS」以外の場所に入力していくカスタマイズ方法をまとめました。
コピーライトを設置する方法
ブログの画面の下のエリアを、フッターと呼びます。
そこに「Copyright ©かろちょあ All rights reserved.」のように表示する方法です。
実は、著作権法上はあってもなくても保護されるようですが…
僕の場合は、「かっこいい」という理由でだけで設置してます（笑）
/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: gray;/*背景色*/
font-size: 14px;
color:#fff;/*文字の色*/
}続いて、「フッタ」にしたのコードを貼り付けましょう。
フッタの場所は「デザインCSS」の一つ上です。
<div id=”copyright”>Copyright ©＊＊あなたのブログ名＊＊ All rights reserved.</div>
サイドバーにTwitterタイムラインを埋め込む方法
ブログのサイドバーに、Twitterのタイムラインを埋め込むことができます。
こちらは「デザインCSS」ではなく、「サイドバー」にコードを入れていきます。
少し説明が長くなるので、別記事に譲りました。
» 参考：サイドバーにTwitterのタイムラインを・記事内にツイートを埋め込む方法【はてなブログ】
アフィリエイトの設定
アフィリエイト周りの設定も、サクッと終わらせましょう。
ASPへの登録が初めてなら、まずは以下を登録しておけばOKだと思います。
他にもたくさんのASPがありますが、全部登録するとキリがありません。
上で紹介したものは大手ばかりで、ブログ運営するならいずれ登録することになるものばかりです。
アドセンス【非ダブルレクタングル】
ダブルレクタングルだと、「いかにも広告」な感じになってしまいます。
そこで、ちょっと変わったアドセンス設置を試してみましょう。この記事によると収益が2倍になったとか。
「収益をとことん追求したい！」という方は試してみるのもありかも？
参考 ダブルレクタングルは時代遅れ。収益2倍のカスタマイズ3秒だけ本気出すブログアドセンスの「スポンサードリンク」を小さく
スポンサードリンクの文字サイズを小さくする方法です。
普通に文字入力してしまうと大きくなりすぎてダサかったので、こちらのサイトを参考に小さくしてみました。
参考 はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまりヨメレバ・カエレバ【CSSのカスタマイズ】
ヨメレバ・カエレバのカスタマイズも、CSSで可能です。
はてなブログでAmazonなどの商品紹介をする方は、デザイン変更を考えてみてもいいかも。
というのも、デザインによってクリック率も変わってくるようで、どのデザインが一番いいかを検証していくのもよいと思います。
参考 Yukihy Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！さらに、上のコードでボタンのズレが出てしまった場合には、次の記事も参考になります。
参考 カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログはてなデフォルトリンク【Amazonと楽天のマークをつける】
はてなのAmazon、楽天リンクにマークをつけます。
カエレバ・ヨメレバを使わない方は、こちらのカスタマイズをするだけで商品リンクのデザインを変えることができます。
参考 はてなブログの Amazon と楽天の商品リンクにアイコンを付けたCorredorあとがき
僕がこれまでやってきたカスタムを紹介しました。
カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。
とりあえずこの記事を参考にザッと変更して、さらに気になるところを修正していく…とすれば、記事執筆に集中できるかな？と思います。
なお、はてなブログからWordPressへの移行を考えている方は、僕がWordPressに移行した経験を踏まえて解説した次の記事も参考にしてみてください。
はてなブログからWordPressへ引っ越し方法【移行経験者が解説】
