おばけSWELLでブログをサイト型にカスタマイズしました
この記事では、当ブログをSWELLを使ってブログ型からサイト型へカスタマイズした実際のデザインや、制作過程を紹介します。
ブログのカスタマイズで悩んでいる方や、ブログの方向性、デザインの参考にしていただけたら嬉しいです。
【実例】SWELLでブログをサイト型にカスタマイズ
当サイトは、SWELLを使って、サイトのトップページをブログ型からサイト型にデザインして運営しています。
ブログ型はこんな感じ
サイト型のサイトはこんな感じ
おばけブログ型は、サイドバーがある印象がありますね
「SWELL」では、管理画面の【カスタマイズ】から、サイトのトップページを固定ページに設定することができるので、
その機能を使って、サイトやブログのトップページを「サイト型」にデザインにすることができます。
ブログ型からサイト型にした理由
私が最初にブログを始めた頃は、無料テーマ「Cocoon」を使用していて、ブログを運営して1年程経った頃に、「SWELL」に移行しました。
「ブログをサイト型にしたいな」と思った理由は、以下のようなことを思っていたからです。
- サイドブロックがないデザインにしたかった
- イラストサイトにも使えるデザインを作りたかった
おばけ当時はイラストサイトも作りたいなと思っていました。
実際にSWELLで作ったサイト型トップページ
以下では、実際に私が作った当サイトのトップページを紹介します。
サイト型トップページの全体構成
筆者が実際に作ったサイト型トップページは、以下のような構成になっています。
- ヘッダーエリア
- グローバルメニュー
- カラムブロック（カテゴリ分）
- フッターエリア
元々は、フルワイドブロック
を使って作っていたのですが、このデザインは、SWELLのリッチカラムという機能を使って、2つのカラムに分けて、記事を配置しています。
「SWELL」のフルワイドブロックを使うと、下の画像のように、画面の横幅いっぱいに広がるブロックを作成することができます。
この機能を使うと、私はコーポレートサイトのような、洗練された印象のデザインの見た目に仕上がるように感じて、大好きな機能です。
フルワイドブロックを使うとこんな感じ
SWELLでは、メインビジュアルという機能で、トップページに画像を配置することもできます。
メインビジュアルを置くとこんな感じ
ページを一番下までスクロールした時に見える「フッターエリア」には、「ナビゲーションメニュー」と「SNSリンク」というウィジェットを入れています。
私が「SWELL」で地味に一番驚いた機能が、このフッターエリアのカスタマイズ性です。
「SWELL」では、
- フッター直前に表示されるウィジェットエリア
- フッター内部に表示されるウィジェットエリア
などもカスタマイズ画面から設定することができ、お好みで配置できるようになっています。
当サイトは、コーポレートサイトのような見た目にしたくて、「運営者情報」「プライバシーポリシー」「お問合せ」、「SNS」の項目を置いています。
「SWELL」公式サイトで設定方法を見る
【まとめ】SWELLで個人サイトを作ってみて感じたこと
私が最初にSWELLを購入したときは、「少しでもおしゃれなサイトになったら良いな」なんて、思っていました。
実際に触ってみると、SWELLのカスタマイズ性にハマってしまい、デザインをいじるのが止まらなくなる結果になりました。
でも、元々サイト型で「おしゃれなサイト」を作りたいと思っていたので、
私の場合は、ブログをサイト型にしたことで満足度がぐんと上がりました！
サイト型にして変わったこと
- 見た目がめちゃめちゃかわいくなって嬉しくなった
- 自分の運営しているサイトに愛着が湧いて、ブログを頑張ろうと思えた
- アフィリエイトのクリック数が伸びた
SWELLで、ブログ型からサイト型にデザインを変更して、まず第一に見た目が変わったことで、自分のサイトがより一層好きになったことがとても嬉しかったのですが、意外なところで、「アフィリエイトのクリック数が伸びる」といった変化もありました。
見た目のデザインを整えることは、「自己満足」だけではなく、訪問してくれた方にとっての見やすさや、サイトを快適に見てもらうことにもつながるのかなと思いました◎
「ブログをおしゃれにしたい」という方は、「サイト型」のデザインが参考になると嬉しいです。
それでは
WordPressテーマ「SWELL」
17,600円（税込）
シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。
使い続けるほど良さが分かる、スルメブログテーマ。
公式サイトで価格・詳細を確認 ↓