ブログ初心者が実施した最低限の７つのカスタマイズ設定方法

はじめに

ブログを開設して３週間が過ぎました。

これまで、まずは記事数が大事と思い執筆に勤しんできましたが、ブログが無個性になっている恐怖に襲われ、先日やっとブログのカスタマイズに手をつけました。ただ、他のカスタマイズブログを見て「そのカスタマイズ必要か？」と思うことも多かったため、納得して実施した、最低限の７つのカスタマイズの意義と設定方法を記載します。

はてなブログ初心者の方で、まだ何もカスタマイズしていない人の参考になれば幸いです。脱・無個性！

私が実施した７つのカスタマイズ

ヘッダ画像を作成
サイドバーを表示するテーマに変更
大見出しのデザインをCSSで変更
記事下に関連記事を表示するよう変更
記事下にSNSシェアボタンを表示するよう変更
TOP画面アクセスで記事一覧に飛ぶように設定変更
グローバルメニューを追加

それでは、１つずつ説明していきます！

カスタマイズ１：ヘッダ画像を作成

ブログの顔、となるヘッダ画像＝トップ画。アクセスした時に、あのブログだ！と覚えてもらえるような画像が一番です。ブログ名も大事ですが、視覚的にユーザに訴えることができる画像も、同様に重要です。

このトップ画ですが、自分で描くと唯一無二のデザインになるのでオススメですが、そこそこ時間がかかるので、フリー画像・無料ロゴ作成サービスなどを使って画像を作ると良いです。とにかく、文字だけは無個性なのでやめましょう！

「いろたし日記」というブログ名をあらわす、色が滲んでいくようなカラフルな絵が欲しいなぁ・・・ということで、思い切って水彩画で描いてみました。すぐそばに筆とスケッチブックがあってよかった。ということで突然、アナログな作業発生です。

スケッチブックに鉛筆で下書き
水彩絵の具で色を入れる
iPhoneで撮影・取込み
Photoshopで色調整
illstratorでレイアウト・文字入れ
JPEGファイルをはてなのヘッダに設定

f:id:iroppu:20170413103013j:plain

結構かかるかも？と思っていましたが、全部で1時間半ぐらいでできました。

設定方法

f:id:iroppu:20170413103813p:plain

Photoshop、illustratorの詳細な手順は省略しますが、トップ画ということでノイズを除去・ちょっとキツめの色彩にします。イラストを選ぶ場合も、ブログコンセプトとあったイラストにしましょう。Web用に保存し、高さ200×幅1000pxで保存しておくと、のちのステップでトリミングされないので楽です。

f:id:iroppu:20170413103810p:plain

管理画面＞デザイン＞カスタマイズ＞ヘッダ＞タイトル画像　内の「ファイルを選択」から保存したJPEGを開き、表示する箇所を「位置を調整する」で指定し、「変更を保存する」ボタンを押して完了です。

カスタマイズ２：サイドバーを表示するテーマに変更

はてなのサイドバーには、以下が設定できます。

プロフィール
最新記事
人気記事
カテゴリー
月別アーカイブ
検索

皆さんも普段、検索でヒットしたサイトの、右側に出てるこれらのリンクをクリックした覚えがあるのではないでしょうか？これを表示するのが「サイドバー」です。

私も今まで、公式テーマ内の「Block Memo」というテーマにしていたのですが、シンプルであるため、サイドバーの表記がありません。これがかなり致命的で、検索で記事にたどり着いた読者の迷子を誘発します。そしてその結果、そのページだけを見て離脱してしまいます。これはいけない、と思い、はてな公式テーマ内でサイドバーがある

かつシンプルな「Report」を選択しました。デフォルトテーマは嫌だけど、ごちゃごちゃしたデザインにしたくない、という方は是非このテーマを選んで見てください。

設定方法

管理画面＞デザイン＞デザインテーマ＞公式テーマ　内を下にスクロールしていくと「Report」が見つかるので、選択して「変更を保存する」ボタンを押して完了です。

f:id:iroppu:20170413101417p:plain

カスタマイズ３：大見出しのデザインをCSSで変更

「見出し」とは、本文の頭につける、ブロックごとのタイトルのようなものです。このタイトルを本文と同じフォントや構造で書いていると、どのように文がまとまっているのかわかりません。そのため、「見出し」を可視化してわかりやすくしてあげる必要があります。見出しの中で一番最上位にくるのが「大見出し」です。この見出しのデザインを変えると、急にブログが見やすくなり、メリハリが出て、個性も出ます。最低限としてこれだけはやっている人が多いので、是非やって見てください。

