アフィピク登録

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

賢威6.2で、記事の「続きを読む」を、ボタン画像にする方法をご紹介します。 単なる文字よりも、明らかにインパクトがあり、思わずクリックしたくなりますよね^^

ららです。



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


こんな感じ。
WS009463


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


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

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

こんなやつ。
WS009466


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


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

こんな感じ。
img0002


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

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


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

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


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


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

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

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


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

illust_smile01Ctrl+Aで全文をいったんテキストファイルにコピーしてから編集すると、検索が使えてやりやすいです。
バックアップを取っておくのもお忘れなく。

以下、コードをコピペする場合は、<と>は、半角に変換して使ってください。

元のコード

赤字の部分を削除します。
削除したところに別の文章を入れますので、改行するなどして、わかりやすくしておいてください。

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

変更

さきほどメディアにアップロードした画像を表示するimgタグを、
削除した場所に挿入します。
widthでサイズも指定できます。

<!–本文抜粋–>
<?php the_excerpt(); ?>
<p class=”link-next”><a href=”<?php the_permalink() ?>”>
<img src=”http://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;
}

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


タグで囲む

赤字のタグで、全体を囲みます。

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

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

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

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

無料オファー攻略レポプレゼント

この記事を読んだあなたには、こちらの記事もオススメです☆

 




最後まで読んでいただき、ありがとうございました。
このブログを「いいな」と思ったら、
下の白いボタンを、1回クリックしてくださいね。
ららに一票入って、人気ブログランキングに飛びます
↓ ↓ ↓

ありがとうございます☆ あなたの1票が、励みになってます^^

 

↑ この動くアバターは、こちらで作っていただきました。
あなたのアバターに命を吹き込む「四次元アバター」

 

「記事が書けない」「ネタが浮かばない」「手が止まってしまう」
そんなあなたへ。
このままだと、せっかくの稼げるチャンスを失ってしまうかも。
そうなる前に、記事の書き方を勉強してみませんか?
満足度98%、ブログ初心者さん向けのライティング教材が好評です。
>>関連記事はココをクリック

 

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

  1. ケル より:

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

    • らら より:

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

  2. かりぽん より:

    ららさん こんにちは。

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

    また寄らせて下さい。

    • らら より:

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

  3. 天然水くん より:

    こんばんわ。

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

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

    参考にします!!!

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

    • らら より:

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

コメントを残す

サブコンテンツ

プロフィール

情報商材アフィリエイト

ららです。
高校生と中学生の2人の子供がいる、40代主婦です。
主婦業・母親業をやりながら、隙間時間でアフィリエイトを実践し、
日給10万円を達成することができました。

あなたと同じ目線の、安心できるブログを目指してます。
お気軽にメールくださいね。

詳しいプロフィールはこちら

ららが日給10万を達成できた理由とは?




応援よろしくね♪

メールはお気軽に


ららに相談したいことなどがありましたら、お気軽にどうぞ。
些細なことでもアホらしいことでも、大歓迎です♪
>>ららにメールを送る

相互リンクについて

2015年10月をもちまして、相互リンクのページは終了いたしました。
理由は
・昨今のSEO事情では、相互リンクが有益ではないこと
・リンク先の閉鎖が相次ぎ、機能を果たさなくなったこと
です。
相互リンクしていただいたブログ様、長いあいだありがとうございましたm(_ _)m

カテゴリー

このページの先頭へ