サポート » 使い方全般 » NEXTや、PREVをオリジナル画像にしたいのですが

  • 解決済 accorin

    (@accorin)


    WordPress初心者です。
    ただいまWordpressテンプレートdefaultをいじっています。

    image.phpの↓の部分

    <div class=”navigation”>
    <div class=”alignleft”><?php previous_image_link() ?></div>
    <div class=”alignright”><?php next_image_link() ?></div>
    </div>

    現在は、前のイメージのサムネイルが表示されて、クリックすると前のイメージに飛ぶのですが、
    サムネイルではなく、オリジナルの「NEXT」、「PREV」などの文字画像を表示させたいのです。

    どうすれば可能でしょうか・・・?教えてくださると嬉しいです!

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター jim912

    (@jim912)

    accorinさん、こんにちは。

    WordPressというよりは、CSSの画像置換で可能です。

    <div class="navigation">
    <div class="alignleft prev_image"><?php previous_image_link() ?></div>
    <div class="alignright next_image"><?php next_image_link() ?></div>
    </div>

    として、style.cssに

    .navigation a {
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    }
    .navigation .prev_image a {
    background: url( 画像のパス ) no-repeat;
    width: (画像の幅);
    height: (画像の高さ);
    }
    .navigation .next_image a {
    background: url( 画像のパス ) no-repeat;
    width: (画像の幅);
    height: (画像の高さ);
    }

    を追記いただければ良いはずです。

    トピック投稿者 accorin

    (@accorin)

    jim912さま、早速のお返事ありがとうございます!!!

    お教えいただいたとおり、やってみましたら、
    ほぼ思い通りだったのですが、
    なぜか「next」のほうの次のページのサムネイルだけが
    なくなってくれなかったので、
    自分なりにいろいろいじってみました。

    <div class=”navigation”>
    <div class=”prev_image”><?php previous_image_link() ?></div>
    <div class=”next_image”><?php next_image_link() ?></div>
    </div>

    として、cssを、

    .navigation a {
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    }
    .navigation .prev_image a {
    float:left;
    background: url(画像のパス) no-repeat;
    width: 画像の幅;
    height: 画像の高さ;
    }
    .navigation .next_image a {
    float:right;
    background: url(画像のパス) no-repeat;
    width: 画像の幅;
    height: 画像の高さ;
    }

    としてみました。すると思い通りの表示になりました。
    自分ではさっぱりわからなかったので、アドバイスいただけて
    本当に助かりました!
    ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「NEXTや、PREVをオリジナル画像にしたいのですが」には新たに返信することはできません。