・サイト型って何？
・Wordpress有料テーマ【SWELL】のトップページをサイト型にしたい
・【SWELL】で可能なカスタマイズについて知りたい
本記事はこの悩みを解決します。
ブログは見た目が大事で、見にくいサイトはそれだけの理由で読者に離脱されてしまい、記事の読者満足度は悪化。そしてSEO的にも良くない評価を受けてしまいます。
一方でおしゃれなサイトは読者の記憶にも残るので、リピートされる確率も上がります。
そこで今回はCSSなどのプログラミングの知識が無くてもできる、SWELLでトップページをサイト型にするカスタマイズ方法を紹介していきます。（丸パクリOK）
本記事を参考にすると見違えるほどサイトのデザインが良くなり、あなたのブログを読者の印象に残るブログにできます。
WordPressで有料テーマを購入したからには、おしゃれなサイトを作りたいですよね。
当ブログはSWELLを使って作成しています。
結論：SWELLはマウスでカチカチするだけで簡単にカスタマイズができるので、初心者でもデザイン性の高いサイト型のページが作れます。
本記事の内容
- サイト型のトップページって何？
- サイトの顔となるヘッダーのカスタマイズ
- メインビジュアルのカスタマイズ
- トップページの作成に必要な固定ページの設定
- トップページが一気にダサくなる3つのミス
- まとめ：SWELLは簡単にサイト型のトップページを作れる
サイト型のトップページって何？
「サイト型」の謎については自分も疑問に思っていてググったりしましたが、「サイト型」に対するいい答えは見つかりませんでした。
そこで自分が思うサイト型の定義としては、トップページから全てのページに飛べるような便利なサイト？ですかね(笑)
ゲームの攻略サイトとかがいい例です！
やはりブログの初期設定のままだと記事が並んでいるだけなので、読んでほしい渾身の記事にたどり着かれずにスルーされます。
一方でサイト型のトップページなら、記事を固定したり、様々なリンクを使ってあっちこっちに飛べるサイトになったりと見やすく使い勝手が格段によくなります。
サイト型の明確な定義ってないのかい(笑)
でも確かに読みやすい記事を見つけやすいのは便利！
記事が増えると見てほしい記事がどうしても埋もれてしまうこともあるから、サイト型にして見てもらう工夫は必要になるね。
筆者は見た目も良くて、ユーザーが使いやすいページのことを「サイト型」と勝手に呼ぶことにします(笑)
トップページをサイト型にするうえで採用した4つの項目がこちらです。
サイト型へのカスタマイズ
ヘッダーはブログの1番上に表示される、いわばブログの顔となる画像です。
ヘッダーは全てページで表示されるので、デザイン次第では読者の興味を引きリピートされる確率を上げることが出来ます。
ヘッダーの設定項目
ヘッダーロゴの設定
- 画僧サイズ(PC)：120px
- 画僧サイズ(PC追従ヘッダー)：28px
- 画僧サイズ(SP)：80px
レイアウトデザイン
- ヘッダーのレイアウト(PC)：ヘッダーナビを下に
- ヘッダーのレイアウト(SP)：ロゴ中央/メニュー右
- ヘッダー境界線：影
ヘッダー画像の作成
ヘッダー画像を自分の個性をだしたインパクトのある画像にすると他のブログと差別化できるうえに、ブログの方向性も決まります。
ヘッダー画像のサイズはSWELLの公式サイトを参考にして【1600×360 px】で作りました。
当ブログのアイキャッチは有料のイラストレーターで作っていますが、無料のCanvaでもクオリティの高いヘッダー画像は作れるので安心してください。
あまりデザインに自身がない人は、商用利用が許可された無料のイラストサイトからイラストをダウンロードして組み合わせるのもおすすめですね。
メインビジュアルのカスタマイズ
ヘッダーと固定ページの間に入るメインビジュアルのカスタマイズについて説明していきます。
メインビジュアルは大きく表示されるので視覚的なインパクトが大きく、読者の記憶に残る部分。
SWELLのメインビジュアルは主に3つの要素からできています。
- メインビジュアル
- 記事スライダー
- ピックアップバナー
それぞれ掘り下げていきます。
メインビジュアル
SWELLではメインビジュアルを表示しない・画像・動画から選択できます。
メインビジュアルとブログのコンセプトを揃えることで統一感が出ます。
また、メインビジュアルの中にボタンテキストも配置できるので、読んでほしい記事へのリンクも可能になっていますよ。
記事スライダー
記事スライダーは、任意の記事がスライドするデザインです。
人気順・カテゴリー別などで記事も選択できるようになっています。
記事スライダーを付けるだけ、一気にサイトがかっこよくなります。
ピックアップバナー
ピックアップバナーはヘッダーと固定ページの間に来るものです。
ピックアップバナーはめちゃくちゃ目立つので、渾身の記事があればそれを張ることもできるため、ブログ運営者の個性が色濃く出る部分です。
※ピックアップバナーはカスタマイズだけで設定が完成しないので注意してください。
ピックアップバナーの作り方
本サイトのピックアップバナー設定
バナーレイアウト（PC）：固定幅4列
バナーレイアウト（SP）：固定幅2列
バナーデザイン：表示しない – 内側に白線を付ける – バナー画像を暗くしない
バナーレイアウトは4列と2列にして置けば間違いはないといった感じで、バナーデザインは自分のもってくる4つの記事に合わせて設定することをおすすめします。
1の段階で枠を作り終わったので、肝心の中身の設定です。
- 外観 ＜ メニューをクリック
- 新しいメニューを作成しましょう をクリック！
- メニュー名を「ピックアップバナー」と付ける
- チェックを付けて保存
メニュー名「ピックアップバナー」の編集をしていきます。
- 入れたい項目に4つチェックを付ける
- メニューに追加をクリック
- 順番を好みの順に並び替えて完成！
記事を入れたい場合は投稿から選んで、同様にチェックを入れてくださいね。
ピックアップバナーのところに来る画像はアイキャッチ画像になるのでおしゃれなアイキャッチを作ってみてください。
本サイトのアイキャッチ画像は、「16：9」として960×540ピクセルを採用しています。
トップページの作成に必要な固定ページの設定
まずは、固定ページ【HOME】と【新着記事】の名前を付けて2つのページを作りましょう。
作った固定ページをサイトの表紙にするやり方を今から説明しますが、実際に変更するのは固定ページのカスタマイズ後にしてくださいね！
作ってから設定しないと何も無いページが表示されてしまうので（笑）
設定している間にブログを見たとき、白紙だったら申し訳ないね(笑)。
白紙のページを見せないように、ちゃんと固定ページで作ってから変更しよう！
まあ、ブログが白紙だったら逆に面白いかもね(笑)
ホームページの表示野固定ページにチェックを付けて、ホームページと投稿ページに先ほど作った【HOME】と【新着記事】を設定すれば完了です。
トップページをサイト型にする固定ページのカスタマイズ
先ほど作った固定ページの【HOME】の編集を行っていきます。
今回する【HOME】のカスタマイズは全部で3つです。
- 新着記事リスト
- プロフィール
- 記事リスト
それぞれ掘り下げていきますね。
新着記事リスト
これは「くうかんしんぷるライフのくうかさん」の記事を参考にパクらさせていただきました(笑)
この新着記事リストのおしゃれ度はなかなかに高いね！
でもくうかさんをパクっただけだよね…
君のような勘のいいガキは嫌いだよ…
新着記事リストの作り方
ブロックの検索で「カラム」を選択して、30:70の割合で配置してください。
カラムボックスで二つに分けたブロックのそれぞれに「記事リスト」を設置してください。
左の小さい方の設定
- 表示投稿数：1
- レイアウト：カード型
- 表示順序：新着順
- 公開日・更新日を入れる
右の大きい方の設定
- 表示投稿数：3
- レイアウト：リスト型
- 表示順序：新着順
- 公開日・更新日を入れる
最後に右の投稿リストの下にSWELLボタンを設置して新着記事のリンクを張れば、おしゃれな新着記事リストの出来上がりです。
プロフィール
ブログにおいて誰が書いているのかはとても大事になるので、自分の情報を書いて読者の信頼を得ましょう。
ブログって顔が見えなくて誰が書いてるか分からないから、記事の内容をあまり信じられないってのが本音かも…
その不安を少しでも解消してくれるのが、筆者のプロフィールなんだよ！
アキラのプロフィールを参考がてらに載せておきます。
アキラ
ブログネーム：アキラ
リベ大を見て副業ブログに興味を持ち始めてみるが、半年間で得た収益は2桁。本格的にブログの勉強を行い、日々試行錯誤。
自身の失敗を元にした「失敗談から学ぶブログ運営」をテーマに情報を発信しています。
プロフィールの作り方
ブログパーツにすれば、今後記事中に使いたいときも利用できるのでお勧めです。
簡単な自己紹介などを入れましょう！
記事リスト
カテゴリーごとに分けた記事リストですね。
記事リストがあるだけで好きなカテゴリーの記事を閲覧できるので利便性はかなり上がり、なによりブログっぽくなります(笑)
記事リストの作り方
カテゴリー数に合わせて項目を増やして、「Tab1」の箇所にカテゴリー名を記入しましょう。
本サイトの投稿リスト
- Tab数：4
- 表示投稿数：8
- レイアウト：サムネイル型
- 表示順序：人気順 or ランダム
- カラム数：2列
本サイトの真似でも全然大丈夫ですが、自分の色が出してサイトに合うようにカスタマイズしてみてくださいね。
トップページが一気にダサくなる3つのミス
どれだけトップページを念入りに作っても、ちょっとした勘違いから残念なダサいサイトに仕上がってしまうこともあります。
特に初心者がやりがちなミスを3つを紹介します。
サイトがダサくなる3つのミス
- 色を使いすぎる
- アイキャッチ画像に統一感がない
- 広告を入れすぎている
色やアイキャッチ画像に統一感を作るだけで十分にデザインとして成り立ちます。
またGoogle Adssenseの広告を入れすぎるとデザインの見た目を崩す原因になるので、なるべくトップページには広告を入れないようにしましょう。
まとめ：SWELLは簡単にサイト型のトップページを作れる
SWELLでトップページをサイト型にする方法を今回紹介しました。
ヘッダーや固定ページを設定してサイト型にするだけでて、一気におしゃれで見やすいサイトになりますよね。
おしゃれなサイトを作ると自分の気持ちも高まりブログを頑張れるので、ぜひ世界に1つだけのサイトを作り上げてください。
SWELLが気になったという方はこちらのリンクからどうぞ！
17,600円と決して安いものではありませんが、機能は17,600円以上の価値があるので本気でブログを頑張りたい方は買っておいて後悔はないと思います。
See you again!!
コメント