はてなブログテーマ「Minimalism」の、初期設定・カスタマイズをまとめました。
ブログのカスタマイズは、こだわるとキリがなくなって「気付いたら４時間経っていた」ということもありました。
夢中になると、エンドレスでやり続けてしまうんですよね。
とはいえ、ブログでいちばん肝心なのは記事を書くことです。
ここでは、最低限の初期設定・デザインをサクッと仕上げ、記事を書くのに集中するための準備を終わらせてしまおう！というテーマで書いていきます。
- 「{ }デザインCSS」のカスタマイズ
- アフィリエイトの設定
多くの人が悩むであろう、「デザインCSS」と「アフィリエイト」の設定を中心に解説します。
なお、当ブログははてなブログからWordPressへ移行しました。
移行を考えている方は、次のページも参考にしてみてください。
関連記事はてなブログからWordPressに移行するためのロードマップ
{ }デザインCSS【ブログを見やすくカスタマイズ】
「{ }デザインCSS」とは、ブログのデザインを変更するための場所です。
設定したいデザインに合わせて「CSSコード」を入力していきます。
「めんどくさそう！」
そう思いますよね（笑）
でも、簡単なので安心してください。
このCSSコードは、いろいろな方が公開してくださっており、僕らはそれらから「いい」と思ったものをコピペすればOKです。
コードを貼り付け先は、こちらです。
- 左側のメニューの「デザイン」
- その中の「スパナマーク」＞「{ } デザインCSS」にコピペします。
このセクションで紹介するコードは、全てここにコピペすればOKです。
「ブログ全体の文字サイズ」を変更する
真っ先にとりかかって欲しいのが、文字サイズの変更です。
はてなブログのテーマは全体的に文字サイズが小さく読みにくいですが、中でも「minimalism」は文字サイズ15pxと、かなり小さめ。
文字サイズを変えるだけで、見違えるように文章が読みやすくなりますよ。
ブログのメインコンテンツは文章ですから、文字サイズで読者にストレスを与えているとしたらまっさきに改善するべきでしょう。
コードはこちらです。
「17」となっている部分を変えれば、文字サイズをカスタマイズできます。
/*フォントサイズ*/
.entry-content p {font-size: 17px;}第一線で活躍されているブロガーの皆さんはどれくらいの文字サイズにしているんでしょうか？
ここでは文字サイズをざっとまとめてみました。
| ブロガー名 | ブログ名 | 本文の文字サイズ |
|---|---|---|
| ヨスさん | ヨッ！センス | 19px |
| イケダハヤトさん | イケハヤ大学【ブログ版】 | 18px |
| マナブさん | manablog | 17px |
| ☆←ヒトデさん | 今日はヒトデ祭りだぞ！ | 17px |
| けいろーさん | ぐるりみち。 | 16px |
| ちきりんさん | Chikirinの日記 | 15px |
| はあちゅうさん | 旦那観察日記 | 14px |
やはりフォントサイズ大きめの方が多い印象でした。
一方で、ちきりんさん、はあちゅうさんのように、小さめのフォントを使われている方もいらっしゃいます。
どの文字サイズが読みやすいか、感覚的なものもあると思います。
ぜひ、ベストなフォントサイズを見つけてみてください。
行の高さを変更する
行の高さも、文章の読みやすさが変わります。
「フォントサイズなどを変えたけど、なぜか読みづらい」と思ったら、お試しください。
/*行の高さ*/
.entry-content {line-height:2.0em;}フォントの設定をする
文字サイズと並んで読みやすさを左右するのが、フォントです。
Apple系端末・Windows系端末に応じて、表示するフォントが最適化されるコードです。
/*フォント*/
body{
font-family:-apple-system, BlinkMacSystemFont,'Avenir','Helvetica Neue','Helvetica','Hiragino Sans','ヒラギノ角ゴシック','游ゴシック Medium',YuGothicM,YuGothic,'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}見出しを変更する方法
↑こんな感じのを「見出し」といいます。
Minimalismのデフォルトでは見出しデザインがないので、これを設定するだけで雰囲気がガラッと変わります。
手順は、次の２ステップ。
- 見出しのコードを検索する
- 「{ }デザインCSS」に貼り付ける
まず、サルワカさんのページから好きな見出しを探します。
68種類もあるので、どれかしら気に入るのがあるはず。
コードを表示ボタンを押すとコードが現れるので、それをコピーします。
» 参考：CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
はてなブログの「{ }デザインCSS」に、コードを貼り付けます。
ここまでで、見出しのデザインが変わっているはず。
余裕があれば、さらに色を変えてみましょう。
コピペしたコードには「#」で始まる記号があるはず。（「#000」や「#000000」のようなものです）
ここに好きな色をコピペすれば、色を変えることができます。
色の検索には「Color-Sample.com」が便利です。
» 参考：「Color-Sample.com」でカラーコード を検索
シェアボタンの配置
SNSシェアボタンをカスタマイズします。
デフォルトだと少し味気ないので、Yukihiさんのサイトを参考にオシャレなシェアボタンを設置します。
なお、このコードを使うときには「コピペコード①」を貼り付けないと動作しません。
» 参考：はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)
ページの先頭に戻るボタン
ページの先頭に戻るボタンを設置します。
特に、スマホで記事を読んでいて「ページの先頭に戻りたい」と思ったときに便利な機能です。
念のためつけておく、というのも親切かも。
» 参考：ページトップへ戻るスムーズスクロール（jQueryなし）
強調（B）にマーカーを付ける
蛍光ペンで塗ったようなギミックも、デザイン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のタイムラインを埋め込む方法は、こちらのサイトを参考にしました。
参考 はてなブログにTwitterのタイムラインを埋め込む方法つなろっくこれからの時代は、Googleからの検索流入以外にも、SNSからの流入によりサイトの信頼性が評価されていくのではないかと思います。
また、書いた記事を積極的にTwitterで拡散していくことで多くの人に記事を読んでもらえるようになるのは間違いなしです。
Twitterの「フォローするボタン」を設置
Twitterとの連携で言えば、同じブロガーさんの以下の記事も参考になりました。
参考 ブログにTwitterの「フォローする」ボタンを設置しようつなろっくアフィリエイトの設定
はてなブログのアフィリエイト周りの設定をしていきましょう。
アドセンス【非ダブルレクタングル】
ダブルレクタングルだと、「いかにも」な感じになってしまいます。
そこで、ちょっと変わったアドセンス設置を試してみましょう。この記事によると収益が2倍になったとか。
「収益をとことん追求したい！」という方は試してみるのもありかも？
僕の場合は、「できるだけ読者の方の邪魔にならない程度に広告を貼る」をいちばんにやっているので、あまり参考にはしていませんが、広告の貼り方で結構収益に差が出るみたいです。
参考 ダブルレクタングルは時代遅れ。収益2倍のカスタマイズ3秒だけ本気出すブログアドセンスの「スポンサードリンク」を小さく
スポンサードリンクの文字サイズを小さくする方法です。
普通に「スポンサードリンク」と入力してしまうと、かなり大きめのサイズになってしまいます。
「これでは、美しくない」
そう思って、こちらのサイトを参考にして文字サイズを小さくしました。。
参考 はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまりヨメレバ・カエレバ【CSSのカスタマイズ】
ヨメレバ・カエレバのデザインをカスタマイズします。
基本的には、こちらのサイトを参考にさせていただきました。
参考 Yukihy Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ボタンのズレが出てしまい、ダメ人間ブログさんの記事を参考に修正させていただきました。
参考 カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログはてなデフォルトリンク【Amazonと楽天のマークをつける】
はてなのAmazon、楽天リンクにマークをつけます。
そのままでも見栄えは良いですが、ロゴを追加するとさらにそれっぽく。
参考 はてなブログの Amazon と楽天の商品リンクにアイコンを付けたCorredorあとがき
以上、これまでやってきた中でデザインを改善できたものをピックアップしました。
カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。
とりあえず、この記事を参考にザッと変更してしまって、気になるところを修正すると記事を書くのに集中できるかな？と思います。
なお、はてなブログからワードプレスへの移行を考えている方は、次の記事も参考になるかもしれません。
よろしかったら、チェックしてみてくださいね。
コメントを残す