【超初心者のWordPress】
画像にリンクを貼ってみる編～その②

HOME < DESIGN WORK < WordPress

前の記事で、ギャラリーに画像を並べる→ギャラリーにリンクを貼るまで説明してきました。
でも、せっかく画像にリンクを貼ったのに、
キャプションのグレー部分が邪魔してリンク押しにくい問題がでてしまいました。

最後にここの問題を解決していきます。
今回もアイコン素材TWO-PEAS!メンバーのマリアちゃんのページでご説明します。

※ちなみに、WordPressの『Lightning』という無料のテーマを使用しています。

追加CSSを使用する

調べてみたところ、こちらも簡単に実装できました。
追加CSS欄に下記を入力するだけ。
↓↓↓

---

.blocks-gallery-item > figure > a:after{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: auto;
	content: "";
	background-color: rgba(0,0,0,0);
}

---

そのページのみに効かせたい場合は、
投稿編集ごとの「追加CSS」という欄にコピペします。
私の場合は、投稿編集画面の一番下にこんな項目があるのでそこに↓↓↓

そのサイト全体に効かせたい場合は、
外観カスタマイズの追加CSSのところに入力します↓↓↓
私はサイト全体に効かせたかったので、こちらに入力しました。

これで、ギャラリーキャプションのグレー部分を触っても
リンクが有効になっています。

ちなみに、画像にキャプションをいれなければ
グレーのグラデーションは表示されないので、こんなことしなくても大丈夫です。
アイコン素材のトップページにはキャプションいれてません。

ついに完成！

ようやくギャラリーが完成しました！
※完成形はこちら
なにをやるにも、プラグインだの追加CSSだの、いちいち調べないといけないの大変ですね･･･
はやくWordPressを使いこなせるようになりたいな！

････････････････････････････････････････････
⇒前の記事

【超初心者のWordPress】画像にリンクを貼ってみる編～その①