XeoryBaseを数行カスタマイズして簡単にMaterial Design風味にしてみた。

このブログはXeoryBaseという無料のWordPressテーマを使っている。普段からブログのWordPressテーマはフルスクラッチで白紙から書いているのだが、このブログはそういったブチ上げた高いハードルを地上に叩き落とすのが目的なので、今回フリーのテーマをダウンロードして運用している。のだけども、デザインがやや気に入らなかったので必要最小限の労力でカスタマイズしてみた。

書き足したCSS

article.post {
	box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
	border:none;
	border-radius: 3px;
}

以上。WordPressの管理者画面から外観>CSS編集から追記するのみ。他にも細かい変更点はあるのだけど、以上の数行でガラっと見た目が変わるはず。(今回最小限の労力でやりたかったので旧ブラウザ対応のベンダープレフィックスは書いていないので悪しからず)

ビフォー

アフター

borderを潰して丸角にしてシャドウを付けただけなのだけど、1pxのborderを使った直角ボックスと比べると結構モダンでオシャレな印象になったんじゃないだろうか。いわゆるGoogleのMaterial Design”風”に味付けしてみた格好だ。基本「めんどくさい」で出来ているブログなので、数行書き足しただけの今回のカスタマイズの費用対効果には満足。まぁ、モダンかと言われるとそもそもシャドウをブラウザ側にレンダリングさせて負担をかけるデザインは旧時代的だとか、border回帰論とかそういう議論もあったりするのだが、それはまた別の機会に。

  • このエントリーをはてなブックマークに追加

Push7でリアルタイム購読

digyはPush7を利用したリアルタイム購読に対応しています。Android版Chrome、PC版のChrome、Safari、Firefoxはブラウザから、iPhone、iPadは専用アプリから更新情報を受け取る事ができます。


購読開始