吾輩はぬこ将軍である。今日ではてなブログを始めて10日である。
そして今回が10記事目である。
この10記事目を記念して、始めたばかりではあるがはてなブログを振り返る。
今回は『はてなブログを始めたらやっておきたいカスタマイズ』について、始めて10日たった人の目線で書こうと思う。
はてなブログを始めて感じるのは、「機能が分かりやすく便利で、記事が書きやすい！」という点だ。
しかし記事を書いていくうえで「ここはカスタマイズしておきたいな」と思う所もあった。
- はてなブログを始めてみて感じること
- はてなブログの目次を分かりやすくカスタマイズ
- はてなブログ記事の見出しをお洒落に見やすくカスタマイズ
- はてなブログのヘッダー画像を楽につくろう
- はてなブログで大事なのはデザインよりも記事を書くこと！
はてなブログを始めてみて感じること
はてなブログでは、ツールバーにあるボタン1つで目次やリンク、リストなどを挿入できる。
写真や画像も編集オプションからすぐに貼り付けられ、ワードプレスより少し機能は少ないのかもしれないが、シンプルである分書くことに集中できる。
あれもこれもと欲張りがちな人には向いている気がする。
このように記事を書くのに必要な要素は一通り揃っていると思うが、記事を書き続けるうちに「物足りない」と感じ始めた。
そんなわけで今回は、自分が思う『ここだけは最低限やったほうが良いカスタマイズ』を書いていく。
はてなブログの目次を分かりやすくカスタマイズ
ツールバーから目次は簡単に挿入できる。ちなみに、目次の初期状態は以下のような感じだ。
書いてある通り、正直初期状態ではただの箇条書きに思えてしまう。
最低限、それが目次であることが分かる『表示』が欲しい。
そしてそれは、実は簡単に出来てしまうのだ。
まずは、はてなブログで目次などのカスタマイズをするのに必要な共通の動作について説明しておく。
それは『デザインCSSにコードをコピーする』という動作だ。
図を交えて説明しよう。
はてなブログの『デザイン』から『設定』にいくと『デザインCSS』というタブが見つかる。
デザインCSSという欄に、自分の好きなカスタマイズを実現するコードを入れていくのである。
カスタマイズの方法も実に簡単なのだ！
そして『目次』を表示するためのコードは以下である。そのままコピーしてデザインCSSに貼ればいい。
.table-of-contents:before{
content: "目次(もくじ)";
font-size: 120%;
font-weight: bold;
}
ちなみに『"目次(もくじ)"』の" "内の文字変更も出来る。『font-size: 120%;』内の数字を変えれば文字の大きさが変わる。
一度貼ってみてから自分の好きなように変えてみれば良いと思う。
上のコードをそのまま貼り付けて適用すると、吾輩と同じスタイルの目次になる。
参照サイト
はてなブログ記事の見出しをお洒落に見やすくカスタマイズ
はてなブログでは見出しもボタン一つで挿入できるが、初期は以下のような感じだ。
見出し大
見出し中
見出し小
文字の大きさや太字有無などの違いはあるかもしれないが、要するに初期の見出しには全く装飾がなくて分かりにくい。
きっと記事を書いていくうちに物足りなさを感じるだろう。
その物足りなさを解消するには、さっきと同様に特定のコードをデザインCSSにコピーすればいい。
見出しの種類は色々あるが、例えば以下のコードをデザインCSSに貼ってみてはどうだろう？
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
}
上のコードを貼りつけることで、吾輩のブログと同様の見出しにできる。
ちなみに、h3というのは見出しの分類と思えばいいと思う。
本当は、大見出しはh3じゃなくてh2が良いらしい。詳しくは以下のブログの記事を読んでみると良いかも。
⇓
www.pojihiguma.com
更に上のコード内には#f0f0f0みたいに『#～』という文字列が見えると思う。
これはカラーコードと呼ばれているやつで、詳しくは以下のサイトを見て欲しい(説明するより見たほうが早い)。
要するに、自分の好きな色に変えられるということだ。
はてなブログのヘッダー画像を楽につくろう
自分の初期のブログのトップページにあるのは、大きく表示されたブログタイトルのみであろう。
ヘッダー画像は誰もが最初に作りたいと思うだろうが、いざ作ってみると意外と大変である。
思った以上に余白が広かったり、画像が大きすぎて見切れていることなどもある。
しかしはてなブログを利用している人が多いためかはてなブログに関する先人の知恵は多く、ヘッダー画像を楽に作るための知恵も豊富である。
実際、吾輩も先人の知識をそのまま実行して今のヘッダー画像を完成させたのである。
なので、ヘッダー画像については色んなサイトを参考にした方が早い。
参考サイト：これで吾輩はヘッダー画像を完成させた
⇓
tukinasikotonoha.hatenablog.com
はてなブログで大事なのはデザインよりも記事を書くこと！
最低限やった方が良いカスタマイズをまとめると以下の3つである。
①目次、②見出し、③ヘッダー画像
まずはこれだけで良い気がする。デザインに凝り過ぎて記事が疎かなのはどうかと思う。
現在、吾輩は↑3つのカスタマイズに加え、ようやくサイドバーをいじり始めた(カテゴリ追加したよ！)。
これからも記事書きを中心に、少しずつ外観をいじっていくつもりだ。
