コピペで!はてなブログの記事下はてなid前に固定HTML挿入を自動化する方法

 

カスタマイズは自己責任でお願いします。 また、プレビュー等でよく検証した上でご自身のブログに反映してください。

 

ブログをせっかく見に来てくれた人に「こんな記事もおすすめ」と提示したい場合に有効かもしれない方法を紹介。ブログの直帰率低下対策となればと。

自分のメインブログJailbreakではこんな具合に表示されています。

f:id:DankanTakeshi:20161109230019p:plain

 

こんな感じでテキストリンクを固定で入れるのを毎回ではなく、javascriptとhtmlを使用してカスタマイズ。

 

設定方法

ダッシュボード→デザイン→カスタマイズ→記事上下のカスタマイズ→「記事ページのプレビュー」を設定→「記事下」または「記事上」

<変更用ネタコード>

<!-- おすすめ記事追加 start -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-footer');
    $target.before($('.recomend-articles'));
}, false);
// ]]></script>
<!-- 記事に追加するhtml start -->
<fieldset class="recomend-articles" style="border: 1px solid  #000000; padding: 10px;">
<legend>▼おすすめ記事▼</legend>
文言を入れる1<a href="ブログのURLを入れる1">リンクとして表示する文字列1</a><br/>
文言を入れる2<a href="ブログのURLを入れる2">リンクとして表示する文字列2</a><br/>
文言を入れる3<a href="ブログのURLを入れる3">リンクとして表示する文字列3</a>
</fieldset>
<!-- 記事に追加するhtml end -->
<!-- おすすめ記事追加 end -->

実際に設定したソース

<!-- おすすめ記事追加 start -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-footer');
    $target.before($('.recomend-articles'));
}, false);
// ]]></script>
<!-- 記事に追加するhtml start -->
<fieldset class="recomend-articles" style="border: 1px solid  #000000; padding: 10px;">
<legend>▼おすすめ記事▼</legend>
1.父の日に贈ったG-SHOCK→<a href="https://dankantakeshi.hatenablog.com/entry/2015/04/09/140302">【レビュー】G-SHOCKなら海外モデルがオススメ</a><br/>
2.衛生的で使いやすいシャンプーディスペンサー→<a href="https://dankantakeshi.hatenablog.com/entry/Shampoo_Dispenser">便利なシャンプーディスペンサーを新調する</a><br/>
3.オシャレな音楽をお探しなら→<a href="https://dankantakeshi.hatenablog.com/entry/2015/11/22/000841">【まとめ】オシャレな音楽が欲しかったらこのアルバムを聴け!</a>
</fieldset>
<!-- 記事に追加するhtml end -->
<!-- おすすめ記事追加 end -->

 

<変更ポイント>

①「文言を入れる1~3」はリンクにならない(クリックしても何も起こらない)文字列を入力します。

②「ブログのURLを入れる1~3」に各文言に対応するブログのURLを入力する。

→もし、URLが不明であればご自身のブログを開いてURLを確認してみてください。

③「リンクとして表示する文字列1~3」はリンクになる(クリックすると入力したURLに飛ぶ)文字列を入力します。 

 

追加するリンクは一旦3つになっていますが、下記をひとかたまりとしてfieldset内のlegend後に追加すれば5でも10でも追加できます。

文言を入れる<a href="ブログのURLを入れる">リンクとして表示する文字列</a>

改行が欲しければ、brを</a>の後ろに記述してください。

<br/>

 

ソースコード解説>

.entry-footerがタイムスタンプやはてなスター等の塊で、その前に記事に追加するhtmlをclassで指定して追加しています。

はてなブログの構造やclass名が変わると対応できなくなる可能性あり。

※参考情報

はてなブログのidとかclassとか - kyabana's blog

 

$target.before を $target.after にして、var $target = $('.entry-footer') の entry-footer'を別なクラスを指定すると、指定した場所の後に追加なんかもできる(はず。未検証)

 

<注意点>

今回追加部分の文字の大きさは元々設定されているものになってしまうため、変更したい場合はCSSを別途設定する必要があります。

自分の場合は以下の様に設定。

ダッシュボード→デザイン→カスタマイズ→記事上下のカスタマイズ→「記事ページのプレビュー」を設定→デザインCSS

/* おすすめ記事のフォントサイズ調整 */
.recomend-articles {
    font-size: 80%;
}

「文言を入れる1~3」は省略できて、リンク文字列だけにすることはできるのでご自由にどうぞ。

 

作成した背景

メインブログでは「こんな記事も書いています」と自動で表示されるようにはなっているのだが、画像があるため重たいのが嫌だった。

そこで、文中にアドセンスを差し込むスクリプトを使用させてもらっているので、それを利用して自動でHTMLを挿入できたら楽だなと思いやってみたら案外スラスラできたというわけ。

※参考

はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ

【改良版】コピペで簡単!はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ

 

今回は自分のブログを紹介だったけれど、アフィリエイトのURLを差し込むことなんかも可能で、重たい画像付きのリンクもよいけど文字にリンクの軽さは魅力かもなと。

もちろん、売り上げにつながりやすい記事への導線にするのも良いかもしれないし、単純に自己紹介や問い合わせなんかを固定表示する方法の一つでもよいかも。自己紹介や問い合わせへの導線に豪華な画像が必要かというと、目的を考えれば必要なさそうなので。

 

こんなことできる?等可能な限り質問にはお答えしたいと思いますので、このブログへのコメントやお問い合わせをいただければ幸いです。