サイドメニューを文字入れにしてみよう。［新デザイン対応］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。


　



以前、サイドメニューのカスタムで、
文字はテキスト型式のまま背景に画像を設置してみましたが、
今回は、文字が入った画像を作成し、設置してみようと思います。



【１】文字入れサイドメニュー画像の作成

まず、画像編集ソフトgimp等を使って、
以下の画像を作成しました。





【２】画像のアップロード

上記【１】で作成した画像をアップロードし、
それぞれのURLをメモ帳にコピーしておきます。

画像のアップロード方法について詳しく知りたい方は、
こちらの記事を参考にしてくださいね。
↓↓↓
■サイドメニュータイトルをカスタムしてみよう。［新デザイン対応］



【３】CSSを追加します。

追加するCSSは、次の通りです。

/* ■文字入れサイドメニューの設置■ */
.recentEntriesMenu .skinMenuHeader {/* 最新の記事 */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.themeMenu .skinMenuHeader {/* テーマ */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.calendarMenu .skinMenuHeader {/* カレンダー */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.archiveMenu .skinMenuHeader {/* 月別 */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.rankingMenu .skinMenuHeader {/* ランキング */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.bookmarkMenu .skinMenuHeader {/* ブックマーク */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.profileMenu .skinMenuHeader {/* プロフィール */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.readerMenu .skinMenuHeader {/* このブログの読者 */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}
.favoriteMenu .skinMenuHeader {/* お気に入りブログ */
background-image: url("画像のURL");
height: 56px;
padding: 0;
text-indent: -9999px;
}

上記の"画像のURL"の箇所に、
アップロードした画像のそれぞれのURLを
入力してくださいね。


これで、文字入れサイドメニューが設置できました。



どのようになったかは、以下のブログで確認してくださいね。
↓↓↓
kiyoのテスト用ブログ



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。


　

クリックして戴けると、
とても励みになります。