ひとりで頑張っているあなたに寄り添うサポートやってます♪  ここをクリック   

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

  • URLをコピーしました!
★本ブログの各記事では、サイトの運営維持のため広告リンクを利用している場合があります。

ららです。

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

こんな感じ。
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://rara3939.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://rara3939.com/wp-content/uploads/btn01.png" width="250">
</a></p>
</div>
<!--/本文抜粋-->

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

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

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

記事が役に立ったら、ここをクリックして応援をお願いします。

私が稼げるようになった教材

アンリミテッドアフィリエイト
ごくごく普通の主婦だった私が、累計800万円以上稼げたのは、この教材を購入して作業をしたから。
詳細は、こちらのページでご紹介しています。
>>アンリミテッドアフィリエイトらら流レビュー
私がここまでたどった経験を元にした特典と、濃厚すぎるサポートも差し上げています。

無料レポートを書かずにメルマガ読者を全自動で集める方法!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

ららです。
2人の子供はもう成人した50代主婦です。10年ほど前から、主婦業・母親業の隙間時間でアフィリエイトに挑戦。パート時代の約6倍の月収を達成することができました。

超マイペースで超怠惰で超食いしん坊の私でもできたその秘密は、とにかく諦めないこと!
これから始めるあなたに私の経験をお伝えするため、ブログ・メルマガで情報を配信するとともに、サポートやコンサルを行っています。常に初心者さん目線を忘れない安心できるブログを目指してますので、どうぞ何でもご相談くださいね。

コメント

コメント一覧 (0件)

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

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

  • ららさん こんにちは。

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

    また寄らせて下さい。

    • かりぽんさん
      ご訪問ありがとうございます。
      また遊びにいらしてくださいね。

  • こんばんわ。

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

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

    参考にします!!!

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

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

コメントする

目次