WordPressテーマLightningの作成例!シンプルでどんな分野にも合う!

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

Lightningはシンプルな無料テーマなのでどんな画像や素材、色でも合わせやすいテンプレートです。基本となる部分はすべてそろっていますのでうまくデザインができるととても使いやすいので、自分で色のカスタマイズをしてみてください。

Lightningをカスタママイズした作成例をお伝えしていきます。

2021年話題のワードプレステーマ「THE・THOR」!
⇒ THE・THORの公式ページを確認する。
※今なら、8大購入特典をお付けしています!

目次

Lightningのカスタマイズのコツ 【Wordpressテーマ】

Lightningはベースが白基調で清潔感があります。ヘッダーなどに合わせるのはイラストもよいのですが、写真ベースの画像もかっこよく収まります。もし、なにか自分で撮った写真があればそれをヘッダーに飾っても愛着がわきますし、色を重ねたりスライダーにしても面白いです。

ヘッダー画像のサイズは少し横長に調整して使うとかっこよく仕上がります。

(ここでは、プラグインを使わずにできるだけシンプルにヘッダーを作っていく工程をお伝えします)

 

Lightningの作成例

Lightningの良さはシンプルな部分ですので、今回のアレンジは追加CSSなど使わずに初心者にもできるように作っています。画像等の大きさは一応推奨サイズがありますが、そのままではなくてもある程度は調整できる部分をみていただきたいので、あえていろんな大きさを配置しています。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」!
THE THORの公式ページを確認する
※今なら、8大購入特典をお付けしています!

Lightningのカスタマイズ作成例 1.【Wordpressテーマ】  カフェ用アレンジ

ヘッダー部分が少しだけ高くなっていますが、メニューなどの1部の画像を配置しても面白いかもしれません。

 

↓ クリックで拡大

 

 

ロゴの大きさ403 x 159px
画像の大きさ638×287px
キーカラー#f6ad49
キーカラー(暗)#aacf53
サイドバーの位置
ヘッダーへ被せる色(任意)#e8d3d1
ヘッダーへ被せる色の濃さ40%
文字の位置
文字の色#e8d3d1

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

 

ヘッダー画像が推奨サイズより少し高めです。画像から出てしまうこともあるので、高さ調整しながら作っていきましょう。

作成のポイント

ヘッダー画像を木目にしてあるので、オーガニックのカフェやその他インテリアなどのブログに使えます。オレンジと抹茶のような対象的な色を合わせてみました

 

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!

今人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!(最新は10種類以上)

このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。

 

ガーリー
シンプル
オーガニック

 

※残りの3種類とブログの全体像は以下の記事で見れますので覧ください。
⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

 

//今なら、なつ特製オリジナルデザインマニュアル付き!\\

※ヘッダーの画像は、写真ACとイラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

 

 

Lightningのカスタマイズ作成例 2.【Wordpressテーマ】  個人ブログアレンジ

↓ クリックで拡大

 

ヘッダー画像の大きさ1600×1200px
キーカラー#e7609e
キーカラー(暗)#f6ad49
サイドバーの位置
ヘッダーへ被せる色(任意)#ffec47
ヘッダーへ被せる色の濃さ30%
文字の位置
文字の色#e7609e
文字の影の色#f2f2b0

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

 

ヘッダー画像が推奨サイズより少し高めです。鳥のポイント画像を全部見せたかったので高くなっています。

高さ調節して上下を切って配置してもよいでしょう。

作成のポイント

透過の画像(PNG)をヘッダーにもってきて、その上に色を重ねました。JPGのように元の色がない分ヘッダーがクリアに見えます。白がベースなので、写真系も合うのですがイラストもかわいく収まります。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

Lightningのカスタマイズ作成例 3.【Wordpressテーマ】  美容系アレンジ

 

↓ クリックで拡大

 

ヘッダー画像の大きさ1588 x 1135 ピクセル
キーカラー#b44c97
キーカラー(暗)#7a4171
サイドバーの位置
ヘッダーへ被せる色(任意)#e597b2
ヘッダーへ被せる色の濃さ30%
文字の位置
文字の色#6f514c
文字の影の色#9cb1ba

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

作成のポイント

ヘッダーの画像をあえて背景につかうような柄を配置しています。できるだけラグジュアリー感を出そうとパープルを基調にしています。

背景にきらきらしたグラデーションの画像をもってきてもカッコいいかもしれません。

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

Lightningのカスタマイズ作成例 4.【Wordpressテーマ】  コンサル用アレンジ

 

↓ クリックで拡大

 

画像の大きさ640 x 427 ピクセル
キーカラー#59b9c6
キーカラー(暗)#274a78
サイドバーの位置
文字の位置真ん中

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

作成のポイント

ビジネス用を意識して作っています。SNSコンサルとなっていますがキチンとしたタイトルをつけるとぐっとよくなります。青を基調にしたので単調ではありますが、誠実さをだすならこういった色合いが良いでしょう。

