悩む人SWELLのトップページのカスタマイズ方法が分からない。
SWELLを購入しようかと考えているけど、どのようにカスタマイズできるのか知りたい。
こういった悩みにお答えします。
ブログのトップページをデフォルトのままにしていませんか？
初心者が新着記事を並べるだけのトップページになっていることは多いです。
しかしながらトップページはブログの顔でもあり、アクセスも集まる場所であるため重要です
トップページを変えることで読者に必要な情報へアクセスしやすくなりブログの滞在時間も増えていきます。
そこで本記事ではSWELLのトップページのカスタマイズ方法を詳しく解説します。
「トップページをおしゃれにして魅力的なデザインにしたい」「読者が回遊しやすいブログにしたい」という方は最後までご覧ください。
＼ 記事作成時間半減！収益最大化！ ／
私はブログで人気のWordPressテーマ6つを実際に購入して全て使っています。
実体験を元に情熱を持ってWordPressテーマの記事を書いています。
SWELLトップページのカスタマイズ方法を解説
今回は当サイトのトップページを元に解説します。
上記図の①～④は「WordPressのカスタマイズ」の作成で簡単なので説明もさっと流します。
上記図の⑤～⑦は「固定ページ」を使ってオリジナルで作成できるコンテンツなのでここを詳しく解説します。
WordPressのカスタマイズ設定（①～④の項目）
上記図の①～④はWordPressのカスタマイズで設定します。
カスタマイズの設定方法は下記です。
①グローバルナビ
まず事前に「グローバルナビ」用のメニューを作ります。
WordPressのダッシュボードで「外観」→「メニュー」から作成します。
カスタマイズをクリックします。
カスタマイズの「ヘッダー」でレイアウトを設定します。
当サイトのようにメインビジュアルの中に「グローバルメニュー」を入れたい場合は「特別設定」を「する」にすればできます。
このようになります。
②メインビジュアル
カスタマイズの「トップページ」→「メインビジュアル」を選択し画像を選びます。
パソコン、スマホそれぞれで設定できます。
③ピックアップバナー
先に「ピックアップバナー」用のメニューを作ります。
WordPressのダッシュボードで「外観」→「メニュー」から作成します。
カスタマイズの「トップページ」→「ピックアップバナー」で設定できます。
私は見て欲しい記事をピックアップバナーにしていますが、カテゴリを設定するなどもできます。
④記事スライダー
カスタマイズの「トップページ」→「記事スライダー」で設定できます。
私は記事スライダーが好みでないため、設置していませんが、設置すると下記のように記事がスライドして動きます。
＼ 記事作成時間半減！収益最大化！ ／
固定ページを使ったオリジナルのコンテンツ作成（⑤～⑦の項目）
当サイトはインパクトを大きく見やすくするためにサイドバーなしのフルワイドで作っています。
SWELLブロックの「フルワイドブロック」を使うとサイト幅いっぱいにコンテンツを作れるのでインパクトが大きく企業が運営しているようなかっこ良いトップページが作れます。
サイドバーありでもこの記事を参考に作れますのでご安心ください。
※サイドバーのありなしは「カスタマイズ」の「サイドバー」で設定できます。
流れとしては下記の通りです。
また固定ページから「新着ページ一覧のコンテンツ」作成します。
「タイトル」と「スラッグ（URL）」は何でも大丈夫です。
参考に私のタイトルは「新着記事一覧」でスラッグは「ドメイン/new-posts」にしています。
- 新着記事コンテンツからリンクする新着記事一覧を作成する
固定ページのタイトル名はなんでも良いです。私は「トップページ」にしています。
スラッグ（URL）も何でも良いです。私はいったん「ドメイン/toppage」にましたが、トップページに設定すると最上位URLに変わります。
私は以下コンテンツを作成しています。
- 新着記事コンテンツを作成する
- プロフィールを作成する
- カテゴリ別記事コンテンツを作成する
- 最後に設定して完了
⑤新着記事一覧を作る
私はフルワイドブロックの中でカラムブロックで「30/70」を選んで分けています。
そして左側に最新記事を「カード型」で大きく表示し、右側に「テキスト型」で2～4番目の新着記事を表示するようにしています。
このままだと右側のテキスト型投稿リスト最上部に最新記事がくるので、左側のカード型投稿リストの最新記事と被ります。
そのため、CSSを追加して自動で最新記事をテキスト型リストから除外させてます。
簡単なので必要な方は是非やってみてください。
高度な設定の「追加CSSクラス」に「li-first-none」を入力します。
そしてカスタマイズの「追加CSS」に
.li-first-none > ul >li:first-child {
display: none;
}
を追加すれば完了です。
⑥プロフィールを作る
プロフィールもフルワイドブロックを使っています。
私はフルワイドブロックの背景に画像を使って「パララックス機能」を使っています。
この画像は「パララックス機能」を使ってます。
背景がゆっくり動いて見えます。
※スマホでもこの機能は表示されます。
じゅんた当サイトのプロフィールで使用しています！
この画像は「Fixed Background機能」を使ってます。
背景がうごいてみえます。
※スマホではこの機能は表示されません。
じゅんた※是非パソコンから見てください！
こういった背景の特殊効果を使うことで訪問ユーザーの印象に残すことができ、再訪問につながります。
⑦カテゴリ別記事一覧
カテゴリ別記事一覧も「フルワイドブロック」と「投稿リスト」の組み合わせで作っています。
下のカラムで3つに分けている部分ですが、カラムブロックを使わなくても「カード型」で表示する投稿数を3にして記事を3つ指定すれば同じように作れます。
ただし、表示させたい順番を決めれなかったので、当サイトではカラムブロックを使った方法で作成しています。
作成した固定ページをトップページへ設定
最後に作成した「新着記事一覧」「カテゴリ別記事一覧」のコンテンツをホームページに設定して終了です！
＼ 記事作成時間半減！収益最大化！ ／
ブログのトップページはSEOでも重要！魅力的なデザインにしよう！
トップページはサイトの最上位に位置するためSEOでも重要です。
サイトを訪問したユーザーはトップページでそのブログのイメージや内容を読み取ります。
現在のSEOではユーザー体験がとても重要になってきており、離脱率など滞在時間などが検索上位表示に影響してきます。
魅力的なデザインにして、サイトの構造が分かりやすく、必要な情報にたどり着きやすいことが大切です。
是非この機会にトップページをカスタマイズする事をおすすめします。
じゅんた最後まで読んで頂いてありがとうございました！
何かご不明点、ご要望などあれば「当サイトのお問い合わせページ」や「Twitterのダイレクトメール」「下記のコメント欄」へお気軽にご連絡下さい！
またこの記事がお役に立つことができれば、SNS等でシェアして頂けると大変嬉しいです。
今後も役に立てる記事を書いていきますので宜しくお願いいたします。
コメント