スーミン

1991年生まれの現役ポケモントレーナーです 自分が感じたことを伝えたり 気になったものを紹介します

はてなブログ初心者のカスタマイズとか色々【2016/11/6〜11/12】

どうもスーです。ブログの振り返りをやっていきます。今週は結構いじりましたのでそこそこボリュームがあります。ではどうぞ。
f:id:soosun:20161111120312j:plain

カスタマイズでやったこと

スマホのヘッダと記事下に読者ボタンを設置

f:id:soosun:20161112120644p:plain f:id:soosun:20161112120654p:plain
スマホから見ていただいている方が多いため読者ボタンを数カ所設置しました。最初はフォローボタンを3つ設置していましたがスマホから見たらデザインが崩れていることに気づきやめることにしました。それでも読者ボタンは設置したかったためはてなブログのデフォルトのボタンを設置しました。
理想はこんな感じになる予定でした。
f:id:soosun:20161112121841p:plain
ただ、なぜかスマホのtwitterからアクセスしたときにデザインが崩れてしまいました。
f:id:soosun:20161112121945p:plain
どうしてこうなった^^;

読者ボタンの設置は
設定→詳細設定
そしてページを下の方にスクロールすると読者になるボタンがあります。 f:id:soosun:20161112122731p:plain
これをコピーして僕の場合だと

デザイン→スマートフォン→ヘッダ→タイトル下にペースト(はてなProのみ)
デザイン→スマートフォン→記事→記事下にペースト

スマホへの読者ボタンの配置は見落としがちですけど意外と重要だと思います。好きな箇所に貼り付けてみるのはありですね。

サイドバーにツイッターのタイムラインを表示

f:id:soosun:20161112173036p:plain
サイドバーにタイムラインの表示を行いました。そこまで日常のつぶやきはしませんがブログのエンタメ要素として置いておきました。ここからでもフォローしてくださる方がいれば僕は嬉しいです。
参考にしたのはこちらの記事です。簡単に設置できました。
www.mutant-tetsu.com

スマホのページャ下に詳しいプロフィールのURLを置く

スマホ画面からも詳しいプロフィールへ飛べるようにページ下部にリンクを貼り付けました。やり方が分からないので曖昧な場所に配置していますがお試しとしてリンクを貼り付けております。
f:id:soosun:20161112133529p:plain
もう少しデザインを良くするなり他の方法でもプロフィールページへ誘導できそうですので色々と試していきたいと思います。
勉強して改善する余地は大いにありそうです。
今やっている手順はこちらになります。

デザイン→スマートフォン→フッタ→ページャ下

■<a href ="自己紹介ページのURL">自己紹介とこのブログについて</a>

これを貼り付けております。

スマホにカテゴリ一覧を表示

スマホから見たとき自分が見たいカテゴリを探しやすいようにカテゴリ一覧を設置しました。
f:id:soosun:20161112141917p:plain

www.ituore.com shunさんのカスタマイズには毎度お世話になっております。スマホ画面が充実してきて嬉しいです。

記事下に読者ボタンを追加する

カスタマイズした読者ボタンを付けてみました。最近色んなボタンがありますよね。某ブログで寿司を頼むボタンを見つけたときの衝撃は忘れません。押したら大変なことになりました。色々考えることができる人の発想力が羨ましいです。
f:id:soosun:20161112143905p:plain
参考にしたのはこちらの記事です。
shiromatakumi.hatenablog.com 読者ボタンは気が向いたらもう少し手を加えるかもしれません。

グローバルメニューを追加する

f:id:soosun:20161112164608p:plain
先月の運営報告でやりたいことリストに入っていたグローバルメニューを追加しました。HOMEとお問い合わせ、後はカテゴリ内のものを選んでメニューボタンに加えました。雑記ブログなのでメニューを増やすかまとめていくかは今後検討していく必要がありそうです。
参考にしたのはこちらの記事です。
www.yukihy.com

記事下に関連記事を表示する

かなりオシャレに関連記事を表示することが出来るんですね。素直に感心してしまいました。回遊率(ブログに訪問して下さった方が複数ページを見る確率)アップのための設置となります。
ただ多少重くなるとのことなのでここも試行錯誤していかなければなりませんね。

・PC画面下部

f:id:soosun:20161112150319p:plain

参考にしたのはこちらの記事です。

