読者です 読者をやめる 読者になる 読者になる

ITUYOGA

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

はてなブログのカスタマイズを初歩から優しく解説します【PC版】

f:id:kasiwabara2013:20170110011250j:plain

 はてなブログのカスタマイズで実施してきた施策を優しく分解して解説します。

はてなブログを本格的にカスタマイズしようという新米さんから、ちょっと背伸びしておしゃれにしたい初心者まで。

「HTML?CSS?」というプログラミングのことなんかさっぱりな方でも理解しやすいようにコピペでできるものを選びました。僕も1年前まではさっぱりだったので、その時の気持ちを思い出してみます。

まずはこれだけでもやると見違えるという基本のカスタマイズをご紹介していきます。

 

応用編はこちら!

yuta.ituyoga.com

 

 

 

テーマを選ぼう

まずはテーマを選ぼう。将来的に有料版にする可能性がある場合や、PCとスマホのデザインを統一したい方は「レスポンシブデザイン対応」のテーマを選ぼう。

ずっと無料版で過ごすなら、スマホデザインもおしゃれにしやすいテーマを選ぼう。オススメは「DUDO」だ。

テーマ ストア - はてなブログから気に入ったテーマを選んでこよう。僕はシンプルで目にうるさくない「Innocent」を使っている。以前はDUDOだったが、どうしてもレスポンシブデザインにしたかったので変更した。

moonnote.hateblo.jp

tsukuruiroiro.hatenablog.com

 

 

HTMLとCSSを覚えよう

プログラミングに関して専門家ではなかったので、なるべく平易な言葉で説明していきます。HTMLとCSSだけ覚えてもらえればブログカスタマイズでは問題ありません。

  • HTMLとはブログの筋肉や骨
  • CSSとはブログの服や化粧品

 

 ブログの管理画面から「デザイン」をクリックします。

f:id:kasiwabara2013:20170109212056j:plain

 

このような画面が表示されます。この「ヘッダ、記事、サイドバー、フッタ」などにHTMLを書き込みます。そして一番下にある「デザインCSS」にCSSを書きます。

f:id:kasiwabara2013:20170109211954j:plain

これらがどこに反映されるのかと、人体で例えるなら。

  • ヘッダ:ブログの上部に表示される領域(頭)
  • 記事:記事全体と、その上下に関する領域(体)
  • サイドバー:ブログの横にある記事じゃない領域(手)
  • フッタ:ブログの下部に表示される領域(足)
  • デザインCSS:ブログの色やデザインを変える(服や肌)

 

タイトル画像(ヘッダー画像)を変えてみよう

 

管理画面>ヘッダ>タイトル画像

ファイルを選択してアップロードするだけなので簡単です。

ヘッダー画像を用意しよう。

プロにお願いしてヘッダー画像を作成してもらうのも手です。僕はブログのヘッダーなども取り扱っているブロかわさんにお願いしました。イラストの依頼方法に関して詳しく紹介しているので参考にしてみては。

blokawa.hateblo.jp

 

また、Squarespace Logoのようなジェネレーターを使えば無料でロゴ画像がつくれます。試しにこんなロゴを作りました。このロゴが30秒ほどでできました。

f:id:kasiwabara2013:20170109221138p:plain

レスポンシブデザインを採用している場合の応用テクニック

ヘッダー画像が見切れてしまいます。僕のブログではこのようなスクリプトを組み込んでいます。はてなフォトライフにアップした画像のURLと、ブログのURLを書き加えてコピペしてください。

 デザイン >工具のマーク>ヘッダ >タイトル下

<script>
document.getElementById('blog-title-inner').innerHTML = '<a href="ブログのURL/"><img src="画像URL" alt="ブログ名" width="100%"></a>';
</script>

はてなフォトライフは管理画面の右上にある碁盤みたいなマークです

f:id:kasiwabara2013:20170109215924j:plain

アップロードをクリックして、画像をアップします。画像を右クリックして「画像アドレスをコピー(c)」してください

f:id:kasiwabara2013:20170109220123j:plain

ここに書き込みます

f:id:kasiwabara2013:20170109215633j:plain

 

 

プロフィールを変更しよう

 標準のプロフィール欄は画像がどうしても小さく表示されてしまう。そこで「モジュールを追加」してHTMLを使って大きな画像とともに自己紹介文を挿入してみよう。

