【第2弾】10分でガラッとデザイン変更!STINGER用ナチュラル系子テーマ「Gray-Grid」を作成しました

スクリーンショット 2013-12-08 14.16.30

Qtaroです。

前回、WordPressの無料テーマ「STINGER」のデザインを10分でガラッと変える!!という内容の記事を書かせていただきました。

今回はその第2弾です。
新たに別の子テーマを作成しましたので公開させていただきます!!
(ダウンロードファイルは記事一番下のこちらにあります。)

他の子テーマは以下よりどうぞ♪

stinger_child

目次

10分ください。カスタマイズしてみましょう!!

4024716038_56d47fb7c6_z
Clock / 34328114@N02

前回同様「10分」カスタマイズです。
むしろ前回より若干簡単かもしれません。子テーマ適用→即完了、なので。

この記事を読み切った頃にはあなたのSTINGERのデザインがきっと ”ガラッ” と変わりますよ。

子テーマを利用したカスタマイズについて

「STINGERのカスタマイズ?」「子テーマ?」というところで「?」になってしまう方はまずはコチラの記事をご覧いただければと思います。
(子テーマの適用方法についても、今回は割愛致します。下記記事参照いただき設定いただければと思います。)

参考記事

今回の子テーマの特徴を「ざっくり」と説明

スクリーンショット 2013-12-08 14.16.30
今回作成した子テーマについて簡単に説明します。

ホントは「デモサイト」でも用意できるといいんですが。。とりあえず上記のイメージで勘弁してください。すいません。

コチラのページよりデモが確認できます。気になる方は以下よりどうぞ♪
STINGER子テーマ一覧 | room9

    STINGER3用子テーマ「Gray-Grid」

    構成・仕様について

  • CSSファイル(style.css)のみで構成
    (オリジナルのfunction.php含む、各種ファイルの変更(上書き)等は一切なし
  • PCのみのデザイン変更(前回引き続き一旦「PCのみ」です。)
  • 使用にあたってはオリジナルテーマ「STINGER3」(バージョン:stinger3ver201310231)が必要です。こちらからダウンロードください

  • デザインの意図的なところ

  • メインに白と薄いグレー、ポイントに落ち着きのある緑でナチュラル感的なものを滲み出してます。
  • ブロック上の要素を多く作り、また全体的に線を太めに設定することで、堅くなりすぎないポップな感じを狙ってたりしてます。

あくまで雛形です!!ガンガンカスタマイズしちゃってください!!

1608427104_373f34ddce_z
Construction / juanktru

前回の記事でも述べましたが、そもそもSTINGERは@ENJILOGさんが作成された素晴らしいWordPressテーマです。
その素晴らしいテーマを装飾させていただくために作成した子テーマファイルを

”俺のデザインの結晶ぉぉぉーーっ!!
その意図のままに1mmも触る事なく使いやがれぇぇぇーーっ!!!!!”

なんてことは耳クソほどにも言うつもりはありません。
相手のことも知らないのにその人が欲しいデザインを知り尽くしている訳もないので。

子テーマの準備はあくまでもWordPressでのサイト制作のスタートです。ガンガン、使い倒してください!!!

「Gray-Grid」ダウンロードはこちら

下記より子テーマファイルがダウンロードできます。

ダウンロード後、サーバのテーマディレクトリにアップロードし、WordPress管理画面より子テーマを適用してください。
あ、オリジナルのSTINGERの準備は忘れずに!!

「Gray-Grid」ダウンロード



今回の記事は以上です。

それでは良きSTINGERライフをー!!

【追記】利用者の声です!!

「Gray-Grid」ダウンロードいただいた方からご報告をいただいていますので紹介させていただきます。

WEBZAKI.COM(@webzakiさん)

スクリーンショット 2013-12-10 0.29.33

なんと、CSS初心者との事ですが、こんなにかっこ良くカスタマイズしていただきました!!正直脱帽っす。。すげぇ^^; 笑
(追記:現在は別のテーマに変更されています♪(これまたかっこいい。。) 2014.4.16)

初心者でもカスタマイズしやすかったです!というのがホント嬉しいですね〜♪^^

まだまだカスタマイズ中とのことで、今後の更なるカスタマイズも楽しみです♪
こんな記事も書いて頂いてます。導入をご検討の方は是非ご一読ください!
STINGER3用子テーマ「Gray-Grid」をCSSド素人の僕がカスタマイズしてみた!

OyajiPressCom@oyajipressさん)
※2014/1/3時点

スクリーンショット 2014-01-03 9.10.32

こちらは@oyajipressさんのブログ。
ご本人は「こんなお粗末なものでよければ。。」なんておっしゃてましたが、配色がめっちゃセンスいいです♪^^
紹介記事追記にも快く快諾いただき本当に感謝感謝です!

こちらも紹介記事書いていただいております♪^^
【WordPress】Stinger+Gray-Gridで再々出発する事になったアホな私

是非感想聞かせてください!!

ご利用の方で気に入った方がいらっしゃいましたら、是非こちらまでご一報ください♪
Qtaroがとても喜びます^^

@Daisuke_9taro

STINGER用子テーマはコチラ


stinger_child

STINGER公式HPはコチラ

STINGER3公式HP

よかったらシェアしてね!

この記事を書いた人

Web Developer / 秋田県秋田市出身 / ただのおばけですよ

目次
閉じる