はてなブログテーマ「Minimalism」の、初期設定・カスタマイズをまとめました。
最近はてなブログのテーマ「minimalism」を使い始めました。
カスタマイズをどうしたらいいか分からず困ってます…。
記事を書くのに集中したいから、最低限のカスタマイズを教えて！
という方に向けて書いています。
こだわりだすとキリがないのが、ブログのカスタマイズです。
ここでは、最低限の初期設定・デザインを仕上げることを目的としています。
- 「{ }デザインCSS」のカスタマイズ
- アフィリエイトの設定
僕が実際にやってきた初期設定・カスタマイズをご紹介します。
もちろん、「Minimalism」以外のテーマにも使えますので、他のテーマを使っている方も参考にしてみてくださいね。
なお、当ブログは「はてなブログ」から「ワードプレス」移行しています。
ワードプレスのメリット・デメリット、移行方法が知りたい方は、次のページをどうぞ。
関連記事【保存版】はてなブログからWordPressに移行するためのロードマップ
{ }デザインCSS【ブログデザインを見やすくカスタマイズ】
ブログデザインを変えるには、「{ }デザインCSS」にコードをコピペするだけでOKです。
コードを貼り付ける場所は全て同じ場所で、下へ下へと追加していけば大丈夫です。
貼り付ける場所は、こちらです。
- 左側のメニューの「デザイン」を選択し、
- その中の「スパナマーク」＞「{ } デザインCSS」にコピペします。
このセクションで紹介するコードは、全てここにコピペすればOKです。
文字サイズを変更する【必須です】
いちばん最初にとりかかって欲しいのが、文字サイズの変更です。
はてなブログのテーマ全般に言えますが、文字サイズが小さくて読みにくい。
中でも「minimalism」は文字サイズ15pxと、かなり小さめです。
そこで、文字サイズを変えるだけで、見違えるように文章が読みやすくなるというわけです。
ブログのメインコンテンツは、あくまで文章。
文字サイズのせいで文章が読みにいなんて、もったいないハナシ。
まっさきに改善しちゃいましょう。
まずは、このコードを「{ }デザインCSS」に貼り付けてください。
仮に「17px」になっていますが、「17」の部分を好きな数字に変えることで文字サイズを自由にカスタマイズできます。
/*フォントサイズ*/
.entry-content p {font-size: 17px;}第一線で活躍されているブロガーの皆さんはどれくらいの文字サイズにしているんでしょうか？
ここでは文字サイズをざっとまとめてみました。
| ブロガー名 | ブログ名 | 本文の文字サイズ |
|---|---|---|
| ヨスさん | ヨッ！センス | 19px |
| イケダハヤトさん | イケハヤ大学【ブログ版】 | 18px |
| マナブさん | manablog | 17px |
| ☆←ヒトデさん | 今日はヒトデ祭りだぞ！ | 17px |
| けいろーさん | ぐるりみち。 | 16px |
| ちきりんさん | Chikirinの日記 | 15px |
| はあちゅうさん | 旦那観察日記 | 14px |
やはりフォントサイズ大きめの方が多い印象でした。
一方で、ちきりんさん、はあちゅうさんのように、小さめのフォントを使われている方もいらっしゃいます。
実際に読み比べてみてみてくださいね。
行の高さを変更する
行の高さも、文章の読みやすさを左右します。
「フォントサイズなどを変えたのに読みづらい…」と思ったときにはお試しください。
/*行の高さ*/
.entry-content {line-height:2.0em;}フォントの設定をする
文字サイズと並んで読みやすさを左右するのが、フォントです。
Apple系端末（macやiPhone）とWindows系端末で表示するフォントが最適化されるコードです。
どこかのサイトで紹介されていたのですが、どこか分からなくなってしまいました…とにかく使い勝手がよく、当サイトでもこれを設定しています。
/*フォント*/
body{
font-family:-apple-system, BlinkMacSystemFont,'Avenir','Helvetica Neue','Helvetica','Hiragino Sans','ヒラギノ角ゴシック','游ゴシック Medium',YuGothicM,YuGothic,'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}見出しを変更
↑こんな感じのやつを見出しといいます。
これのデザインを変えるコードです。
「Minimalism」はデフォルトで見出しデザインがないので、これを設定するだけで全く違った雰囲気になります。
68種類もの見出しコードが紹介されている、「サルワカ」さんがオススメです。
参考 CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選サルワカ見出しの色を変更
続いて、見出しの色を変えます。
CSSでは、色を記号で表します。（例えば「#000」）
まずは、下のサイトで設定したい好みの色を探してみてください。
設定したい色の色番号（#から始まる記号）をメモしておきます。
続いて、「見出しのコード」を確認してみましょう。
「#」で始まる３桁、または６桁の色番号に当たる部分があるはずです。
これを、メモしておいた色に置き換えると見出しの色が変わるはず。
2つ以上の色番号がコードに書かれている場合には、見出しに2色以上の色が使われている可能性が高いです。
その場合には、一つづつ変更してみてどの部分の色が変更されているか確認しながら作業を進めてみてください。
色番号についてさらに知りたい場合には、次の本が参考になります。
» 参考：1冊ですべて身につくHTML & CSSとWebデザイン入門講座
シェアボタンの配置
SNSにシェアしてもらうための、シェアボタンを配置しましょう。
デフォルトでも設置はできますが、ボタンがキレイになるだけでがぜん、やる気が出てきます（笑）
シェアボタンのデザインは、Yukihiさんのサイトが参考になります。
ちなみに、こちらのコードを使うときには「コピペコード①」貼り付けないと正常に動作しません。
参考 はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)Yukihy Lifeページの先頭に戻るボタン
ページの先頭に戻るボタンを設置します。
スマホで記事を読んでいるとき、「ページの先頭に戻りたい」と思ったときにあると便利なのが「ページの先頭に戻る」ボタンです。
iPhoneなどは、画面の上の方をタップするとページの先頭に戻れはしますが、これを知らない読者の方には重宝する機能になるかも。
念のためつけておく、というのも親切かもしれません。
参考 ページトップへ戻るスムーズスクロール（jQueryなし）IMUZA.com強調（B）にマーカーを付ける
蛍光ペンで塗ったようなギミックも、デザインCSSで実現できます。
初期設定では、強調（Bold）にするとただ単に太字になりますが、CSSに
現在僕はマーカー設定は使っていませんが、以前設定していたときには下のサイトが参考になりました。
参考 ブログで蛍光ペンのような「色の付いた下線」を引く方法トレードが10倍楽になる基礎講座コピーライトを設置
フッターに「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>
アフィリエイトの設定
はてなブログのアフィリエイト周りの設定をしていきましょう。
アドセンス【非ダブルレクタングル】
ダブルレクタングルではない、アドセンスの貼り方を解説しているサイトがありました。
収益が2倍になったというから、驚きです。
試してみる価値があるかもしれません。
アドセンス【スポンサードリンクの文字を小さく】
スポンサードリンクの文字サイズを小さくします。
こちらのサイトを参考にしました。
参考 はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまりヨメレバ・カエレバ【CSSのカスタマイズ】
ヨメレバ・カエレバのデザインをカスタマイズします。
基本的には、こちらのサイトを参考にさせていただきました。
デザインはこれで完璧！かと思いきや…
参考 Yukihy Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！僕の場合にはボタンのずれが発生。
ダメ人間ブログさんの記事を参考に修正させていただきました。
参考 カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログはてなデフォルトリンク【Amazonと楽天のマークをつける】
はてなのAmazon、楽天リンクにマークをつけます。
そのままでも見栄えは良いですが、ロゴを追加するとさらにそれっぽく。
参考 はてなブログの Amazon と楽天の商品リンクにアイコンを付けたCorredorあとがき
以上、これまでやってきた中でデザインを改善できたものをピックアップしました。
カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。
とりあえず、この記事を参考にザッと変更してしまって、気になるところを修正すると記事を書くのに集中できるかな？と思います。
なお、はてなブログからワードプレスへの移行を考えている方は、次の記事も参考になるかもしれません。
よろしかったら、チェックしてみてくださいね。
コメントを残す