Lightningのカスタマイズ作成例 5.【Wordpressテーマ】  恋愛系アレンジ

 

↓ クリックで拡大

 

画像の大きさ640 x 427 ピクセル
キーカラー#e9546b
キーカラー(暗)#274a78
サイドバーの位置
ヘッダーへ被せる色(任意)#e9546b
ヘッダーへ被せる色の濃さ20%
文字の位置
文字の色#d7003a
背景の色#fdeff2

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

作成のポイント

恋愛系の女性にも、恋愛商材などにも使えるように作ってみました。とにかくピンクピンクピンクと花で飾っています。恋愛系なのでブログで得る情報でハッピーになるイメージですが、花でなくともハートなどの壁紙でもよいと思います。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

Lightningのカスタマイズ作成例 5.【Wordpressテーマ】  スポーツ系アレンジ

 

↓ クリックで拡大

 

画像の大きさ1000 x 320 ピクセル
キーカラー#ffd900
キーカラー(暗)#c7dc68
サイドバーの位置
ヘッダーへ被せる色(任意)#c3d825
ヘッダーへ被せる色の濃さ10%
文字の位置真ん中
文字の色#fabf14
背景画像あり

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

 

背景をすこし凝ってみました。

作成のポイント

スポーツ系は「健康」「元気」「ビタミン」みたいなイメージで作っています。黄色を基調にして元気さをアピールし、運動会のようなヘッダー画像をもってきています。

 

Lightningのカスタマイズ作成例 6.【Wordpressテーマ】 エンタメ・アドセンス

 

↓ クリックで拡大

 

画像の大きさ1900×600px
キーカラー#17184b
キーカラー(暗)#2f4a6b
サイドバーの位置
ヘッダーへ被せる色(任意)#ebd842
ヘッダーへ被せる色の濃さ30%
文字の位置
文字の色#59b9c6

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

 

ヘッダー画像を作りこんでみました。習字のようなオブジェっぽいものに印を付けてそれっぽくしています。

作成のポイント

エンタメや芸能ブログはかなりの激戦区です。同じ題材を一気に更新して熾烈な上位争いとなりますのでブログもかなりインパクトが必要ということで「和風」で見た目でも印象深くするために勢いのある墨字にしてみました。

 

初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」
⇒ THE THORの公式ページを確認する。

※今なら、8大購入特典をお付けしています!

Lightningのカスタマイズ作成例 7.【Wordpressテーマ】  就職系

 

↓ クリックで拡大

 

画像の大きさ1900×600px
キーカラー#008899
キーカラー(暗)#2f4a6b
サイドバーの位置
文字の位置
文字の色#ffffff

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

作成のポイント

就職系のブログはやはり青もしくはグレーなどの落ち着いた色が似あいます。特にこの先就職が「成功」するためにさわやかで希望溢れるTOPページとしてみました。

Lightningのカスタマイズ作成例 7.【Wordpressテーマ】  英会話

 

↓ クリックで拡大

 

画像の大きさ1900×600px
キーカラー#595857
キーカラー(暗)#002f42
サイドバーの位置
ヘッダーへ被せる色(任意)#522f60
ヘッダーへ被せる色の濃さ50%
文字の位置真ん中
文字の色#fef263

 

  • ロゴ推奨画像サイズ: 280×60px
  • ヘッダー推奨画像サイズ: 1900×600px

作成のポイント

NYの夜景の画像にさらに紫色をかぶせて反対色の黄色を文字色にしました。写真画像を入れるとうまく収まるのでサイズ調整でできればいい感じになります。

 

Lightningのカスタマイズ作成  まとめ

Lightningは、専用のプラグインを入れてさらに機能を増やして使うようになっていますが、プラグインなしでもここまでできます。

トップページには、URLへの誘導ボタンがスマートに配置できるのでシンプルかつ見やすいサイトとなります。

さらに、ここまで作るのにそれほど時間もかかりませんのでペラサイトにも使え重宝します。

 

 

↓ 当ブログからWordpressテーマTHE THORを購入くださった方に特典をプレゼントしています。

関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。THE THORは初心者の方でもブログ戦略が立てやすい優秀なWordpressテーマです。基本となっているのがFITという会社のLIONBLOGという無料テーマ。&[…]

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない・・・
  • なかなか稼げない・・・
  • アクセス数が増えない・・・

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. 会員フォームなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

出典:THE THOR 着せ替え「01」

↓ クリックで拡大します
出典:特製THE THORオリジナルアレンジ

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. 会員フォーラムなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。


WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで有名ブロガーも使用
  • 着せ替え機能でいろんな用途に使える
  • 複数のブログに使える(本人のブログ)
  • 会員フォーラムやマニュアル完備

THE THORの8大特典を見てみる!