HOME >  ナレッジ コレクション  > サイドタイトルの横に画像を置きたい

サイドタイトルの横に画像を置きたい

2006年10月02日 AQ


ライブドアブログを利用しています。サイドカラムのプラグインの各タイトルの左横に、ちょっとした小さなワンポイント画像をおきたいと思っているのですが、CSS の変更で設置できるでしょうか 

質問対象 : ライブドアブログ


考え方としては、.sidetitlebody{ } の中に画像を配置し、no-repeat と繰り返しを拒否します。通常は自然と左側に配置されますので、とりあえずは、これで画像がサイドカラムのタイトルの左側に表示されるはずです。

画像の高さの指定は必ずしておいて下さい。
具体的にはこうなります。(._.)

管理画面の 『 カスタマイズ / 管理 』 のタブをクリックして、『 デザインの設定 』 > 『 カスタマイズ 』 > で、CSS ( スタイルシート ) を呼び出します。次に CSS ( スタイルシート ) の中の .sidetitlebody{ } を ・・・

.sidetitlebody{
background:url('画像の置いてあるアドレス') no-repeat;
height:画像の高さpx;
}

上記のように記述します。
画像の高さを忘れずに必ず記述して下さいね (・・;)

そして、このままではサイドタイトルの文字と画像が重なってしまいます。ですから、サイドタイトルの文字の表示位置を右側にずらす必要があります。

次に ・・・.sidetitle{ } の中に ( 間違わないで下さいね。.sidetitlebody{ } ではありませんよ )、padding の指定があればそれを調整し、なければ新たに追記します。具体的にはこうです。(._.)

padding-left:○○px;

左から ○○px 右にずらしなさいという指示です。これでサイドタイトルの文字は指定した px 分だけ、右側に移動する事になります。

■ 同じ画像をサイドタイトルの両脇に置くことは可能でしょうか

これは残念です (+_+) あの領域に 2つ の画像を並べる事はできません。ただし、サイドカラムのタイトルの背景画像として両脇にワンポイントの画像を配した、gif や jpeg などの画像を、ご自身で作成できるのなら可能です。( 背景画像の作成の仕方は、ご自身の画像作成ソフトなどの説明をご確認下さい。 )

まず気をつけなければならないのは、背景として設置する画像の幅です。サイドカラムの幅を絶対に超えてはいけません。サイドカラムの幅は、2 カラムなら #links、3 カラムなら #left もしくは #right の中に width: ○○px; と CSS に記載されています。ご自身のブログの状況をご確認下さい。

確認したサイドカラムの同じ幅でデザインした長方形の画像を作成して、前述した回答と同じようにすれば、サイドカラムの両サイドにワンポイント画像が設置してあるように見えます。

すべての書き入れが終われば CSS を保存。CSS の再構築をおこない、閲覧しているブラウザーを更新すれば表示反映されています ε-(´∀`*)ホッ

この記事にコメントする
 :Name
 :Mail
 :URL
  情報を記憶:   書き込みのリセット: 
 
ご利用のブラウザ、設定ではご利用になれません。
 
  



Information
Category Menu
Promotion
New Entries
Mini BBS
Back Number
Comments
犬猫の腎臓病 (すーママ)
犬猫の腎臓病 (すーママ)
犬猫の腎臓病 (すーママ)
犬猫の腎臓病 (らぶママ)
犬猫の腎臓病 (すーママ)
犬猫の腎臓病 (すーママ)
TrackBacks
Tag Click
Access Ranking
Click Please!