MENU
テリオス
古代ギリシャ語で〈願いを叶える〉を意味する TERIOS をハンドルネームに冠し、マネタイズに関する有益な情報を発信するサイト『TERIOSNET−MONETIZE』を2024年1月から運営しています。
マネタイズについて、管理人テリオスが実践・経験して培ったノウハウを、初心者の方でも分かりやすいように、講義形式で情報発信しています。
当サイトは【 SWELL 】で作成しています 導入はこちら

トップページ(SWELL~カスタマイズ)

本記事では、SWELLによるサイト型トップページ作成を含む、ブログ・サイトのデザインについて解説します。
手順を追っていくことで、当サイトとほぼ同じ仕上がりになりますので、ぜひお読みください。

テリオス

テリオス(@TERIOS_INFO)が解説させていただきますね。

記事を読んで分かること =【 結論 】
  • 当サイトのSWELLでのトップページ設定情報

SWELL導入直後のデフォルト状態から変更した箇所のみについて解説いたします。

目次

不要ウィジェットの削除

テーマを導入すると、ウィジェットが表示されるようになりますが、現時点で不要なウイジェットを削除します。

WordPressの管理画面のサイドバーで、外観>ウィジェットとクリックします。

共通サイドバーのコンテンツを開き、ブロックの横にあるをクリックし、削除をクリックします。

共通サイドバー画面
共通サイドバー画面

これで不要なウィジェットは削除されました。

メインビジュアル

WordPress管理画面の管理バーにあるカスタマイズから、トップページメインビジュアルとクリックします。

WordPress管理画面

➀「メインビジュアルの表示内」を画像にし、

②「■表示設定」で周りに余白を付けるをチェックし、③「メインビジュアルの高さ設定」でコンテンツに応じるを選択し、④「フィルター処理(メインビジュアルに適用するフィルター処理)」でなしを選択します。

⑤「■各スライドの設定」でスライド[1]のメインテキスト[1]に文字を入力し、⑥テキストカラー[1]の色を選択し、⑦公開をクリッします。

記事スライダー

WordPress管理画面の管理バーにあるカスタマイズから、トップページ記事スライダーとクリックします。

WordPress管理画面

➀「■記事の表示設定」でカテゴリー表示位置を表示しないにし、②「■スライド設定」でスライドが切り替わる間隔と、③その他の設定を変更します。

④「■その他の表示設定」で記事スライダーエリアの背景色を変更し、⑤公開をクリックします。

せっかくなので、記事スライダーがどのように表示されるか見てみるために、テスト記事を作成してみましょう。

WordPress管理画面の管理バーにある+新規から、投稿をクリックします。

タイトルを入力する欄に自動でカーソルが移動するので、適当なタイトルを入力します。

公開をクリックします。

確認を求められるので、再度公開をクリックします。

を押します。

投稿を表示をクリックします。

下のように表示されます。

これをあと、タイトル名を変えて3回ほど繰り返してみましょう。

そうすると、下のように記事スライダーが表示されます。

ピックアップバナー

WordPress管理画面の管理バーにあるカスタマイズから、トップページピックアップバナーとクリックします。

WordPress管理画面

➀「■バナーデザイン」のバナータイトルのデザインを表示しないにして、②公開をクリックします。

当サイトでは、カテゴリー第2層をピックアップバナーとして表示していますので、そのための説明をします。

まず、カテゴリー第2層用の固定ページを作成します。WordPress管理画面のサイドバーから、固定ページ新規追加とクリックします。

➀タイトルを入力し、②パーマリンクのURLスラッグを入力し、③アイキャッチ画像を設定し、④公開をクリックします。

これを第2階層分、作成します。

次に、WordPressの管理画面のサイドバーで、外観 > メニューとクリックし、新しいメニューを作成しましょうをクリックして、カテゴリー第2階層ピックアップバナー用メニューを作成します。

➀メニュー名をピックアップバナーとし、②メニューの位置でピックアップバナーにチェックを入れ、③メニューを作成をクリックします。

➀固定ページですべて表示をクリックし、②上で作成した固定ページにチェックを入れ、③メニューに追加をクリックします。

選択した固定ページが右側に追加されます。これらは、ドラッグで順序を入れ替えられます。

メニューを保存をクリックします。

ついでなので、ヘッダーも少しデザインしましょう。

WordPressの管理画面のサイドバーで、外観 > メニューとクリックし、新しいメニューを作成しましょうをクリックします。

➀メニュー名をグローバルナビとし、②メニューの位置でグローバルナビにチェックを入れ、③メニューを作成をクリックします。

➀固定ページですべて表示をクリックし、②トップページ・プライバシーポリシー・お問い合わせにチェックを入れ、③メニューに追加をクリックします。

選択した固定ページが右側に追加されます。これらは、ドラッグで順序を入れ替えられます。

メニューを保存をクリックします。

メニュー名の下に英語表記を加えてみましょう。

①各メニュータブの右端にある「▲(小さな三角アイコン)」をクリックすると、各メニューの詳細設定パネルが開きます。②その中の「説明」と表示されたテキストエリアにて、メニューの英語表記を入力してください。

下のような入力になります。

この「説明」欄ですが、デフォルトでは非表示になっているので、まだ表示されていない場合は以下の手順を参考にして表示状態へ切り替えてください。

①メニューの編集画面の右上に表示されている「表示オプション」をクリックします。②上からチェックリストが表示されてくるので、「説明」という項目にチェックを入れてください。

現段階でのトップページの状況

ここまでの設定を行うと、サイトは下のように変化します。

この状態では、背景の白色が際立っているように感じるので、背景色を変更してみます。

WordPress管理画面の管理バーにあるカスタマイズから、サイト全体設定基本カラーとクリックします。

➀メインカラーを変更し、②公開をクリックします。

その結果、パソコンでの表示は下のようになります。

スマートフォンでは、下のようになります。

ここで、フッターにホームを追加してみます。下の記事を参考に、作成したフッターメニューにトップページ(ここではTERIOSNET-MONETIZE)を追加します。なお、ナビゲーションラベルをホームに変更します。

フッターにホームが追加されました。

フッター

総括

結論 & まとめ

SWELLによるデザインでは、オリジナリティにあふれたブログやサイトを作成することができます。
当サイトと同じデザインにしなくとも、少しでもあなたのブログやサイトの参考になればと思います。

テリオス

本記事が、あなたのお役に立てたのなら幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

57歳Web職人#SWELLマニア

目次