【新スキン】サイドバーのタイトルを英語化【追記あり】 | blog lab 【アメブロカスタマイズとネタ話】

blog lab 【アメブロカスタマイズとネタ話】

コメント欄にプロフィール画像、などのカスタマイズの小ネタと、普段の話のネタを書いていきます。

photo by Tricia Wang


サイドバーのメニュータイトル、例えば「プロフィール」とか「カレンダー」とか・・・これらの表示を簡単に英語化する方法を、soleilさんが公開されていたのでご紹介いたします。

クラス名から直接引っ張ってくるとは、頭いい!

この方法の欠点は、DOMツリーの読み込みが終わるまで日本語で表示されているのが見えてしまう、という点です。
それがどうしてもいや!という方は、以下のように。

※【追記】soleilさんのアドバイスで一部変更しています。

★フリープラグイン
< script type="text/javascript" >
(function($){
$(function(){
$('.skinMenu').each(function(){
$('span.skinMenuTitle',this)
.html(this.className.replace(/skinMenu(\s)(recent)*(.+)Menu/g,'$2$1$3'));
});
$('.skinMenuTitle').css('visibility','visible');
});
}(jQuery));
</script>

★CSS(CSSの最後に足してください)
.skinMenuTitle{
visibility:hidden;
}


しかし上の方法ですと、javascriptをオフにしている方にはタイトルが見えなくなってしまいます。
まぁ、そこまで気にすることも無いかとは思いますが、一応対処法はあります。
CSSは上のCSSをそのままに、フリープラグインに変更を加えます。

★フリープラグイン
<noscript>
<style>
.skinMenuTitle{
visibility:visible;
}
</style>
</noscript>
< script type="text/javascript" >
(function($){
$(function(){
$('.skinMenu').each(function(){
$('span.skinMenuTitle',this)
.html(this.className.replace(/skinMenu(\s)(recent)*(.+)Menu/g,'$2$1$3'));
});
$('.skinMenuTitle').css('visibility','visible');
});
}(jQuery));
</script>
・・・ここまで来るともはやお手軽感が全く無いので、javascriptオフは気にしないことをオススメしますwww