背景を半透明にする方法(記事、サイドメニュー、メッセージボード、コメント等)

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

こんにちは。

今回は、背景用、透過PNG半透明画像素材(白・黒・グレー系)背景用、透過PNG半透明画像素材(カラー・原色系)でご紹介した、透過PNG画像を使って、CSS編集用デザインを適用したアメブロの様々な箇所の背景を半透明にするカスタマイズ方法をご紹介します。

ブログの背景に置いた大きな写真を生かしたい場合など、各パーツの背景を透かしたいときに使える方法です。

背景の半透明化は、ユーザーCSSで、

 ・背景色を透明(transparent)にする
 ・背景画像に半透明画像素材(透過PNG画像)のURLを設定する
 ・背景画像をタイル状に敷き詰める(repeat)

という設定をすると、たいてい実現できます。

例えば、記事の背景を半透明化したい場合は、ユーザーCSSの末尾に次のような設定を追加して下さい。

.skinArticle {
  background-color: transparent;
  background-image: url(背景に使用する透過PNG画像のURL);
  background-repeat: repeat;
}

背景に使用する透過PNG画像については、背景用、透過PNG半透明画像素材(白・黒・グレー系)背景用、透過PNG半透明画像素材(カラー・原色系)などを参考にして下さい。

また、緑文字.skinArticleの部分(セレクタ)は、半透明化したい位置に応じて適切なものを設定する必要があります。

以下に、いくつか例を書いておきますので、参考にして下さい。

セレクタ 説明
.skinMessageBoard メッセージボード
.skinArticle 記事
.skinMenu サイドメニュー(プロフィール、このブログの読者など)全体。CSS編集用デザインの初期では、薄いグレーになっているサイドメニュー本体部分の周辺の枠に見える所。
.skinMenuBody サイドメニュー(プロフィール、このブログの読者など)本体部分。
.blogComment 一件一件のコメント。
.ownerComment ブログ主自身が書いたコメント。

セレクタはもちろん他にも色々ありますが、ひとまずこれだけご紹介させていただきますね。

以上、記事、サイドメニュー、メッセージボード、コメント等の背景を半透明にする方法をご紹介しました。

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

関連記事

背景用、透過PNG半透明画像素材(白・黒・グレー系)
背景用、透過PNG半透明画像素材(カラー・原色系)
アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ
アメブロの画像アップロード方法と画像のURL取得方法

アメブロカスタマイズで人が集まるブログ作り