入口 > スポンサー広告 > スポンサーサイト テンプレ - カスタマイズ > 親(及び子のない単独)カテゴリ名にアイコンをつける

スポンサーサイト

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

親(及び子のない単独)カテゴリ名にアイコンをつける

入口ページに最初に表示されているカテゴリ名(親カテゴリにあたるものと、子カテゴリのない独立したカテゴリ)に、カテゴリ毎に異なる画像アイコンをつける方法です。

  1. 使いたい画像を親(及び単独)カテゴリ数分用意し、「ファイルアップロード」でアップしておく

  2. テンプレHTMLの上1/5あたり、下記二箇所にピンク背景部分を追加

    <!--カテゴリ一覧-->
    <!--category-->
    <!--category_nosub-->
    <ul class="ulTop ulTop_cat<%category_no>">
    <li class="liTop">
    <a class="aTop cat_img<%category_no>" href="<%category_link>"
    title="「<%category_name>」ト&#12483;プへ"><%category_name></a>
    </li>
    </ul>
    <!--/category_nosub-->
    <!--category_parent-->
    <ul class="ulTop ulTop_cat<%category_no>">
    <li class="liTop">
    <a class="aTop default cat_img<%category_no>" href="#null" title="click to fix"><%category_name></a>
    <ul class="sub">
    <!--/category_parent-->


  3. 更にスタイルシート末尾に下記を追加

    a.cat_imgX { background: url(http://カテゴリX用の画像アドレス) no-repeat 10px/*アイコンを右に寄せたい幅*/ top; text-indent: 0px/*テキストを右に寄せたい幅*/; }
    a.cat_imgY { background: url(http://カテゴリY用の画像アドレス) no-repeat -5px/*アイコンを右に寄せたい幅*/ top; text-indent: 15px/*テキストを右に寄せたい幅*/; }
    a.cat_imgZ { background: url(http://カテゴリZ用の画像アドレス) no-repeat 0px/*アイコンを右に寄せたい幅*/ top; text-indent: 10px/*テキストを右に寄せたい幅*/; }


  4. 前項の行数をコピペで必要な分だけ増やした上で、赤字部分を、カテゴリ番号や該当する画像アドレス、それぞれインデントさせたい幅に書き換える

  5. アイコン画像が大きくて下が切れてしまう場合などは

    .positioner, .menuHolder, .ulTop a:first-child { height: 50px/*画像高さ*/; }
    ul.ulTop { line-height: 50px/*画像高さ*/; }

    も加えて適宜調整する

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