賢威6.2 トップページ『続きを読む』をボタン画像にする方法
賢威トップページでは各記事の情報として
『記事タイトル』『日付』『タグ』
『アイキャッチ画像』『記事文章の抜粋』とあり右下に
『「●●（記事タイトル）」の続きを読む』
という文字リンクがあります。
この箇所がクリックされるかどうかで
実際に記事ページに行って詳細の情報を
訪問者が見るかどうかが決まるので、
非常に重要な場所ですね。
そこで
文字リンクではなくボタンにした方がクリック率が上がり、
記事を見てもらえるケースがあるので、
この文字リンクをボタンや、押してもらいやすいような
画像にする方法を今回は紹介していきます。
トップページ『続きを読む』をボタン画像にする方法
ワードプレス管理画面より
『外観』⇒『テーマの編集』とすすみ
『メインインデックスのテンプレート（index.php）』をクリックします。
そして、
|
1 2 3 4 |
<!--本文抜粋--> <?php the_excerpt(); ?> <p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p> <!--/本文抜粋--> |
のコード中の
|
1 |
「<?php echo(get_the_title('', '', false)); ?>」の続きを読む |
という箇所を
|
1 |
<span class="b blue"><img src="画像のURL"></span> |
とすることで、
『「●●（記事タイトル）」の続きを読む』
という文字リンクが画像になります。
そして、
このままですと文字リンクの横についていた
矢印のアイコンが残っていますので、
『外観』⇒『テーマ編集』と進み
『design.css』の中の
|
1 2 3 4 |
.link-next a{ padding: 3px 0 3px 15px; background: url(./images/icon/icon-arrow_r.png) 0 5px no-repeat; } |
上記3行目の箇所を消すことで、
矢印のアイコンも消えて、
ボタン画像だけになります。
設定はこれで完了です。
この『続きを読む』の文字リンクは
ボタンにしたほうが良い場合もありますし、
文字リンクのままのほうが良い場合もあります。
これは、
そのボタンのデザインやメッセージの内容、
どのような属性の人が訪問者になっているのかなど
様々な要素で変わってくる部分ですので、
ぜひ色々なパターンを試しながらあなたのサイトに
ベストな形にしてみてください。
また、
賢威6.2の全パーツカスタマイズ一覧まとめページを作成しましたので、
他の箇所をカスタマイズされたい場合は一度見てみて下さいね。
⇒賢威6.2【全カスタマイズを一覧まとめ】ワードプレステンプレート
