これはお知らせバーです。ヘッダー下部に表示し、文字を普通サイズ、テキストを横に流しています。背景はストライプです。詳しい説明はバーをクリックしてください。

SWELLの全ページ全エリア構成マップ(各説明&設定へのリンク付き)

テーマを導入した際、最初におこなうのがサイトの様々なカスタマイズ。様々なカスタマイズをする際、サイトの「表示上の構造」を先に知るとその後の作業がスムーズに進みます。

そこで、すべての表示部分をリストにして表にまとめ、設定方法や説明へのリンクを貼りました。クリックすると該当ページへ移動します(順次作成中)。

目次

SWELL全エリア構成マップの見方

ヘッダー部分トップページ投稿ページ固定ページアーカイブページフッター部分の構成をエリア別に掲載しています。

また、SWELLテーマでは様々な表示(見え方)を選択・設定できるので、「A設定」と「B設定」の表示を比較できるようにタブ分けして表示しました。視覚的に比較しやすくするため、同じ項目を同色で色付けし、「A設定」をした場合の「Z項目」と、「B設定」した場合の「Z項目」というような場合の位置の比較がしやすくなっています。

そして、各部分の設定をカスタマイザーでおこなうのか、ワードプレスの管理画面(ダッシュボード)でおこなうのかを記号分けし、ウィジェットエリアにも記号を付しましたので、このページでサイト全体の構成を知ることが可能です。

  • カスタマイザーでの設定→★印
  • ワードプレス管理画面(ダッシュボード)での設定→●印
  • ウィジェットエリア→◆印

ヘッダー部分、トップページ、投稿ページ、固定ページ、アーカイブページ、フッターページへのページ内リンクを各項目の行末に設置しているので、そちらもご活用いただけます(以下のようなリンクです)。

ヘッダー部分は、PCとSP(スマホ)で表示が異なり、設定項目もそれぞれです。タブレットのヘッダーはタブレットとSP(スマホ)は同じ構成です。

PC(パソコン)

ヘッダーナビ」の表示位置によってページ構成が変わります。

お知らせバー(上)★)(お知らせバーを表示する場合、上か下のどちらか一方のみ表示)★
ヘッダーバー[PCのみ]●★(キャッチフレーズ|サイト名●★)    アイコンリスト(  )★   
ヘッダー●★◆ロゴ
(キャッチフレーズ)
ヘッダーナビ(ヘッダーメニュー)●★ ()★ヘッダー内部[PCのみ]◆
お知らせバー(下)★)(お知らせバーを表示する場合、上か下のどちらか一方のみ表示)★
~ここに[トップページ][投稿ページ][固定ページ][アーカイブページ]いずれかの項目が入ります~
~ここに[フッター部分]の項目が入ります~

SP(タブレット・スマホ)

ロゴ」と「メニュー(三)」の位置関係により、ページの構成が変わります。

お知らせバー(上)★)(お知らせバーを表示する場合、上か下のどちらか一方のみ表示)★   
ヘッダー●★◆ ロゴ★                ★
カスタムボタン
三 ●★
メニュー
スマホ開閉
メニュー内●★
スマホ用ヘッダー●★ (※指定時のみ表示されます)
お知らせバー(下)★)(お知らせバーを表示する場合、上か下のどちらか一方のみ表示)★  
~ここに[トップページ][投稿ページ][固定ページ][アーカイブページ]いずれかの項目が入ります~
~ここに[フッター部分]の項目が入ります~

※「メニュー(三)」は通常「ヘッダーナビ」と同じメニューが表示されますが、「スマホ開閉メニュー内」を指定するとスマホメニューの内容が書き換わります(タブレットのメニューは書き換わりません。「ヘッダーナビ」が表示されます)。

ヘッダー部分の直下のエリアです。PC、タブレット、スマホそれぞれで表示(見え方)が異なります。

PC・タブレット・スマホ

~ここに[ヘッダー部分]の項目が入ります~
メインビジュアル★
記事スライダー★
ピックアップバナー★
  トップページ上部◆ トップページ専用サイドバー◆ 
  タブ[新着記事/人気記事]★
  (※トップページが「最新の投稿」の場合にのみ表示されます)
 共通サイドバー◆
 追尾サイドバー[PCのみ]
  [トップページコンテンツ]● 共通サイドバー[スマホ版]
(スマホ版設定時)
(※PC表示時は見えません)
  トップページ下部◆
~ここに[フッター部分]の項目が入ります~

ヘッダー部分の直下のエリアです。タイトルを「コンテンツ内」にするか「コンテンツ上」にするかによって見え方が変わります。

PC・タブレット・スマホ/(コンテンツ内・コンテンツ上)

~ここに[ヘッダー部分(PC)]の項目が入ります~
(パンくずリスト★)
ピックアップバナー★(※「トップページ以外の下層ページにも表示する」にした場合に表示されます)  
[日付][タイトル]★ 共通サイドバー◆
[PR表記][カテゴリー名][タグ][タクソノミー][公開日][更新日][著者]★ 追尾サイドバー[PCのみ]◆
アイキャッチ画像 共通サイドバー[スマホ版]
(スマホ版設定時)
(※PC表示時は見えません)
シェアボタン★
記事上部◆
(目次広告(前))
[投稿ページリード文]
目次★  
(目次広告(後))
[投稿ページコンテンツ]
ページャー★
記事下部◆
カテゴリー名
フォローボタン★
シェアボタン[シェアしてね!]
前後記事★
CTAウィジェット◆ (または) CTAウィジェット(カテゴリ・タグ別)●
著者情報★
関連記事上◆
関連記事★
関連記事下◆
コメント★
~ここに[フッター部分]の項目が入ります~

