私がめざしたオサレなブログとは

本日は、私が何を目指してブログをカストマイズしたのかをご紹介します。

目指したものは

ズバリこれです。

目指したもの

そうなんです。愛用のiPhone5Cで見かける画面です。背景写真の上に曇りガラス(すりガラス)があって、そこにさまざまなアプリがのっている・・・です。

ちまたのウェブサイトでも

トップ画面やタイトル画面で見かけることがたまにあります。もう、これはやるしかない!!でした。

作り方は

いろいろな記事で作り方が紹介されていました。

creatorclip.info

www.webopixel.net

ところが・・・

早速試してみたのですが、何度やってもうまく行きません。

どうやってもダメ!!です。

(>_<。)

なかば諦めようと思っていたときです。

半透明でもいいかなぁ

透過という方法を使うと、チョット似ていることに気がつきました。立ち直りは早い方なので、すぐに試してみました。

まずはサイドバーから

最も簡単なのはサイドバーでした。

HTML構造

サイドバーの構造は、次のブログで教えていただきました。

moonnote.hateblo.jp

サイドバー全体は"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については、こちらの記事を参考にさせていただきました。

touch-slide.jp

また、色はこちらのサイトで調べさせていただきました。

16進数・RGB・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 背景に関する指定

まとめ

本日は、私が目指したオサレと透過を使ったまねっこをご紹介しました。

本当にやりたかった曇りガラス(すりガラス)を諦めた訳ではないので、いつの日にかリベンジをする予定です。

(`⌒´)!! 

おしまい

※最新の設定は、こちらの記事でご確認ください。