CSS編集: モジュール・タイトルの先頭にアイコンをつける

Joomla!1.5 Manual

Joomla! 1.5使い方解説サイト

Sep

2008

モジュール・タイトルの先頭におしゃれなアイコンをつけるCSSカスタマイズ方法を紹介します。

編集前
モジュール・タイトルの先頭にアイコンをつける

編集後

まずは使用するアイコンを探しましょう。自分のサイトに合うアイコンを探してください。私は、famafamfamのminiアイコンシリーズのaction_go.gifという名前のアイコンを使います。

famfamfam提供画像

では、スタイルシートを編集してみましょう。

JA Purityの場合は、CSS編集をクリックした後に表示される４つのCSSの中のtemplate.cssを編集します。

モジュール・タイトルは、h3タグで出力されています。そしてmoduletableというクラスが適用されています。以下のように編集してください。

編集前

div.moduletable h3,
div.moduletable_menu h3,
div.moduletable_text h3 {
padding: 0 0 8px;
margin: 0;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

編集後

div.moduletable h3,
div.moduletable_menu h3,
div.moduletable_text h3 {
padding: 0 0 8px;
margin: 0;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
background: url('/../images/action_go.gif') no-repeat;
padding-left: 18px;
}

ここでは、背景画像をbackgroundで指定し、タイトルの左側にアイコンを表示するためのスペースが空くように、padding-leftでピクセルを指定しています。

これで味気ないモジュール・タイトルにアイコンが付くことで、ちょっとおしゃれになりました。

最終更新 ( 2008年 9月 23日(火曜日) 08:10 )

テンプレート変更

アクセスカウンタ

アクセス		[+/-]
今日: 1日前: 2日前:	23 184 210	-26
今週: 先週: 2週間前:	857 1168 1222	-54
今月: 先月: 2ヶ月前:	1718 5007 5096	-89

現在
ゲスト 6 人
がオンラインです

テンプレート変更

アクセスカウンタ

最新記事

人気記事

Joomla!1.5なサイト