【SWELL】関連記事ブロックのテキストリンク前アイコンを変更するカスタマイズ方法

2021 7/26

2021年7月26日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

初心者

関連記事ブロックをテキストリンクの前に表示されるアイコンって変更できないの？

そんな人向けの記事です。

関連記事ブロックに追加された「テキストリンクで表示する」オプション。このオプションを有効化するとアイキャッチは表示されずシンプルにテキストリンクが表示されます。

ですが、そのテキストリンクの前にアイコンが表示されますよね（下記画像参照）？

【基礎知識】関連記事ブロックって何だ？

初心者

テキストリンクだけで表示できる機能が追加された

2021年7月13日にリリースされたSWELL2.4.0では関連記事ブロックに「テキストリンクのみで表示する」オプションが追加されました（SWELL2.4.0リリース情報）。

SWELL2.4.0未満でもアイキャッチ画像を表示しないオプションがありましたが、キャプション付きブロックで表示される仕様。

かんた

シンプルにテキストリンクだけを表示させるには記事タイトルとURLを手打ちするしかありませんでした。

SWELL2.4.0のアップデートでは関連記事ブロックを、シンプルにテキストリンクだけを表示させることが出来るようになりました。

このオプションはサイト全体を通しての変更ではなく、関連ブロック単位で設定する仕様です。

「目立つようにブログカード付きで表示させたいなー」なんて時は、これまで通りの使い方ができます。

テキストリンク前のアイコンを変更するカスタマイズ

関連記事ブロックで「テキストリンクで表示する」を選択すると、テキストリンクとその手前にアイコンが表示されます。

テキストリンクとアイコン

このアイコンをダッシュボード上から編集する機能はありません。「アイコンを別のものに替えたい！」「色を赤にしたい！」「アイコンを非表示にしたい！」といった場合には独自カスタマイズが必要です。

かんた

本記事では、次の5つのカスタマイズ方法をCSSサンプルコード付きで解説します！

関連ブロックのアイコンをカスタマイズ

アイコンを別のアイコンに変更する方法
アイコンのサイズを変更する方法
アイコンの色を変更する方法
アイコンの枠線を消す方法
アイコンを消す方法

①アイコンを別のアイコンに変更

アイコンを初期設定のものから別のアイコンに設定する方法です。

コードはCSS。カスタマイザーの「追加CSS」に貼り付けるだけです。

i.c-blogLink__icon::before{
content: "\e901" !important;
}

サンプルコード2行目の「"\e901"」で表示するアイコンを指定しています。

かんた

SWELLで利用できるアイコンならどれでも指定できます↓

利用できるアイコンの一例

アイコン	CSS
	`\e936`
	`\e91d`
	`\e915`
	`\e914`
	`\e934`
	`\e923`
	`\e921`
	`\e91a`
	`\e929`
	`\e935`
	`\e96b`
	`\e96b`
	`\e9cd`
	`\e9da`
	`\e9d9`

アイコン

その他のアイコンはSWELL公式ページを確認しましょう。

参考

SWELL公式サイト「SWELLで使えるアイコンの一覧」

②アイコンのサイズを変更する方法

アイコンの「サイズ」をアレンジする方法です。

CSSセレクタは先程のサンプルコードと同じで、font-sizeプロパティーでアイコンのサイズを指定します。

i.c-blogLink__icon::before{
font-size:1em
}

サンプルコード内の「1em」を大きな数値にしたり小さな値に変更することでアイコンサイズを自由にアレンジできます。ちなみに初期値は「.8em」です。これより大きな数字にすればアイコンは大きくなります。

かんた

1emぐらいが上限かなと思います。

③アイコンの色を変更する方法

アイコンの色を変更するカスタマイズです。CSSセレクタは①、②と同じです。

関連記事のアイコンは「枠線」と「アイコン」の2つのスタイルが適用させています。
colorだけでなく、borderの設定も必要です。

まずはアイコンの色を変更する場合のコードです。

i.c-blogLink__icon::before{
color:black;
}

サンプルではblack＝黒を指定しました。

黒以外を指定したい場合は、blackの部分を任意の色に変更してください。色の指定は「#000000」形式のカラーコードでもOKです。

続いて枠線です。先程とはセレクタが違うので注意しましょう。

i.c-blogLink__icon{
border:1px solid black;
}

④アイコンの枠線を消す方法

アイコンは枠線付きで表示されます。枠線を消したい場合は次のコードを貼り付けましょう。

i.c-blogLink__icon{
border:none;
}

⑤アイコンを消す方法

そもそもアイコン自体が不要だ！という人向けのコードです。

テーマファイルに変更を加えずCSSのdisplay:noneを使うことで関連記事ブロックのアイコンを消すことが出来ます。

i.c-blogLink__icon{
display:none;
}

⑥アイコンをフワフワ動かす

アニメーションを付けてアイコンを少し動かすカスタマイズです。jQueryやJavaScriptは使いません。

上下に移動するアニメーション

サンプル

【WordPress】おすすめの「和風」テーマ｜旅館や和食系飲食店向けならコレ

CSSだけで実装できる簡単なアニメーションです。

.c-blogLink__icon{
	  animation: kanta-link 4s ease infinite;
}

@keyframes kanta-link {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-6px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(0) }
  50% { transform:translateY(-6px) }
  100% { transform:translateY(-0) }
}

アイコンサイズが変わるアニメーション

サンプル

【WordPress】おすすめの「和風」テーマ｜旅館や和食系飲食店向けならコレ

CSSコードだけで実装できるアニメーションです。

.c-blogLink__icon{
	  animation: kanta-link 4s ease infinite;
}

@keyframes kanta-link {
  0% { transform:scale(1) }
  50% { transform:scale(0.8) }
  100% { transform:scale(1) }
}