トップページのサイドバーを非表示にするには？

「AFFINGER管理」＞「トップページ」＞「トップページのレイアウト」から変更することができます。

AFFINGER6｜トップページをブログ型からサイト型にカスタマイズ

サイト運営上級者になるほどサイト型のトップページにカスタマイズする人が増えてきます。

ある程度の運営歴になるとカスタマイズ自体も難しくないので、挑戦する方も多いんですよね！

こんな方におすすめ

サイト型とブログ型って何？
カスタマイズ方法を知りたい
サイト型の利点は？

今回はAFFINGER6を使ったトップページのサイト型カスタマイズについて解説していきます。

動くトップページの設定方法は以下の記事で解説しています。

また、トップページに個別でCSSをあてるカスタマイズを有料記事で公開しています。

他のサイトと差をつけてみましょう。

ブログ型とサイト型

そもそも「ブログ型」と「サイト型」って何？どう違うの？という事について最初に解説しておきます。

WordPressにおけるブログ型とサイト型の違いは「トップページに新規ページ一覧を表示しているのか、固定ページを表示しているのか」の違いになります。

ブログ型－AFFINGERサンプルサイトをみる
- 新規記事が一覧で並んでいる
- ブログの標準型
- とりあえずならコレ！
サイト型－AFFINGERサンプルサイトをみる
- 伝えたい事や記事が全面に出ている
- 上級者向け
- 伝えることが決まっているならコレ！

それぞれに特徴があり、初期設定ではブログ型に設定されています。

サイト型は明確にアフィリエイトしたい商材がある場合に役に立つデザインになっているのが特徴です。

AFFINGER機能ハイブリッドページ

通常のサイト型のページは固定ページで作成するので、新着記事一覧などを表示させたい場合は、自分でリンクを用意してページ内に埋め込む必要があります。

AFFINGER6ではこの新着ページなどの記事一覧機能を固定ページを表示させつつ、一緒に掲載する独自機能が備わっています。

このため、AFFINGERでは他のテーマと違いハイブリットページとして「サイト型＋ブログ型」で作成することも可能です。

投稿ページは上記のように記事一覧になっており「ページャー」というページ切り替え機能がついているのが特徴です。

他のWordPressテーマでもサイト型にすると、ページ一覧を作成する時にページャーではなく「〇〇記事一覧」や「〇〇記事をもっと見る」などのリンクを設置して、投稿ページに飛ばすのが一般的です。

AFFINGERでは専用の管理画面から固定ページ、投稿ページ関係なく記事一覧を表示できる機能の設定がテーマに内蔵されています。

「ダッシュボード」＞「AFFINGER管理」＞「トップページ」＞「記事一覧」

カラムの違い

AFFINGER6ではレイアウトを好きなように変更することがきます。

以下公式サイトからです。

サイドバーの位置を変更したり、1カラムやLPにも対応しておりページごとに変更できます。

このようにサイト型のトップページであってもカラム数で印象はだいぶ違うと思います。

筆者はサイト型といえば1カラムみたいな考えがあるので、当サイトのトップページは1カラムで作成しています。

サイトトップページを見てみる

サイト型に設定する

サイト型に設定する手順を解説していきます。

サイト型カスタマイズ手順

固定ページで新着記事一覧ページを作成
- 空ページで新着記事を表示
- パーマリンク設定
固定ページでトップページを作成
- メインページの作り込み
- SNS用にそれぞれ設定
- アイキャッチ設定
WordPressでそれぞれのページを設定する

基本的にはWordPressでサイト型を作る時の工程は変わりませんが、AFFINGER6では少しだけ違うところがあるので本記事で詳しく解説していきます。

トップページを作成

このページは実際にサイトのホームページとして表示されるページなので作り込みが必要になります。

同じようにトップページ用の固定ページを追加していきます。

トップページの設定する場所は3か所です。

AFFINGER6は特殊でここで設定する項目はSNSでの共有時に表示される内容となっています。

タイトル（サイト名＋キャッチフレーズ）＞「アフィンガースタジオdemo」
メタディスクリプション＞「設定済みのものをコピペでOK」
アイキャッチ＞OGPとしてSNS投稿した際に表示されます。
公開

これでそれぞれページを準備することができました。

パーマリンクは設定しなくてOKです。

トップページの作り込みについては後ほど解説します。

