ヘッダー部を iOS7 風にする

agsfsfsd

rect3015

sdfsfds

私の見たところ、背景をぼかして、アイコンやフォントを幾何学的にすれば、iOS7 っぽくなるような気がしたので、実際にブログのヘッダー部で試してみました。

Unknown Device 5

そのまま真似るとこんな感じになったのですが、

sdgfafasd-1

他の部分とバランスがとれないので、メニュー部分は前のものをそのまま使うことにしました。以下、変更手順についての、半ば、私的な覚書です。

ヘッダー画像をぼかす

まず、ヘッダー画像をぼかします。

元画像はこれです。

comemo_header02

ぼかし処理には「ToyViewer 」を使いました。普段、画像処理には「PhotoScape 」を使っているのですが、ToyViewer の方がぼかしの強度を強くできました。

SystemUIServer-2

ぼかし処理した画像を WordPress.com のメディアの方にアップロードし、

adfafasd-1

画像の URL をコピーしておきます。

adfsfd

画像を差し込む

以下の CSS を CSS スタイルシートエディタへ追加し、画像を差し込みます。

#branding {
	border: none;
	border-radius: 4px;
	background-color: #aaaaaa;
	background-image: url("https://comemo508.files.wordpress.com/2013/09/comemo_header03.jpg");
	background-size: cover;
}

その他、FirefoxFirebugSafari の「要素の詳細を表示」機能を使って、適宜、寸法の調整を行いました。

フォントを変更する

「外観」→「カスタムデザイン」→「フォント」(または「カスタマイズ」→「フォント」)より、幾何学的なフォントに変更します。今回は「Raleway」というフォントを使用することにしました。

dgfsafads

参考

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。