設定方法

この作業は簡単なのですが、はてなの管理画面上で設定変更を行うのではなく、CSSを記述するため、ちょっとした知識が必要です。しかし、はてなのツールが整っているため、CSSの記述・変更も比較的簡単にできます。５分ぐらいでできますので、色や太さも好みで変えてみてくださいね。

管理画面＞デザイン＞カスタマイズ＞デザインCSS{ } に以下コードを記入

/*-----------------------------------*/
/*見出しデザイン変更*/
.entry-content h3{
color: #2D2D2D;
padding: 5px 10px;
border-bottom: 3px solid #FF6969;
}

カスタマイズ４：記事下に関連記事を表示するよう変更

「あわせて読みたい」という文字を見たことがあると思います。これは、同じカテゴリの記事を表示する、といった機能です。これは、雑記のようにバラバラのカテゴリで記載しているブロガーにはかなり有効で、離脱率を下げるために関連記事を表示するツールを設置します。同じ名前で、「最新記事」を表示するウィジェットもあるようですが、この「あわせて読みたい」という名前に適しているのは、同じカテゴリの記事を表示するツールです。

参考記事

「太陽がまぶしかったから」の池田仮名さんの作成した「あわせて読みたいG」ウィジェットを組込み、「TORIDRI」の鳥さんのブログでさらにパーツをカスタマイズしました。お二方、ありがとうございました。

設定方法

１.管理画面＞デザイン＞カスタマイズ＞記事＞記事下　に以下スクリプトを追加

/*-----------------------------------*/

/*「合わせて読みたい」を表示*/


<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みたい' ,true);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>

２.管理画面＞デザイン＞カスタマイズ＞デザインCSS{ } に以下コードを記入

/*-----------------------------------*/

/*合わせて読みたいGの右側オブジェクトを削除*/
.hatena-module-foot h3 span {
visibility:hidden;
}

カスタマイズ５：記事下にSNSシェアボタンを表示するよう変更

これはほぼ見た目の問題です。デフォルトで表示されている SNSシェアボタンの、高さが揃っていないのです。そんなデザイン崩れを見てクリックしたいと思いますか？私は意気消沈します。しかも、見た目がかっこ悪い上に表示が遅いのです。という訳で変えない理由がないので、変えます。

参考記事

www.ituore.com

設定方法

１.管理画面＞デザイン＞カスタマイズ＞記事＞記事下　に以下スクリプトを追加

<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="inner">

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a>

<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a>

<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>

<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="share-text">Google+</span></a>

<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

２.管理画面＞デザイン＞カスタマイズ＞デザインCSS{ } に以下コードを記入

/*-----------------------------------*/
/*share-botton*/
.share-buttons{
margin-bottom: 10px;
text-align: center;
}
.share-buttons .inner a {
position: relative;
display: inline-block;
width: 15%;
height: 45px;
line-height: 25px;
font-size: 16px;
text-align: center;
text-decoration: none;
padding:5px;
}
.share-buttons .inner .share-text{
font-size: 15px;
}
.share-buttons .inner .hatena-bookmark-button{
color:#008fde;
border:1px solid #008fde;
background: #fff;
}
.share-buttons .inner .hatena-bookmark-button:hover{
color:#fff;
background: #008fde;
}
.share-buttons .inner .hatena-bookmark-button:active{
background: #5478A5;
}
.share-buttons .inner .facebook-button{
color:#305097;
border:1px solid #305097;
background: #fff;
}
.share-buttons .inner .facebook-button:hover{
color:#fff;
background: #305097;
}
.share-buttons .inner .facebook-button:active{
background: #213254;
}
.share-buttons .inner .twitter-button{
color:#55acee;
border:1px solid #55acee;
background: #fff;
}
.share-buttons .inner .twitter-button:hover{
color:#fff;
background: #55acee;
}
.share-buttons .inner .twitter-button:active{
background: #0285b7;
}
.share-buttons .inner .googleplus-button{
color:#db4a39;
border:1px solid #db4a39;
background: #fff;
}
.share-buttons .inner .googleplus-button:hover{
color:#fff;
background: #db4a39;
}
.share-buttons .inner .googleplus-button:active{
background: #a23629;
}
.share-buttons .inner .pocket-button{
color:#d3505a;
border:1px solid #d3505a;
background: #fff;
}
.share-buttons .inner .pocket-button:hover{
color:#fff;
background: #d3505a;
}
.share-buttons .inner .pocket-button:active{
background: #b5392c;
}

