背景の透過させる opacityプロパティ
背景に入れた壁紙もサイドの外側にしか見せられなくって何とかしたいなって思うことないですか？
アメブロでやってみたので書いておくことにした。
[内容]
・メインフレームの透過
・背景は白色（お好きな色に変更してください）
・フォントは黒色でノーマル（必要があれば細くしたり太くしたりできます）
・透過度８０％（あまりと浮かしすぎると記事が読みにくくなります。）
数字が少ないほど透明に近くなる。
フレームの背景を透過させるには次の記述です。
#frame,
#main{
background-color:transparent;/*背景色を半透明*/
}
#frame,
#main {
width: ;
margin: 0;
padding: 0;
background: #fff;
color: #000000;
font-weight: normal;
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);
}
イメージ画像
コピーしてCSSに貼り付けるだけです。
サイドバーやブログの一部だけに反映したいときはフレームの指定を変更してください。
HTMLで指定できたと思うけどアメブロは良くわからないので少し苦労した。
HTMLタグが使える場所が限られているし禁止タグも多い。
難しいな。
fontとtextに関するプロパティ
| プロパティ名 | 説明 | |
| font | フォント関連をまとめて指定。 | |
| font-size | フォントのサイズを指定 | |
| font-weight | フォントの太さを指定 | |
| font-style | フォントのスタイルの指定。イタリック体と斜体を指定するときに使う。 | |
| font-family | フォントの種類を指定。ゴシック体などのフォント名で指定します。 | |
| font-variant | スモールキャピタルを指定。値をsmall-capsにすることでアルファベットの小文字の部分が「大文字」を縮小したようなテキストで表示されます。 | |
| プロパティ名 | 説明 | |
| text-align | 水平方向の表示位置を指定。ブロックごとに指定する。 | |
| vertical-align | 垂直方向の表示位置を指定。 | |
| line-height | 行の高さを指定。 | |
| text-decoration | 文字の装飾の指定。 | |
| text-indent | ブロックレベルで1行目の字下げの幅を指定。 | |
| text-transform | 大文字と小文字の変換の指定。全てを大文字・小文字にしたりアルファベットの頭文字だけを大文字にしたりする。 | |
| letter-spacing | 文字と文字の間隔を指定。 | |
| word-spacing | 単語と単語の間隔を指定。 | |
| white-space | 改行・スペース・タブの空白部分の指定。入力どおりに空白を表示したり、スペースを連続で入力した場合は１つの半角にしたりする。改行は右端の折り返しをするかしないか。 | |
background-color;（背景色）
壁紙は使わないでブログのイメージカラーを変更します。
body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-image:url(画像URL);
background-repeat:repeat-x;
background-color:#FFF;
このような記述があります。これがブログ全体の背景の設定になります。
壁紙を使用しなければ
background-image:url(画像URL);
background-repeat:repeat-x;
この部分を消して下にあるカラー指定のところ「＃FFF」って書いてあるところを変更します。
この数字はカラーコード（Color Tableと呼ぶこともある）と言ってRGBの16進数で色指定を行います。
英語表記で「red」や「black」など半角英数字で書いても指定できますが、このColorコードを使うのが一般的なのだと思います。
カラーコード表は検索すればたくさん出てくるので見やすいサイトを使ってください。
このコードは文字の色の変更などカラー指定する時に必ず必要ですから良く使うものは覚えておくと便利です。
black #000000 黒
white #ffffff 白
blue #0000ff 青
red #ff0000 赤
辞書登録しておくともっと便利です。
辞書登録についてはまた改めて書いておきます。
では、好きな色のコードに変更してプレビューしてみてください。
イメージ通りか確認できます。
いかがですか？背景の色が変わってよければ「更新」しておいてください。
テンプレートの変更したい部分を全て変更してから適用します。
seesaaのテンプレートから
seesaaにはいろいろなジャンルのテンプレートが用意されています。
でも、3カラムのテンプレートでこのサイトのような右よりはありませんでした。
全部を確実に見たわけじゃないですが、ざっと見たところにはなかったです。
それならばいっそ自分で変更してしまおうと思いました。
テンプレートはお好みで3カラムを選んでおきます。
まずはその元のテンプレートをバックアップしてください。
テンプレートをダウンロードしなおせば簡単に元に戻りますが、バックアップの癖はあるほうがいいと思います。
次に［デザイン一覧］から使用するテンプレート（適用済み）のスタイルシートを開きます。
変更するところは2箇所。
┣ #content
┣ #links-left
この2つの部分に「width:数字%;」が指定されています。
それを入れ替えてあげてください。
fontやmarginの指定はデフォルトのままで大丈夫です。
テンプレートによって数字の部分が「％」ではなく「px」になっているものもあると思いますが
widthの数字部分だけを入れ替えてあげれば同じです。
つまり、通常の真ん中にある記事の部分の幅と左側のサイドバーの幅を入れ替えただけです。
あとはデザインの中の［コンテンツ］に入って左から『記事』『サイドバー1』『サイドバー2』になるように入れ替えてあげてください。
［コンテンツ］のレイアウトの画面での幅は変わっていませんが設定を反映してブログを確認すると
ちゃんと一番左から『記事』『サイドバー1』『サイドバー2』になっていると思います。
背景の画像によっては移動させると見づらくなる物もあるのでその場合は背景画像も変更したほうがいいと思います。
この変形タイプがいいのかはわかりませんが最近よく見かけるので
なんとなく「いいなぁ?」と思っただけですが、試しにやってみてください。
左寄せがよければこれと反対になる部分を変更すればできるということです。
追記
「class」属性の指定も変更しておくといい。
その場合は、HTMLのほうの記述も変更する必要がある。
background-image:（背景画像）
俗に言う「壁紙」というものを用意します。
壁紙はフリー素材で探しても良いし、自分で作ることも出来ます。
サイズは画像や表示のさせ方でも違ってきますが、seesaaブログの『天使の卵(両サイドバー)』のスタイルシートで説明してみます。
ブログの背景を指定している部分は下記のようになっています
ブログの土台部分になるbodyの部分で背景を設定します。
httpから始まるURLを見てみると縦に細長い画像「2x1300」のサイズになっています。
これを横に繰り返して表示させる指定です。
repeat-x
横方向に並べて表示というものです。
他の表示の仕方は表にまとめてみました。
background-repeat | repeat-y （縦方向に並べて表示） |
repeat-x （横方向に並べて表示） | |
no-repeat （1つだけ表示） | |
repeat （敷き詰めて表示）デフォルト |
ちなみに、
background-image: none;
url( )のところに「none」といれれば画像無しの表示になります。
スタイルシートを見ているとbackground-image:url( )
こういう記述は他にもあります。それぞれ好きな画像に変更してみてください。
スタイルシート