アメブロ旧CSS：サイドバーのウィジェットのタイトルを英語に変えてみる

アメブロには、サイドバーのウィジェットのタイトル部分の表記を変更する機能は搭載されていませんが、旧CSS編集用デザインでは、カスタマイズすることで、見かけ上は英語など元の表記とは異なる内容に変えることが可能です。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインで、サイドバーの各ウィジットのタイトル部分を、英語など別の表記で表示するカスタマイズ方法について解説します。

1 仕組みを簡単に
2 サイドバーのタイトルを変更する
3 コードを編集する
4 まとめ

仕組みを簡単に

先ほども書きましたが、アメブロにはこれらのタイトルを変更する機能は用意されていません。

なので、実際に変更するのではなく、元のタイトルを隠してその上から別のタイトルを表示するというやり方になります。

「英語など」と書きましたが、別に英語に限るわけではなく、好みの文字列を表示することができます。

サイドバーのタイトルを変更する

このカスタマイズでは、CSSを編集しますので、やり方がわからない場合は、先に手順を確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

以下のコードを、CSSの一番最後に追加して下さい。

/************************************************
  旧CSS：サイドバーのタイトルを英語などに変える
************************************************/
.skinMenuHeader {
  position: relative;
  overflow: hidden;
}
.skinMenuHeader:after {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: inherit;
  margin-left: -100%;
  transform: translateX(100%);
  background: #e4e4e4; /* 元のタイトルが見えないよう塗りつぶす色 */
}
/* 「プロフィール」のタイトル */
.profileMenu .skinMenuHeader:after {
  content:"Profile";
}
/* 「テーマ」のタイトル */
.themeMenu .skinMenuHeader:after {
  content:"Themes";
}
/* 「最新の記事」のタイトル */
.recentEntriesMenu .skinMenuHeader:after {
  content:"Entries";
}
/* 「最近のコメント」のタイトル */
.recentCommentMenu .skinMenuHeader:after {
  content:"Comments";
}
/* 「月別」のタイトル */
.archiveMenu .skinMenuHeader:after {
  content:"Archives";
}
/* 「カレンダー」のタイトル */
.calendarMenu .skinMenuHeader:after {
  content:"Calendar";
}
/* 「ブックマーク」のタイトル */
.bookmarkMenu .skinMenuHeader:after {
  content:"Bookmarks";
}
/* 「このブログのフォロワー」のタイトル */
.readerMenu .skinMenuHeader:after {
  content:"Readers";
}
/* 「お気に入りブログ」のタイトル */
.favoriteMenu .skinMenuHeader:after {
  content:"Favorites";
}

コードを編集する

追加したコードは、好みに応じて、「元のタイトルが見えないよう塗りつぶす色」と、各タイトルとして「表示したい文字列」を変更して下さい。

ここまでできたら、保存、表示確認して完了です。

まとめ

以上、アメブロの旧CSS編集用デザインで、サイドバーの各ウィジットのタイトル部分の表示を、英語など、別の表記に変更するカスタマイズ方法をご紹介しました。

まとめると、

CSSに該当のコードを貼り付ける
好みに応じて「元のタイトルが見えないよう塗りつぶす色」と「表示したい文字列」を変更する
保存して表示を確認する

という簡単な手順でできます。

よかったら参考にして下さい。