サイドバーのテーマ一覧の任意の項目を目立たせる方法

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

こんにちは。

今回ご紹介するカスタマイズは『サイドバーのテーマ一覧の任意の項目を目立たせる方法』です。

テーマ一覧の中から、「このテーマの記事は特に見て欲しい」というテーマはありませんか?

もしあれば、今回のカスタマイズ方法で、そのテーマの文字を太字にしたり、大きくしたりなどして目立たせることができます。

まず確認

このカスタマイズでは、CSSの編集によって行いますので、やり方が分からない場合は確認しておいて下さい。なお、【カスタム可能】ベーシック等の旧デザインを使っている場合は、CSSに加えてフリープラグインを利用したカスタマイズも行いますので、こちらも確認しておいて下さい。

目立たせたい項目の情報を取得

まず、テーマ一覧から目立たせたい項目(リンク)に設定されているURLから必要な情報を取得します。

項目をクリックしてそのページにジャンプすると、ブラウザのアドレスバーにURLが表示されますよね。

URLは、以下のようにな形式になっていると思います。

http://ameblo.jp/アメブロID/theme-数字の羅列.html

必要なのは、数字の羅列の部分です。

この記事執筆時点では、11桁の数値になっていますが、もしかすると、もっと桁が少ない場合があるかもしれませんし、今後桁数が増える可能性もあります。

とにかく数字の羅列の部分を使いますので、どこかにメモしておいて下さいね。

CSSの編集

次に、ユーザーCSSの末尾に以下のようなコードを追加します。

なお、今回は『文字を太字に、文字サイズを1.5倍に』していますが、もちろん他の設定も可能ですので、色々工夫してみてください。

li.themeNumber00000000000{
  font-weight:bold;
  font-size:150%;
}

恐らくお分かりだと思いますが、00000000000の部分には、上でメモした数字の羅列が入ります。

00000000000のままでは何も起こりませんのでご注意下さい。

新デザイン『CSS編集用デザイン』をお使いの場合は、これで完了です。

フリープラグインの編集

もし、【カスタム可能】ベーシック等の旧デザインをお使いの場合は、残念ながらCSSの編集だけでは何も変化がありません。

【カスタム可能】ベーシック等で、このカスタマイズを実施したい場合は、更に、以下のコードをフリープラグインに追加して下さい。

<script>
$(function(){if($('body#mainIndex').length){$('#theme_list li').each(function(i,e){$(e).addClass('themeNumber'+$('a',e).attr('href').replace(/^.*?(d+).html$/,'$1'))})}});
</script>

これで、旧デザインの場合でも、目立たせたい項目にCSSで設定した内容が適用されたと思います。

以上で、サイドバーのテーマ一覧の任意の項目を目立たせる方法の説明は終わりです。

よかったら試してみてくださいね。

関連記事

CSSの編集によるカスタマイズ
フリープラグインを利用したカスタマイズ

アメブロカスタマイズで自分らしい空間を作る技