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

副業リテラシー

副業に関するネットやマネーに関する情報を発信するブログ

はてなブログのデザインカスタマイズの中で初心者でも簡単にできるものだけまとめてみる

スポンサーリンク
あとで読む

はてなブログに限った話ではないが、ブログをカスタマイズすると、何がいいのか。実際にいじくりまわしてみて、いいことは3つあることに気が付いた。

 

デザインがきれいなだけで、読者からの信頼度が上がる。

自分のブログ内を徘徊してくれるようになる。

自分のブログに愛着がわく。

 

ブログの滞在時間が長くなり、Google先生からの評価がよくなる。愛着がわいてブログを更新しよう(というより、ブログを育てていこうという感覚に近い)という気になる。いいこと尽くめだ。

 

だが、プログラミングとかまったく知らないWeb初心者のぼくにとって、ブログのカスタマイズというのはなかなか至難の業だった。そこで、はてなブログをカスタマイズしていく上で、簡単コピペで実装できて、本当に参考になった記事を一挙に公開していく。ぜんぶの記事を見たら、このブログの完コピができるよ。

合わせて読みたい

【随時更新】はてなブログ初心者へ。これからブログを始める人に必要な情報がすべて1つにまとまっている、ブログ史をつくってみた。

 

 

最初に注意点 

はてなブログでのカスタマイズの方法は、「デザイン」→「PC」・「スマホ」をいじる感じ。それぞれ下に「ヘッダ」とか「記事」とかあるので、そこにコードを追加していこう。(小さいのでアップしてみてください汗)

f:id:dHarada:20170102122039p:plain

f:id:dHarada:20170102122423p:plain

 

スマホ版ではしっかり<style>に囲まれているかを意識しておこう。「なんかうまくいかない…むりげー…」と思ったら、<style>に囲まれているかを一番に確認したいところだ(ちなみに、PCのデザインcssにコードを埋め込む場合は、この記述は必要ない)。

<style type=text/css>
/*---ここにコードを入れる---*/ </style>

 

 あと自分も最初にわからなかったのが、HTML編集。パソコンで記事を書いてるとき、ここを編集できる。

f:id:dHarada:20170102123057p:plain

記事の執筆中に、ここをいじることも多々あるから、存在ぐらいは覚えておこう。

 

エントリーの文字の大きさの変更

当ブログでは文字の大きさを少し大きくしている。はてばブログの初期設定だと文字小さいよね。。参考にした記事はこちら。ちなみに当ブログは、PC18px、スマホ17pxだ。

nukio0803.hatenablog.com

 

見出しデザインの変更

まずは見出しのデザインを変えた。見出しっていうのは、上の紫の文字にグレーの背景のやつね。この記事を参考にした。バリュエーションが多いからいろいろ選べるのが嬉しい。

www.yukihy.com

  

目次

目次のつけかた

目次を挿入したい行に、次のように[:contents]と記述します。

めっちゃ簡単。カスタマイズってほどでもないけど。本文に追加したら自動で、つけた見出しを目次にしてくれる

staff.hatenablog.com

 

 

目次のデザイン変更

目次に番号をふったり、目次の背景の色を変更したりすることもできる。

www.bombkun.com

 

SNS関連

SNSへのシェアボタンの設置

ぼくは2Dのフラット型にしたが、3Dのボタンもあり、なんとも可愛らしいものであった。これは愛着がわくぞ。

www.yukihy.com

 

SNSフォローボタンの設置

フォローボタンも可愛らしいデザインが豊富だ。このブログでは以下の記事を参照にした。めっちゃいい感じになるぞ。

www.ituore.com

 

カテゴリ(グローバル)メニューの設置

PC実装図。これでだいぶおされに。

f:id:dHarada:20161231013254p:plain

参考にした記事。

www.yukihy.com

  

スマホの実装図。実際にこれを設置したことで、確実にブログ内の回遊率は上がっている。カテゴリが見えているのがいいのかも。

f:id:dHarada:20170331201105p:plain

参考にした記事。(ゆきひーさん大変お世話になっております) 

www.yukihy.com

 

関連記事の表示

フッターに自動的に関連記事を表示する

関連記事の表示は、ブログ内の回遊率を上げるのに必須。ここはシンプルなのが一番いいと思うので、このデザインはかなりのお気に入り。

www.yukihy.com 

 

本文中に”合わせて読みたい”を表示する

これ、目立つからめっちゃ気に入っている↓

合わせて読みたい

はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】 - いつまでもアフタースクール

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

www.buntadayo.com 

 

サイドバーの固定

サイドバーをスクロールしていって、記事の下の方になってくると、サイドバーが真っ白になってしまう。これはもったいないので、サイドバーの一番下に表示されているメニュー(モジュールという)を固定してしまうという技。プロフィールとかを固定するといいかもね。

www.no-overtime-day.com

  

記事下にプロフィールを張り付ける

これはプロフィールだけじゃなくて、他にもいろいろ応用が利く。ぼくの場合は、オリジナルLINEスタンプの宣伝を張り付けている。参考にした記事はこちら。

www.miyahaya.com

 

ページトップへ戻るボタンの設置

右下についている。薄い黒くて丸いボタン。あれを押せば、ページのトップに戻ることができる。これを実装したことでブログへの愛着度が倍増した。(実装図)

f:id:dHarada:20170331201731p:plain

こちらの記事を参考にした。

nohack-nolife.hatenablog.com

 

