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

からたちねみち

歌を作っています。Vocaloid、主に結月ゆかり、またはiPhoneアプリ開発

記事下に「他にこんな記事も読まれています」を追加 - はてなブログカスタマイズ

ブログ

どうもこんばんは、bettychangです。

 

今日はブログの記事下にこんなのを追加してみました。

f:id:bettychang:20160403210818j:plain

 

記事の下に他の記事を表示して紹介してくれる機能です。

 

というわけで、ざっくりと手順をご紹介します。

 

リンクを作成する

サービス提供サイトにアクセス

LinkWithin - Related Posts with Thumbnails

 

LinkWithinという海外のサイトです。

 

アクセスすると、下記の入力欄が画面に表示されているので記入します。

f:id:bettychang:20160403203241j:plain

①メールアドレス

②自分のブログのURL

③ブログの環境を選びます。はてなブログならother

④表示する記事の数を3〜5の中から選ぶ

⑤背景が暗いブログの場合はチェックする

 

入力したら Get Widget!ボタンを押します。

 

スクリプトが表示されるのでコピーする

 

f:id:bettychang:20160403203843j:plain

コピーします。

 

ブログの記事下に貼り付け

デザイン設定画面へ

f:id:bettychang:20160403204431j:plain

ダッシュボードから「デザイン」を選択します。

 

もしくは、「デザイン」設定画面はブログ画面右上に表示されている「自分のアカウント名」からでもいけます

f:id:bettychang:20160403204650j:plain

 

「記事下」を表示

画面左に下記ウインドウが表示されますので、「記事」を選択します。

f:id:bettychang:20160403205511j:plain

  1. スパナアイコンを選択
  2. 記事をクリック

「記事下」を表示

記事の設定欄が表示されますので、下にスクロールしていくと、「記事下」という枠があります。

f:id:bettychang:20160403205658j:plain

 

 

記事下にスクリプトを貼り付ける

記事下の枠に、先ほどLinkWithinサイトでコピーしたスクリプトを貼り付けます。

f:id:bettychang:20160403210230j:plain

なお、コピペしたままの状態だと、記事の紹介文字が英語になっているので、linkwithin_textを<script>の箇所に追記します。

linkwithin_text = '表示したい文字列'

 

変更を保存する

f:id:bettychang:20160403210547j:plain

 

これで作業完了です。正常に表示されるか確認してください。

 

以上です。ご覧頂きありがとうございました!