ITUYOGA

特定の流派には属さないハートオブヨガという理念を持ったヨガの先生。

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

f:id:kasiwabara2013:20170110192534j:plain

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

ブルブルさせたり

背景をグレーにしたり

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

 

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

 

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

yuta.ituyoga.com

 

 

注意すべきこと【重要】

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

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

 

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

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

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

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

 

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

 

メリット

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

 

デメリット

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

 

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

 

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

 

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

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

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>

こんな感じです

【スティールブルー】

【クリムゾン】

【ミディアムスプリンググリーン】

【ミッドナイトブルー】

記事タイトルの色やデザインを変える 

文字色の変更を応用すれば、記事タイトルの装飾をはかどらせることができます。

www.north-geek.com

 

HTMLやCSSなどのコードを記事内で紹介する

 記事内にHTMLなどのコードを表示したい時に使います。今さっき文字の色を変えるコードを入力しといたメモみたいなやつです。シンタックスハイライトといいます。

www.dreamark.tokyo

 

リストをおしゃれにしよう 

  • リストは箇条書きに必須
  • おしゃれなデザインは先進的な印象を与える
  • コピペなので難しくない 

 

www.north-geek.com

囲い線を使ってみよう

こういった囲い線を作ることができます。

mudaide.hatenablog.com

 

また、先ほど紹介した拡張機能を使えば簡単に、背景をグレーにすることができます。

拡張機能だとシンプルにグレーになります。 

 

読了時間を表示しよう

 このブログでも採用しています。昔は手作業で入力していたので面倒でしたが、こんな便利なこともできるんですね。

basanote.hatenablog.com

 

リライトした最終更新日を表示してみよう

 「この記事は2017年1月10日に投稿して、2017年1月15日に追記しました。」みたいな最後に更新した日がいつかわかるようになります。

basanote.hatenablog.com

 

 

ここからサイドバーなどに表示するカスタマイズを紹介します

 

お問い合わせフォームを設置する

 相談や仕事依頼を受けるのに便利です。

www.ex-it-blog.com

 

Twitterのタイムラインを表示する

Twitter Publishからタイムラインのウィジェットを作成しよう。1分もあれば作れる。まずはこちらにTwitterのURLを入力する。

f:id:kasiwabara2013:20170110181646j:plain

 

左の「Embedded Timeline」を選択する。その下の「set customization options.」をクリックする。

f:id:kasiwabara2013:20170110181720j:plain

 表示したいサイズを決めて「Update」をクリック。表示されるコードをコピーする。

f:id:kasiwabara2013:20170110182023j:plain

ダッシュボード>デザイン>工具マーク>サイドバー>モジュールを追加>HTML で追加したHTMLにコピーすればOKだ。またこのようにブログ編集画面のHTML編集にコピーすれば本文の中にも表示できる。

 

この機会にフォローしてもらえるとめっちゃ嬉しいです

 


フェイスブックページを作成、LikeBoxを設置する 

フェイスブックページをお持ちなら、ブログにLIkeBoxを設置しましょう。作っていなければこの機会に作るのもありです。

smmlab.jp

 

sns-memorandums.hatenablog.jp

 

 

トップへ戻るボタンを設置しよう

あると便利だけど、目立たない縁の下の力持ち。それがトップへ戻るボタン。

basanote.hatenablog.com

 

まとめ

 ブログのデザインはこだわりだしたらキリがありません。そんな中でも迷わないでいるためには読者にとって有益かというルールを守っていけば間違いありません。独りよがりにならず、読者目線で考えていきましょう。

 もっとHTMLやCSSに詳しくなってカスタマイズしたい方はこういった本を参考にしてみましょう。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
 

 

 デザイナーでない人にオススメできるデザインの本です。

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]