ブログ初心者が設定すべき基本項目
明けましておめでとうございます。今年は、このブログを何かしらのキーワードで検索上位ベスト10に入れてみせます。
さて、今年の目標達成に向けた第一歩として、あらためて、このブログのカスタマイズ設定をやり直しました。ブログを始める初日から設定できれいればなぁ、と思うことばかりなので、これからブログを始める人に向けて、まとめておきます。
設定方法（はてなブログの場合）
はじめに、これから説明する項目をカスタマイズ設定するための手順を記載しておきます。
- 管理メニューを開く
- 「デザイン」をクリック
- 「カスタマイズ」をクリック
- 「デザインCSS」をクリック
- サンプルコードを記載
- 「変更を保存する」をクリック
以下の説明で出てくるサンプルコードを「デザインCSS」の場所に書き込むことで、設定内容が反映される仕様になっています。
ブログ名
ブログ名はブログの顔とも言えますので、超重要です。
このブログでは、手触り感のあるノウハウを書いていきたいので、手書き風の書体を採用してみました。
サンプルコードはこちらです。
/* ---------字体の定義------------ */
@font-face {
font-family: 'HuiFontP109';
src: url('/fonts/public/HuiFont/HuiFontP109.eot');
src: url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), url('/fonts/public/HuiFont/HuiFontP109.woff') format('woff'), url('/fonts/public/HuiFont/HuiFontP109.ttf') format('truetype'), url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
font-weight: normal;
font-style: normal;
}/* ---------ブログ名の書式を変更------------ */
#title a {
font-family: 'HuiFontP109', sans-serif;
font-size: 30px;
}
【常時SSL化対応】はてなブログのタイトルを手書き風フォント「ふい字」にカスタマイズしてほっこりする作戦 - 自由ネコ
記事タイトル
記事タイトルは、Googleで検索された時の検索結果に表示される部分です。
検索結果から来訪された時に、探したい記事タイトルが目立っていないと、記事の内容を読んでもらえないリスクがあるので、ちらも超重要です。
このブログでは、よく目立たせるように、背景色が影付きで重なった白抜き文字を採用しました。また、元々センタリングされていたのを左寄せしています。
サンプルコードはこちらです。
/* ---------記事タイトル------------ */
.entry-title {
text-align: left;
font-weight: bold;
font-size: 20px;
padding: 15px 10px;
color: #fff;
background-color: #3498db;
border-bottom: 4px solid #aaa;
}
.entry-title a{
color: #fff;
}
目次
目次も、見やすいブログとするためには必要なものになります。特に、長くなればなるほど、目次がないと読み進められません。
色々なカスタマイズ方法があるようですが、このブログでは、いったん超シンプルな形にしました。
サンプルコードはこちらです。
/* ---------目次------------ */
.table-of-contents:before{
content: "目次";
font-size: 100%;
font-weight: bold;
}
見出し
目次とセットで考えるべきなのが、この見出しです。
見出しも、色々なサンプルが出回っていますが、このブログでは、直感で、アンダーライン（途中で色が変わるやつ）を採用しました。
見出しをh3からh5まで全て使う人は、それぞれの階層を考える必要がありますが、このブログは9割がスマホで更新されるので、なるべくシンプルで、階層を意識する必要がないデザイン、という基準で選びました。
と、当初は考えていたのですが、やはり狙ったキーワードを取りに行こうと思ったら、ガッツリ記事を書かなければならない、となると、階層化が必要とわかりましたので、今は、h3とh4までを定義しています。
サンプルコードはこちらです。
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 5px solid #3498db;
height: 50px;
display: flex;
align-items: center;
}.entry-content h4 {
position: relative;
color: #111;
border-bottom: 4px solid #ccc;
padding: 8px 10px;
}
.entry-content h4::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #3498db;
z-index: 2;
content: '';
}
パンくず
パンくずは、ブログ全体の見取り図のようなものです。
「この記事、気になるな」と思った時に、同じような記事をまとめて見てもらえるようになるので、これも超重要です。
全記事を正しく分類していくのは、それなりに骨が折れますが、それだけの価値は充分あります。
昔はこれも、複雑なコードを書いて設定していたようですが、今は、チェックを一つ、つけるだけで設定できます。
調べればすぐ出てくるので、やり方は割愛です。
twitterフォローボタン
twitterと連携している人であれば、ブログ訪問者をtwitterにつなげることもやりたいと思います。
サンプルを載せておきます。
●●●のところを自分のアカウントに置き換えればOKです。
<a href="https://twitter.com/●●●?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-lang="ja" data-show-count="false">Follow ●●●</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
まとめ
ブログを始めたら、まずは、ブログ名、記事タイトル、目次、見出し、の4つの項目について、カスタマイズ設定をするべきです。
どの項目も、検索すれば色々とサンプルコードが出てきますが、重要なのは、色やデザインの一貫性を持つことですね。サンプルをそのまま貼り付けているだけだと、ちぐはぐな見た目になってしまいますので、注意が必要です。
また、記事ごとに分類してパンくずを表示させることで、見やすさがグッと上がります。
