• コミュニティトップ
• トピック一覧
• 新着トピック
• 最近活発なトピック
• 閲覧数の多いトピック

カテゴリを画像にしたい

言葉で説明するのがむずかしいのでイメージ画像を用意しました。。。


左カラムの「カテゴリ」プラグインで、
それぞれのカテゴリごとに画像を表示したいです。
背景画像ではなく、画像がリンクになってるようにしたいです。


どこをいじれば良いのか、変数もよくわかりません。
よろしくお願いします。

by ◆ピスタ◆  2012年07月21日 23:28

by ◆ピスタ◆
2012年07月21日 23:28

コメント一覧 新しい順に表示▽ / 古い順に表示△

コメント一覧

新しい順  |  古い順

• ＞標野ゆき様
  ありがとうございます！
  ちょっと難しそうですが参考になりそうなサイトなので、見てみます〜！
  
  
  ＞paruparu様
  でっっっできた〜〜〜できました！！！！！！！
  わーーーーー＼(^o^)／
  教えてくださった、どちらのやり方でも一応できたので、
  あれこれ調整して良い方でやってみます！
  ありがとうございました！！
  
  
  
  by ◆ピスタ◆  2012年07月24日 00:20
  by ◆ピスタ◆
  2012年07月24日 00:20
• （文字数オーバーになってしまったので書き直し）
  
  追記 ：
  ＞ 背景画像ではなく、画像がリンクになってるようにしたいです。
  この文章、見落としていました。
  
  画像にする場合もほぼ同じ要領でOKです。
  <img src="http://blog-imgs-46.fc2.com/p/i/s/pista7777/cat<%category_no>" alt="<%category_name>" />
  
  などを入れ、cat1 cat8 cat5 cat7 という画像をそれぞれアップして使います。
  FC2の 画像サーバー（ファイルサーバー）は固定ではないので、途中でカテゴリーの追加をした際に、ファイルサーバーが移動していた場合には、再度 「別名で全部アップロードして、ファイルサーバー番号 と cat<%category_no> 部分を書き直して使う」 必要が出てくると思います。 （同名だと 同じファイルサーバーでの上書きになってしまうので...）
  
  カテゴリーが今後増える可能性もあるのであれば、前回の方法の方が 楽かも。
  by paruparu  2012年07月23日 04:00
  by paruparu
  2012年07月23日 04:00
• ＞ 標野さんへ
  Parodayさんの記事は 「プラグインごとのタイトル画像変更」 なので少し応用が必要かなと思ったので、別途考えてみました。
  
  ＞ ◆ピスタ◆さんへ
  
  このような感じで良ければ...
  
  <!--category-->
  <div class="catlist cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
  </div>
  <!--/category-->
  
  画像の大きさが 幅200px 高さ38px の場合
  
  スタイルシートには以下のような感じで...
  
  .catlist a {
  display:block;
  margin:0 2px 12px 2px;
  padding:40px 2px 0 2px;
  color:#999;
  font-size:12px;
  }
  
  .cat1 { background:url(A画像のパス) no-repeat center top; }
  .cat8 { background:url(B画像のパス) no-repeat center top; }
  .cat5 { background:url(C画像のパス) no-repeat center top; }
  .cat7 { background:url(D画像のパス) no-repeat center top; }
  以下同様
  
  テキストの文字が不要 or 邪魔であれば、位置をずらすか省略してください。
  by paruparu  2012年07月23日 03:37
  by paruparu
  2012年07月23日 03:37
• 古参の回答者さんが触れておられる、こちらのページが参考になるのでは？
  http://paro2day.blog122.fc2.com/blog-entry-403.html
  by 標野ゆき  2012年07月22日 16:41
  by 標野ゆき
  2012年07月22日 16:41