当サイトで使用しているテーマ「SWELL」 Click

サイト型トップページの作り方を11枚の枚の画像で解説|テーマSWELL

ブログ歴は5カ月と短い私ですが、5カ月目を迎えたタイミングで思い切ってブログテーマを変えることにしました。

なぜ変えたのかというと、一番は自分のイメージするページを作ろうとしても、そもそも知識がなく、イメージ通りに作ることができないから。テーマを変えることによって、その悩みを解決してくれそうだったからですね。

そのテーマが「SWELL」です。

ただ、ネックなのは無料ではなく有料テーマであるということ。ですので、SWELLの公式サイトもそうですが、実際にSWELLを使っているサイトも訪問して、私なりにある程度の知識を持ったうえで購入しました。

ブログを始めた頃から使っていれば、もっと効率的に、そして楽しく、多くの記事を書くことができていたのにと思えるくらい、SWELLというテーマに満足しています!

つぼみ

今回は、実際に私がどのような手順で、今のトップページを作ったのか、画像を使って紹介していきますね!

私もそうですが、ワードプレス初心者でCSSなどの知識が全くない方でも、パズルのような感覚でパーツを組み合わせていけば、私が作っているようなトップページを作ることができます。そして、自分がイメージするトップページに簡単にアレンジを加えていくことができるようになりますよ!

こんな方におすすめ
  • CSSに関する知識はないけれど、おしゃれなトップページを作りたい
  • SWELLでサイト型のトップページを作るための手順を知りたい
  • SWELLというテーマでどのようなことができるのか知りたい
Contents

SWELLカスタマイズ|トップページのイメージ

最初に、PCとモバイルそれぞれのイメージ画像(トップページの一部分)を見て下さい。
サイドバーを設置せずにトップページ全体を使った構成になっていることが分かると思います。

そして、様々なブロックを配置し、読んでもらいたい記事へのリンクをたくさん設置することができるというのが大きな特徴でもあります。

「また訪れたいな」と思ってもらえるようなオシャレなトップページを作ることができれば最高ですね!

PCでのイメージ画像

モバイルでのイメージ画像

SWELLカスタマイズ|ヘッダーの設定

文字通り、ブログのトップページを開いた際に最上部に表示される箇所ですが、ヘッダーに設置するロゴはブログの顔とも言えますので、自分のブログをアピールできるような目を引くロゴを作りたいですね。

最上部と言いましたが、私の場合、「お知らせバー」「ヘッダーバー」「ヘッダー」「ピックアップバナー」をそれぞれ表示させています。特にお知らせバーは、SEO対策の一つとしてサイト内の滞在時間を少しでも上げるために、内部リンクを貼ることがおすすめです(この記事を書いている時点では、SWELLアフィリエイトとして、SWELLの公式ページへの誘導リンクを設置しています)。

ヘッダー部分の構成

先ほども紹介したとおり、私のサイトでは「お知らせバー」「ヘッダーバー」「ヘッダー」「ピックアップバナー」を組み合わせていますが、ピックアップバナーの代わりに記事のスライドショーを設置するなど、お好みのパーツを組み合わせてオリジナルヘッダーを作りましょう!

つぼみ

SWELLの設定をスムーズに行うためにも、各パーツの名称は最低限覚えておく方が良いと思います!

お知らせバー

お知らせバーは重要なお知らせを分かりやすくアピールするためのものですが、ヘッダーの上部あるいは下部のどちらに設置するかを設定することができます。

【外観】>【カスタマイズ】>【サイト全体設定】>【お知らせバー】

できること

・お知らせバーの表示位置の設定
・テキスト内容、テキストの表示方法の設定
・リンクの設定
・ボタンの表示設定
・お知らせバーの背景設定

ヘッダーバー

【外観】>【カスタマイズ】>【ヘッダー】>【ヘッダーバー設定】

できること

・ヘッダーバー背景色の設定
・ヘッダーバー文字色の設定
・SNSアイコンリストの表示設定

ヘッダーバーは、「SNSアイコンリストを表示する」にチェックが入っている、もしくはキャッチフレーズがヘッダーバー内に表示するようになっている場合に表示されます。アイコンやキャッチフレーズを表示したくないけれど、ボーダーは表示したいという方は、「コンテンツが空でもボーダーとして表示する」にチェックを入れるとボーダーを表示させることができます。

ヘッダー

