【5分で完了】はてなブログで記事上に関連記事を入れるソースコード

記事上に関連記事とかおすすめ記事を追加したいな〜

シンプルなやつが良いな〜

そして導入が簡単な関連記事が良いな〜

・・・パクリました！笑

関連記事を入れるとかなり見やすい！

超シンプル！！

設置は5〜10分くらいで終わります。

※設置したい記事が決まっていて慣れている人なら5分もかかりません。

確認しながら〜とかだと時間かかっちゃうかも。

関連記事を導入する方法
関連記事を設けるメリット
まとめ

関連記事を導入する方法

基本的には、管理画面の「デザイン」→「カスタマイズ」→「記事」→「記事上」や「記事下」にソースコードを入れれば完了しちゃいます！

最もシンプルなタイプ（梅）

👍人気&おすすめ記事セレクション

この形は多くの場所で見受けられますね！

ソースコードです↓

<p>👍人気記事セレクション</p>
<ul>
<li><span style="color: #000"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
</ul>

こんな感じですね〜♪

ちょっとオシャレにしたい（竹）

👍人気&おすすめ記事セレクション

文言テキストにアンダーラインと枠線の角をちょっとだけ丸くしたバージョン、さらに・ではなく数字にしているところも良いですね！

ソースコードです↓

<div style="border:1px solid #000; border-radius: 7px; padding: 1px;”>
<p><span class="fontb" style="font-size: 120%; background: -webkit-linear-gradient(transparent 70%, #FF847C 100%); margin-left: 8px;"> 👍●●好きな文言テキスト●●</span></p>
　 <ol>
　　<li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
　</ol>
</div>

この関連記事のフォーマット？を参考にしようと思ったのは、50キロのダイエットに成功し健康的な食事をモーレツにアップしまくっている田中さんのブログの影響が大きいです。

f:id:kiyopiko-business:20170227232742p:plain

めっちゃ良い！！

f:id:kiyopiko-business:20161121003147j:plain

素直にそう思いました。

私の場合は記事下ではなく記事上ですけど・・・パクってみました（笑）

もうちょっとSEO寄りにする（松）

一つ上の「2. ちょっとだけオシャレにしたい」と見た目は変わりませんが、Googleからは好まれている記述がこちらです。

<div class="pr">
　<p><span class="fontb catch"> 👍●●好きな文言テキスト●●</span></p>
　<ol>
　　<li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
　　</ol>
</div>

「記事上」の欄に上記ソースコードを入れるだけではなく、もう一手間かかります。

それは「style.css」に記述を行うことです！

/* 記事上に関連記事やPR記事を入れる */

.pr {
　border:1px solid #000;
　border-radius: 7px;
　padding: 1px;
}

.catch {
　font-size: 120%;
　margin-left: 8px;
　background: -webkit-linear-gradient(transparent 70%, #FF847C 100%);
}

.prcolor {
　color: #055db5;
}

.fontb {
　font-weight: bold;
}

style.cssに一手間加えるのが手間ではないという人はこちらを設定したほうが良いとされています。

竹と松の違いは装飾となるcssをHTML上に直書きしているかどうかです。

人間の目には同じであってもGoogleはソースコードを解釈します。

比較してもらうと分かると思うのですが、

<div style="border:1px solid #000; border-radius: 7px; padding: 1px;”>
<p><span class="fontb" style="font-size: 120%; background: -webkit-linear-gradient(transparent 70%, #FF847C 100%); margin-left: 8px;"> 👍●●好きな文言テキスト●●</span></p>
　 <ol>
　　<li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
　</ol>
</div>

と

<div class="pr">
　<p><span class="fontb catch"> 👍●●好きな文言テキスト●●</span></p>
　<ol>
　　<li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
　　<li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
　　</ol>
</div>

では、スッキリさが違いますね。

f:id:kiyopiko-business:20170110152404j:plain