無料WordPressテーマLuxeritasを黒背景にするついでにウィザードリィ風にアレンジしてみた

さて、今日は誰得な感じのLuxeritasのCSSカスタマイズになりますが、何となく作ってみたくなったのでやってみましたみたいな。

サイトの全体的なイメージカラーを変更出来るWordPressテーマはそれなりにありますが、Luxeritasのようにメインカラムを含めた背景まで簡単に黒ベースで統一出来るテーマというのはなかなかありそうでありません。

とは言ってもWordPressのテーマは非常に多いので、私が知らないだけだというのは多分にあるかもしれませんけどね?

スポンサーリンク

背景を黒にするのは手間がかかります

自分でホームページを一から作成する場合は特別難しい事では無いです。ここで言うのはいわゆるSimplicityやSTINGERのようなWordPressテーマの全体的な背景(ここポイントです)を黒にする場合の話だと思っていただきたい。

単純に背景色を黒にするだけならすぐにでもカスタマイザーから出来ますが、スタイルに色の指定が含まれているセレクタが結構あるので、なかなか思い通りにはなってくれないのが実情です。

STINGER8の背景色をカスタマイザーから黒に変更してみる

例えばSTINGER8だとこんな感じになります。投稿や固定ページが表示されるメインカラムまではカスタマイザーでの設定が適用されません。

Simplicityの背景色をカスタマイザーから黒に変更してみる

こちらはSimplicityですが、やはりSTINGER8と同様の結果になります。まぁ背景ですからこれはこれで間違ってはいない気もしますけど。

実際に試した事がある方ならわかっていただけると思いますが、この状態からメインカラムの背景を黒にすれば良いというものではありません。当然フォントの色も変えないと文字が全く読めませんし、セクションやウィジェットによっては背景が白い部分もあったりして次から次へと不整合が出てきます。

Luxeritasなら簡単、超簡単

それでもLuxeritasなら…Luxeritasならきっと何とかしてくれる。

カスタマイザーから全体イメージをブラックに設定するだけで、なんと文字色まで自動的に変更してくれます。スバラシイ…

Luxeritasの背景色をカスタマイザーから黒に変更してみる

好みで手を加える部分があるとすれば、メインカラムとサイドバーの背景が黒では無く濃いグレーだという事と、リンクが若干見辛いかな?という事くらいですかね。そこさえ気にならなければこのままで十分カッコイイ、と言うか完全に真っ黒にしたいわけで無ければこの方が良いのではないかと思います。

そこであえてウィザードリィ風味

ウィザードリィとはなんぞや?というのはここではあえて語りませんが、いわゆるダンジョンRPGのルーツ的なゲームと言えば良いでしょうか。いや、語りませんとか言っておいて語っちゃってるのかコレは。とりあえずそんな感じです。

Luxeritasの背景色を黒に変更したついでにウィザードリィっぽくしてみた

あくまでもそれっぽくしてみただけで特に凝った事はしていませんし、テスト用のサイトなのでコロコロとテーマを変更する可能性もあるのでリンクでは無く画像だけ貼ってみました。

需要は無いだろうと思いますが、参考までにcssはこんな感じです。

.sitename {
	padding: 5px 30px;
	border: 3px solid #f0f0f0;
	border-radius: 10px;
}

h1.entry-title ,
h2.entry-title ,
#side h3 ,
#side h4 {
	padding: 10px 30px;
	font-size: 18px;
	text-align: center;
	background: #000;
	border: 3px solid #f0f0f0;
	border-radius: 10px;
}

#side h3 ,
#side h4 {
	margin-top: -40px;
	margin-right: 30px;
	margin-left: 30px;
}

#side .widget {
	margin-top: 16px;
	margin-bottom: 40px;
	background: #000;
	border: 3px solid #f0f0f0;
}

#side-scroll .widget:first-child {
	border-top: 3px solid #f0f0f0;
}

.grid {
	background: #000;
	border: 3px solid #f0f0f0;
}

#gnavi {
	font-size: 16px;
}

.sitename ,
h1.entry-title ,
h2.entry-title ,
#side h3 ,
#side h4 ,
.post h2 ,
.post h3 ,
.post h4 ,
#gnavi {
	font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
	font-weight: 500;
}

あくまでもお遊び的に作成しただけなので実用性は度外視でお願いします。あとおかしい部分があったら適当に直して下さいね?

と言うか、CSSを書く順番はどうするのが良いとかさっぱりわかっていないので、これから少しづつでも学んでいきたいと思ってるところです、はい。

最初から黒のテーマを使えば簡単ですが

「背景を黒にするのが難しいなら最初から黒のテーマを選べばいいじゃない」というのはズバリ正論です。テーマをデザインだけで決めるならそれが一番てっとり早いと思いますが、出来ればお気に入りのテーマでそうしたいから悩ましいわけです。

ただ、可読性や視認性を考えると文章がメインのサイトには黒背景はあまりオススメ出来ないと聞いた事もありますし、どちらかと言えば画像をメインとしたデザイン重視のサイトに向いているような気はします。

SimplicityやSTINGERを使ったサイトというのは基本的に文章を読んでもらう為のサイトが多いと思うので、必然的にサイトの背景も白になってしまうのは納得出来ます。しかしそれを考慮に入れても黒背景のサイトを全く見かけないのは、スタイルシートの修正がそれだけ面倒だからなのかな?とも思っています。

私も実際にSimplicityのスキンを黒ベースで作ってみようと思った事がありましたが、変更箇所が多すぎて面倒になってしまい途中で断念したくらいですし…いつか余裕が出来た時にでもまた挑戦してみたいとは思っているものの、一体いつになるやらといった感じです。

スポンサーリンク
トップへ戻る