せっかくテーマをSWELLにしたのなら
トップページを自分好みにカスタマイズしたいですね
「記事のリライトに追われてそれどころじゃない」というのも分かります(^-^;
この記事は「ここ」を変えるには
「どこ」をさわればいいかを
直感的に分かりやすく画像で説明しています
あなたが変更したい部分だけを
見てもらえば結構です
アシ美それではデザインという事で
わたくし、アシ美がお送りいたします
まさ大丈夫でしょうか？
アシ美私は、今月の記事数の方が心配ですけどね
※現在6記事
まさピキッ！
SWELLのトップページは
このような構成になっています
SWELLのトップページはこのような構成になっています
アシ美Cocoonとは名称が違いますね
まさ外観をいじる項目がこのように
なっているので
この名称で覚えておきましょう
「ヘッダー」をカスタマイズするには
「ヘッダー」をカスタマイズするには、
WordPressメニューの
アシ美「外観」→「カスタマイズ」と進みます
アシ美すると、このような画面になります
※Cocoonでもおなじみですね
まさ左側の「青枠」をさわると
外観が変化するのを
見るコトができます
アシ美
をクリックで
設定するのですが
ここでは主に色を変えるのと
ヘッダーバーの設定ができます
まさヘッダーバーとは上の赤枠部分ですね
※PCのみです
「ヘッダーバー」のカスタマイズ
「ヘッダーバー」のカスタマイズは
PCのみしか表示できません
の中の
「■ヘッダーバー設定」で色と「SNSのアイコン」を表示できます
アシ美「SNSアイコンを表示する」にチェックを入れると
アイコンが表示されます
まさSNSアイコンの設定は
ひとつ戻って
アシ美「SNS情報」をクリック
まさ「SNSリンク設定」に、SNSのURLを
貼り付けてください
アシ美設定を変更したら必ず
をクリックしてくださいね
「ヘッダー」のカスタマイズ
「ヘッダー」のカスタマイズです
アシ美個人的に「おぉー！」と思ったのは
ヘッダーを透明にできます
- 「■トップページでの特別設定」
- 「ヘッダーの背景を透明にするかどうか」
- しない
- する（文字色：白）
- する（文字色：黒）
まさ「おぉー！」
一体感が出てカッコイイですね
アシ美メニューを作成する方法は
こちらをごらんください
まさメニューを作成したら
「グローバルナビ」にチェックを入れて
アシ美
で設定が反映されます
ヘッダーにウィジェットを追加する
ヘッダーにウィジェットを追加するには
アシ美この検索窓がウィジェットですね
まさウィジェットも色々ありますが
私は検索窓を入れてみました
アシ美慣れるまで見にくいですが
「外観」→「ウィジェット」で
この画面になります
赤線から左側の「利用できるウィジェット」の
中から好きなウィジェットを
「ヘッダー内部」にドラッグします
アシ美今回は「検索」をドラッグ
まさタイトルに文字を入力して
「保存」すると・・・
アシ美ムリに入れなくてもいいですよ
「メインビジュアル」をカスタマイズするには
「メインビジュアル」をカスタマイズするには
WordPressメニューの
「外観」→「カスタマイズ」
WordPressメニューの
「外観」→「カスタマイズ」
アシ美「トップページ」をクリック
まささらに
「メインビジュアル」をクリック
アシ美SWELLではメインビジュアルに
「画像」か「動画」を
表示できます
まさしかも、画像は3枚まで表示できます
私は2枚にしてみました
アシ美しかも[PC]と[SP]で
別の高さと別の画像を
設定できるんですよ
まさ[SP]って何ですか？
アシ美スマートフォン（Smartphone）
ですけど
何だと思ってたんですか？
まさスペシャル的な何か・・
※ガチです
アシ美ちーん
テキストを表示するには
テキストを表示するにはテキストを入力するだけなのですが
アシ美テキストを直接入力すると
上手くいきません
まさサンプル画像も
同時に更新してしまうからです
アシ美メモ帳などに入力してから
コピペしてくださいね
ボタンを設置するには
ボタンを設置するには
アシ美「リンク先ＵＲＬ」と
「ボタンテキスト」を入力してください
まさ色とタイプも設定できます
アシ美設定を変更したら必ずをクリックしてくださいね
メインビジュアルに「ブログパーツ」を表示
メインビジュアルに「ブログパーツ」を
表示することができます
アシ美「ブログパーツ」って何でしたっけ？
まさブログパーツの詳細は
こちらをご覧ください
－ 15分後 －
アシ美「ブログパーツ」を使って
トップページを
こんな感じにしてみました
＼ジャーン！／
まさ何してるんですか？
アシ美まずは、ブログパーツを作ります
まさ聞いてます？
ブログパーツの「IDの数字」だけをコピーします
この場合は「2853」ですね
ブログパーツの「IDの数字」だけをコピーします
この場合は「2853」ですね
WordPressメニューの
「外観」→「カスタマイズ」
WordPressメニューの
「外観」→「カスタマイズ」
「トップページ」→「メインビジュアル」
「ブログパーツID」に数字を貼り付け
「トップページ」→「メインビジュアル」
「ブログパーツID」に数字を貼り付け
アシ美我ながら、上手くできました
まさやめてもらって
いいですか・・・
「記事スライダー」のカスタマイズ
「記事スライダー」のカスタマイズは
WordPressメニューの
「外観」→「カスタマイズ」
WordPressメニューの
「外観」→「カスタマイズ」
アシ美「トップページ」
をクリック
まさ続いて
「記事スライダー」をクリック
アシ美ここで「記事スライダー」の
各種設定ができます
まさ「ピックアップ対象のカテゴリーID」は
どこにあるのですか？
アシ美「投稿」→「カテゴリー」をクリック
まさこの赤枠の「ID」ですね
アシ美この「ID」を入れるコトによって
表示したいカテゴリーを選択できます
アシ美設定を変更したら必ずをクリックしてくださいね
「ピックアップバナー」のカスタマイズ
「ピックアップバナー」のカスタマイズをするには
３つの過程が必要です
- ピックアップバナー専用のメニューを作る
- ピックアップバナー専用の画像を選択する
- ピックアップバナーの設定をする
ピックアップバナー専用のメニューを作る
ピックアップバナー専用のメニューを作るとは
「ピックアップバナー」を新規で作る場合は、
まず「メニューを作成」しましょう
アシ美メニューを作成する方法は
こちらをごらんください
まさメニューを作成したら
「ピックアップバナー」にチェックを入れて
アシ美で設定が反映されます
ピックアップバナー専用の画像を選択する
ピックアップバナー専用の画像を選択するとは
せっかくなので、ピックアップバナーを
「カテゴリーごとに画像を設定したい」ですよね
WordPressメニューの
「外観」→「カスタマイズ」
WordPressメニューの
「外観」→「カスタマイズ」
アシ美「メニュー」ををクリック
まさ（現在の設定: ピックアップバナー）を選択
アシ美画像を設定したいカテゴリーの
「▼」をクリック
アシ美「説明」という欄に
画像のURLを貼ってください
まさ画像のURL？(￣▽￣;)
アシ美設定を変更したら必ずをクリックしてくださいね
まさ画像のURL・・・(T_T)
画像のURLとは？
画像のURLとは？
いったい何なのか？ そしてどこにあるのか？
アシ美その真相にせまります
まさいったい
何の番組ですか・・
アシ美画像は「メディア」にあります
アシ美その中から
貼り付けたい画像を選択して
まさ「URLをクリップボードにコピー」を
クリックするんですね
アシ美大変よくできました
ピックアップバナーの設定をする
ピックアップバナーの設定をするには
WordPressメニューの
「外観」→「カスタマイズ」
WordPressメニューの
「外観」→「カスタマイズ」
「トップページ」をクリック
「トップページ」をクリック
「ピックアップバナー」をクリック
「ピックアップバナー」をクリック
アシ美ここで「ピックアップバナー」を
自分好みに設定してください
まさ大ざっぱですね
アシ美見ればわかりますので・・・
設定を変更したら必ず
をクリックしてくださいね
「記事一覧リスト」をカスタマイズするには
「記事一覧リスト」をカスタマイズするには
WordPressメニューの
「外観」→「カスタマイズ」
WordPressメニューの
「外観」→「カスタマイズ」
「記事一覧リスト」をクリック
アシ美「リストレイアウト」から
主だったものを紹介します
↓タブを切り替えて確認できます
アシ美[ ■タブ切り替え設定]で
記事一覧リストをタブ表示できます
- 「表示するタブ」の設定
-
チェックを入れたタブを表示します
- 「タームタブ」の設定
-
ここに「カテゴリー」や「タグ」の
※IDを入れると、そのタブを作ってくれます
何も入れなければタブは表示されません - 「新着記事タブ」の表示名
-
ここに入れた文字が新着タブに表示されます
- 「人気記事タブ」の表示名
-
ここに入れた文字が人気記事タブに表示されます
- タブデザイン
-
3種類から選べます
※IDは「投稿」→
「カテゴリー」又は「タブ」で確認できます
「フッター」をカスタマイズするには
「フッター」をカスタマイズするには
WordPressメニューの
「外観」→「カスタマイズ」
WordPressメニューの
「外観」→「カスタマイズ」
「フッター」をクリック
「フッター」をクリック
アシ美ここで変更できるのは
主に色くらいですね
まさ「フッターメニュー」の変更は？
アシ美メニューを作成する方法は
こちらをごらんください
まさメニューを作成したら
「フッター」にチェックを入れて
アシ美で設定が反映されます
まとめ
今回は、テーマをSWELLに変更したばかりでトップページのデザインを自分好みにしたいけど
「どこに、この設定があるんだよ～」という方に向けてお送りいたしました
ご購入前でSWELLのこんなことが知りたいとかございましたら
記事の参考にさせていただきますので、ご連絡下されば喜んじゃいます(￣▽￣)
テーマの変更を検討中の方で「SWELL」も候補にあがっているのでしたら
この記事のみならず実際にSWELLのホームページで、その魅力をお確かめください
にほんブログ村
コメント等、お気軽にどうぞ (￣▽￣)