(cache) はてなブログカスタマイズを加速させるガイドPC版（中級者向け）

f:id:kasiwabara2013:20170110192534j:plain

吹き出しを作って喋らせたり

ブルブルさせたり

背景をグレーにしたり

箇条書きを
こんなふうに
変えられます

さまざまなカスタマイズが可能です。そう、はてなブログならね。

初歩レベルのカスタマイズはこちらの記事で紹介しています。

yuta.ituyoga.com

注意すべきこと【重要】

カスタマイズするほど読み込み速度は落ちる
バックアップをとるなりして、誤作動しても戻せるように
レスポンシブデザインの場合、スマホとPCで動作チェックをする

カスタマイズのしすぎは読み込み速度を落とすので、気をつけましょう。

レスポンシブデザインに設定する【任意】

テーマは大きく分けて2種類に分かれています。

スマートフォンとパソコンのデザインが別になるテーマ
スマホとPCが同じデザインになるテーマ（レスポンシブデザイン）

このブログは後者のレスポンシブデザインを採用しています。PCで見ても、スマホで見ても同じデザインのはずです。この記事ではPC表示（レスポンシブデザイン）のカスタマイズにフォーカスして紹介します。

※レスポンシブデザインは有料会員のみの特典です

メリット

スマホとPCのどちらで見ても同じブログだとすぐに認識できる
ブログカスタマイズにかける時間を半分にできる
はてなブログ特有のスマホデザインのチープさをカバーできる

デメリット

スマホ専用デザインよりも表示がわずかに遅れる
AMP対策ができない

表示時間がわずかに遅くなります。AMP（アンプ）というスマホ用の速度アップできる機能がはてなブログProにあるのですが、レスポンシブデザインでは実質的に利用できません。ブログから毎月1,000円くらいの収益があれば有料会員になる目安となります。さくらインターネットの独自ドメインを利用しても1,000円の収益があればプラマイゼロです。

はてなブログ有料会員2年コースで月額600円
独自ドメイン使用しても月額129～515円

ここから記事全体を変えるカスタマイズを紹介します

記事を読みやすくしてみよう【重要】

文字のサイズや行間などを変えることでブログの印象と読みやすさが変わります。妙に文字の小さいサイトや、スキマがない文章は読むのに疲れます。ウェブで文章を読むのは疲れることなので、なるべく読みやすいカスタマイズを心がけましょう。

www.ituore.com

ブログ編集を楽にするChrome拡張機能【重要】

次に紹介する「吹き出し」や「目次」を作るためにこちらの拡張機能を導入することをおすすめします。メリットしかないので、早めに導入しましょう。

見出し<h2>の導入
目次を一発で呼び出せる
その日の日付を呼び出せる
文字や画像の左、中央、右揃えができる
背景をグレーにできる
指定した文に好きなコード（吹き出しなど）を加えられる
ブックマークから開かなくても記事を書いたり、管理できる

f:id:kasiwabara2013:20170110184538j:plain

shiromatakumi.hatenablog.com

目次を使いやすくしよう

目次は読み手に「この記事はこんなことが書かれています」というメッセージになります。

記事の編集（見たまま）画面にこのコードを書き込むだけです。辞書機能に登録しておくか、先ほど紹介した編集用の拡張機能から呼び出しましょう。

[:contents]

目次ってページの上のほうにあるし、使われているかどうかは別として割と目立つものだと思います。ちょっとはオシャレに気を使ってもいい場所なんじゃないかなと思います。
レスポンシブデザイン向け、はてなブログ公式目次のデザインカスタマイズ - ばさのーと

basanote.hatenablog.com

吹き出しを使ってみよう

カスタマイズをしないでいると、読者が不便を感じて帰っていくよ

このように吹き出しをつけることができます。

もし上記のChrome拡張機能を使っていなければHTMLから直接編集する方法で代用します。

shiromatakumi.hatenablog.com

文字で遊んでみる

ブログカスタマイズたのしいい

q-az.net

www.tairakenji.com

いやもうホントめっちゃ簡単なんですよ、簡単すぎて『コイツ大したことねぇな』って思うかもしれませんが、僕が大したことないんじゃなくてCSSが凄いんですよ、多分。
【コピペOK！】めっちゃ秘密にしたかったけどCSSで文字を震えさせる方法を大公開するよ！ - にーとのかがみ。

フォントを変えてみる

フォントを変えることで、ブログの印象をガラッと変えることもできます。Google Fontsを利用します。

f:id:kasiwabara2013:20170110183711j:plain

lahtnas.hateblo.jp

www.north-geek.com

gattolibero.hatenablog.com

太字を装飾してみる

太字を蛍光ペンでライン風に装飾できます。

www.north-geek.com

色を変えてみる

記事内の文字色を変えるなら左上にあるタブから色変更のボタンを選べばOK。その応用でタイトルなども文字色を変えることが可能です。

www.colordic.org

この中からいくつか抜き出してみます。

<p><span style="color: #4682b4;">【スティールブルー】</span></p>
<p><span style="color: #dc143c;">【クリムゾン】</span></p>
<p><span style="color: #00fa9a;">【ミディアムスプリンググリーン】</span></p>
<p><span style="color: #191970;">【ミッドナイトブルー】</span></p>