AFFINGER5

【トップページ設定】アフィンガー5(AFFINGER5)の使い方を解説(カスタマイズ)

みなさんこんにちは!あーるくん(<a href="https://twitter.com/aru20R">@aru20r</a>)です。

本記事は「アフィンガー5(AFFINGER5)のトップページ設定」というテーマで解説していきます。

まず、<span class="st-mymarker-s">アフィンガー5(AFFINGER5)を導入していない人は</span>、<a href="https://www.infotop.jp/click.php?aid=389467&amp;iid=75194">こちらからダウンロード</a>してください。

&nbsp;

こんな人に読んで欲しい

悩む人
アフィンガー5のトップページ設定が分からない。
悩む人
トップページを整えたい
悩む人
初心者でもきれいなサイトにしたい・・・

上記の悩みがある人はこの記事を読めばOK.

<span class="st-mymarker-s">トップページは読者の第1印象になるので、設定は必要不可欠です</span>。

アフィンガー5を使っている人は、本記事を参考にして綺麗なサイトを作りましょう!

&nbsp;
<h2 id="mmm">アフィンガー5:カスタマイズ前にやること</h2>
<img class="aligncenter" src="https://cdn.pixabay.com/photo/2016/06/14/09/43/desk-1456142_960_720.jpg" alt="デスク, Terminplanung, コントロール, ニュースレター, 散乱, 計画, マーケティング" />

&nbsp;

まず初めに、<span class="st-mymarker-s">アフィンガー5のカスタマイズ前にやるべきことがあります。</span>

やってない人は、最初に済ませておきましょう!

&nbsp;

<strong>1.パーマリンク設定</strong>

<strong>2.サーチコンソール・Googleアナリティクスの連携</strong>

<strong>3.プラグインの導入</strong>

&nbsp;

あーる
この3点を行わないとカスタマイズが出来ないわけではないですが、先に済ませておくことをおすすめします。

&nbsp;

合わせて読みたい

&nbsp;
<h2 id="mmm">アフィンガー5トップページ設定とは?</h2>
<img src="https://imai-fun-life.com/wp-content/uploads/2020/08/0e2d0a659fceccebd21f6da225df3aef.jpg" />

&nbsp;

あーる
上記は、僕のサイトのトップページです。

&nbsp;

<span class="st-mymarker-s">トップページとは、特定のサイトへの入り口で、サイト全体の拠点となるページなので、かなり重要なページです</span>。

そんなページでも、<strong><span style="color: #ff0000;">”内容がスカスカで、デザインが適当なトップページ”を見かけます。</span></strong>

<strong>あれは正直、本当にもったいないと感じます・・・</strong>

アフィンガー5では、そんな<span class="st-mymarker-s">トップページのカスタマイズが可能</span>です。

&nbsp;

あーる
1つずつ解説していくので、トップページのカスタマイズをしてみましょう!

&nbsp;

<a href="https://imai-fun-life.com/">僕のトップページは、こちらをクリックすれば拝見できます。</a>

&nbsp;
<h2 id="mmm">アフィンガー5カスタマイズ:トップページ設定</h2>
<img class="aligncenter" src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" alt="person holding pencil near laptop computer" />

&nbsp;

<span class="st-mymarker-s">トップページの設定は大きく分けて5種類あります</span>。

どれも大切なので、1つずつ具体的にご紹介していきます。

&nbsp;

5種類のトップページ設定

<strong>・挿入コンテンツ</strong>

<strong>・トップページレイアウト</strong>

<strong>・記事一覧</strong>

<strong>・news(お知らせ)の表示</strong>

<strong>・youtube背景</strong>

&nbsp;
<h3>はじめに</h3>
&nbsp;

あーる
項目外ではありますが、トップページ設定の最上部に”トップページに固定記事を挿入”という項目があります。

&nbsp;

<img class="aligncenter" src="https://imai-fun-life.com/wp-content/uploads/2020/08/2c282c497e73801e08a3711c00f76773.jpg" />

画像の赤枠に”記事のID”を入力するだけで、トップページ上部に固定ページとして貼ることができます。

挿入する固定ページ

<strong>・絶対に読んで欲しい記事</strong>

<strong>・人気の記事</strong>

<strong>・内部リンクが多く貼ってる記事(離脱率を下げるため)</strong>

<span class="st-mymarker-s">上記の記事があればトップページに固定記事として挿入するようにしましょう</span>。

注意ポイント

WordPressの表示設定で、「ホームページの表示を固定ページに設定」をしている人は、固定記事の挿入ができないので注意してください。

&nbsp;
<h4>IDの確認方法</h4>
<img src="https://imai-fun-life.com/wp-content/uploads/2020/08/bfc0a7b8a20aa2c74c6fb8c074978cc5.jpg" />

&nbsp;

