【SWELL】FontAwesomeのアイコンにリンクを貼る方法

  • URLをコピーしました!

スポンサーリンク

こんばんは、トウコ(@at_tokotoko)です。

もくじ

インタビューゲストのプロフィールをブログパーツに

インタビュー記事を書いてる途中から、インタビューゲストのプロフィールをカスタマイズしやすいようにブログパーツにしています。

File.1
大畑蘭

大畑蘭  

島根県出身のイラストレーター。
鳥取や島根といった地元山陰で活躍しつつ、リモートで東京でも仕事をしている。
トウコとは出身大学が一緒。

File.2

さかぐちまや   

埼玉在住。イラストレーター・漫画家として活動中。
X(旧Twitter)で飼い犬とのエッセイ漫画を連載。
トウコとは出身大学が一緒。

File.3

加藤雄一  

愛知在住の漫画家。ヤングキングにて「 やんちゃギャルの安城さん」を連載中。
過去連載作品には「ヒニイル」、「エウレカセブンAO」などがある。
トウコとは出身大学が一緒。

このような形で。

名前の横にアイコンがあると思うのですが、みんな色々活動されていて、そのリンクなんかも貼りたいなーと思っていたので、ちょっとしたボタン形式で貼ってみることにしました。

アイコンにリンクを貼りたい!

ところがリンク貼るのにちょっと工夫が必要でした。

SWELLだとアイコンを貼るのって簡単なので、最初は普通にツールのところからアイコンを出してそこに直接リンクを貼ったのですが
なーんかうまくいかなくて、リンク貼れてないんですね。
アイコンにリンクが当たらないというか。

検索して調べたところ、一番いい方法はショートコードを使うことでした。

私これまで勘違いしていたんですけど、ショートコードって「ショートコード」というブロックを出さないと反映されないんじゃないかっていう。
実はショートコードは段落とかで直接書いても表示されるんですね。
クラシックエディターだって普通にショートコード本文に入れてましたもんね。

あと画像もインラインで表示できるんですね。

とにかく本文に書く感じでショートコードは書けるので

[icon class="fa-solid fa-house"]

こんな感じでFontAwesomeのショートコードを書き込んで、そこにリンクを貼る。そしたらうまくいきました!

ただSWELLが用意してくれているアイコンでリンク貼ると下線が出るんですよね…

←このTwitterアイコンはSWELLが用意してるアイコンですが、こんなふうに下線がつきます。

FontAwesomeだと出ないのですが。うーん。

よければお試しください!

スポンサーリンク

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

もくじ