デザイン>工具マーク>サイドバー>モジュールを追加>HTML

 <a href="自己紹介の記事URL"><img src="画像のURL" alt="あなたの名前など" width="200" height="200"></a>
<p><span style="color: #d32f2f;">※詳しいプロフィールは画像をタップ</span></p>
<p>自己紹介の文章</p>

before

f:id:kasiwabara2013:20170109235253j:plain

after

f:id:kasiwabara2013:20170109235016j:plain

 

このように、画像が一気に大きくなった。編集画面で文章を書いてからHTML編集に切り替えてコピペすると楽だ。

編集画面(見たまま)

f:id:kasiwabara2013:20170109235532j:plain

HTML編集

f:id:kasiwabara2013:20170109235557j:plain

 

グローバルナビ(ナビゲーションバー)を用意しよう

 グローバルナビゲーションバーが標準装備されているテーマを選んだ場合は、そのまま必要な項目を入力すればいい。標準装備されていないテーマには、グローバルナビを設置しよう。サイト内をスムーズに巡回できて便利だ。

www.hiroseyonaka.com

フォローボタンを設置しよう

フォローボタンは必ず設置しよう。定期購読をしてくれる読者がいるかいないかで、あなたの固定ファンになるかどうかが決まる。標準のフォローボタンだと目立ちにくく、クリックしづらくて読者にとってもストレスだ。大きくて目立つデザインにしよう。 

www.ituore.com

シェアボタンを設置しよう

シェアボタンも必須項目だ。どんなにいい内容が書いてあっても拡散(シェア)されなければ記事は埋もれてしまう。 記事の上と下に表示しておくと便利だ。記事を後で読みたい人にとってはブックマークの役割を果たすので、長文を書く人にも有効。

www.ituore.com

 

バナー画像を設置しよう

 あなたがイベントやレッスンを開催していたり、おすすめしたい情報がある場合にバナー画像は大きな効果を発揮する。例えるなら電車の壁に貼ってある広告と同じだ。

デザイン>工具マーク>サイドバー>モジュールを追加>HTML

 <a href="飛ばしたい記事やサイトのURL"><img src="画像のURL" alt="広告の名前など">

するとこのような画像リンクが表示できる。

f:id:kasiwabara2013:20170110001207j:plain

画像の編集に関してはこちらの記事でも紹介したPhoto Editorが非常に役に立つ。慣れれば上記の広告くらいなら5分で作れる。

yuta.ituyoga.com

 

関連記事・人気記事・最新記事を表示しよう

 これは難しくない。サイドバーに表示するモジュールの数字をちょっと変更すればOKだ。

 

サイドバー>モジュールを追加>関連記事or注目記事or最新記事

f:id:kasiwabara2013:20170110001714j:plain

 

関連記事をサイドバーではなく記事下に表示する

 このブログでは記事下に関連記事を表示するためにHTMLを使って表示させています。サイドバーにある関連記事のモジュールは残しといてください。

f:id:kasiwabara2013:20170110003554j:plain

 

まずはCSSでサイドバーにあるほうの関連記事の姿を隠します。そして記事下に表示されるようにHTMLを書き加えます。

デザイン>工具マーク>デザインCSS

.hatena-module-related-entries {
display: none;
}

デザイン>工具マーク>記事>記事下

<div id="relateArticle"></div>

<script>
var timer = setInterval(function() {
    if (typeof jQuery != 'undefined') {
        $("#relateArticle").html($(".hatena-module-related-entries").html());
        clearInterval(timer);
    }
}, 1000)
</script>

するとこのように表示されます。サイドバーから設定を変えれば、表示される画像サイズも変わります。

f:id:kasiwabara2013:20170110003920j:plain

 

最新記事・注目記事をもっとおしゃれにする

サイドバーに表示する最新・注目記事をおしゃれにするならこれ。

chiroru.hateblo.jp

chiroru.hatenablog.com

 

まとめ

初歩となるカスタマイズは以上だ。これさえ守れば利便性とデザイン性のある立派なブログにできる。ブログは記事の内容も重要だが、入れ物であるブログそのものが不便では誰も読まない。これはマナーやエチケットのようなものだ。

ぜひ参考にして欲しい。そうそう、記事の下にシェアボタンがあると思うので、役に立ったと思ったらSNSへシェアしたりブックマークしてくれると嬉しい。

 

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook