Bloggerで 自分で選んだ関連記事(内部リンク)を綺麗に見せる方法

内部リンク

ブログで「関連記事」を載せることは とても大事なことだと知りました。
サイドバーにいくら「最新」や「人気」記事を表示してもモバイルからは見えないし、 Bloggerにはラベルから取得する「関連記事」のガジェットもありません。(T_T)
最近になって取り入れた「LinkWithin」は全く関連してない記事ばかり表示する始末だし・・

スポンサーリンク

手間でもピンポイントの関連記事を表示したい!

「この記事の過去記事はこちら」
「以前書いた●●の続きです」 などなど・・

テキストでリンクを貼るのは簡単ですが
どうせなら サムネイル入りで綺麗にリンクを貼りたいですよね。

現在、PCから見ると一番下に
「こちらもどうぞ」 と表示されてるのが「LinkWithin」ですが
せっかく取り入れたのに関係ない記事ばかり表示するので
本当に合わせて一緒に読んで頂きたい記事を表示する方法をずっと考えてました。

一番簡単なのが以前から外部リンクの紹介で使ってる
「ShareHtmlメーカー」
他のサイトやブログを画像付きでリンクを貼れます。
↓こんな風に

Lahat ng gusto |

問題は、「ShareHtmlメーカー」だと
1. 内部リンクなのにページ全体の画像をサムネイル化してしまう。
2. 画像は「小」と「大」で選べますが もっと小さくしたい。
3. 内部リンクなのに新窓で開いてしまう。

と、内部リンクを貼る上で大きく3つの不満がありました。

ShareHtmlをカスタマイズして内部リンク向けに

ShareHtmlをカスタマイズしてる方は多いのですが
私の好みとはちょっと違ってたので
こちらを訪れた方のために、まずは私の「関連記事」の表示方法は


関連記事
Google Blogger 回るボタンで下から上に戻るボタンを設置


Blogger ガジェット「動画バー」がダメダメなので変更


Google BloggerにアイコンWebフォントで可愛いワンポイント♪


Google Bloggerのガジェットにサムネイル付きの最新記事を表示する方法


↑こんな感じに手動で表示したい記事のみにして
サムネイルはアイキャッチ(記事の最初の画像)にしています。

「これでいい!」という方には
簡単に設置する方法を これから紹介しますね。(^^)


一番参考になったのがこちらのサイトでした。
ブログ記事を紹介するブックマークレット「ShareHTML」を改造。コピペで使えるサンプルコードを公開します。 | みんなの扉を開くカギ

でも、なぜか紹介してるコードでは登録してもShareHtmlが動作しないためクラス名を外すことにしました。

私のコードは↓こちら。

難しい説明はいらない方は↓は読み飛ばして下さい。


  width="60" height="60"の部分でサムネイルの大きさを決定していますが テンプレートによってはアイキャッチ画像が長方形の方が多いと思います。
正方形では縦横比が狂って変だと思う方はwidthで横幅を決めてheightでは無指示height=""にして下さい。

 内部リンク用なのでデフォルトでは3つあるtarget=”_blank”を2つ消しています。

 ページ全体をサムネイル化せず好きな画像を選択できるようにコメント部分へ、画像URLを入力してサムネイル化するため「コメント」は書けません。


登録して使ってみましょう。

上記の「私のコードは↓こちら。」のコードをコピーして
「ShareHtmlメーカー」へ行きます。

ShareHtmlメーカー設定1

1. デフォルトではコメント欄にタグが書かれてるので消します。
2. 上記のコードをペースト。
3. Bookmarkletを生成する をクリック。

ShareHtmlメーカー設定2

4. 生成されたコードをコピー。

5. デモおよびPC登録用をクリックすることでブックマークへ登録できるのですがブラウザによっては自動で動かないため手動で登録します。

Chromeで解説すると

ShareHtmlメーカー設定3

ブラウザの「設定」ボタンから
このページをブックマークする。をクリック。
開いた画面から
編集をクリック。

ShareHtmlメーカー設定4

6. 名前を自分が分かりやすいものへ変更します。
(例: 内部リンク用)など

7. URL部分を消して、先ほど生成されたコードを貼付けます。

8. 保存をクリック。

これで内部リンク用のプログラムをブックマークへ登録できました。

続いて、使い方に入ります。

【閲覧注意】超高速での猫の爪切り(動画あり) 

↑こちらの記事で解説すると

ShareHtmlメーカー設定5

 1. 記事を開いた最初の画像上で(最初でなくとも好きな画像でかまいません)

右クリック → 画像URLをコピーをクリック。

2. 先ほど登録したブックマークをクリック。
Input Memoという画面があらわれます。

ShareHtmlメーカー設定6

3. 記入欄へ先ほどコピーした画像URLをペースト。

4. OK をクリック。 

5. すると画面最上部へ↓このような画面が現れます。

ShareHtmlメーカー設定7

6. HTMLを選択するをクリックしてから コードをコピーして下さい。

お疲れ様でした♪(^^)

コピーしたコードを記事作成画面HTMLからペーストすれば
記事内へ貼り付きます。

貼付けると↓こんな感じです。
【閲覧注意】超高速での猫の爪切り(動画あり) | Lahat ng gusto

↑これを、私は文字の大きさを「大」にしてるので「大」へ変更して
「Lahat ng gusto」のブログ名も消してwebフォント「リンクマーク」を入れてます。

↓変更後
【閲覧注意】超高速での猫の爪切り(動画あり) 

 サムネイルが小さいのでシャドウは似合わなかったので入れませんでしたが入れることもできます。

その場合は上記「参考になったサイト」で解説してますが

<div>でクラス名を付けてから、CSSで影を適用します。

私のように、ShareHtmlで登録できなくても
記事作成HTMLコードを貼付けるときに<div クラス名>を追加してやればOKです。

かなりアナログな手法が多く手間はかかりますが
テキストだけで内部リンクへ誘導するよりは見栄えがよくなったかな?と思います。(^_^)v

更にデザインを進化させました♪ こんな感じに(^^)

最後までご覧いただき ありがとうございました。

この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る