"CSS Tips Factory" : Presented by Nishishi via WordPress.

ボックスの右下にロゴを固定して表示 [ボックス, イメージ]

段落などの「ボックス」の右下に、特定のロゴを常に固定して表示してみます。
すべての段落に、同じようにロゴを表示させると、なんとなく特徴あるウェブサイトができるような気がします。

私にはデザインセンスがないので(^_^;)、こんなサンプル「LOGOサンプル」しか作れませんが、もっとセンスの良いロゴを用意すれば、特徴的なページデザインができるんじゃないかな…。(^_^;;;

各段落の右下にロゴを表示させるとは、例えば、以下のような感じ。

このスタイルの特徴は、常にボックスの「右下」にロゴが表示されるという点。
ボックスの高さがどれくらいであっても、「右下」に表示されます。
おそらくこの段落の高さは3行分でしょうが、5行でも8行でも、ロゴは右下固定です。

このように、段落をいくつ配置しても、各段落の右下にロゴが表示されます。
まあ、このサンプルで用意したようなロゴ画像だと表示したくないかも知れませんが(^_^;)、何か自分のウェブサイトのロゴがあるなら、ちょっと薄めに加工して、ボックスの背景に置いてもおかしくないように作ってみるとおもしろいかもしれません。
デザインセンスがないと苦しいかも知れませんが…。(^_^;;;
ロゴさえうまく作れば、なかなか特徴的なページができあがりそうな気がします。

上記のように段落(などのボックス)を装飾するのは、非常に簡単です。
「右下」に配置するロゴは、単に「ボックスの背景画像」として指定しているだけです。ただ、

  • 背景画像の繰り返しをなくす(=1回だけ表示)
  • 背景画像の表示位置を「右下」に固定する

…というスタイルを加えているだけです。

具体的には、以下のようにスタイルシートを記述します。

p.sample {
   background-image: url("DarkYellowLogo.gif"); /* ロゴURL */
   background-repeat: no-repeat; /* 1回だけ表示 */
   background-position: bottom right; /* 右下に表示 */
   background-color: #ffffcc; /* 背景色 */
   padding: 0.3em; /* 内側の余白 */
}

最後のbackground-colorプロパティとpaddingプロパティはなくても構いませんが。ただ背景色を塗って、内側の余白を設けているだけなので。

background-repeatプロパティに値「no-repeat」を指定すると、背景画像が1回だけ表示されるようになります。上下左右にタイル状に貼られなくなります。
また、background-positionプロパティに値「bottom right」を指定すると、背景画像が右下に表示されます。「bottom」と「right」の間には半角スペースがあります。(※値を2つ指定しているわけです。) 「top right」と書いていれば、ボックスの右上に表示されます。

まあ、こんな感じで。ロゴさえうまく作れれば、おもしろい装飾になるんではないかと思います。(^_^;;;

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。