うぃず FC2テンプレート

FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
FC2ブログで使えるテンプレートを配布しています
--.--.-- --:--|folder.png スポンサー広告comment.png(-)

スポンサーサイト

  • このエントリーをはてなブックマークに追加

  • 上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。


    スポンサードリンク



    2013.05.10 01:12|folder.png カスタマイズcomment.png(0)

    「続きを読む」を画像に変えたい

  • このエントリーをはてなブックマークに追加

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

    どんなテンプレートでもそうですが、基本的に、アップロードした画像の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>


    これで、「続きを読む」という文字だった箇所を画像に変更することができました!
    画像のアップロードは、ブログ管理画面の左メニュー
    Baidu IME_2013-5-10_1-9-26
    から行ってください。



    スタイルシート編集

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

    /* ▲続きを読む▲ */


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

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


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


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




    関連記事
    コメントの投稿












    管理者にだけ表示を許可する
    トラックバック
    この記事のトラックバックURL

    検索フォーム
    スマートフォン用テンプレート
    カスタマイズしやすいように考慮してHTMLを記しています。
    SP01_Gray
    スマートフォンテンプレートグレー
    グレーが基本色のテンプレートです。
    メインカラー :#444444
    メニューカラー:#333333
    サブカラー  :#EFEFEF
    ラインカラー :#999999
    で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。

    SP01_Blue
    スマートフォンテンプレート青
    爽やかな水色が基本色のテンプレートです。
    TopNTagCloud

    フリーエリア
    メールフォーム
    何か質問等ありましたらお気軽にお問い合わせください。

    名前:
    メール:
    件名:
    本文:


    FC2ブロガー必見!

    必ず結果が出るブログ運営テクニック


    もっとカスタマイズしたい方必見!


    毎日メンテナンスするだけで・・・

    最新トラックバック
    ブロとも申請フォーム

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。