このエントリーをはてなブックマークに追加
はてなブックマーク - SIRIUSで記事エリアに壁紙を透過させるには?
[`evernote` not found]
Facebook にシェア
LINEで送る

この記事の所要時間: 232

SIRIUSの購入者Yさんからのメールのやりとりからです。

背景がばーんっと目立っているサイトを作りたいのですが、記事エリアに背景をすかせるようなやり方ってSIRIUSでどうやって再現したら良いのですか?

なるほど。

通常SIRIUSでサイトを作ると壁紙を入れたとしても記事が書かれているエリアは白のままになってしまいますね。

image

壁紙自体は設定はサイトオプションの中から簡単にすることができます。

壁紙設定のやり方
  • サイトオプションをクリック
  • サイトデザインをクリック
  • 背景画像を選択する

image

 

今日やりたいことは、文字が書かれているエリアに後ろの背景をすかせていきたいという願望です。

完成イメージ

image

 

やりたいことはこんな感じです。

先ほどの画像では文字エリアは真っ白で後ろの背景は透けていませんでしたが、今回は背景が透けています。

これを達成するにはCSSをいじることが必要になってきます。

CSS編集画面を表示する
  • テンプレート▼をクリック
  • スタイルシート編集をクリック(CTRL+Wでも可能)

image

CSSの中でcontentsという項目を編集します。

スタイルシート(CSS)はWebサイトのデザインを司る部分です。HTMLがサイトの骨格を作るのに対して、CSSは装飾部分を担当します。

故にCSSをいじることでデザインの変更が可能になります。

今回は文字が打たれている領域の背景を白から半透明にしたいのでcontentsという内容を編集していきます。

contentsという項目を楽に探すには
  • contentsと入力
  • 次を検索をクリック

image

すると#contentsという項目に勝手にジャンプされるはずです。

ここのbackground-color:#FFFFFF;という文字の配列が文字エリアの背景を真っ白にするぞという意味です。

  • background-color「背景色」
  • :「は」
  • #FFFFFF「白」

と考えるとわかりやすいですね。

 

次のように変更します。

image

#FFFFFF; → rgba( 255, 255, 255, 0.7 );

background-color: rgbaとは?

背景色がrgbaという意味です。

rbgaはRed, Blue, Green,という3色とAlpha「透明度」を数字で示したものです。

例えばrgba ( 0, 0, 0, 1)は黒で透明度は0%という意味です。

alphaは1が透明度0%、0が透明度100%という意味になります。通常1と0は使うことがあまり無いでしょう。

ということはrgba (255, 255, 255, 0.7)は白(255, 255, 255)で透明度70%という意味になるということです。

→ 詳細はこちらを参考(別窓)に勉強されるとよいでしょう。

一部古いブラウザーではこちらの機能が使えないのでその場合はやはり白い背景のままになっていまします(古いブラウザーを切り捨てると割り切ればいいと思います。対応してなければ単なる白い背景ですから)

 

個人的にはalphaは0.8-0.7位がオススメです。あまり透明になりすぎても背景が強すぎると文字が見づらくなりますので。

 

壁紙に対するワンポイントアドバイス

壁紙自体は出来る限り大きいもの(1920×1200ぐらい?)を使い、壁紙を固定しておくことがポイントです。

固定するときにはスタイルシート編集の#bodyをいじります。

image

元からある

background-image: url(img/top_bg.jpg);
bakground-repeat: repeat-x;

<% backgroundDisplay %>

を削除します。

 

そして

<% backgroundImage %>

の下に

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

を打ち込んでやります。

詳細はこちらを参考のこと(別窓)

 

SIRIUSの通常設定(背景の設定)ではbackground-attachmentの設定が基本できないようなのでて入力をします。

ちなみにこの設定をSIRIUS上で行った場合<% backgroundDisplay %>に表示される設定になっています。

 

こんな感じでCSSを編集しなければいけませんが、背景を半透明に表示することが出来ました。

 

CSSの打ち間違いはレイアウト崩れの原因に?

最後に、CSSはレイアウトを司る大切な命令文なので下手にいじるとレイアウトが崩れたりします。

ただ、SIRIUSの場合、基本設定はメニュー部分にある「デフォルトに戻す」をクリックすればすぐに元に戻せるので慌てずに対処してください。

image

 

CSSをいじれるようになってくると他と差別化をしたSIRIUSのサイトが作れるようになりますよ。

 

>>まだSIRIUSを持ってない人はこちらをご覧ください。

このエントリーをはてなブックマークに追加
はてなブックマーク - SIRIUSで記事エリアに壁紙を透過させるには?
[`evernote` not found]
Facebook にシェア
LINEで送る