« 本文中の画像をココログ・アフィリエイトからアマゾン・アソシエイトへ | トップページ | 記事は「メモ帳」に書く »

2006年6月11日 (日)

サイドバーの項目タイトルに画像アイコン

          Blogkanrenpc_4
  何らひねりのないタイトルだが、ココログフリーのサイドバーに、このページのような感じで、項目タイトルの先頭にアイコンを貼る。

 注)デフォルトテンプレートのみ。リッチデザインテンプレートでは出来ない。

Sidebaraikon  1.素材サイトからgif画像をダウンロードする。
  この際気を付けることは、あまり大き過ぎないものを選ぶこと。

 自分のブログのサイドバー背景色が、白でない場合は透過処理してある画像を選ぶこと。

  PCの判りやすいところに保存すること。
  判りにくいタイトルになっていたら、あとで見た時に判別出来るようタイトルを変えておいてもよい。
 ただし英数字で!

 画像のアップロードに関しては『画像を縮小してからアップする話』で説明しているので、そちらを参考に。

 たとえば私は今回、700㎞さんからお借りした画像にicon-enpituとした。ベタなローマ字読みだが、判りやすいから。

  2.画像をアップロード。
  コントロールパネル→ファイル→新規にアップロード先のファイルを作っておくと、以後に画像をアップロードする場所が一つにまとまるので、便利!。
 例えば、「image」というように。ここも英数字のみ。
 
  ファイルが出来たら、その文字をクリック。新規に画像をアップロードする。

3.アップロードした、今回の例ならaicon-enpitu.txt の文字の右並びにあるリンクのボタンをクリック。
  別窓にあるソースの中から、“http: から gif”までをコピーして、閉じる。

  4.ブログ→デザイン→  カスタムテンプレート→カスタムCSS編集の順にクリック。

  5.カスタムCSS編集のボックスの中に、以下の記述をする。

.sidebar h2 {
background: url("●●●") left no-repeat;
padding: 10px 0px 10px 28px;}

 上記のpaddingは、このページでの任意な数字。
 自分のブログでは画像に合わせる。
  ●●●の所に、先程コピーした画像のアドレスを貼りつける。
  確認画面で、どんなもんだか見てみよう。

  6.画像がきちんと表示されていなかったら、左図のような原因があげられる。
  paddingを追加して調節し、もう一度確認画面でみてみる。(カスタムCSS編集画面は全て、半角英数字)

  7.出来ていたら、保存→反映して終了♪
 
  ◆項目タイトル文字の縦幅より画像が小さ過ぎると、左上によってしまう場合がある。
 素材サイトから入手する画像には余白がないからだ。
  OSがWindowsならペイントソフトを使って、画像の上に少し余白を作ってから、アップロードする。

  ◆ペイントでの編集(Windows)

 スタート→すべてのプログラム→アクセサリ→ペイントで起動させる。
Peintaikon
  名前を付けて保存→終了。
 後は、2.の画像をアップロードへ進む。

Bahassaku
 素材サイト・700kmさん。blue-greenさん。
 

|

« 本文中の画像をココログ・アフィリエイトからアマゾン・アソシエイトへ | トップページ | 記事は「メモ帳」に書く »

ウェブログ・ココログ関連」カテゴリの記事

◆サイドバー」カテゴリの記事

◆カスタマイズ全般」カテゴリの記事

コメント

こんばんは
サポートからきました~~~。
サポートありがとうございました~。
解決できてうれしかったです!!!

はっさくさんのプログすごくきれいですね。
見た目もすぎくいいし、みやすいし、分かりやすい。

リンクさしてもらってもいいですか???

投稿: みっちゃん | 2006年6月14日 (水) 01時20分

はっさく→みっちゃんさん
 有難うございますー!
結局、テンプレ削除できなくて、
お役には立てずじまいだったのに
リンクしていただけるなんて光栄ですよ~!
 これからもどうぞヨロシク!

投稿: はっさく | 2006年6月14日 (水) 14時19分

わ~~~~~~~い!!!
ありがとうございます!!!
早速リンクさせてもらいました!!!
これからこちらこそ、よろしくお願いします!!!

投稿: みっちゃん | 2006年6月16日 (金) 04時03分

はじめてお伺いいたします。
はっさく様のこちらの記事でサイドバーに画像を
入れることがでいました。
本当にありがとう ございました。

これからも 参考にさせてください

よろしくお願いします。

投稿: bomu | 2008年8月20日 (水) 15時56分

はっさく→bomuさん
 お返事遅くなって申し訳ありません!
こんなに昔の記事が、今もお役に立っているなんてっ、感激していますっ、ううう(涙)!
 今になって大丈夫だっけこの記事(おいおい)と読み返したりして。現在、大変多忙につきブログ更新も儘ならない日々ですが、記事にしたいネタは、脹らんでいます。
 もっと簡単にちょこっとだけテンプレートを変えてみる、手は無いだろうか…なんて。
 これからも、使ってやってくださいね。
ブログを拝見かたがた、そちらへお邪魔しま~す。

投稿: はっさく | 2008年9月 1日 (月) 23時05分

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック


この記事へのトラックバック一覧です: サイドバーの項目タイトルに画像アイコン:

» サイドバー項目にアイコン表示 [memo-book]
サイドバーの項目の前にアイコン入れたくて、試行錯誤 ネットぐるぐる回ってたら、コ [続きを読む]

受信: 2008年8月20日 (水) 18時29分

« 本文中の画像をココログ・アフィリエイトからアマゾン・アソシエイトへ | トップページ | 記事は「メモ帳」に書く »