Arrow

フォーラムのネタができたので。

WordPress › フォーラム » the_excerpt()で「続きを読む」を画像にしたい!

やりたいこと:

  • excerpt_more で設定されている […] の部分を画像にしたい
  • マウスオーバーした時に画像を切り替えたい

1. リンク用の画像を1枚用意します

通常時とマウスオーバー時の画像を1枚にします。
つまり、高さか幅が、表示したい大きさの倍になりますね。

続きを読む を画像にするよ

上の画像の場合、16px × 16px で表示させたいので、16px × 32px で作成しました。
テーマの関係で右側に動かしたいので、右側に通常用の画像、左側にマウスオーバー時の画像を配置します。
これを readmore.png というファイル名で、テーマディレクトリの images に置きます。

2. function.php に追記します

下記のコードを追加します。

class の指定と title の指定がポイント。classはあとでスタイルを設定します。
マウスオーバー時にツールチップを出すため、titleにも「続きを読む」を入れてあります。get_the_title() を入れてもOK。

3. style.css に追記します

下記のコードを追記します。

display は inline-block にすれば行中に、 block にすれば改行して表示します。

height と width は本来表示させたい大きさを設定します。

text-indent はアンカータグ内の文字を表示させないためのものです。よく-9999px とかされてますが、適当でいいと思ってます。

.readmore:active, .readmore:hover でマウスオーバー時の挙動を設定します。

画像の例がちょっとアレかもしれないのですが、サンプルはウチのトップページで動いています。
ご質問等あればお気軽に~


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA