スポンサーサイト

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

[ --/-- ] スポンサー広告 | トラックバック(-) | コメント(-)

Q.サイドバーのタイトルにアイコンをつけたいんだけど、できる?[3]

A.
ヤプログではサイドバータイトルの両脇にアイコンをつけることは、通常の方法ではできません。
ですが、片方だけならできます。
方法は、スタイルシートを変更するとできます。
以下、変更方法


1.
スタイルシートの一番下に
.side_title
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
PADDING-BOTTOM: 5px;
OVERFLOW: hidden;
COLOR: #fff;
WORD-BREAK: break-all;
PADDING-TOP: 5px;
LETTER-SPACING: 1px;
BACKGROUND-COLOR: #f99
}

と、あります。

2.
左端にアイコンを表示させる場合は、それを…
.side_title
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 23px; /*アイコン画像の横幅*/
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
PADDING-BOTTOM: 5px;
OVERFLOW: hidden;
COLOR: #fff; /*文字の色*/
WORD-BREAK: break-all;
PADDING-TOP: 5px;
LETTER-SPACING: 1px;
BACKGROUND-COLOR: #f99; /*背景の色*/
background-image: url("アイコン画像のURL"); /*アイコン画像のアドレス*/
background-repeat: no-repeat;
background-position: left;

}

と、書き加えます。

アイコンとタイトル文字が重ならないように調整するのがPOINT!
重なるようであるならアイコン画像の横幅の数値を大きくしてください。
アイコンとタイトル文字が離れすぎている場合は数値を少なくすればOK

通常のアイコン表示のように<img>で表示していないので、背景の固定画像として見せています。
なので、タイトル部分の背景画像+アイコンはこの方法ですとできません。
どちらか一方ということになります。

背景の色カラーコードを見て、好みの色に変更してください。
文字の色 → 背景の色を白系にした場合は必ず、カラーコードを見て、黒系の見える色に変更しましょう。

左端のアイコン表示だけ説明しましたが、右端表示は申し訳ありませんが省略させていただきます。
スポンサーサイト
[ 02/06 ] [サイドバー]3カラムpink | トラックバック(-) | コメント(-)

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