はなうた横丁

 ふらっとゆる〜く息抜きに。

はてなブログProに変更してから追加したカスタマイズと参考にした記事まとめ。


 人気記事

  ✔ 【グッドポイント診断】ビビるくらい当たる長所診断があるらしいのでやってみた

 理想の高い人が彼氏(彼女)ができない本当の理由

 Amazonプライム会員のメリットがやばすぎて吹いたので紹介する


スポンサーリンク

   

f:id:mowmow18:20160204052938j:plain

 

もう気付いてる人もいるかもしれませんが

このブログ『はなうた横丁』は1月20日頃に
はてなブログProに変更しました!いえい
 
そこで、僕がおこなったカスタマイズと
そのときに参考にした記事をまとめてみました。
 
 

はてなブログProとは?

 
まずこれを簡単に説明すると、
ぼくが使っているこのはてなブログには
はてなブログPro」という
有料のプランがあるんですね。
 
はてなブログPro コースの種類
 
  • 一ヶ月コース → 1000円くらい
  • 一年コース → 月700円くらい
  • 二年コース → 月600円くらい
 
の3つがあります。
ぼくはとりあえず一年コースにしました。
 
Proにするメリット
 
  • はてな側の広告を非表示にできる
  • ブログを複数メンバーで管理できる
  • 独自ドメインを取得できる
  • キーワード自動リンクオフにできる
  • ヘッダフッタ非表示にできる
  • 通常3個までしか作れない複数ブログを10個まで作れる
 
魅力的ですね!
ぼくはProにするまでカスタマイズというものを
一切してこなかったので、Proにしたこともあり
ここで一気にカスタマイズしました。
 
その内容を書いていきます。参考になれば!
 
 

シェアボタンを変える

 

デフォルトのがこれ ↓

f:id:mowmow18:20160204024038p:plain

 

そして変更後これ ↓

f:id:mowmow18:20160204024046p:plain

 
これを変えるだけでオシャレ度が増すのと、
なぜかクリックしてシェアしたくなります(笑)
 
 
参考にした記事 ↓
 
 

フォローボタンの設置

 

f:id:mowmow18:20160204042351p:plain

↑ これです。

スマホとPC両方の記事下に設置しました。

 
見やすいし可愛い!
 
 
参考にした記事 ↓
 
 

見出しを変える

 
見出しを変えてから書くのが楽しくなり、
なにより見やすさが増しました!
 
文章の構成を、大見出し・中見出し・小見出しで
整理できるのもいいですね。
 
 
ぼくのはこんな感じ↓ 
 

大見出し

 

中見出し

 
小見出し
 
 
参考にした記事 ↓
 
 

日付に色付け

 
↓ 左上の日付が緑っぽくなっていますよね。
 

f:id:mowmow18:20160204030506p:plain

 
このように日付を変えると見やすくなり、
オシャレっぽくなります。
 
 
参考にした記事 ↓
 
 

アドセンスの貼り方

 
はてなブログはProにしないかぎり
広告の3分の2がはてな側の広告になるので
収益化が難しいわけです。
 
なのでまず、Proにしたら
はてな側の広告をすべて外します。
このときのスッキリ感はたまりません。
 

 

《やり方》
設定詳細設定GoogleAdSense広告を表示しない

 

 f:id:mowmow18:20160204024706p:plain
 
 
そして自分のグーグルアドセンス広告を
貼っていくのですが、貼る位置や広告タイプによって
収益に差がでてくるのです。
 
これは信頼度の高い八木さんの記事を
参考にさせていただきました。
 
  
参考にした記事 ↓
 
記事中広告はどうしても読みにくくなって
ストーリーに入り込めず記事の質が落ちるなと
おもったので僕はあえて入れませんでした。
 
 

はてなキーワードを外す

 
はてなブログには自動でキーワードに
リンクを付けてくれる機能があるのですが、
 
これがあると文字色が変わらなかったり
読者がリンクから他ページに飛ぶことによって
ページ回遊率が下がったりの可能性もあるようです。
 
ぼくは「なんか気になって読みにくいから」
という理由で外しました。
 

 

《外し方》
設定詳細設定キーワードリンクを付与しない
 
 f:id:mowmow18:20160204024817p:plain
 
 

文字の大きさやのフォントを変える

 

文字の大きさやフォントを変えるだけで
だいぶ雰囲気も変わって読みやすくなります。
 
ぼくの場合、
スマホ版の文字の感じは可愛くて気に入っているのですが、PC版の文字はなんだか堅苦しくて読みにくかったので変えました。
 
PC版の文字色も真っ黒ではなく
少し薄くしたら読みやすくなった気がします。
 

 

参考にした記事 ↓
 
 

目次を入れる

 
目次とはこれのことです ↓

f:id:mowmow18:20160204025426p:plain

 
内容盛りだくさんの記事だと、
はじめに目次があったほうが
全体図がつかめて分かりやすかったりします。
 
そして目次から読みたいところに
一気に飛べるのもGood。
 
 
CCSなどを設定しておけば
文中に「:contents」と入れれば見出しを読み取って
勝手に目次が出来上がります。すげえ。
 
(:contents の左右は、本来は「」→ [ ] です。目次が表示されてしまうので、あえてここでは変えています)
 
 
参考にした記事 ↓
 
 

引用のデザインを変える

 
ぼくはたまに
他ページから文章を引用するのですが
引用したときの表示がカッコわるいなあ、と
ずっとおもっていました。
 
そこでカスタマイズしたところ
だいぶカッコよくなりました!(なったよね?)
 
こんな感じです!
ぼくは灰色の枠にしています。
 
  
 参考にした記事 ↓
 
 

パンくずリストの表示

 

f:id:mowmow18:20160204025928p:plain

パンくずリストとは ↑ これのことです。
 
カテゴリーを何段階かで表示するものですね。
親カテゴリーと子カテゴリーを設定することで
Googleさんも読みやすくなるので良いんだとか。
 
  
参考にした記事 ↓
 
 

オシャレな画像付きおすすめ記事

 
この記事の下に表示されている
「おすすめ記事」のやつです。↓
 

f:id:mowmow18:20160204030123p:plain

 
PCもスマホも同様に表示されます。
 
画像付きのリンクでカッコよさに一目惚れ。
はてブ数の多いものから表示されるようです。
 
 
参考にした記事 ↓
 
 

スマホ画面に追尾式複合メニューバーをつける

 

f:id:mowmow18:20160204034607p:plain

 
↑ これです。下のグレーのやつ。
追尾式なのでスクロールしてもずっと固定されています
読む側にとってめちゃくちゃ便利。
 
読みにくくならないかが心配だったのですが
そんなことはありませんでした。
 
 

参考にした記事 ↓

www.yukihy.com

 

 

ツイート(タイムライン)の埋め込み

 

f:id:mowmow18:20160204044116p:plain

 
 ↑ これです。
スクロールするとそのままタイムラインを
次々に見ることができます。
 
Twitterと連動させたい方はぜひっ!
  
 
参考にした記事 ↓
 
 

まとめ

  
はてなブログをやっていて
収益化を目指している人なら
Proにするのは必須になってきます。
 
そしてブログが好きな人なら
Proにしたくなってくるかとおもいます。
 
ぼくは書いているうちに
Proに変更しない理由がないなと感じたので
すぐに変えました。
 
 
デザインが変わるだけで
「ブログ欲」が掻き立てられて、
早く書きたい!となります。笑
 
そして自分のブログに愛着が湧きます。
これが一番大事かなと。
 
参考になったら嬉しいです!