CSSでサイドバーのタイトル文字を英語などにする方法

新スキンのみ対応

アメブロカスタマイズのわざめーばです。

こんにちは。

サイドバーのタイトル文字を(英語にしたいなど)変えたい時に、CSSを使って別の文字列を表示する方法をご紹介します。

ただし、注意事項として、この方法は、IE7(Internet Explorer 7)以前のバージョンでは表示できませんので、IE7以前での表示を重要視される場合は使えません。

では、やりかたです。

以下のようなコードを、ユーザーCSSの末尾に追加して下さい。

.skinMenu .skinMenuHeader{
  margin-top:-20px; /* 見出し部の高さによって変える */
  background-position:0px 25px; /* 背景画像の位置合わせ */
}
.skinMenu .skinMenuHeader:after{
  display:block;
}
.profileMenu .skinMenuHeader:after{ /* プロフィール */
  content:"Profile";
}
.themeMenu .skinMenuHeader:after{ /* テーマ */
  content:"Themes";
}
.archiveMenu .skinMenuHeader:after{ /* 月別 */
  content:"Archives";
}
.calendarMenu .skinMenuHeader:after{ /* カレンダー */
  content:"Calendar";
}
.recentEntriesMenu .skinMenuHeader:after{ /* 最近の記事 */
  content:"Entries";
}
.recentCommentMenu .skinMenuHeader:after{ /* 最近のコメント */
  content:"Comments";
}
.bookmarkMenu .skinMenuHeader:after{ /* ブックマーク */
  content:"Bookmarks";
}
.readerMenu .skinMenuHeader:after{ /* このブログの読者 */
  content:"Readers";
}
.favoriteMenu .skinMenuHeader:after{ /* お気に入りブログ */
  content:"Favorites";
}
.rankingMenu .skinMenuHeader:after{ /* ランキング */
  content:"Ranking";
}

赤文字部分や、緑文字部分の値は、サイドバーの見出し部(タイトル部)の高さや、使用している画像などによって適宜変更する必要があります。

あとは、注釈を参考に、表示したい文字列を、『content』の値として設定して下さい。

以上、CSSでサイドバーのタイトル文字を英語など、お好きな文字列に変える方法をご紹介しました。

よかったら、試してみて下さい。

アメブロカスタマイズで人の集まるブログ作り