ヘッダー部分の直下のエリアです。タイトルを「コンテンツ内」にするか「コンテンツ上」にするかによって見え方が変わります。

PC・タブレット・スマホ/(コンテンツ内・コンテンツ上)

~ここに[ヘッダー部分(PC)]の項目が入ります~
(パンくずリスト★)
ピックアップバナー★(※「トップページ以外の下層ページにも表示する」にした場合に表示されます)  
[タイトル]★ 共通サイドバー◆
アイキャッチ画像 追尾サイドバー[PCのみ]◆
固定ページ上部◆ 共通サイドバー[スマホ版]
(スマホ版設定時)
(※PC表示時は見えません)
[PR表記]★
(目次広告(前))
[固定ページリード文]
目次★
(目次広告(後))
[固定ページコンテンツ]
固定ページ下部◆
コメント★
~ここに[フッター部分]の項目が入ります~

ヘッダー部分の直下のエリアです。タイトルを「コンテンツ内」にするか「コンテンツ上」にするかによって見え方が変わります。

PC・タブレット・スマホ

~ここに[ヘッダー部分(PC)]の項目が入ります~
(パンくずリスト★)
タイトル(ターム名) -サブタイトル-●★ 共通サイドバー◆
タームナビゲーション★ 追尾サイドバー[PCのみ]◆
[PR表記]★ 共通サイドバー[スマホ版]
(スマホ版設定時)
(※PC表示時は見えません)
アイキャッチ画像|ターム説明文●
ブログパーツ(カテゴリ用 または タグ用)●
ブログパーツ(CTA)●(※アーカイブページでは見えません)
投稿ページでカテゴリごとのCTAを表示させるための設定です)
タブ[新着記事/人気記事]★
[アーカイブコンテンツ]★
ページャー★
~ここに[フッター部分]の項目が入ります~

サイトの下の部分で、トップページ、固定ページ、投稿ページ、アーカイブページなどのページの下に配置されるエリアです。「フッター(スマホ)ウィジェット」の設置有無で表示が異なります。サイドバーはなく、横幅は100%です。

フッター(スマホ)ウィジェット◆を「設置しない」場合

~ここに[ヘッダー部分]の項目が入ります~
~ここに[トップページ][投稿ページ][固定ページ][アーカイブページ]いずれかの項目が入ります~
(サイドバーを含む)
フッター直前◆
(パンくずリスト★)
   フッター(PC)1      フッター(PC)2      フッター(PC)3   
アイコンリスト★
フッターメニュー●★右下固定ボタン★
コピーライト
スマホ用固定フッターメニュー●★ (※PC表示時は見えません)

フッター(スマホ)ウィジェット◆を「設置する」の場合

~ここに[ヘッダー部分]の項目が入ります~
~ここに[トップページ][投稿ページ][固定ページ][アーカイブページ]いずれかの項目が入ります~
(サイドバーを含む)
フッター直前◆
(パンくずリスト★)
   フッター(PC)1      フッター(PC)2      フッター(PC)3   
フッター(スマホ)◆ (※PC表示時は見えません)
アイコンリスト★
フッターメニュー●★右下固定ボタン★
コピーライト
スマホ用固定フッターメニュー●★ (※PC表示時は見えません)

その他の設定項目-サイトの全体構成へのリンク-

以上で、SWELLの全ページ全エリアの構成マップは終了です。最後に、上記の「ページ構成」以外のサイト全体に関する設定項目へのリンクのみここにあげておきます。(上記と重複しない項目のみ抽出)

サイト全体の見た目

全体の質感

全体の質感をフラットにしたり、丸みを持たせたりできます。

コンテンツ幅

1カラム時と2カラム時のコンテンツ幅を指定できます。

タイトルデザイン

サブコンテンツやウィジェットのタイトルデザインを変更できます。

テーマカラー

自サイトのテーマカラー(メインカラー)を指定できます。

文字の設定

テキスト文字

テキスト文字の色を変更できます。

リンク文字

リンク文字の色を変更したり、リンクにアンダーラインを引く設定ができます。

背景の設定

サイト全体の背景

サイト全体の背景色や画像を設定できます。

コンテンツの背景

コンテンツの背景を白にする設定です。

ページ背景

ページ背景を指定できます。

画像の指定

NO IMAGE画像

NO IMAGE(ノーイメージ)画像を指定できます。

以上です。

この記事を書いた人

このサイトの管理人です。
■ダッシュボード→ユーザー→プロフィール→プロフィール情報の欄に記入した情報が出力されます。
■プロフィール写真はGravatarまたは、SWELLテーマ導入で登録可能です。
(当サイトはGravatarではなく、SWELLテーマでの登録です)
■下のSNSリンクはすべてトップページに移動します。

目次