皆さんこんにちは。
しうです。
今回は自分がブログを書いていて疑問に思っていたこと・その解決方法について書いていこうと思います。
はじめに
みなさんブログ作成の時に内部リンク・外部リンクを使っているでしょうか?
内部リンク・外部リンクは自分の言いたいことを補強するのにとても便利です。
そんなリンク方法については大まかに分けて以下の2通りのやり方があります。
- 画像無しの内部・外部リンク
- 画像付きの内部・外部リンク
今回はこれらの方法について紹介していきます。
画像無しの内部・外部リンク
画像無しの内部・外部リンクとはこんな感じのリンク方法になります。
(よく見る青下線で示されるやつです。ちなみに上のリンクはホームに飛びます。)
これに関してはブロックエディタなら共通で設定をすることができます。




するとこんな感じで指定した文字にリンクを作成することができました。

画像付きの内部リンクについて
これに関しては非常に簡単です。
ブロックエディタ上で表示したいページのURLを普通の段落上にコピペするだけです。
↓こんな感じ

↓ブロックエディタ上では以下のように表示されています

この時リンク貼り付けで貼り付けると画像無しでの文字リンク(URL)となります。
そのため画像付きの内部リンクを表示させる場合は書式なしの貼り付けにしてください。
またWordPressテーマのSWELLでは以下の方法でも表示させることができます。



画像付きの外部リンクについて
これは一般的にはプラグインで機能を追加することになります。
外部リンク作成プラグインとしては「Pz-LinkCard」が有名です。

本プラグインを利用した外部リンクの手順としては

↓こんな感じ

↓表示させるとこんな感じになります。(例としてGoogleを表示させました。)

またSWELLなら画像付き外部リンクについても拡張プラグインなしでブロックエディタ上で作成できます。
方法としてはSWELLの画像付き内部リンクと同様にメニューの中から「関連記事」を選択し、外部リンクに切り替えてURLを入力するだけです。
↓こんな感じ

まとめ
今回この記事を作ったのは前回allbirdsの靴のレビューをしたときに、画像付きで商品ページのリンクを出したいなーと思って調べたことがきっかけです。
その時はプラグインを追加しなければできないのか―と思っていましたが、この記事を書いているときに、SWELLの「関連記事」メニューの中に外部リンクが存在することを知りましたw
(今まで過去の記事を表示させるときに「関連記事」を使用してたのになぁ…)
しかもSWELLの方がシンプルでデザインが良いです。
こういう細部まで配慮が行き届いているのがSWELLの良さですね。
なんだかSWELLの販促みたいなまとめになってしまいましたが、今回はここまでにしておこうと思います。
それでは次の記事で。