AvadaのPortfolio一覧のリンク・ギャラリーアイコンを変更してみる
デフォルトではFont Awesomeのリンクアイコンと虫眼鏡アイコンが指定されている。
テーマオプションのFeature Image項目でリンクのみも選べるけれども、実はPortfolio一覧には適応されず、あくまでも前述の2アイコンが表示される。
例えばこんな感じ。
これは数多く用意されたAvadaのデザインサンプルのどれをみてもこんな感じ。
左のリンクアインコンはシングルページに、右の虫眼鏡アイコンはLightboxによる拡大表示にそれぞれリンクがはられている。
…これ、変えたいわ〜
で、次のCSSを用意。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.fusion-rollover-gallery{ display: none; } .fusion-rollover-link{ position: relative; left: 0px !important; opacity:0.4; } /* リンクアイコン・ギャラリーアイコン 両方ともひ非表示の場合 .fusion-rollover-link, .fusion-rollover-gallery{ display: none; } */ .fusion-rollover-link:before { content:url("画像までのパス") !important; } |
これでOK。
今回はテーマの置かれた階層に「images」というフォルダを作ってやり、そこにアイコンとなる画像を格納。
で、上記CSSでContent要素での差し替えを指示している。
なので、画像でなくても【content:”テキスト” !important;】のようにすればテキストでもOK。
ただし、他のCSSを触っていないのでサークル内に収まらないとNG。
Avadaのフォーラムとか覗いてみると2013年頃まで、この「images内に置かれた画像アイコンへのリンク」方式が採用されていたっぽい。
今は、Font Awesomeでのアイコンがメインで、これはこれで洒落ていて便利だけれども、なんとなく日本向けではないように感じる。
サンプルはこちら。