SWELLのトップページをカスタマイズする方法【WordPress】

せっかくテーマをSWELLにしたのなら
トップページ自分好みにカスタマイズしたいですね
「記事のリライトに追われてそれどころじゃない」というのも分かります(^-^;

この記事は「ここ」を変えるには
どこ」をさわればいいかを
直感的に分かりやすく画像で説明しています

あなたが変更したい部分だけ
見てもらえば結構です

SWELLの公式ホーム

アシ美

それではデザインという事で
わたくし、アシ美がお送りいたします

まさ

大丈夫でしょうか?

アシ美

私は、今月の記事数の方が心配ですけどね
※現在6記事

まさ

ピキッ!

SWELLトップページ
このような構成になっています

SWELLトップページはこのような構成になっています

アシ美

Cocoonとは名称が違いますね

まさ

外観をいじる項目がこのように
なっているので
この名称で覚えておきましょう

目次

「ヘッダー」をカスタマイズするには

「ヘッダー」をカスタマイズするには
WordPressメニュー

アシ美

「外観」→「カスタマイズ」と進みます

アシ美

すると、このような画面になります
※Cocoonでもおなじみですね

まさ

左側の「青枠」をさわると
外観が変化するのを
見るコトができます

アシ美

をクリックで
設定するのですが
ここでは主に色を変えるのと
ヘッダーバーの設定ができます

まさ

ヘッダーバーとは上の赤枠部分ですね
※PCのみです

「ヘッダーバー」のカスタマイズ

「ヘッダーバー」のカスタマイズ
PCのみしか表示できません

の中の
「■ヘッダーバー設定」と「SNSアイコン」を表示できます

アシ美

「SNSアイコンを表示する」にチェックを入れると
アイコンが表示されます

まさ

SNSアイコンの設定は

ひとつ戻って

アシ美

「SNS情報」をクリック

まさ

「SNSリンク設定」に、SNSURL
貼り付けてください

アシ美

設定を変更したら必ず
をクリックしてくださいね

「ヘッダー」のカスタマイズ

「ヘッダー」のカスタマイズです

アシ美

個人的に「おぉー!」と思ったのは
ヘッダーを透明にできます

  1. 「■トップページでの特別設定
  2. 「ヘッダーの背景を透明にするかどうか」
    • しない      
    • する(文字色:白)
    • する(文字色:黒)
まさ

「おぉー!」
一体感が出てカッコイイですね

アシ美

メニューを作成する方法は
こちらをごらんください

まさ

メニューを作成したら
「グローバルナビ」チェックを入れて

アシ美

で設定が反映されます

ヘッダーにウィジェットを追加する

ヘッダーにウィジェットを追加するには

アシ美

この検索窓ウィジェットですね

まさ

ウィジェットも色々あります
私は検索窓を入れてみました

アシ美

慣れるまで見にくいですが
「外観」→「ウィジェット」
この画面になります

赤線から左側「利用できるウィジェット」
中から好きなウィジェット
「ヘッダー内部」にドラッグします

アシ美

今回は「検索」をドラッグ

まさ

タイトルに文字を入力して
「保存」すると・・・

アシ美

ムリに入れなくてもいいですよ

「メインビジュアル」をカスタマイズするには

「メインビジュアル」をカスタマイズするには

WordPressメニュー
「外観」→「カスタマイズ」

WordPressメニュー
「外観」→「カスタマイズ」

アシ美

「トップページ」をクリック

まさ

さらに
「メインビジュアル」をクリック

アシ美

SWELLではメインビジュアル
「画像」「動画」
表示できます

まさ

しかも、画像は3枚まで表示できます
私は2枚にしてみました

アシ美

しかも[PC][SP]
別の高さ別の画像
設定できるんですよ

まさ

[SP]って何ですか?

アシ美

スマートフォン(Smartphone)
ですけど
何だと思ってたんですか?

まさ

スペシャル的何か・・
※ガチです

アシ美

ちーん

テキストを表示するには

テキストを表示するにはテキストを入力するだけなのですが

アシ美

テキストを直接入力すると
上手くいきません

まさ

サンプル画像
同時に更新してしまうからです

アシ美

メモ帳などに入力してから
コピペしてくださいね

これは「Sticky Notes(付箋)」という
Windows標準のアプリです

ボタンを設置するには

ボタンを設置するには

アシ美

「リンク先URL」
「ボタンテキスト」を入力してください

まさ

タイプも設定できます

アシ美

設定を変更したら必ず
をクリックしてくださいね

メインビジュアルにブログパーツ」を表示

メインビジュアルにブログパーツ」を
表示することができます

アシ美

「ブログパーツ」ってでしたっけ?

まさ

ブログパーツ詳細
こちらをご覧ください

- 15分後 -

アシ美

「ブログパーツ」を使って
トップページ
こんな感じにしてみました

ジャーン!/

まさ

してるんですか?

アシ美

まずは、ブログパーツを作ります

まさ

聞いてます?

ブログパーツの「IDの数字」だけをコピーします
この場合は「2853」ですね

ブログパーツの「IDの数字」だけをコピーします
この場合は「2853」ですね

WordPressメニュー
「外観」→「カスタマイズ」

WordPressメニュー
「外観」→「カスタマイズ」

「トップページ」→「メインビジュアル」
「ブログパーツID」数字を貼り付け

「トップページ」→「メインビジュアル」
「ブログパーツID」数字を貼り付け

アシ美

我ながら、上手くできました

まさ

やめてもらって
いいですか・・・

「記事スライダー」のカスタマイズ

「記事スライダー」のカスタマイズ

WordPressメニュー
「外観」→「カスタマイズ」

WordPressメニュー
「外観」→「カスタマイズ」

アシ美

「トップページ」
をクリック

まさ

続いて
「記事スライダー」をクリック

アシ美

ここで「記事スライダー」
各種設定ができます

まさ

「ピックアップ対象のカテゴリーID」
 どこにあるのですか?

アシ美

「投稿」「カテゴリー」をクリック

まさ

この赤枠「ID」ですね

アシ美

この「ID」を入れるコトによって
表示したいカテゴリーを選択できます

アシ美

設定を変更したら必ず
をクリックしてくださいね

「ピックアップバナー」のカスタマイズ

「ピックアップバナー」のカスタマイズをするには
 3つの過程が必要です

  1. ピックアップバナー専用のメニューを作る
  2. ピックアップバナー専用の画像を選択する
  3. ピックアップバナーの設定をする

ピックアップバナー専用のメニューを作る

ピックアップバナー専用のメニューを作るとは

「ピックアップバナー」新規で作る場合は、
まず「メニューを作成」しましょう

アシ美

メニューを作成する方法は
こちらをごらんください

まさ

メニューを作成したら
ピックアップバナーチェックを入れて

アシ美

で設定が反映されます

ピックアップバナー専用の画像を選択する

ピックアップバナー専用の画像を選択するとは

せっかくなので、ピックアップバナーを
カテゴリーごとに画像を設定したい」ですよね

WordPressメニュー
「外観」→「カスタマイズ」

WordPressメニュー
「外観」→「カスタマイズ」

アシ美

「メニュー」ををクリック

まさ

(現在の設定: ピックアップバナー)を選択

アシ美

画像を設定したいカテゴリーの
「▼」をクリック

アシ美

「説明」という欄に
画像のURLを貼ってください

まさ

画像のURL?( ̄▽ ̄;)

アシ美

設定を変更したら必ず
をクリックしてくださいね

まさ

画像のURL・・・(T_T)

画像のURLとは?

画像のURLとは?
いったい何なのか? そしてどこにあるのか?

アシ美

その真相にせまります

まさ

いったい
何の番組ですか・・

アシ美

画像は「メディア」にあります

アシ美

その中から
貼り付けたい画像を選択して

まさ

「URLをクリップボードにコピー」
 クリックするんですね

アシ美

大変よくできました

ピックアップバナーの設定をする

ピックアップバナーの設定をするには

WordPressメニュー
「外観」→「カスタマイズ」

WordPressメニュー
「外観」→「カスタマイズ」

「トップページ」をクリック

「トップページ」をクリック

「ピックアップバナー」をクリック

「ピックアップバナー」をクリック

アシ美

ここで「ピックアップバナー」
自分好みに設定してください

まさ

大ざっぱですね

アシ美

見ればわかりますので・・・
設定を変更したら必ず
をクリックしてくださいね

「記事一覧リスト」をカスタマイズするには

「記事一覧リスト」をカスタマイズするには

WordPressメニュー
「外観」→「カスタマイズ」

WordPressメニュー
「外観」→「カスタマイズ」

「記事一覧リスト」をクリック

アシ美

「リストレイアウト」から
主だったものを紹介します

パソコンとスマホを別々で設定できます

タブ切り替えて確認できます

アシ美

[ ■タブ切り替え設定]
記事一覧リストタブ表示できます

「表示するタブ」の設定

チェックを入れたタブを表示します

「タームタブ」の設定

ここに「カテゴリー」「タグ」
IDを入れると、そのタブを作ってくれます
何も入れなければタブは表示されません

「新着記事タブ」の表示名

ここに入れた文字が新着タブ表示されます

「人気記事タブ」の表示名

ここに入れた文字が人気記事タブ表示されます

 タブデザイン

3種類から選べます

※ID「投稿」→
「カテゴリー」又は「タブ」確認できます

「フッター」をカスタマイズするには

「フッター」をカスタマイズするには

WordPressメニュー
「外観」→「カスタマイズ」

WordPressメニュー
「外観」→「カスタマイズ」

「フッター」をクリック

「フッター」をクリック

アシ美

ここで変更できるのは
主にくらいですね

まさ

「フッターメニュー」の変更は?

アシ美

メニューを作成する方法は
こちらをごらんください

まさ

メニューを作成したら
「フッター」チェックを入れて

アシ美

で設定が反映されます

まとめ

今回は、テーマをSWELLに変更したばかりでトップページのデザインを自分好みにしたいけど
「どこに、この設定があるんだよ~」という方に向けてお送りいたしました

ご購入前でSWELLのこんなことが知りたいとかございましたら
記事の参考にさせていただきますので、ご連絡下されば喜んじゃいます( ̄▽ ̄)

テーマの変更を検討中の方で「SWELL」も候補にあがっているのでしたら
この記事のみならず実際にSWELLのホームページで、その魅力をお確かめください

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね (´艸`*)

コメント等、お気軽にどうぞ ( ̄▽ ̄)

コメントする

目次
閉じる