本文へジャンプします。



ココログサポート Top>>Questions List>>記事のタイトル背景 (thread)

fixed_question

記事のタイトル背景

記事のタイトルの背景に、チェックなどの背景をつけたいのですが・・・。
やり方をご存知の方がいらっしゃれば、教えてください!
---
さら

basic infomations
  • ご利用中のOSは?:unselected
  • ご利用中のブラウザーは?:unselected
  • ご利用中のプランは?:unselected

インポート | | permalink | その他

Re: [その他]記事のタイトル背景
画像をアップロードしてURLを確認後、「CSSの編集画面」に

.content h3
{
background-image:url(http://〜);
}

と書いて保存してみて下さい。
※http://〜の部分は画像のURLを入力
---
nana_sea

インポート | |

Re: [その他]記事のタイトル背景
アドバイスありがとうございます!

でも、やってはみたのですが、その背景を適用させてしまうと記事の横につけていたアイコンが消えてしまうんです・・・。

アイコンもつけて、背景も・・・なんて不可能なのでしょうか?
---
さら

インポート | |

Re: [その他]記事のタイトル背景
通常の方法ではどちらもCSSの「background-image」での指定ですので、2つの画像を同時に表示することは出来ません。
なので、対応としては

1.最初から2つの画像を1つに合成した画像を作成し、背景画像として適用する。

アイコン画像「A」と背景画像「B」を合成して、アイコン付き背景画像「C」を「background-image」で指定する、ということです。

2.アイコンはタイトル部分に都度「img」タグで表示する。

記事のタイトル部分にもタグが使えるようですので、記事を書くたびにタイトルの前に
<img src="http://〜">
というタグを入力すれば、アイコンが表示できます。
※但し、この方法は都度手入力になりますし、あとで変更する際もCSSで指定したように一括変換することは出来ません。

の2つがあるかと思います。

※他にいい方法があればフォローお願いします>皆様
---
nana_sea

インポート | |

Re: [その他]記事のタイトル背景
ありがとうございます(>_<)

>最初から2つの画像を1つに合成した画像を作成し・・・

これがさらはまだやり方を知らない&加工になってしまって、素材サイト様の規約に反してしまうと思うのでできません・・・。(泣)

丁寧にアドバイス、ありがとうございました!!
---
さら

インポート | |

Re: [その他]記事のタイトル背景
CSSだけで指定するならこんなのはどうでしょう。

.content h3 {background-image: url("全体に敷きたい画像のurl"); repeat: repeat}
.content h3:first-letter {background-image: url("アイコンのurl"); background-repeat: no-repeat; padding-left: アイコンの配置に必要な数値}

first-letterはブラウザによっては表示が崩れるかもしれないのですが。
---
JUMA
http://juma.cocolog-nifty.com/branch/

インポート | |