うぃず FC2テンプレート

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

ブログタイトル名を画像に変更したい

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

  • ブログの上部に表示されるブログ名を画像にする方法を紹介します。

    テキストで書かれているよりも、ブログ名が画像の方が見栄えがいいですしかっこいいと思います。



    スポンサードリンク


    HTML編集
    下記のような箇所を見つけてください。
    <h1>~</h1>で囲まれた部分がブログ名になります。

    <!--▼▼ ヘッダー ▼▼-->
    <div id="header_outline">
    <div id="header_body">

    <h1>
    <a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><%blog_name></a>
    </h1>

    <div class="intro"><%introduction></div>

    </div><!--/header_body-->
    </div><!--/header_outline-->
    <!--▲▲ ヘッダー ▲▲-->


    以下のように書き換えるだけタイトル名を画像にすることができます。

    <!--▼▼ ヘッダー ▼▼-->
    <div id="header_outline">
    <div id="header_body">


    <h1>
    <a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a>
    </h1>

    <div class="intro"><%introduction></div>

    </div><!--/header_body-->
    </div><!--/header_outline-->
    <!--▲▲ ヘッダー ▲▲-->



    画像URLは、【ツール】→【ファイルアップロード】で各自アップロードした画像のURLを貼り付けてください。

    僕の場合は、
    <img src="http://blog-imgs-55-origin.fc2.com/x/x/n/xxnostalgiaxx/20121117120203e0c.png" border="0" />
    このようになっています。


    2013年10月4日追記
    スマートフォン版テンプレートの方は、CSSの編集もお願い致します。赤い箇所の変更あるいは追加をお願いします。

    CSS編集

    /*============================================================
    ●●ヘッダー●●
    ============================================================*/
    /****************************** ▼全体▼ */
    #header {
    position:relative;
    min-height: 0px;
    margin:0 0 0px;
    padding: 0 0px;
    background-color:#B22222; /* ヘッダ背景色(全体)*/
    color:#FEFEFE; /* ヘッダ文字色 */
    text-align: center; /* 中央寄せ */
    background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
    ↑SP01_Blueのみに存在します。不要であれば削除してください。


    }
    /****************************** ▲全体▲ */

    /****************************** ▼タイトル文字部分▼ */
    #header h1 {
    overflow: hidden;
    width: 100%;
    margin:0 auto;
    padding: 0px 0;
    font-size:20px; /* 文字の大きさ */
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    #header img {
    width: 100%;
    }


    #header h1 a { color:#FFFFFF;} /* 文字色 */
    #header h1 a :hover{ color:#FFFFFF; } /* 触れた時の文字色 */


    /****************************** ▲ヘッダタイトル部分▲ */




    例えば↓こんな大きなトップ絵を付けたいと思っていても、
    10lab_sample_gazou.png


    #header img {
    width: 100%;
    }



    によってどんな画像ファイルでもテンプレートの横幅と同じ大きさになるように設定しています。
    流石に画像サイズが大きすぎると、閲覧時の読み込み時間に影響がありますので、大きすぎないように気をつけましょう。
    小さすぎると逆にぼやけるかもしません。
    関連記事
    コメントの投稿












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

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

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

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

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


    FC2ブロガー必見!

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


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


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

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