アメブロには、サイドバーのウィジェットのタイトル部分の表記を変更する機能は搭載されていませんが、新CSS編集用デザインでは、カスタマイズすることで、見かけ上は英語など元の表記とは異なる内容に変えることが可能です。
仕組みを簡単に
先ほども書きましたが、アメブロにはこれらのタイトルを変更する機能は用意されていません。
なので、実際に変更するのではなく、元のタイトルを隠してその上から別のタイトルを表示するというやり方になります。
「英語など」と書きましたが、別に英語に限るわけではなく、好みの文字列を表示することができます。
サイドバーのタイトルを変更する
このカスタマイズでは、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";
}
コードを編集する
追加したコードは、好みに応じて、「元のタイトルが見えないよう塗りつぶす色」と、各タイトルとして「表示したい文字列」を変更して下さい。
ここまでできたら、保存、表示確認して完了です。
まとめ
以上、アメブロの新CSS編集用デザインで、サイドバーの各ウィジットのタイトル部分の表示を、英語など、別の表記に変更するカスタマイズ方法をご紹介しました。
まとめると、
- CSSに該当のコードを貼り付ける
- 好みに応じて「元のタイトルが見えないよう塗りつぶす色」と「表示したい文字列」を変更する
- 保存して表示を確認する
という簡単な手順でできます。
よかったら参考にして下さい。