www.yukihy.com

スマホとPCの記事下に読んで欲しい記事を置く

回遊率を上げるため記事下に人気記事(読んで欲しい記事)一覧を表示しました。PCとスマホ両方で採用しております。
こんな感じのやつです。
f:id:soosun:20161112150510p:plain

デザイン→カスタマイズ→記事→記事下
デザイン→スマートフォン→記事→記事下

<!--人気記事セレクション-->
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
<ul style="margin: 0px; padding: 0px;">
<li style="list-style-type: none; text-decoration: none; padding: 10px 0px;"><a style="background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;" href="人気記事タイトル①のURL"><span style="color: #ffffff;"><strong><span style="background-color: #ff4500;">人気</span></strong></span> 人気記事タイトル①</a></li>
<li style="list-style-type: none; text-decoration: none; padding: 10px 0px;"><a style="background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;" href="人気記事タイトル②のURL"><span style="color: #ffffff;"><strong><span style="background-color: #ff4500;">人気</span></strong></span> 人気記事タイトル②</a></li>
<li style="list-style-type: none; text-decoration: none; padding: 10px 0px;"><a style="background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;" href="人気記事タイトル③のURL"><span style="color: #ffffff;"><strong><span style="background-color: #ff4500;">人気</span></strong></span> 人気記事タイトル③</a></li>
</ul>
</div>

人気記事タイトルのURLの箇所に読んでもらいたい記事のURLを貼り、人気記事タイトルの箇所にはタイトルを入れると完成します。
僕の場合はこんな感じです。

<!--人気記事セレクション-->
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
<ul style="margin: 0px; padding: 0px;">
<li style="list-style-type: none; text-decoration: none; padding: 10px 0px;"><a style="background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;" href="http://www.soo-moomin.com/entry/2016/11/07/223000"><span style="color: #ffffff;"><strong><span style="background-color: #ff4500;">人気</span></strong></span> 【任天堂】20代男子が遊んでいた携帯ゲーム機を挙げていく</a></li>
<li style="list-style-type: none; text-decoration: none; padding: 10px 0px;"><a style="background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;" href="http://www.soo-moomin.com/entry/2016/11/04/220000"><span style="color: #ffffff;"><strong><span style="background-color: #ff4500;">人気</span></strong></span> 【神曲】20代男子がオススメするゲーム音楽40選【作業用BGM】</a></li>
<li style="list-style-type: none; text-decoration: none; padding: 10px 0px;"><a style="background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;" href="http://www.soo-moomin.com/entry/2016/11/08/211855"><span style="color: #ffffff;"><strong><span style="background-color: #ff4500;">人気</span></strong></span> 【新商品】ハーゲンダッツ/チーズベリークッキーを食べてみた!!</a></li>
</ul>
</div>

参考にさせていただいたのはこちらの記事です。

www.tontonpig.com

カスタマイズ以外でやったこと

Markdown記法へ変更

www.milkmemo.com

www.tokiwa-grove.com

Milkさんの記事を見て切り替えることを決意しました。「Markdown記法」を覚えれば今後記事を書くのにも相当楽になると思ったので熟読してやってみました。結果記事を書き上げるスピードがかなり上がったように感じます。
エディタにメモ書きしてまとめて、はてなにコピペして文字の装飾とかをやる。この流れにしてみましたが大変便利でした。記事を書いてくれたMilkさんに感謝です!
またタイムリーな記事でイエローさんもMarkdown記法で書くことをオススメしております!周りの方々がMarkdown記法に乗り換えている今流れに乗るしかない!!Markdown記法で書くメリット・デメリットを書かれておりますのでお二方の記事を参考にして流れに乗りましょう!!
僕もMarkdown記法を使い始めて1週間も経っていませんがとりあえず手を出してみるのが一番だなと思っています。覚えてしまえば書くことが楽になるのでぜひ手を出してみてください

続きを読むリンクを採用する

先月のやったことの振り返りにホーム画面を記事一覧表示にしたことがありました。記事一覧表示はPCからだと見やすくて便利なのですがスマホからだとホーム画面で記事がズラッと表示されてしまい見た目があまり好きではありませんでした。
そこで記事一覧表示をやめてしまい続きを読むリンクを採用しました。スマホのホーム画面は引き続き記事一覧表示にするカスタマイズをしていますがホーム画面で7記事だけ表示されます。スマホのホーム画面が30記事ほどズラっと並ぶよりはコンパクトになったのではないかと思います。そして後にホーム画面のフッダに手を加えていきたいので下準備ともなります。

