WordPressでブログカード、サムネイル付き内部リンクを作る方法

      2017/02/09

 色々な方のブログを徘徊させて頂いていると、記事内のリンクでサムネイル付きのとても見やすいリンク見た事ありませんか?

↑こんなやつ。ただのリンクに比べて断然かっこいい!しかも内容が分かりやすくてクリック率も上がりそう。

調べていくと、hatenaブログのブログカードというようなのですが、リンク参照元がhatenablog.comになっちゃうってのがいただけない。
アクセス解析してもhatenaからの流入になってしまうので便利だが困る。

WordPressで似たような方法はないか調べていたらいろいろ出てきました。

Sponsored Link

WordPressはURL貼付けでそのまま出来る

実は「WordpressはURLを貼るだけでサムネイル付きのリンクが出来るようになった」という記述を見つけ、試してみると。。。。

人気ブログ、読まれる記事作りませんか?ブログ運営の9つのコツ

こんな感じ。初心者って何も知らないから大変ですね。でも
「見やすくていいけど、何かデカくて邪魔だな」
っていうのが正直な印象。
しかも何故かカードの下に余白がいっぱい取られてる。何故だ。。。

どちらにしてもスマートじゃないのでこれはパスで他を調べてみるとこに。

他方法の参照元

寝ログさん

▶️URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法

こちらはURLを入力するだけでブログカード風に勝手に変換してくれる素晴らしい方法です。寝ログさんありがとうございます。

 

しかし、全部試しましたが残念な事に私のブログでは全く動作してくれませんでした。

私の知識不足がいけないのですね。。。。そうです。。。。

ふく丼さん

▶️【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード

こちらも、同じく素晴らしいコードです。上の方と違うところは、コードを使用して作る方法なので、一手間多いのですが、よくよく考えるとURLをカード化したくない時もあると考えればこちらの方が使い勝手が良いとも考えられます。ふく丼さんありがとうございます。

早速、ふく丼さんの方法を試してみたのですが、コピペしただけなのに何故か少し崩れてしまう。。。

反映はしているからCSSの問題だろうとにらめっこして、なんとかそれなりになりました。(正しい方法なのか強引なのかすら分かりませんが。。。)

人気ブログ、読まれる記事作りませんか?ブログ運営の9つのコツ
こんばんは、Mugcupです。  ブロガーにとって一番気になる事、「アクセスアップ」。初心者の場合

こんな感じです。
バランス修正して、記事タイトル色変更、抜粋分短くし、日付位置を変更してます。

こちらの場合コードを使用するので、早速AddQuicktagに登録していきます。

AddQuicktagにショートコードを登録する

▶️AddQuicktag

こちらはWordPress用プラグインでボタン一つでいろいろなコードを作成してくれる優れものです。必須プラグインなので、もしまだ入れていない場合はダウンロードしてください。

「設定」→「AddQuicktag」をクリック。

①分かる名前入力:今回はnlinkと付けました。
②開始タグに [nlink url=” と入力。[←は表示する為全角ですが半角に
 終了タグに ”] と入力。
③チェックを入れる。(3の箇所にチェックで、全部に反映します)
④変更を保存

エディタ画面でボタンが出てくるので、ショートコード覚えなくてもワンタッチで挿入できるようになりました。

 

 - Webデザイン, WordPress