ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

WordPressで自分のサイトの記事へのリンクを貼るときは、URLをそのまま書くだけでOK。

当サイトでは今まで、その記事と関連している記事のリンクを貼るとき、リンク付きテキストを使用していました。

でも、ただの一行テキストよりは、アイキャッチ画像があるリンクの方が、目立ってわかりやすいでしょう。

その画像付きリンクを簡単に作る方法について。

広告

以前までの書き方。

当サイトでは記事を書くとき、JPMarkdownというプラグインを使っているので、マークダウン記法で記事を書くことができます。

よって、リンクを貼るときは、下記のような書き方をしていました。

[テレビの録画はUSBメモリでも出来る。HDDの代わりに使おう。 – ワイヤード・パンチ](https://wiredpunch.com/%e3%83%86%e3%83%ac%e3%83%93%e3%81%ae%e9%8c%b2%e7%94%bb%e3%81%afusb%e3%83%a1%e3%83%a2%e3%83%aa%e3%81%a7%e3%82%82%e5%87%ba%e6%9d%a5%e3%82%8bhdd%e3%81%ae%e4%bb%a3%e3%82%8f%e3%82%8a%e3%81%ab%e4%bd%bf/)

もしJPMarkdownを使わず、そのままHTMLタグで書く場合は、下記のようになります。

<a href="https://wiredpunch.com/%e3%83%86%e3%83%ac%e3%83%93%e3%81%ae%e9%8c%b2%e7%94%bb%e3%81%afusb%e3%83%a1%e3%83%a2%e3%83%aa%e3%81%a7%e3%82%82%e5%87%ba%e6%9d%a5%e3%82%8bhdd%e3%81%ae%e4%bb%a3%e3%82%8f%e3%82%8a%e3%81%ab%e4%bd%bf/">テレビの録画はUSBメモリでも出来る。HDDの代わりに使おう。 – ワイヤード・パンチ</a>

でも、これらを画像付きリンクに変えようとした場合は、さらに編集が必要になります。

ただURLを書くだけでOK。

ひとつ前に書いた記事にて、当サイトの記事のURLを載せる必要があったので、特に何も考えることなく、そのままURLを本文入力欄に書いてみました。

https://wiredpunch.com/%e3%83%86%e3%83%ac%e3%83%93%e3%81%ae%e9%8c%b2%e7%94%bb%e3%81%afusb%e3%83%a1%e3%83%a2%e3%83%aa%e3%81%a7%e3%82%82%e5%87%ba%e6%9d%a5%e3%82%8bhdd%e3%81%ae%e4%bb%a3%e3%82%8f%e3%82%8a%e3%81%ab%e4%bd%bf/

すると、実際に記事を表示してみると、下記のような画像つきリンクに、自動的に置き換わっていたのです。

テレビの録画はUSBメモリでも出来る。HDDの代わりに使おう。

記事のアイキャッチも自動的に挿入されており、非常に見栄えの良いリンクになっていました。

TwitterやYoutubeのリンクも同様。

そもそもTwitterやYoutubeのリンクも、自動的に画像つきに置き換わるのは知っていたのですが、Wordpressの自分のサイトのリンクも自動的に画像つきになるのは、初めて知りました。

せっかくなので、TwitterとYoutubeのリンクも、自動作成を試すことにします。

https://twitter.com/wiredpunch/status/1024267972955652097

たとえば、私のアカウントのとあるツイートのURLをそのまま書いてみます。

すると、上記のようにツイート内容を含んだリンクになりました。

https://www.youtube.com/watch?v=jGlsqqTSc7I

今度はYoutubeのリンクを貼ってみます。

すると、動画が自動的に埋め込まれます。

Youtubeの埋め込みタグを出力したときと、ほとんど同じですね。

HTMLタグを書くよりも入力欄がすっきりするので、あとから記事を編集しやすいという利点があるでしょう。

そのままURLを載せたい場合は?

もし、そのままURLを書いたとしても、勝手に埋め込みに変換されてしまいます。

その場合、どうすればいいのでしょうか。

今回の場合は、マークダウン記法の「~~~」でURLの上下を書くことで、<pre><code>で囲んだことと同じになっています。

でも、タグで囲わずそのまま平文で載せる方法は、まだ調べられていません。