３.管理画面＞デザイン＞カスタマイズ＞記事＞ソーシャルパーツ　にデフォルトでついている以下のチェックを削除

はてなブックマークボタン
Facebookシェアボタン
ツイートボタン

f:id:iroppu:20170415115409p:plain

カスタマイズ６：TOP画面アクセスで記事一覧に飛ぶように設定変更

現在のはてなブログは、TOP画面にアクセスした際、最新記事のみが見れる仕様となっています。この仕様、雑記ブログにはとんでもない仕様です。せっかくアクセスしてくれた読者に、「えっ。久しぶりに見にきたら、全然違うカテゴリで更新してる・・（意気消沈）」→離脱、となってしまうのです。

そのため、TOP画面にアクセスしたユーザでも記事一覧に飛び、たくさんの記事を最初に目にすることができるよう、設定変更しましょう。

なお、「飛ぶように」と簡単に書きましたが、実際には「リダイレクト」という技術を使用しているため、弊害もありそうです。はてなにはデフォルトで「TOP」と別に「記事一覧ページ(archive)」が用意されているのですが、スクリプトを使って前者から後者へリダイレクトさせる、という仕組みです。強制的にページを飛ばしているため、TOPページのブックマークが減る、Google AnalyticsでTOPページのアクセス数がカウントできていない、などの問題が発生する可能性があることはご承知おきください。

参考記事

設定方法

設定＞詳細設定＞headに要素を追加　に以下スクリプトを追加

<script type="text/javascript">
if( location.href == 'http://XXX.hatenablog.com/'){
location.href='http://XXX.hatenablog.com/archive';}
</script>
<noscript>
<p><a href="http://XXX.hatenablog.com/archive">XXX</a></p>
</noscript>

XXXには自分のブログの情報をコピーペーストしてください。

カスタマイズ７：グローバルメニューを追加

これがおそらく今回の７つの中で難易度が一番高いです。「グローバルメニュー」化だけではなく、同時にウィンドウを小さくした際に「トグルメニュー」に変更する、というレスポンシブデザインも設定しています。なにやら専門用語がたくさん出てきましたね。

「グローバルメニュー」とは、ブログ内の主要なコンテンツへのリンクを持つメニューのことで、グローバルナビとも呼ばれます。

「トグルメニュー」とは、開閉できるメニューのことで、この中にグローバルメニューのような主要コンテンツへのリンクを含ませるのが一般的です。さらに、グローバルメニューはPCでは見やすいですが、横幅の狭いスマフォなどでは見にくい場合があります。そのため、◯◯ピクセル以下になると自動的にグローバルメニューからトグルメニューに変更させる、ようなコードを書く必要があります。このような、サイズによって適切なデザインを表示する、これが「レスポンシブデザイン」です。

はてなブログでは、スマホ用に別途CSSを設定するためには「はてなPROを契約しなければならない」という制約があるため、このようにピクセルを指定したCSSで無理くり設定する必要があるのです。それでもできないこともありますが、最低限なのでこのぐらいで良いでしょう。

参考記事

Yukihy Lifeさんを参考に、コードを記載しました。ありがとうございます！

設定方法

１.管理画面＞デザイン＞カスタマイズ＞デザインCSS{ } に以下コードを記入

/*-----------------------------------*/
/*グローバルメニュー*/
#menu {
position: relative;
width: 100%;
padding-left: 10px;
height: 60px;
background: #ffffff;/*グローバルメニュー背景色*/
border-top: 1px #cccccc solid; /* 上境界線 */
//border-bottom: 1px #cccccc solid; /* 下境界線 */
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 60px;
}
#menu li {
list-style-type: none;
float: left;
height: 60px;
text-align: left;
width: 18%;//均等にメニューを５分割より少し小さめ
}
#menu li a {
display: block;
color: #3a3a3a;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}

.menu-toggle{
display: none;
}

/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}

/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #ffffff;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #3a3a3a;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;

}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #ffffff;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #3a3a3a;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}

２.管理画面＞デザイン＞カスタマイズ＞ヘッダ＞タイトル下　に以下を追加

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='YYY'>XXX</a></li>

<li><a href='YYY'>XXX</a></li>

<li><a href='YYY'>XXX</a></li>

<li><a href='YYY'>XXX</a></li>
<li><a href='YYY'>XXX</a></li>
</div>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>