・PC画面
f:id:soosun:20161112125423p:plain
PCは続きを読むリンクを採用!
・スマホ画面
f:id:soosun:20161112140014p:plain
スマホは記事一覧表示!

設定→詳細設定→headに要素を追加する

<script type="text/javascript">

if( location.href == '自身のブログのURL'){
location.href='自身のブログのURL/archive';
}
</script>
<noscript>
<p><a href="自身のブログのURL/archive">ブログ名</a></p>
</noscript>

この記述を削除しました。

メリット

スマホのホーム画面がスッキリした。

デメリット

元々導入したのはブログを軽くするためだったので元の状態に戻ってしまった。

逆に記事一覧表示がしたいという方はこれを付け加えてみてください。
ブログが軽くなりPCから見ると記事がスッキリ見えるようになります。

最新記事、人気記事、はてBの記事数を7つに変更

先週サイドバーにタブメニューを設置しスペースに余裕が出来たためそれぞれ表示する記事数を7つにしてみました。毎日更新出来れば最新記事に1週間分の記事を表示することができるため見たい記事があったら飛んでくれるのではないかと思っております。

デザイン→カスタマイズ→サイドバー→最新記事(注目記事)

表示件数で変更ができます。
f:id:soosun:20161112124751p:plain

ブログの概要を空欄にする

www.pojihiguma.com こちらの記事を見つけてヒヤリとしました。今まで普通にブログの概要のところにガッツリ書いていましたからね。googleさんからの評価を落とされないようにブログの概要を空欄へ変えておきました。

設定→詳細設定

ページの中段の検索エンジン最適化のところにあるブログの概要を空欄にします。
f:id:soosun:20161112143755p:plain

はてなブックマークでのコメントを削除

記事一覧表示をやめたことでホーム画面に記事ごとにはてなブックマークでのコメントが表示されてしまい見栄えがよろしくなかったため削除しました。はてブボタンが同じ機能を果たしているので特になくても困らないのかなと思います。

デザイン→カスタマイズ→記事→記事下のみに表示できるソーシャルパーツ

ここで取り外しができます。
f:id:soosun:20161112140734p:plain
付けっぱなしだとすべての記事にはてぶが表示されてしまい見栄えが悪くなります。
記事を開いたときだけ表示されるのなら良かったのですがホーム画面で記事ごとにはてブコメントが表示されてしまったためはてブコメントは削除しました。記事一覧表示だと気にしなくて良かったんですけどね。

お問い合わせフォームを作る

お問い合わせフォームを作りました。ブロガーさんが結構設置しているのを見かけましたので僕も設置しました。グローバルメニューにも加えたかったというのもあります。 参考にしたのはこちらの記事です。
www.mutant-tetsu.com

書き終えた記事の末尾に過去記事を貼る

記事を書き終えた後に関連性が有りそうな過去記事を貼り付けました。新規で訪問してくださった方にこんな記事も書いてるよというのを見て欲しかったため付け加えるようにしました。せっかく時間を掛けて書いた記事なので多くの方に見てもらいたいですよね。手間は掛かりますが確実に効果はあります。
f:id:soosun:20161112142457p:plain
ただあまりに関係のない記事を貼ると検索結果に影響が出るとの情報を見たのでほどほどにやっていこうかとおもいます。ここも他のブロガーさんのブログを見ながら自分にあったものを検討していきたいですね。

過去記事のリライト

アイキャッチ画像を変えてみたり、追記をしたり文字の装飾をしてみたりと色々と裏でやってました。あまり変にいじりすぎると記事の検索順位が落ちることがあるのでほどほどにやりましょう(経験者は語る)

最後に

今回ブログのカスタマイズでやったことはブログを読んでくださる方に使いやすくしてもらうことと回遊率アップがメインでした。結果として直帰率(1ページしか読まれない確率)はだいぶ下がりページビューも伸びております(申し訳程度ですが)。せっかく時間をかけて書いた記事なので過去記事も読んでもらいたいですよね。僕はまだまだ記事を書くのも下手ですがブロガーの先輩方の良いところを参考にして読者の方のため色々とチャレンジしていきたいと思います。