ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
WordPressを使ってブログを作りたいけども、デザインが苦手な方のために当ブログでは無料・有料を含めアレンジデザインを作ってきました。
WordPressテーマはインストールすれば、そのままでもシンプルに使えます。WordPress有料テーマなら「着せ替え」で使うことも可能ですが、他の購入者と同じデザインになってしまうのでアレンジのコツを交え作っています。
WordPressデザインを自作でオリジナリティを出す調整サンプルをご覧ください。
WordPressのデザイン調整まとめ！自作でできる 【無料テーマ】
まずは、誰でも使える無料テーマにスポットをあててみます。このブログでは、Cocoonのカスタマイズをはじめ、Lightningのトップページなどのデザインアレンジをしてきました。
無料テーマのデザインはかなりシンプルですのでセンスの良いヘッダー画像を入れると結構かっこよくなります。
| クール系デザイン | かわいい系デザイン | シンプルデザイン |
|---|---|---|
|
|
|
Cocoonの場合には、たくさんの方が作った「スキン」という着せ替えがあり、バラエティーに富んだデザインがあります。
ですのでクール系でもかわいい系でもシンプルでもつかえるという意味です。
このページでは、使いやすいCocoonとLightningのデザインを見ていきます。
WordPressのデザイン調整自作まとめ1. 「Lightningのデザイン調整」
Lightningはヘッダー画像とその下の3つのボタンが印象的なデザインです。ヘッダー画像だけインストールしても十分使えます。
Lightningは、Wordpressの公式ディレクトリに登録されているものなので安心して使えるのがポイントです。
いちばん左端は画像とプロフィールのみ導入したデザインです。
↓ 画像をクリックすると拡大します。
初心者の場合にはWordpressテーマをインストールするだけでも難しく感じますが上記の左側はヘッダー画像さえできてしまえばとても簡単にできあがるデザインです。
クセがないのが特徴なので、ペラサイトのような早く作りたいサイトなどにも適用できます。
↓ Wordpressテーマ「THE THOR」公式デザインに芸大卒なつのデザイン10種類追加！
当ブログで購入していただくと、公式の9種類のデザインと追加の10種類が無料で手に入ります！
※デザインの全体像は以下の2記事をご覧ください。
⇒【超簡単】THE THORデザインの事例集6選！初心者でも作れるアレンジ！
⇒追加デザイン4種はコチラから見ることができます。
／／たった30記事で稼いだ実録記事（2,980円相当）付き!＼＼
※ヘッダーの画像は、写真ACとイラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。
WordPressのデザイン調整自作まとめ 2.「Cocoonのデザイン調整」
Cocoonも無料のWordpressテーマですが、基本のLightningよりも機能が多く「スキン」という着せ替えも備わっています。
もし、デザインができないならこのスキンを利用するのも良いでしょう。Cocoonの場合には、Cocoon設定という場所でカスタマイズを行います。
タブで仕訳けられているので、やりたい項目の名前さえわかれば感覚的に操作できるのが良いところです。
↓ 画像をクリックすると拡大します。
Cocoonのデザインの中で、ヘッダーの真ん中にあるアピールエリアという場所が透過となっているエリアで、その中に誘導ボタンやテキストなどを挿入できるようになっています。
この部分を活用することでとてもオシャレなデザインになります。
WordPressのデザイン調整まとめ！自作でできる 【有料テーマ】
この章では、Wordpress有料テーマのデザインをアレンジしています。初心者でもできるように「着せ替え」のあるものは、一旦導入してから細部を変更しています。
有料テーマはそれぞれデザインが凝っています。SEO対策などはどのテーマもやっていますがデザインについては、「着せ替えあり」「カスタマイズが簡単」「シンプル操作」など特徴があります。
- THE THOR
- AFFINGER5
- Diver
- STORK
- SANGO
- JIN
- 賢威
| クール系デザイン | 可愛い系デザイン | シンプルデザイン |
|---|---|---|
|
|
|
この章では、一番多くデザインをアレンジしている3つの有料テーマのデザインをご紹介します。
WordPressのデザイン調整自作まとめ 「THE THORのデザイン調整」
THE THORは有料テーマの中でも一番機能を備えたWordpressテーマです。「着せ替え」機能がありアフィリエイト用を含めクール系のデザインが9つ用意されています。
それぞれ、ヘッダーに動画やスライダーを配置でき、トップページには、ピックアップ記事やランキングなども挿入可能。
↓ 画像をクリックすると拡大します。
上記のデザインは、このブログのTHE THORの購入特典です。基本のデザインがクール系統なので、ポップ系のデザインを作っています。ヘッダー画像＆背景を変更するとこんな感じになります。
（若干、縮小をしているので実際のヘッダー画像の比率が違います・・・）
↓ 当ブログからWordpressテーマTHE THORを購入くださった方に特典をプレゼントしています。
WordPressのデザイン調整自作まとめ 「AFFINGER5のデザイン調整」
AFFINGER5は、デザインでは詳細なカスタマイズができるWordpressテーマです。着せ替えのデザインもとてもセンスがよく独自アイコンや囲い枠もとてもかわいいですし、見出しタイトルなどにも画像を挿入したり、今人気のヘッダーカードもあります。
↓ 画像をクリックすると拡大します。
AFFINGER5のヘッダーの上部、グローバルナビ、フッター、サイドバーメニューなどいろんな場所にグラデーションにすることができます。
縦横にもなりますので、自由度がかなり高いです。
少しだけ、作り方が慣れるまで迷うかもしれませんが、当ブログで丁寧に説明しています。
AFFINGER5の見出しタイトルとは
見出しタイトルというのは、例えばサイドバーなどで項目のタイトルを入れる部分です。AFFINGER5を購入すると、透過のドットや市松模様などが配布されますので、以下のようなアレンジもできます。
さらに、面白いのが、画像挿入です。小さい柄が良いですが、こだわりのタイトルが出来上がります。
上記は、夜景を入れてタイトルを作っています。
速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。
⇒ 詳しくはコチラをご覧ください。
※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。
↓ 当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！
WordPressのデザイン調整自作まとめ 「Diverのデザイン調整」
Diverは、着せ替えこそありませんが、デザインやカスタマイズがとても簡単でペラサイトなどにもむいているくらい初期設定ができればあっという間にデザインが出来上がります。
さらに、記事については「入力補助」というブロックエディターがついているので、たとえ初心者であっても楽に記事の装飾ができます。
↓ 画像をクリックすると拡大します。
Diverは、独自管理画面があるもののそれぞれがかなりシンプルなので、初心者の方もひとりで作れますし、少し触ったことのある人なら本当に簡単にデザイン変更も可能です。
このブログでも、Diverのデザインを一番多く作っていて、特典でも100個のデザインのマニュアルをプレゼントしています。
↓ 画像をクリックすると拡大します。（Diver特典）
上記の画像は、特典100の1部ですが、よくみていただくと全体の色と背景の柄を変化させているだけです。
Diverの場合は、ワンポイント画像さえ配置してしまえば（左側の画像）これだけのバリエーションができます。
↓クリックすると拡大します。（Diver特典）
↓ WordpressテーマDiverを当ブログからお買い上げの方に特典をプレゼントしています。
初心者だからこそWordpress有料テーマ を使うべき理由
無料テーマを使うことで時間の無駄遣いをしていませんか？
- 思い通りのデザインにできない・・・
- なかなか稼げない・・・
- アクセス数が増えない・・・
こんな悩みを抱えていませんか？
稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。
Wordpressの有料テーマができる５つのこと
- 検索上位を目指せる
- 見た目が綺麗でおしゃれになる
- 機能が豊富で出来ることが多い
- 会員フォームなどのサポート
- 有名ブロガーも有料テーマを使っている
これまでにあげた5つの有料テーマの特徴を説明していきます。
1. 検索上位を目指せる
ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。
- 情報の信頼性
- ユーザーへの役立つ情報であるか？
- スマホ・PCなどでストレスなく使える
などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。
2. 見た目が無料テーマ以上に綺麗になる
シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。
有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。
出典：THE THOR 着せ替え「01」
↓ クリックで拡大します
出典：特製THE THORオリジナルアレンジ
3. 機能が豊富でできることが多い
今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。
4. 会員フォーラムなどのサポート
なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。
5. 有名ブロガーも多数使用
稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。
もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。
カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。
⇒ THE・THORの公式ページを確認する。
※ 今なら、8大購入特典をプレゼント！