高機能有料テーマ「Avada」を使ってみる Vol.08

投稿日: カテゴリー: Avada, Wordpress
  AvadaのPortfolio一覧のリンク・ギャラリーアイコンを変更してみる

デフォルトではFont Awesomeのリンクアイコンと虫眼鏡アイコンが指定されている。

テーマオプションのFeature Image項目でリンクのみも選べるけれども、実はPortfolio一覧には適応されず、あくまでも前述の2アイコンが表示される。

例えばこんな感じ。
これは数多く用意されたAvadaのデザインサンプルのどれをみてもこんな感じ。
左のリンクアインコンはシングルページに、右の虫眼鏡アイコンはLightboxによる拡大表示にそれぞれリンクがはられている。

…これ、変えたいわ〜

で、次のCSSを用意。

これでOK。
今回はテーマの置かれた階層に「images」というフォルダを作ってやり、そこにアイコンとなる画像を格納。
で、上記CSSでContent要素での差し替えを指示している。
なので、画像でなくても【content:”テキスト” !important;】のようにすればテキストでもOK。
ただし、他のCSSを触っていないのでサークル内に収まらないとNG。

Avadaのフォーラムとか覗いてみると2013年頃まで、この「images内に置かれた画像アイコンへのリンク」方式が採用されていたっぽい。
今は、Font Awesomeでのアイコンがメインで、これはこれで洒落ていて便利だけれども、なんとなく日本向けではないように感じる。

サンプルはこちら