トップページの顔とも言える「ヘッダーロゴ」と「ヘッダーメニュー」を作っていきます。ヘッダーロゴに関しては、一度決めたものをコロコロと変えることなく、ずっと使い続けることができるロゴになるよう試行錯誤を繰り返して作りました。読んでもらえる方にブログのイメージが定着してもらえれば最高ですね!

ヘッダーロゴの設定

私自身もそうですが、イラストを描くことに関して素人だという方は、お金を払ってでもプロにお願いするという方法も選択肢として考えるべきです。ロゴ自体を描いてもらっても良いのですが、少しでも安くしたいという方は、人物やキャラクターのみ作成を依頼し、ロゴは自分で作成するという方法がおすすめです。

私がロゴを作成した手順
「ココなら」で人物やキャラクターをプロに作成してもらう
②作ってもらった人物を使って「canva」でロゴを完成させる

ヘッダーメニューの設定

「グローバルナビ」と言われるパーツですが、ヘッダー部分に配置する重要なナビゲーションです。

【外観】>【メニュー】

  1. 「新しいメニューを作成しましょう。」をクリックする。
  2. メニュー構造内の「メニュー名」を入力する。
  3. メニュー設定のメニューの位置の中から「グローバルナビ」にチェックを入れる。
  4. 「メニューを作成」をクリックする。
  5. メニュー項目を追加の中から必要な項目にチェックを入れ、「メニューに追加」をクリックする。
  6. メニュー構造内を好みの並び順に変更する。
  7. 「メニューを保存」をクリックする。
メニューに階層を設定する方法

メニュー構造内を好みの順番に変更する際、第2階層や第3階層に設定したいメニューをドラッグして右にずらすことで、メニューに階層を設定することができます。メニューの階層設定は、読んでいる方が探している記事へたどり着きやすくなりますので、ブログの内容に合わせて設定することをおすすめします。

グローバルナビの位置調整

【外観】>【カスタマイズ】>【ヘッダー】>【レイアウト・デザイン設定】

できること

・ヘッダーレイアウトの設定(PC・SP)
・ヘッダー境界線の設定(なし・線・影)

ピックアップバナー

【外観】>【カスタマイズ】>【トップページ】>【ピックアップバナー】

当ブログの設定
■バナーレイアウト:固定幅4列(PC)、固定幅2列(SP)
■バナーデザイン:タイトルデザインは「表示しない」、内側に白線を「つける」、バナー画像を少し暗く「しない」

つぼみ

記事をスライドさせるスライダーを設置することもできますし、ピックアップバナーを設置することもできます。私の場合、読みたい(調べたい)記事へ誘導しやすいピックアップバナーを設置しています。

SWELLカスタマイズ|固定ページの設定

先ほど説明したように、スライダーではなくピックアップバナーを設置したため、固定ページに新着記事と人気記事を表示するようにしています。表示場所も、ブログを訪問した方に分かりやすいよう固定ページの最上部に配置しています。

では、それぞれのパーツごとに、具体的にどのような手順で作成していけばよいのかを解説していきたいと思います。

新着記事と人気記事

新着記事をカード型で左側に配置し、右側には新着記事と人気記事をそれぞれテキスト型で3記事表示させるようにしています。

STEP
フルワイドブロックを追加する

最初にフルワイドブロックという大きなブロックを配置し、そのブロックの中にいくつもの小さなブロックを置いていきます(←このようにイメージしておくと作りやすいと思います)。

当ブログの設定
■コンテンツ横幅:記事
■上下のpadding量:40(PC)、40(SP)
■背景色:好きな色を選ぶ
■背景色の不透明度:100
■背景画像の設定:なし
■上部の境界線の形状:波、高さ4
■下部の境界線の形状:波、高さ4
■ブロック下部の余白量:0

STEP
カラムブロックを追加する

見出しを入力し、文字サイズなどをお好みに調整した後、ブロックを追加(+)をクリックし、カラムブロックを配置します。

当ブログの設定
■カラム:2
■スタイル:デフォルト
■スマホでの列数設定:1列
■スマホ1列時のカラム間余白量:通常
■ブロック下部の余白量:0

STEP
各カラムを作成する

STEP2でカラムを50/50(2カラム)に設定しましたので、まず左側のカラムから作成していきます。投稿リストブロックを選択し、具体的にどのような表示にするのかを決めていきます。

