うぃず FC2テンプレート

「続きを読む」を画像に変えてみたいという方が非常に多いかと思います。

どんなテンプレートでもそうですが、基本的に、アップロードした画像のURLにごちょごちょしてあげれば、すぐにできるようになります。

それでは、以下からどうぞー。



スポンサードリンク


例として、『『02Tシリーズ』』で行っています。

HTML編集

<div class="readmore">
<a href="<%topentry_link>">続きを読む</a>
</div>

という箇所があると思うので、以下のように書き換えます。

<div class="readmore">
<a href="<%topentry_link>"><img src="画像のURL" alt="<%topentry_title>の続きを読む" border="0" /></a>
</div>

これで、「続きを読む」という文字だった箇所を画像に変更することができました！
画像のアップロードは、ブログ管理画面の左メニュー

から行ってください。



スタイルシート編集

/* ▼続きを読む▼ */
.readmore {
background-color:#efefef; /* の背景 */
font-size: 20px;
font-weight: bold;
text-align:center;
border: 1px solid #aaaaaa;
padding:4px;

/* ▲続きを読む▲ */

この箇所を、以下のように書き換えます。

.readmore {
float:left; /*左寄せ*/
}
/* ▲続きを読む▲ */

このままだと右寄せになってしまいますが、右に寄せたい場合、left　⇒　rightに変更してください。


これで、「つづきを読む」が画像に切り替わり、ブログとしての見栄えが良くなりましたね！

関連記事

• 記事と記事の間の間隔を変更したい
• 『02Tシリーズ』ヘッダのリキッドレイアウトを固定にしたい
• 【スマホ】ドロップダウンメニューバーを作成したい
• 関連記事リストを任意の場所に表示したい
• 「続きを読む」を画像に変えたい
• 『02Tシリーズ』３カラムにしたい（サイドバー２つ）
• 『02Tシリーズ』プラグインメニュー（サイドバー）の位置を右から左に変えたい
• プラグイン3を記事の上に常に表示したい
• ブログタイトル名を画像に変更したい