目次

【アメブロカスタマイズ】サイドバーのパーツ(ウィジェット)のタイトルを英語などに変える方法

「新CSS編集用デザイン」向けです

アメブロは、サイドバーの「最新の記事」「カレンダー」などの各パーツ(ウィジェット)のタイトル(見出し)を、別の名前に変更する設定や機能が提供されていません。

ですが、アメブロのジャンルや雰囲気、読者の属性などによっては、英語で表示したり、日本語でも標準とは異なる名前で表示したい場合もあるのではないでしょうか?

そこで当記事では、新CSS編集用デザインのアメブロで、見かけ上、これらサイドバーの各ウィジェットのタイトルを別の名前で表示する方法をご紹介します。

カスタマイズはCSSの編集で行いますので、やり方がわからない場合は先にチェックしておいて下さい。

サイドバーのタイトルを別の名前に変更する

当記事では、一例として、サイドバーのタイトルを「英語」での表記にする方法をご紹介しますが、英語にしたいのではないという場合も、表示する名前(文字列)の部分を変えるだけですので、簡単に対応可能です。

では、やり方です。

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

/* サイドバーのタイトル文字列を変更 */
.skin-widgetTitle {
  position: relative;
  overflow: hidden;
}
.skin-widgetTitle:before{
  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: #ffffff; /* 元のタイトルが見えないよう塗りつぶす色 */
}
/* 「プロフィール」のタイトル */
#profile .skin-widgetTitle:before{
  content: "Profile";
}
/* 「テーマ」のタイトル */
#theme .skin-widgetTitle:before{
  content: "Themes";
}
/* 「最新の記事」のタイトル */
#recentEntries .skin-widgetTitle:before{
  content: "Entries";
}
/* 「最近のコメント」のタイトル */
#recentComments .skin-widgetTitle:before{
  content: "Comments";
}
/* 「月別」のタイトル */
#archive .skin-widgetTitle:before{
  content: "Archives";
}
/* 「カレンダー」のタイトル */
#calendar .skin-widgetTitle:before{
  content: "Calendar";
}
/* 「ブックマーク」のタイトル */
#bookmarks .skin-widgetTitle:before{
  content: "Bookmarks";
}
/* 「このブログのフォロワー」のタイトル */
#readers .skin-widgetTitle:before{
  content: "Followers";
}
/* 「お気に入りブログ」のタイトル */
#favorites .skin-widgetTitle:before{
  content: "Favorite Blogs";
}
/* 「ランキング」のタイトル */
#ranking .skin-widgetTitle:before{
  content: "Ranking";
}

元のタイトルを「/* 元のタイトルが見えないよう塗りつぶす色 */」という注釈のある行で設定した色で塗りつぶし、その上に英語のタイトル文字列を重ね書きするような仕組みになっています。

もし、表示したいタイトルと異なる場合は、各注釈を参考にしながら、上記コードの該当箇所を変更して下さい。

例えば、「このブログのフォロワー」を「Followers」ではなく「フォロワー様」に変更するなどです。

また、変更したくないウィジェットがある場合は、上記コードの該当する設定を削除すれば元のタイトルが表示されます。

まとめ

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

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