はてなブログのデザインをカスタマイズしてみる！

ブログは自分好みのデザインやレイアウトで使いたいもの。このブログで行っているカスタマイズについて書いておきます。たいしたものではありませんがどなたかの参考に少しでもなれば・・・。

■　「テーマ」の変更

はてなブログでは「テーマ」を選ぶことで簡単にガラッとブログのデザインを変えることができるのですが、ある程度記事数を公開した後で変更すると、記事のレイアウトも変わってきてしまうので手直しするにしても色々と大変になります。なので、ブログを作ったらまず最初に「テーマ」はしっかり決めてしまった方がいいです。

管理画面から「 デザイン」→「テーマ」と進むとはてなブログが予め用意している「公式テーマ」を見ることができます。最上部の「変更を保存する」ボタンを押さない限り実際に適用されるわけではないのでどんどん切り替えて試してみるとよいでしょう。ただ、公式テーマのデザインは多種多様とは言えませんし、気に入ったものが見つからない事が多いでしょう。そうした際は有志の方々が作成されたものが「テーマストア」で公開されているのでそちらを利用させて頂くのがお勧めです。「テーマストア」へは公式テーマの最下部にある「テーマストアからテーマを選ぶ」か下のリンクから行くことができます。

使ってみたいテーマを選んだら「プレビューしてインストール」で自分のブログで試すことができます。「このテーマをインストール」を押すまでは実際に適用されるわけで無い点は同じなのでどんどん試してみるとよいでしょう。「人気順」などを見ているとなるほど上手く作ってあるなと感心させられます。

ちなみにこのブログのでは「waitingmoon」さんの「Blank」というテーマを使わせて頂いています。 いつか自分もこのような素晴らしいデザインのテーマを作る側の人間になってみたいものです。

■　「テーマ」のカスタマイズ

使うテーマを決めたら、より見易くなるように少し手を入れていきます。手始めに公式ヘルプに載っているものからチャレンジしてみるのが良いでしょう。

• ブログタイトルの背景画像変更

　　　管理画面の「 デザイン」→「 カスタマイズ」から「 背景画像」で公式に用意されている
　　　背景画像を選ぶことができます。

　　　また、自分で撮ってきた写真やイラストなどを背景に指定することもでき
　　　ます。「参照」をクリックするとエクスプローラーが立ち上がるので使い
　　　たい画像をアップロードできるようになっています。

　　　画像の表示位置、端で途切れる場合の繰り返しの有無とその方法、画像を
　　　スクロールさせるかどうかを指定することが出来ます。

　　　尚、画像の推奨サイズは、高さ200px、横幅1000pxだそうです。

• ブログタイトルカラー指定

　　　背景画像によってはブログタイトルが見にくくなってしまうので色を変更する方法を書いておき
　　　ます。こちらは管理画面の「 デザイン」→「 カスタマイズ」から「 デザインCSS」でエデ
　　　ィタに書き込む形になります。以下のコードをコピペするだけ（色は「#」の後の数字とアルフ
　　　ァベットの組み合わせをカラーコードで指定）です。

#title a {
    color: #485859;
}

　　　尚、カラーコードは「こちらのサイト」の一覧で探すのが見やすくてお勧めです。

• 記事の文字色変更

　　　同じく「 デザイン」→「 カスタマイズ」から「 デザインCSS」で行います。

　.entry-content {color: #ededed;}

■　記事の先頭へ戻るリンクを設置する方法

長くなってしまった記事では最後に記事の先頭に戻れるリンクを置いておくと少し便利かも・・・ということでその方法です。

　　　「管理画面」→「 デザイン」→「 カスタマイズ」→「記事」で

　　　「記事上」

<a name="TOP"> </a> 

　　　「記事下」

<span style="float:right;"> <a href="#TOP"> ＞ 記事先頭へ戻る ＜</a> </span> <br> 

これでブログ記事右下に「＞ 記事先頭へ戻る ＜」というリンクが表示されるようになります。

応用して画像リンクでボタンを作ると右の様なボタンが表示されます。
※ 画像はフリー素材を配布されている「EC design」様のデータを使わせて頂いています。

<span style="float:right;"> <a href="#TOP"> <img src="（画像URL）" alt="＞ 記事先頭へ戻る ＜" width=70%> </a> </span> <br> 

より工夫して「jquery」という JavaScript のライブラリを使っておしゃれなボタンを設置している方も居られました。こちらの方が使い勝手が良さそうですね。そのうち挑戦してみようかな・・・。

■　はてなブログで用意されている「Webフォント」を使う方法

はてなブログでは予め Webフォントがいくつか用意されており、以下のコードを入れることでブログの記事でも使えるようになっています。

<i class="(使用したいアイコンのクラス名)"> </i> 

Twitter やメールのアイコンを使いたければ

<i class="blogicon-twitter"></i> Twitter
<i class="blogicon-mail"></i> Mail

と書くことで、「 Twitter」や「 Mail」の様に表示されます。

ただ、はてなブログではヘルプページにもどのアイコンがどのコードに対応しているかの記載がないのですが、「shun9167」という方が非常に見やすい一覧を作っておられます。

■　スマホでの記事表示にレスポンシブデザインを設定

スマホでブログサイトを見た場合にPCから見たのと同じブログデザインにする事ができます。（但しレスポンシブデザインに対応したテーマを使用している場合のみ）

ブログの管理画面から「 デザイン」→「 スマートフォン」に進み、「 詳細設定」の「レスポンシブデザイン」にチェックを入れて変更を保存すればOKです。

■　カスタムURL の使い方について

はてなブログで普通に投稿すると日付と時間の付いたURLが設定されます。しかし、例えば「お問い合わせページ」の設置や、株主優待の紹介などで何年かにわたって追記していくような場合は カスタムURL を設定してブログのURL を固定しておいた方が何かと便利になります。リライトなどした場合に検索に掛かりにくくなってしまうことを防ぐ事が出来ます。

ひとまずはこんな所でしょうか。

はてなブログ Perfect GuideBook [改訂第2版]