賢威カスタマイズ

【賢威6.2】「続きを読む」をボタン画像にする方法

ららです。

テンプレートを賢威に変えて、アイキャッチ画像も設定したので、
今度は「続きを読む」を画像にしてみました。

こんな感じ。
WS009463

…あら?
記事タイトルより文字が大きいわね。
まぁいいわ^^;

「続きを読む」の画像を作る

まずは、画像を作ります。
私はGIMPで作りました。

こんなやつ。
WS009466

作り方の解説は割愛します。

その代わり、
私のボタンと色違いで良ければ、8色ほど差し上げます。

こんな感じ。
img0002

こちらのフォームから、
ららのブログなどの感想をひとこと添えて送ってね。
>>続きを読むボタンをもらうフォーム

折り返し、プレゼントを差し上げます。
GIMPのファイルも入っているので、GIMPが使えるよーって場合は活用してね。

「続きを読む」の画像をメディアにアップロード

作った画像を、メディア→新規追加よりアップロードします。
WS009520

そうしたら、URLを控えておいてね。
WS009521

「続きを読む」の場所をカスタマイズする

いよいよ肝心の作業に入ってきました。

カスタマイズに慣れていない場合は、必ずこの記事に目を通してください。
カスタマイズの基本的なことが書いてあります。
>>カスタマイズの手順と注意点

外観→テーマ編集から、
メインインデックスのテンプレートを編集します。
WS009522

こんな場所を見つけてください。
WS009465

元のコード

以下6行のうちの4行目をごっそり削除します。
削除したところに別の文章を入れますので、改行するなどして、わかりやすくしておいてください。

<!--本文抜粋-->
<php the_excerpt(); >
<p class="link-next"><a href="<php the_permalink() >">
「<php echo(get_the_title('', '', false)); >」の続きを読む
</a></p>
<!--/本文抜粋-->

変更

さきほどメディアにアップロードした画像を表示するimgタグを、削除した4行目に挿入します。widthで指定されているのは画像の横幅です。好きなサイズに調整してください。

<!--本文抜粋-->
<php the_excerpt(); >
<p class="link-next"><a href="<php the_permalink() >">
<img src="https://affili.motominet.com/wp-content/uploads/btn01.png" width="250">
</a></p>
<!--/本文抜粋-->

マウスを乗せると画像が動くようにする

これは任意です。
画像がピクッと動くようになりますが、動かなくても機能は果たせます。
余裕があったらチャレンジしてください^^

コードを登録

外観→テーマの編集より、advanced.cssを編集します。
一番下までスクロールして、以下のコードを追加します。

/* マウスを乗せると画像が動く
───────────────────────── */
div.img-move a:hover {
position: relative;
top: 3px;
left: 3px;
}

詳細はこちらの記事をご覧ください。

タグで囲む

3行目と7行目が新たに追加された行です。この行を追加することによって、画像にカーソルを近づけるとピクッと画像が動きます。

<!--本文抜粋-->
<php the_excerpt(); >
<div class="img-move">
<p class="link-next"><a href="<php the_permalink() >">
<img src="https://affili.motominet.com/wp-content/uploads/btn01.png" width="250">
</a></p>
</div>
<!--/本文抜粋-->

はい、「続きを読む」の画像がピクッと動くようになりましたか?
これで完成です。

少し難しかったかな。
落ち着いてやれば必ずできますので、ぜひチャレンジしてみてくださいね。

ブログの見た目がパッと華やかになりますよ^^

ABOUT ME
らら
らら
ららです。2人の子供がいる40代の主婦です。コツコツとアフィリエイトにチャレンジし、月6桁の目標を達成することができました。このブログでは、同じ目標を持つあなたに、ららの知識やアドバイスをお伝えしています。お問い合わせはいつでも受け付けていますのでお気軽にどうぞ。
無料レポートが書けなくてもメルマガを始める方法
HAPPYな仕組みダウンロード

「メルマガを始めてみたいけど読者を集めるの大変そう…」
そんなあなたへ。努力しなくっても読者さんが集まる、目からウロコの方法を伝授します(無料です)。

>>レポートをダウンロード!

 

ららが稼げるようになった教材「アンリミテッドアフィリエイト」が9月30日で大幅値上げ!ららのサポート付で手に入れるなら今がチャンスです♪

メールはお気軽に

ららにメールあなたからのメールはいつでも大歓迎です。
お問い合わせはこちらのフォームからどうぞ。
48時間以内に愛をこめてお返事をさせていただいています。

 

ららにメールする

この記事で使われているイラストは…

この記事で使用されているイラストの大部分は、こちらのイラスト集のものを使用しております。

関連記事

POSTED COMMENT

  1. ケル より:

    説明がとても丁寧で解りやすいです。
    そしてためになります、ありがとうございます。

    • らら らら より:

      ケルさん
      ご訪問ありがとうございます。
      これからもわかりやすい記事を目指していきたいと思っています。
      ありがとうございました。

  2. かりぽん より:

    ららさん こんにちは。

    ららさんのブログいつも拝見させて頂いてます。
    ためになる情報ばかりでいつも本当に助かっています。
    ありがとうございます!

    また寄らせて下さい。

  3. 天然水くん より:

    こんばんわ。

    賢威のカスタマイズでとても困っているときにこのブログに訪問することができました!!

    このブログ自体とてもコンテンツがそろっていて役に立つサイトですね!!

    参考にします!!!

    応援しています!!!!
    また来ますね!!!!

    • らら らら より:

      天然水くん さん
      ご訪問ありがとうございます。
      そうですか。ちょうどお困りのときだったんですか。
      それはそれはたいへん嬉しいことですね。
      これからもよろしくお願いいたします。

COMMENT

メールアドレスが公開されることはありません。