アメブロ記事をテーマ毎に別々のデザインにカスタマイズする方法

アメブロ記事をテーマ毎に別々のデザインにカスタマイズしたい

アメブロのCSS編集用デザインで、記事のデザインを、テーマ毎に別々のデザインにカスタマイズする方法です。

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

こんにちは。

新スキン『CSS編集用デザイン』は、CSSを使って、記事をテーマ毎に別々のデザインにカスタマイズできるようになっています。

以前、サイドバーのテーマ一覧を項目別にカスタマイズする方法をご紹介したのですが、同様のことが、記事に対してもできるんです。

この方法を使えば、

・テーマ毎に記事枠や背景色を変える。
・テーマに応じた画像を使ったデザインにする。
・特定のテーマの記事を太字にする。

などといったことが、比較的簡単にできるわけです。

やり方は、以下のとおりです。

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

テーマ番号を取得する

アメブロのテーマには、そのテーマ毎に11桁の固有の番号がついています。

記事のデザインをテーマ毎に別々のデザインにカスタマイズするには、この番号(テーマ番号)が必要です。

テーマ番号は、テーマページのURLから取得することができます。

記事内にあるテーマのリンク先URLの最末尾『.html』の直前にある11桁の数値テーマ番号です。

また、サイドバーのテーマ一覧の各リンク先URLの最末尾『.html』の直前にある11桁の数値テーマ番号ですので、こちらを使ってもOKです。

テーマ毎にカスタマイズする方法

テーマ番号がわかったら、それを使って、そのテーマの記事のみを個別にカスタマイズすることができます。

コツは、

.skinArticle.themeNumberテーマ番号

というセレクタを使うことです。

たとえば、

『テーマ番号=10123456789の記事に、赤枠を付けて背景を薄い赤色にカスタマイズする』

には、ユーザーCSSの末尾に次のような設定を追加します。

.skinArticle.themeNumber10123456789{
  border:4px solid #ff0000; /* 赤枠 */
  background-color:#ffeeee; /* 背景色 */}

また、たとえば、

『テーマ番号=10123456789の記事の本文を太字にカスタマイズする』

には、ユーザーCSSの末尾に次のような設定を追加します。

.skinArticle.themeNumber10123456789 .articleText{
  font-weight:bold; /* 太字 */
}

他にも色々と応用できますね。