ぼくのページトップへ戻るボタンだが、角に丸みを出し、ちょっと透けさせている。その方法は、 下記のコードを写真のとこに挿入すればいい。

    border-radius:5px;
    background-color:rgba(0,0,0,0.4);

f:id:dHarada:20161231023855p:plain

 

検索窓を設置する

f:id:dHarada:20170331201134p:plain

検索窓を置くことでユーザビリティが高まり、ブログ内の回遊率も上がることを期待して設置した。参考にした記事はこちら。

chipspd.hatenadiary.jp

 

本文のカスタマイズ

引用時のデザイン

これを実装すると、大きなコロンが表示され、引用したとき可愛らしいぞ。

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

www.task-notes.com

 

太字に蛍光ペン風のマーカーを引く

これは、太字にした箇所に自動的に蛍光ペン風のマーカーを入れることができるコードだ。もう愛着でしかない。参考にした記事はこちら。

mu2in.hatenablog.com

 

吹き出しで会話形式にする方法

こんな感じで吹き出しをつけて 会話形式にすることができるんだ。
参考にした記事はこちら。 

shiromatakumi.hatenablog.com 

  

アドセンス広告の配置

文中にアドセンスを設置する

アドセンス広告は配置とサイズが重要であるとよく耳にする。その配置に関してだが、文中にアドセンス広告を入れることを強くおすすめする。自分の場合、収益が大きくアップした。下記の記事を参考にした。

uxlayman.hatenablog.com

 

 

記事直下にアドセンスを設置する

シェアボタンが記事の終わりと認識している人が多いらしく、そのシェアボタンよりも上にアドセンスを配置することで、収益性を上げることができる。参考にした記事はこちら。

chipspd.hatenadiary.jp

 

だいちが開発したカスタマイズ

ここからは当ブログの著者が開発したカスタマイズだ。問題が発生したらすぐに教えてほしい。そして不備の出る可能性もないこともないので、きちんと元のコードをメモした状態から取り組んでほしい。

※責任は一切負いかねますので、自己責任でお願いします。

「おすすめの記事たち」の設置

f:id:dHarada:20170331202901j:plain

以下のHTMLを「記事上」にコピペ(PC,スマホ同様)

<div class="recommended"><i class="blogicon-good"><b><span class="rere"> おすすめの記事たち</span></b></i></div>
<div class="re"><ul>
<li><a href="URL">記事のタイトル</a></li>
<li><a href="URL">記事のタイトル</a></li>
<li><a href="URL">記事のタイトル</a></li>
</ul></div>

で、以下のcssをPCなら「デザインcss」に、スマホなら上記と同じく「記事上」に<style></style>で囲んでコピペ。

.recommended{
    margin-top:10px;
    font-size:22px;
    font-family: "Tsukushi B Round Gothic","筑紫B丸ゴシック";
    font-weight: bold;
    border-radius:3px;
}
.rere{
    font-size:20px;
}
.re{
     border-bottom: 2px solid darkgray;
     margin-bottom:10px;
}
「あとで読む」の設置

f:id:dHarada:20170331202948j:plain

以下のHTMLをおすすめの記事たちの直後にコピペ(PC,スマホともに「記事上」)

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button2" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"> あとで読む</i></a>

それから、以下のcssをPCなら「デザインcss」に、スマホなら「記事上」に<style></style>で囲んでコピペ。

.hatena-bookmark-button2{   
  background: #00A4DE;
     float:right;
     font-size:10px; 
     color:white;
     padding:3.5px;
     border-radius:3px;
}
記事直下のフォローボタン

f:id:dHarada:20170331203003j:plain

以下のHTMLを「記事下」にコピペ(PC,スマホともに)。「ここにアカウント名を入れる」ってところには、@マークは不要なので注意。

<div id="my-footer">
<div class="follow-btn2">
<style>/*記事直下のフォローボタン*/</style>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=ここにアカウント名を入れる" target="_blank"><i class="blogicon-twitter lg"> フォローする</i><br></a>
<p class="writer">Writen by あなたの名前</p></div></div>

で、以下のcssをPCは「デザインcss」に、スマホは「記事下」に<style></style>で囲んでコピペ。

.follow-btn2{
    width: 100%;
    text-align: center;
    margin: 10px 0px;
    float:right;
    border-bottom:2px solid darkgray;
}
.follow-btn2 .writer{
    float:left;
    font-size:11px;
    margin-bottom:2px;
}
.follow-btn2 .twitter {
    color: #00ACEE;
    background: #ffffff;
    float:right;
    font-size:10px;
    margin-bottom:2px;
}
.follow-btn2 .twitter:hover {
    color: #ffffff;
    background: #00ACEE;
    transition: all .3s;
}

 

もっとカスタマイズしたい!

ゆきひーさんもまとめ記事をつくっている。もっと詳細にカスタマイズしたい人は必見。

www.yukihy.com

 

スマホデザインをもっとカスタマイズしたいのであれば、LITERALLYさんの記事がおすすめ。シンプルで無駄がなく、それでいてカッコいい。

tsukuruiroiro.hatenablog.com

 

WEBの色見本

これは、カスタマイズを行っていく中で、自分好みの色に変えたいときに使える色見本だ。

www.colordic.org

 

読んでいてわかる通り、ブログに多大なる愛着が湧いてしまった私だ。カスタマイズにハマりすぎると止められなくなるから要注意だ。

合わせて読みたい

【随時更新】はてなブログ初心者へ。これからブログを始める人に必要な情報がすべて1つにまとまっている、ブログ史をつくってみた。