3はてなブログテーマ「Minimalism」の、初期設定・カスタマイズをまとめました。最近はてなブログのテーマ「minimalism」を使い始めました。カスタマイズをどうしたらいいか分からず困ってます...。記事を書くのに集中したいから、最低限のカスタマイズを教えて!という方に向けて書いています。こだわりだすとキリがないのが、ブログのカスタマイズです。ここでは、最低限の初期設定・デザインを仕上げることを目的としています。僕が実際にやってきた初期設定・カスタマイズをご紹介します。「Minimalism」以外のテーマにも使えますので、他のテーマを使っている方も参考にしてみてくださいね。当ブログは「はてなブログ」から「ワードプレス」移行しています。}デザインCSS」にコードをコピペするだけでOKです。コードを貼り付ける場所は全て同じ場所で、下へ下へと追加していけば大丈夫です。貼り付ける場所は、こちらです。デザインCSS」にコピペします。このセクションで紹介するコードは、全てここにコピペすればOKです。文字サイズを変更する【必須です】いちばん最初にとりかかって欲しいのが、文字サイズの変更です。はてなブログのテーマ全般に言えますが、文字サイズが小さくて読みにくい。中でも「minimalism」は文字サイズ15pxと、かなり小さめです。そこで、文字サイズを変えるだけで、見違えるように文章が読みやすくなるというわけです。ブログのメインコンテンツは、あくまで文章。文字サイズのせいで文章が読みにいなんて、もったいないハナシ。まっさきに改善しちゃいましょう。}デザインCSS」に貼り付けてください。仮に「17px」になっていますが、「17」の部分を好きな数字に変えることで文字サイズを自由にカスタマイズできます。17px;}第一線で活躍されているブロガーの方の文字サイズは?第一線で活躍されているブロガーの皆さんはどれくらいの文字サイズにしているんでしょうか?ここでは文字サイズをざっとまとめてみました。14pxやはりフォントサイズ大きめの方が多い印象でした。一方で、ちきりんさん、はあちゅうさんのように、小さめのフォントを使われている方もいらっしゃいます。実際に読み比べてみてみてくださいね。MEMOGoogleChromeの拡張機能「WhatFont」で、文字サイズを調べることができます。行の高さを変更する行の高さも、文章の読みやすさを左右します。「フォントサイズなどを変えたのに読みづらい...」と思ったときにはお試しください。{line-height:2.0em;}フォントの設定をする文字サイズと並んで読みやすさを左右するのが、フォントです。Apple系端末(macやiPhone)とWindows系端末で表示するフォントが最適化されるコードです。どこかのサイトで紹介されていたのですが、どこか分からなくなってしまいました...とにかく使い勝手がよく、当サイトでもこれを設定しています。↑こんな感じのやつを見出しといいます。これのデザインを変えるコードです。「Minimalism」はデフォルトで見出しデザインがないので、これを設定するだけで全く違った雰囲気になります。68種類もの見出しコードが紹介されている、「サルワカ」さんがオススメです。続いて、見出しの色を変えます。CSSでは、色を記号で表します。(例えば「#000」)まずは、下のサイトで設定したい好みの色を探してみてください。color-sample.comcolor-sample.com設定したい色の色番号(#から始まる記号)をメモしておきます。続いて、「見出しのコード」を確認してみましょう。「#」で始まる3桁、または6桁の色番号に当たる部分があるはずです。これを、メモしておいた色に置き換えると見出しの色が変わるはず。2つ以上の色番号がコードに書かれている場合には、見出しに2色以上の色が使われている可能性が高いです。その場合には、一つづつ変更してみてどの部分の色が変更されているか確認しながら作業を進めてみてください。色番号についてさらに知りたい場合には、次の本が参考になります。CSSとWebデザイン入門講座シェアボタンの配置SNSにシェアしてもらうための、シェアボタンを配置しましょう。デフォルトでも設置はできますが、ボタンがキレイになるだけでがぜん、やる気が出てきます(笑)シェアボタンのデザインは、Yukihiさんのサイトが参考になります。ちなみに、こちらのコードを使うときには「コピペコード1」貼り付けないと正常に動作しません。はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。Lifeページの先頭に戻るボタンページの先頭に戻るボタンを設置します。スマホで記事を読んでいるとき、「ページの先頭に戻りたい」と思ったときにあると便利なのが「ページの先頭に戻る」ボタンです。iPhoneなどは、画面の上の方をタップするとページの先頭に戻れはしますが、これを知らない読者の方には重宝する機能になるかも。念のためつけておく、というのも親切かもしれません。ページトップへ戻るスムーズスクロール(jQueryなし)IMUZA.com強調(B)にマーカーを付ける蛍光ペンで塗ったようなギミックも、デザインCSSで実現できます。初期設定では、強調(Bold)にするとただ単に太字になりますが、CSSに現在僕はマーカー設定は使っていませんが、以前設定していたときには下のサイトが参考になりました。reserved.」のように表示します。実は、著作権法上はあってもなくても保護されるようですが...当サイトは「かっこいい」という理由でだけで設置しています。14px;color:#fff;/*文字の色*/}続いて「フッタ」にこれを貼り付けましょう。フッタの場所は”デザインCSS”の一つ上です。reserved.</div>アフィリエイトの設定はてなブログのアフィリエイト周りの設定をしていきましょう。アドセンス【非ダブルレクタングル】ダブルレクタングルではない、アドセンスの貼り方を解説しているサイトがありました。収益が2倍になったというから、驚きです。試してみる価値があるかもしれません。ダブルレクタングルは時代遅れ。収益2倍のカスタマイズ3秒だけ本気出すブログアドセンス【スポンサードリンクの文字を小さく】スポンサードリンクの文字サイズを小さくします。こちらのサイトを参考にしました。はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまりヨメレバ・カエレバ【CSSのカスタマイズ】ヨメレバ・カエレバのデザインをカスタマイズします。基本的には、こちらのサイトを参考にさせていただきました。Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!僕の場合にはボタンのずれが発生。ダメ人間ブログさんの記事を参考に修正させていただきました。カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログはてなデフォルトリンク【Amazonと楽天のマークをつける】はてなのAmazon、楽天リンクにマークをつけます。そのままでも見栄えは良いですが、ロゴを追加するとさらにそれっぽく。楽天の商品リンクにアイコンを付けたCorredorあとがき以上、これまでやってきた中でデザインを改善できたものをピックアップしました。カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。この記事を参考にザッと変更してしまって、気になるところを修正すると記事を書くのに集中できるかな?と思います。はてなブログからワードプレスへの移行を考えている方は、次の記事も参考になるかもしれません。よろしかったら、チェックしてみてくださいね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。フルタイム勤務しつつ鑑定士受験目指す→体調管理の一環で低温調理に出会う。書くことが好きでブログ1日1記事更新をライフワークにしてます。