なお、記事IDの確認方法は<span class="st-mymarker-s">「WordPressダッシュボード→記事一覧」の”ID”</span>で確認することができます。

&nbsp;
<h3>挿入コンテンツ</h3>
&nbsp;

あーる
挿入コンテンツとは、トップページにコンテンツを挿入できる機能です。

&nbsp;

<img class="aligncenter" src="https://imai-fun-life.com/wp-content/uploads/2020/08/099d630da458d377acfe607667412961.jpg" />

上記の赤枠内に<span class="st-mymarker-s">「<span class="st-mymarker-s">サイトの説明文</span>」を入力することによって、サイトの説明や紹介などを表示することができます</span>。

注意ポイント

こちらも”WordPressの表示設定”で、「ホームページの表示を固定ページに設定」をしている人は、固定記事の挿入ができないので注意してください。

&nbsp;

合わせて読みたい

&nbsp;
<h3>トップページレイアウト</h3>

<img class="aligncenter" src="https://imai-fun-life.com/wp-content/uploads/2020/08/83303b9fb5acd34fb380c33ef3d1661e.jpg" />

<span class="st-mymarker-s">1カラム及びLPのワイド化は、主にPC閲覧時に「コンテンツの背景を幅全体に広げる機能」です</span>。

これにより、ビジネスサイトでよくあるワイドでダイナミックなレイアウトを実現することが可能です。

ですが、<span class="st-mymarker-s">ここは<span class="st-mymarker-s">特</span></span><span class="st-mymarker-s">にカスタマイズする必要はありませんので、「トップページのレイアウトをリセットする(デフォルト)」のままで大丈夫です</span>。

&nbsp;
<h3>記事一覧</h3>

<img class="aligncenter" src="https://imai-fun-life.com/wp-content/uploads/2020/08/0cee6ea0ee047fd8f19313ba9d38b7e4.jpg" />

<span class="st-mymarker-s">記事一覧設定は、「カテゴリー」や「新着記事」をトップページに表示するかを設定することができます</span>。

トップページに表示させたい項目を選択すれば、表示されるようになります。

ポイント

「新着一覧を表示する」にチェックマークを入れれば、表示設定で”固定ページ”に選択していても、トップページに「新着記事」を表示することができますよ。

&nbsp;
<h3>news(お知らせ)の表示</h3>
<p style="text-align: left;">

<img class="aligncenter" src="https://imai-fun-life.com/wp-content/uploads/2020/08/002d69f45bedf4af09e0f1cbbb9f0a1f.jpg" />
</p>
<span class="st-mymarker-s">お知らせの表示は、「最新の情報や、商品の紹介を最速で紹介したい!」などに使える機能です</span>。

あーる
僕のサイトでも導入しているのでお見せします。
<img src="https://imai-fun-life.com/wp-content/uploads/2020/08/435273253033f777534d60e7d17f1ab0.jpg" />

<span class="st-mymarker-s">赤枠の中が「news(お知らせ)」です</span>。

僕の場合は、見出しが「最新のお知らせ」となっていますが、設定で変更することができます。

<span class="st-mymarker-s">また「最新のお知らせ」の文字色は白、背景は2色のグラデーションになっていますが、見出しのカラー変更は「外観→カスタマイズ」で変更することができますよ</span>!

合わせて読みたい

&nbsp;
<h3>youtube背景</h3>

<img class="aligncenter" src="https://imai-fun-life.com/wp-content/uploads/2020/08/c43778941bbd2f254bc6e0cb26e46170.jpg" />

<span class="st-mymarker-s">トップページを作成する際に、YouTubeの背景を貼ると迫力のあるページが作れます</span>。

YoutubeのIDを入力することで使用することが可能です。

設定画面を見てもらえば分かりますが、動画のループ再生や音を出すこともできます。

ですが、<span class="st-mymarker-s">サイトが重くなってしまう為、必要ある場合のみにしましょう</span>。

ポイント

動画が止まってしまうのが嫌な人は動画のループ再生にチェックを入れることをおすすめします。

&nbsp;
<h2 id="mmm">トップページ設定:まとめ</h2>
<img src="https://images.unsplash.com/photo-1583770539147-581738d1310a?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" alt="黒のフラットスクリーンコンピューターモニター" />

&nbsp;

ここまで見ていただきありがとうございます。

本記事では「<span class="st-mymarker-s">アフィンガー5のデザイン設定</span>」についてお話をしてきました。

<span class="st-mymarker-s">トップページは第1印象になるので、しっかりとデザインを整えて離脱率を防止しましょう</span>!

&nbsp;

あーる
アフィンガー5の評判はこちらから!

&nbsp;

合わせて読みたい

  • この記事を書いた人

あーる

-AFFINGER5

© 2020 RIABLOG Powered by AFFINGER5