WordPressでページを設定

ページを作成できたら表示設定を変更していきます。

「ダッシュボード」＞「設定」＞「表示設定」＞「ホームページの表示」

ここで先程作成したページを割り当てていきます。

「ホームページ表示」で固定ページを選択して、先程作成したページを選択したあとに変更を保存します。

これで設定自体は完了になります。

固定ページで先ほど作成したページを確認します。

トップページ用｜フロントページ
新着記事用｜投稿ページ

このように表示されていれば問題ありません。

トップページにアイキャッチを表示しない設定

全てのページでアイキャッチ画像を表示するように設定していると、トップページにSNS用に設定したアイキャッチが画像が表示されてしまいます。

アイキャッチ画像はCSSでトップページのみ非表示にできるので、CSSを記入しましょう。

/* トップページのアイキャッチを非表示*/
.front-page .st-eyecatch, .front-page .st-eyecatch-under {
display:none;
}

トップページのサイドバーを非表示にするには？: 「AFFINGER管理」＞「トップページ」＞「トップページのレイアウト」から変更することができます。

トップページをカスタマイズ

トップページに設定した固定ページをカスタマイズしていきます。

ここでどんな要素を入れるのか？がポイントになり、ブログごとに大きく違います。

筆者的には「新着記事」と「カテゴリー」などの要素はあったほうがいいなと思いますが、サイトごとに正解が違いますし個性が出るところなので、自分で掲載する要素を考えてみて下さい。

サイト型の際にトップページのみにCSSを当てることで、他のサイトとは違ったカスタマイズができます。

オリジナルのボタンや見出しを設定して差別化してみましょう。

他のサイトの運営者を参考にしてみてもいいと思います。

サイトトップページを見てみる

ここでは「新着記事」の掲載方法を解説します。

新着記事を掲載

固定ページをトップページに設定すると記事一覧ページが表示されなくなります。

AFFINGERの機能で表示させることもできますが、一般的には新着記事一覧へのリンクを用意します。

設定方法は簡単ですが新着記事の表示させ方もたくさんあるので、一概にこれがいいというものはありませんが当サイトでも実装しているスライダー式の新着記事一覧の表示方法を解説します。

スライダー完成形

すべての記事

基本的にサイト型のトップページを作る際は「カバーブロック」を使います。

カバーブロックの簡単な特徴は以下です。

背景の色を変えられる
背景に画像を設定できる
背景画像を固定したりパララクス効果を付与できる
画面いっぱいの全幅設定ができる

このようにメリットが大きくサイト自体の設計が簡単にできます。

カバーブロックの上に「AFFINGER:記事一覧」ブロックを設置しその下に「AFFINGER:カスタムボタン」で記事一覧へのリンクを掲載しています。

投稿画面で見るとこんな感じで、実際のページにはさらに見出しブロックを設置し「新着記事」と入力しています。

カテゴリー記事一覧はEX版の機能です。（タグ一覧ブロックなどは通常版でも使えます）

スライダーにしない場合は記事数を選択して、その下にボタンで記事一覧へのリンクを設置すると良いと思います。

カード記事完成形

Google search console｜SEO対策「被リンク」を確認する

SEO対策の一つとして被リンクというのもがあります。被リンクはサイトの評価の一つで、自分のサイト記事がどれだけ参考にされているのかを見る一つの目安です。 Googleもこの要素を大事にしており、検索ランキングに影響していると言われています。そんな被リンクの確認はGoogle Search Consoleから確認することができます。こんな方におすすめサーチコンソールの機能を使いたい被リンクの確認方法を知りたい被リンクを増やすには？今回はGoogle Search Consoleで被リンクの確認 ...

Google Analytics｜自分自身のアクセスを除外する

Google Analyticsをきちんと使えていますか？ Googleから提供されている無料のツールで有名なアナリティクスですが、機能が沢山あって惜しみなく使うのは難しいですよね。完璧に使いこなすのには使い方や機能などをしっかり理解しなければいけません。ただ設定をしただけでは、Analyticsは自分のアクセスも計測してしまいます。こんな方におすすめ Google Analyticsの計測除外方法複数の除外方法ってあるの？除外できない時の対処法は？今回はGoogle Analytics 4の ...

すべての記事

以下のような設定で記事一覧ブロックを設定すると表示できます。