当ブログの設定
■表示する投稿数:1
■レイアウト:カード型
■投稿の表示順序:新着順
■各種表示設定:公開日を表示する
■カテゴリー表示位置:サムネイル画像の上
■タイトルのHTMLタグ:h2
■最大カラム数:1(PC・SP)
■抜粋文の文字数:40(PC)、0(SP)

次に右側のカラムを設定していきます。
少し複雑な設定になりますが、新着記事と人気記事をタブ選択できるようにし、それぞれのタブブロックの中に投稿リストブロックを配置し、タブを選択した際に3記事が表示されるように設定しました。

当ブログの設定(タブブロック)
■スタイル:下線
■何番目のタブを最初に開いておくか:1
■タブサイズ設定:テキストにあわせる(PC・SP)

当ブログの設定(リストブロック)
■表示する投稿数:3
■レイアウト:テキスト型
■投稿の表示順序:新着順
■各種表示設定:公開日を表示する、更新日を表示する
■カテゴリー表示位置:サムネイル画像の上
■タイトルのHTMLタグ:h2
■最大カラム数:3(PC)、1(SP)
■抜粋文の文字数:0(PC・SP)

カテゴリー別の記事一覧

先ほど、新着記事と人気記事をタブで表示できるように設定しましたが、次はカテゴリー別です。設定方法はほとんど同じですが、カテゴリー別にピックアップするように設定しておかなければいけない所が唯一違うところです。

STEP
フルワイドブロックを追加する

まずフルワイドブロックを配置します。
新着記事と人気記事で作成したフルワイドブロックとの違いは、境界線の形状を調整しています。私は、すべてのブロックを波型にするのではなく、最後のブロックはシンプルなストレート型にしてみました。

当ブログの設定
■コンテンツ横幅:記事
■上下のpadding量:40(PC)、40(SP)
■背景色:好きな色を選ぶ
■背景色の不透明度:100
■背景画像の設定:なし
■上部の境界線の形状:波、高さ0
■下部の境界線の形状:斜線、高さ0
■ブロック下部の余白量:0

STEP
タブブロックを配置する

次にタブブロックを配置します。

当ブログの設定
■スタイル:下線
■タブサイズ設定(PC):端まで並べる(均等幅で)
■タブサイズ設定(SP):テキストに合わせる

STEP
投稿リストブロックを配置する

4つのカテゴリータブを作りましたので、それぞれのタブの中に投稿リストブロックを配置していきます。

当ブログの設定
■表示する投稿数:3
■レイアウト:リスト型(左右交互)
■投稿の表示順序:ランダム
■各種表示設定:公開日を表示する、更新日を表示する、タイトルを表示する
■カテゴリー表示位置:サムネイル画像の上
■タイトルのHTMLタグ:h2
■最大カラム数:3(PC)、1(SP)
■抜粋文の文字数:160(PC)・80(SP)

プロフィール

いよいよ終盤です。プロフィールの設定をしておきましょう。

STEP
フルワイドブロックを追加する

ここでは、ブロック全体的な背景として画像を挿入しますので、あらかじめ背景にしたい画像を準備しておきます。

当ブログの設定
■コンテンツ横幅:記事
■上下のpadding量:40(PC)、40(SP)
■背景色:好きな色を選ぶ
■背景色の不透明度:50
■背景画像の設定:メディアから選択
■背景効果:Fixed Background

STEP
カラムブロックを追加する

見出しを入力し、文字サイズなどをお好みに調整した後、ブロックを追加(+)をクリックし、カラムブロックを配置します。
その上で、画像とプロフィール文を追加していきます。

当ブログの設定
■カラム:2
■スタイル:線あり(グレー)
■スマホでの列数設定:1列
■スマホ1列時のカラム間余白量:通常

今回紹介したブロックは、まだまだほんの一部です。様々なブロックを活用すればアレンジも自由にでき、記事を書くことも楽しくなりますよ!

SWELLカスタマイズ|まとめ

  1. ヘッダーの設定
  2. 固定ページの設定

今回は、「ヘッダーの設定」と「固定ページの設定」の方法を紹介しましたが、専門的な知識がない私でも簡単にここまで作ることができました。
そして、SWELLというテーマを使っていなければ絶対にできなかったと思いますし、まだまだアレンジを加えていきたいと思います。

私も参考にさせていただいた「くうかさん」のブログはとても参考になりますので、チェックしてくださいね!

よかったらシェアしてね!
  • URL Copied!
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
Contents
閉じる