テーマにアイコンを設定

★　テーマにアイコンを設定


①　サイドバーの基本設定で、テーマ一覧をリンク表示にします。

②　アイコンくらいの大きさの画像を用意します。

例：私のブログの例
横12px 縦14px








③　テーマの全てに同じアイコン画像を設定する場合
　　（アイコンもカーソルを乗せたときにリンクする様にしたい場合）

/* ------------------------------------------------------- */
/* テーマの前にアイコン　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.themeMenu li a{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;/* 左余白 */
}

④　テーマの全てに同じアイコン画像を設定する場合
　　（アイコンをカーソルを乗せたときにリンクしない様にしたい場合）

/* ------------------------------------------------------- */
/* テーマの前にアイコン　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.themeMenu li {
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;/* 左余白 */
}

⑤　テーマ別にアイコンを画像を設定する場合
　　（アイコンもカーソルを乗せたときにリンクする様にしたい場合）

　◆　③又は、④で全てにアイコンを設定してから、
　　　アイコンを変えたいテーマのみ⑤又は、⑥で指定する方法が
　　　可能です


　●　テーマ番号を得る（ブラウザがＩＥの場合で説明しています）

　　　・　自分のブログの該当のテーマを右クリックして、プロパティを
　　　　　クリックします

　　　　　・　表示されたプロパティのアドレス（ＵＲＬ）をコピーします。

　●　得たテーマのＵＲＬからセレクタ名（場所の名前）を得ます



例

下記のテーマのＵＲＬを

http://ameblo.jp/new-blue-777/theme-10040499959.html


下記の様にします( .themeNumber に　テーマのＵＲＬの番号を追加する）

.themeNumber10040499959



　●　下記の様にＣＳＳを作成します。

/* ------------------------------------------------------- */
/* テーマの前にアイコン（テーマ別）　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.themeMenu .themeNumber10040499959 a/* テーマの名前 */
{
background-image:url(画像のＵＲＬ) !important;
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;/* 左余白 */
}

　●　複数ある場合は下記の様にします（ ,（カンマ）　で区切ります　　
　　　最後は、カンマは入れないこと）

/* ------------------------------------------------------- */
/* テーマの前にアイコン（テーマ別）　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.themeMenu .themeNumber10040364324 a,/* テーマの名前 */
.themeMenu .themeNumber10040499959 a,/* テーマの名前 */
.themeMenu .themeNumber10040363921 a/* テーマの名前 */
{
background-image:url(画像のＵＲＬ) !important;
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;/* 左余白 */
}

⑥　テーマ別にアイコンを画像を設定する場合
　（アイコンをカーソルを乗せたときにリンクしない様にしたい場合）



◆　⑤と同じです。　a の部分を消せばＯＫです。



　●　下記の様にＣＳＳを作成します。

/* ------------------------------------------------------- */
/* テーマの前にアイコン（テーマ別）　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.themeMenu .themeNumber10040499959 /* テーマの名前 */
{
background-image:url(画像のＵＲＬ) !important;
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;/* 左余白 */
}

　●　複数ある場合は下記の様にします（ ,（カンマ）　で区切ります　　
　　　最後は、カンマは入れないこと）

/* ------------------------------------------------------- */
/* テーマの前にアイコン（テーマ別）　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.themeMenu .themeNumber10040364324 ,/* テーマの名前 */
.themeMenu .themeNumber10040499959 ,/* テーマの名前 */
.themeMenu .themeNumber10040363921 /* テーマの名前 */
{
background-image:url(画像のＵＲＬ) !important;
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;/* 左余白 */
}

★　またテーマ別に背景色を変えたり、アイコン画像ではなく、連続した画像で
　　装飾も可能です