Title: the_excerpt()で「続きを読む」を画像にしたい！
Last modified: 2012年10月9日

---

# the_excerpt()で「続きを読む」を画像にしたい！

 *  解決済 [matsugeinu](https://ja.wordpress.org/support/users/matsugeinu/)
 * (@matsugeinu)
 * [14年前](https://ja.wordpress.org/support/topic/the_excerpt%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%8d%e3%82%92%e7%94%bb%e5%83%8f%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84%ef%bc%81/)
 * the_excerpt()で抜粋記事とアイキャッチ画像を表示しています。
 * 「続きを読む」のリンクを作成した画像にしたいのですが
    function.phpをいじってい
   ても変わりません。 （リンクは表示されますが、画像が正しく表示されません。）
 * 以下のように記述しています。(function.php)
    ————————————————–
 *     ```
       function new_excerpt_more($more) {
           global $post;
           return '……( <a href="' . get_permalink() . '">' . __('<img src="images/readmore.png"/>') . '</a> )';
       }
       add_filter('excerpt_more', 'new_excerpt_more');
       ```
   
 * ————————————————–
 * 画像を正しく表示するにいはどうしたらいいでしょうか？
 * また、ホバー時とそうでない時で
    画像を入れ替え、少し位置をずらいたいので 可能
   であればその方法もお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)

 *  トピック投稿者 [matsugeinu](https://ja.wordpress.org/support/users/matsugeinu/)
 * (@matsugeinu)
 * [14年前](https://ja.wordpress.org/support/topic/the_excerpt%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%8d%e3%82%92%e7%94%bb%e5%83%8f%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84%ef%bc%81/#post-153008)
 * ※ソースコードの訂正です。
    ———————————————————————-
 *     ```
       function new_excerpt_more($more) {
           global $post;
           return '……＜br＞( ＜a href="' . get_permalink() . '"＞' . __('<img src="images/readmore.png"/>') . '＜/a＞ )';
       }
       add_filter('excerpt_more', 'new_excerpt_more');
       ```
   
 * ———————————————————————-
    それではご回答をお待ちしております。
 *  [Sayaka Kosugi](https://ja.wordpress.org/support/users/mekemoke/)
 * (@mekemoke)
 * [14年前](https://ja.wordpress.org/support/topic/the_excerpt%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%8d%e3%82%92%e7%94%bb%e5%83%8f%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84%ef%bc%81/#post-153009)
 * 画像はテンプレートディレクトリの images ディレクトリに入れてありますか？
    そうなると、
   パスは src=”［テンプレートディレクトリ］/images/readmore.png” になりますよね。
   つまり、 get_permalink() ではなく get_bloginfo( ‘template_directory’ ) を使え
   ばいいと思いますよ。
 * > ホバー時とそうでない時で
 * 「CSS ホバー」で調べただけですが、WordPress というよりは CSS での実装だと思う
   ので、
    こういうことでしょうか？ [http://www.kanaya440.com/contents/tips/html/007.html](http://www.kanaya440.com/contents/tips/html/007.html)
 * この場合、imgタグは使用せずに、aタグにクラスを指定してスタイルシートで制御して
   あげればOKです。
 *  トピック投稿者 [matsugeinu](https://ja.wordpress.org/support/users/matsugeinu/)
 * (@matsugeinu)
 * [14年前](https://ja.wordpress.org/support/topic/the_excerpt%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%8d%e3%82%92%e7%94%bb%e5%83%8f%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84%ef%bc%81/#post-153014)
 * >ひじりさん
    ご回答ありがとうございます。 WPやPHP初心者なもので少々手こずりま
   したが 以下のようにreturnを変更したら画像リンクが表示されました。 ———————————————————————-
 *     ```
       return '……＜br＞＜a href="' . get_permalink() . '" class="readmore"＞＜img src="' .get_bloginfo('template_directory'). '/images/readmore.png' . '" /＞＜/a＞';
       ```
   
 * ———————————————————————-
 * CSSによるロールオーバーに関してですが
    調べてもロールオーバーはbackgroundを切り替える
   方法が多くみられます。 しかし、上記のコードで表示した画像はbackgroundではない
   のでどうしたらいいのかわかりません。
 * 以下のコードをCSSに追記したらリンク領域が拡大された上
    ロールオーバーする画像(
   位置が大きくずれている)と ロールオーバーしない画像(元の位置)の２つが表示されま
   した。 ———————————————————————-
 *     ```
       .readmore {
       	display: block;
       	background: url(images/readmore.png) no-repeat;
       }
       .readmore:hover {
       	display: block;
       	background: url(images/readmore_hover.png) no-repeat;
       }
       ```
   
 * ———————————————————————-
    PHPの`<img>`を消してCSSでbackground画像指定のみにしたら
   何も表示されなくなりました。
 * 画像リンクの数・領域・位置・ロールオーバーの異変の改善はできないでしょうか？
   
   他のやり方や何か根本的な部分の間違いがあればご指摘願います。
 * 長文になりましたが
    よろしくお願いします。
 *  [Sayaka Kosugi](https://ja.wordpress.org/support/users/mekemoke/)
 * (@mekemoke)
 * [14年前](https://ja.wordpress.org/support/topic/the_excerpt%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%8d%e3%82%92%e7%94%bb%e5%83%8f%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84%ef%bc%81/#post-153017)
 * あー、ちょっと変なソースでしたね。すみません。
    実際に動かしてみたら、こうなり
   ました。
 * function.php
 *     ```
       function new_excerpt_more($more) {
       	return ' <a href="'. esc_url( get_permalink() ) . '" class="readmore" title="続きを読む">続きを読む</a>';
       }
       add_filter('excerpt_more', 'new_excerpt_more');
       ```
   
 * style.css
 *     ```
       .readmore {
       	display:block; background:url(./images/readmore.png) no-repeat right 0; height:16px; width:16px; overflow:hidden; text-indent:50px;
       }
       .readmore:active, .readmore:hover {
       	background-position:0 0;
       }
       ```
   
 * うちで使ってるテーマは、中で色々やってるので、挙動が少し違うのですが、
    サンプル
   として確認できますので参考までにどうぞ。 [http://mekemoke.jp/](http://mekemoke.jp/)
 *  トピック投稿者 [matsugeinu](https://ja.wordpress.org/support/users/matsugeinu/)
 * (@matsugeinu)
 * [14年前](https://ja.wordpress.org/support/topic/the_excerpt%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%8d%e3%82%92%e7%94%bb%e5%83%8f%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84%ef%bc%81/#post-153031)
 * >ひじりさん
    text-indentを知りませんでした(汗
 * しかし、どうしても表示されてしまうか
    画像(背景)が上手く表示されなかったので 
   文字色をページの背景と同じにして誤魔化しました。
 * 今後の勉強と課題になりそうですが
    目的のものをつくることができました。
 * ご協力ありがとうございました。
    教えていただいたページも今後参考にさせていただきます！

5件の返信を表示中 - 1 - 5件目 (全5件中)

 トピック「the_excerpt()で「続きを読む」を画像にしたい！」には新たに返信すること
はできません。

## タグ

 * [the_excerpt()](https://ja.wordpress.org/support/topic-tag/the_excerpt/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5件の返信
 * 2人の参加者
 * 最後の返信者: [matsugeinu](https://ja.wordpress.org/support/users/matsugeinu/)
 * 最後の活動: [14年前](https://ja.wordpress.org/support/topic/the_excerpt%e3%81%a7%e3%80%8c%e7%b6%9a%e3%81%8d%e3%82%92%e8%aa%ad%e3%82%80%e3%80%8d%e3%82%92%e7%94%bb%e5%83%8f%e3%81%ab%e3%81%97%e3%81%9f%e3%81%84%ef%bc%81/#post-153031)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック