本日は、私が何を目指してブログをカストマイズしたのかをご紹介します。
目指したものは
ズバリこれです。
そうなんです。愛用のiPhone5Cで見かける画面です。背景写真の上に曇りガラス(すりガラス)があって、そこにさまざまなアプリがのっている・・・です。
ちまたのウェブサイトでも
トップ画面やタイトル画面で見かけることがたまにあります。もう、これはやるしかない!!でした。
作り方は
いろいろな記事で作り方が紹介されていました。
ところが・・・
早速試してみたのですが、何度やってもうまく行きません。
どうやってもダメ!!です。
(>_<。)
なかば諦めようと思っていたときです。
半透明でもいいかなぁ
透過という方法を使うと、チョット似ていることに気がつきました。立ち直りは早い方なので、すぐに試してみました。
まずはサイドバーから
最も簡単なのはサイドバーでした。
HTML構造
サイドバーの構造は、次のブログで教えていただきました。
サイドバー全体は"hatena-module"クラスで、タイトル部分とボディー部分は、それぞれ"hatena-module-title"クラスと"hatena-module-body"クラスで囲まれていることが分かりました。
<div class="hatena-module hatena-module-XX"> <div class="hatena-module-title"> モジュール名 </div> <div class="hatena-module-body"> モジュール内容 </div> </div>
各クラスの役割分担と設定
"hatena-module"クラスでは角の丸くなった囲み線を、それ以外のクラスでは背景色と透過度を設定することにしました。
まずは角の丸くなった囲み線です。角の丸みの半径は8pxです。うっすらと影もつけてみました。
.hatena-module { border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); overflow: hidden; margin-bottom: 16px box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); overflow: hidden; }
次にタイトル背景色の設定です。ヘッダーとボディーが離れないように、margin-bottomを0pxにしています。
(分かりやすくするために、次の例では背景画像も入れてみました。CSSコードは背景色部分のみ記載しています。)
.hatena-module-title {
padding: 8px;
background: rgba(137, 189, 211, 0.8);
margin-bottom: 0px;
}
最後はボディ背景色の設定です。
.hatena-module-body {
padding: 8px;
background: rgba(255, 255, 255, 0.9);
}
iPhone とはチョット違うけれど、まぁいいかぁです。
(*゚∀゚*)
背景色や透明度をかえるときには
”background: rgba(xxx, xxx, xxx, 0.x);”部分を直接変更します。
例えば、こんな感じです。
.hatena-module-title { padding: 8px; background: rgba(255, 105, 180, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 0px; } .hatena-module-body { padding: 8px; background: rgba(255, 255, 255, 0.4); }
RGBaについては、こちらの記事を参考にさせていただきました。
また、色はこちらのサイトで調べさせていただきました。
残りの部分は
ひたすら囲みたい場所を見つけは、先ほど作ったCSSのセレクタに追加していくだけです。ちょっとボリュームがあるので、別の機会にご紹介させていただきます。
設定する場所は
”ダッシュボード → デザイン → カストマイズ → デザインCSS”です。
これらの設定は、すべてCSSで行いました。
/* サイドバー */ .hatena-module { border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); overflow: hidden; margin-bottom: 16px } /* サイドバー・タイトル */ .hatena-module-title { padding: 8px; background: rgba(137, 189, 211, 0.8); margin-bottom: 0px; color: #000080; font-size: 1.1em; } /* サイドバー・ボディー */ .hatena-module-body { padding: 8px; background: rgba(255, 255, 255, 0.9); }
セレクタ | プロパティ | 備考 |
---|---|---|
.hatena-module | border-radius | ボックスの4つのコーナーの角丸 |
box-shadow | ボックスに影をつける | |
-xxx-box-shadow | ボックスに影をつける(レンダリングエンジン別) | |
overflow | ボックスの範囲内に内容が入りきらない場合 | |
margin-bottom | ボックス下の余白 | |
.hatena-module-title | padding | ボックス内のスペース |
background | 背景に関する指定 | |
margin-bottom | ボックス下の余白 | |
color | 書体の色 | |
font-size | 書体サイズ | |
.hatena-module-body | padding | ボックス内のスペース |
background | 背景に関する指定 |
まとめ
本日は、私が目指したオサレと透過を使ったまねっこをご紹介しました。
本当にやりたかった曇りガラス(すりガラス)を諦めた訳ではないので、いつの日にかリベンジをする予定です。
(`⌒´)!!
おしまい
※最新の設定は、こちらの記事でご確認ください。