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

スポンサーサイト

上記の広告は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 top; text-indent: 100%; white-space: nowrap; overflow: hidden; }
    a.cat_imgY { background: url(http://カテゴリY用の画像アドレス) no-repeat top; text-indent: 100%; white-space: nowrap; overflow: hidden; }
    a.cat_imgZ { background: url(http://カテゴリZ用の画像アドレス) no-repeat top; text-indent: 100%; white-space: nowrap; overflow: hidden; }
    .positioner, .menuHolder, .ulTop a:first-child { height: 50px/*メニュー高さ(画像高さ+下余白)*/; }
    ul.ulTop, ul.ulTop li.liTop a.aTop, ul.sub li a { width: 200px/*メニュー幅(画像幅+左右余白)*/; }
    ul.ulTop li.liTop { width: 400px; /* メニュー幅×2 */ margin-right: -200px/*-メニュー幅*/; }


  4. 前項のa.cat_img~の行をコピペで必要数だけ増やした上で、赤字X、Y、Zを各カテゴリのカテゴリ番号に、青字部分を1でアップしておいたそれぞれの画像アドレスに、黄字部分を画像のサイズに合わせて書き換える(例えば高さ45px幅180pxの画像を用意して、下に5px、左右に10pxずつの余白をとりたい場合、45+5=50、180+10*2=200なので上記のような指定になる)


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