はてなブログテーマ「Minimalism」の、初期設定・カスタマイズをまとめました。
- ブログデザインが気になって記事執筆に集中できない
- 必要最低限のデザインを先にサクッと終わらせたい
- デザイン変更に役立つサイトを一気に知りたい
- アフィリエイトのデザインもいじりたい
はてなブログのカスタマイズって、めちゃくちゃ時間かかりますよね。
こだわりだすとキリがなく、夢中になってエンドレスでやり続けてしまい、「気付いたら4時間経っていた」という経験もあるのではないでしょうか？
とはいえ、ブログでいちばん肝心なのは記事を書くこと。
ここでは、最低限の初期設定・デザインをサクッと仕上げ、記事を書くのに集中するための準備を終わらせてしまおう！というテーマで書いていきます。
- { }デザインCSSのカスタマイズ
- アフィリエイトの設定
多くの人が悩む、「デザインCSS」と「アフィリエイト」の設定を中心に解説します。
{ }デザインCSS【ブログを見やすくカスタマイズ】
「{ }デザインCSS」とは、ブログのデザインを変更するための場所です。
設定したいデザインに合わせて「CSSコード」を入力していきます。
「コード！？そんな難しそうなの、できないよ！」
そう思いますよね。
でも、簡単なので安心してください（笑）
このCSSコードは、いろいろな方が公開してくださっており、僕らはそれらから気に入ったものをコピペすればOKです。
コードの貼り付け先は、こちら。
ダッシュボードの「デザイン」をクリックして…
「スパナマーク」をクリックしたあと、いちばん下にある「{ }デザインCSS」にコードを書いていきます。
このセクションで紹介するコードは、全てここにコピペすればOKです。
「ブログ全体の文字サイズ」を変更する
真っ先にとりかかって欲しいのが、文字サイズの変更です。
結論、Googleが推奨すると言われている17pxに設定するのがおすすめ。
「minimalism」のデフォルトは15pxと、かなり小さめなので、文字サイズを変えるだけで見違えるように文章が読みやすくなります。
文字サイズが小さいせいでサイトから離脱…なんてもったいない。
コードはこちらです。
「17」となっている部分を変えれば、文字サイズをカスタマイズできます。
/*フォントサイズ*/
.entry-content p {font-size: 17px;}行の高さを変更する
行の高さも、文章の読みやすさが変わります。
「フォントサイズなどを変えたけど、なぜか読みづらい」と思ったら、お試しください。
/*行の高さ*/
.entry-content {line-height:2.0em;}見出しを変更する方法
↑こんな感じのを「見出し」といいます。
「このセクションにはどんなことが書いてあるのか？」を示す重要な部分になりますので、見出しデザインを変えるだけで一気に読みやすさが変わりますね。
特に、Minimalismのデフォルトでは「ほぼ装飾なし」なので、ここをいじるだけでインパクト大です。
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」ではなく、「サイドバー」にコードを入れていきます。
少し説明が長くなるので、別記事に譲りました。
ここのところSNSの重要性がグンと上がってきており、またブログとTwitterは両方ともテキストメディアで相性がいいと言われているので、この機会に実装しておくのもいいかもしれません。
» 参考：サイドバーにTwitterのタイムラインを・記事内にツイートを埋め込む方法【はてなブログ】
アフィリエイトの設定
アフィリエイト周りの設定をしていきましょう。
ASPへの登録がまだ、という方は大手だけサクッと登録しておくのがオススメです。
他にもたくさんのASPがありますが、上で紹介したASPだけでもたくさんの案件があり、十分すぎる量があります。
また、登録しすぎると管理ができなくなり、ワケが分からなくなってしまうので必要最小限にとどめるべきだと思います。（必要に応じて増やせばOK）
» 参考：アフィリエイトASPのおすすめ【これからはじめる初心者向け】
アドセンス【非ダブルレクタングル】
ダブルレクタングルだと、「いかにも」な感じになってしまいます。
そこで、ちょっと変わったアドセンス設置を試してみましょう。この記事によると収益が2倍になったとか。
「収益をとことん追求したい！」という方は試してみるのもありかも？
参考 ダブルレクタングルは時代遅れ。収益2倍のカスタマイズ3秒だけ本気出すブログアドセンスの「スポンサードリンク」を小さく
スポンサードリンクの文字サイズを小さくする方法です。
普通に文字入力してしまうと大きくなりすぎてダサかったので、こちらのサイトを参考に小さくしてみました。
参考 はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまりヨメレバ・カエレバ【CSSのカスタマイズ】
ヨメレバ・カエレバのカスタマイズも、CSSで可能です。
はてなブログでAmazonなどの商品紹介をする方は、デザイン変更を考えてみてもいいかも。
というのも、デザインによってクリック率も変わってくるようで、どのデザインが一番いいかを検証していくのもよいと思います。
参考 Yukihy Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！さらに、上のコードでボタンのズレが出てしまった場合には、次の記事も参考になります。
参考 カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログはてなデフォルトリンク【Amazonと楽天のマークをつける】
はてなのAmazon、楽天リンクにマークをつけます。
カエレバ・ヨメレバを使わない方は、こちらのカスタマイズをするだけで商品リンクのデザインを変えることができます。
参考 はてなブログの Amazon と楽天の商品リンクにアイコンを付けたCorredorあとがき
僕がこれまでやってきたカスタムを紹介しました。
カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。
とりあえずこの記事を参考にザッと変更して、さらに気になるところを修正していく…とすれば、記事執筆に集中できるかな？と思います。
なお、はてなブログからWordPressへの移行を考えている方は、僕がWordPressに移行した経験を踏まえて解説した次の記事も参考にしてみてください。
はてなブログからWordPressへ引っ越し方法【移行経験者が解説】
コメントを残す