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

【レビュー】XWRITEでブログと企業サイトのデモサイトを作ってみた感想
初心者

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

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

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

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

関連記事ブロックのアイコン
関連記事ブロックのアイコン

これって別のアイコンとかに出来ないのって」思いませんか?

色々調べましたが、関連記事ブロックのアイコンはダッシュボード上から変更する事はできません。ですが、CSSコードを加えるだけで任意のアイコンに変更できます

本記事ではサンプルコード付きで関連記事ブロックでテキストリンクを選択した場合に表示されるアイコンのカスタマイズ方法を紹介します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

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

【基礎知識】関連記事ブロックって何だ?
初心者

関連記事ブロックって何?

SWELユーザーの皆さんにとってはお馴染みですよね?

関連記事ブロックはSWELLオリジナル機能の1つ。サイト内の記事や外部の記事をブログカード付きでオシャレに表示させる機能のことです。

SWELLの関連記事ブロック

関連記事ブロックを使うと、リンク先のページをアイキャッチ画像付きで表示できるので便利ですよね。

内部リンクを設置する際はリンク先の記事URLを調べずサクッとその場で検索できるので楽ちん。

かんた

SWELLユーザーで良かったと思う機能の1つです。

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

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

テキストリンクで表示する

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

かんた

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

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

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

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

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

アイコンを変更するカスタマイズ

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

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

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

かんた

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

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

  1. アイコンを別のアイコンに変更する方法
  2. アイコンのサイズを変更する方法
  3. アイコンの色を変更する方法
  4. アイコンの枠線を消す方法
  5. アイコンを消す方法

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

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

コードは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公式ページを確認しましょう。

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

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

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は使いません。

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

サンプル

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) }
}

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

サンプル

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) }
}

まとめ

WordPress有料テーマ「SWELL」の関連記事ブロックのアイコンを変更するカスマイズを紹介しました。

かんた

ポイントは次の通りです

関連記事ブロックのアイコンについて

  • 変更は管理画面からできない
  • CSSコードを追加するだけで変更できる

アイコンは管理画面から変更できませんが、CSSコードを追加するだけで簡単に変更できます。ぜひチャレンジしてみてください。

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