AFFINGER5(アフィンガー5)トップページのカスタマイズ方法

2020年2月18日

アフィンガー5アイキャッチ
ぽん助です。

 

【WordPress】有料テーマのアフィンガー5では、サイトのトップページを多彩にカスタマイズすることが可能です。

 

サイトのトップページが「綺麗、かっこいい」等、おしゃれにカスタマイズされてるブロガーさんが沢山いますね。

 

AFFINGER5のトップページのカスタマイズについて

「どんな方法で作ったら良いかよくわからない」

と悩んでる方も多いのかと思います。

トップページはサイトの顔となるページですから、

初心者だとしてもこだわりたいと思う気持ちは、ぼくも同じであります。

カスタマイズは1度で完璧にするのはとても大変な作業です。

 

みなさんの悩みは次のことでしょうか?

  • トップページの作り方が分からない
  • トップページの作り方が知りたい

 

今回はAFFINGER5のトップページのカスタマイズ方法を紹介します。

AFFINGER5でトップページをお洒落にカスタマイズ

 

カスタマイズ手順簡単な流れ

  • 固定トップページの作成
  • タグを使い分けて、好きな画像でバーナー風のボタン設置
  • AFFINGER5管理でトップページの設定

 

簡単ではありますが、このような流れでトップページの作成方法を説明します。

 

固定ページでトップページを作成手順

具体的に詳しくトップページの作り方を説明します。

 


  • step.1

    「固定ページ」➞「新規追加」をクリックします。

    トップページを作成手順

  • step.2

    1. タイトルに自分が解りやすい「タイトル名」を決めます
    2. 改行を2つ下にします(これは後で作業がやり易くする為です。作業の失敗、デザイン変更の理由で、この空欄に追加でタグを入れる事も簡単にする為です。)
    トップページを作成手順

  • step.3

    バーナー風の50%:50%ので分けたカスタマイズ方法

    今回はバナー風のカスタマイズの説明をします。

    自分でデザインを考えた場合、他のタグを挿入しても良いので、あくまでも今回は参考までの説明です。

    前の説明で2行空けた位置に「タグ」➞「レイアウト」➞「PCとTab」➞「左右50%」を選択します。

    トップページを作成手順

  • step.4

    1. 画像のタグが挿入されます。テキストは消去してくだい(カーソルでなぞるのですがうまく出来ない場合、前後どちらかの文字を1つ残してから消去)
    トップページを作成手順

  • step.5

    1. テキスト消去した場所にタグを挿入します。
    2. 「タグ」➞「ボックスデザイン」➞「バナー風ボックス」➞「基本」を選択します。

    トップページを作成手順


  • step.6

    タグを挿入した状態(今回のサンプルでは、タグは両方挿入して説明します。)

    トップページを作成手順

  • step.7

    • ここで「ブレビュー」で確認してみます。
    • 「タイトル」が横並びに2つ並びます。(バナー風なのでボタン風です。既存のボタンも挿入可能ですが、今回はここに好きな画像を挿入方法説明します。)
    トップページを作成手順

 

画像の挿入手順

上記で作成したバナー「タイトル」の背景画像の挿入方法を説明します。

 

step
1

  1. 「リンク先のURL」を挿入します。(バナーボタンをクリックした時に移動する先のURL)
  2. 「タイトル」を決めます。(タイトル名が長すぎると画像が縦に大きくなります。)
  3. バナーに決める画像のURLを「メディア」から決める。画像のURLをコピーして貼り付けます。
AFFINGER5(アフィンガー)トップページ カスタマイズ

 

 

step
2

「メディア」画像URLのコピーの説明

  1. 「メディア」➞「ライブラリー」➞「画像の選択」➞「URL」をコピー(うまく行かない場合「h」を入れずにコピーします貼り付けた後で「h」を入れます。
トップページを作成手順

 

*うまくいかない場合

トップページを作成手順

ここまでがバナー風ボタンでトップページを作成する方法を紹介しました。

 

 

次に、多彩にある「タグ」から好きな種類を合わせてカスタマイズするサンプル例です。

他のタグも挿入してカスタマイズ

他にタグを直ぐ下に挿入する場合、「[/st-flexbox]」を改行して直ぐ下にタグを挿入します。(カードやボタン多種多彩に挿入し好みのカスタマイズが可能です。)

サンプル

トップページを作成手順

サンプル

トップページを作成手順

 

「ボタンやスライドショーやレイアウト」など多彩に自分好みにカスタマイズができます。

一度にトップページのカスタマイズをされても大変な時は、記事を作成するあい間にされるのもおすすめです。

 

「スライドショー」「ボックスメニュー」について詳しく説明してます合わせてお読み下さい。

AFFINGER スライドショー 設定
【アフィンガー5】スライドショー徹底解説 おしゃれにカスタマイズ

続きを見る

アイキャッチ画像
参考affinger5 カスタムボタンのボックスメニュー 4列のカスタマイズのやり方

続きを見る

アフィンガー5の管理画面の設定

ここでは、上記で作成された固定トップページを、実際にサイトのトップページとして認識させる設定を説明します。

 

step
1

作成した固定ページのID番号をここに入力します。

トップページを作成手順

 

step
2

  • 「1カムラ」サイドバーが無い表示設定
  • 「トップページのレイアウトをリセットする」普通のタイプのサイドバーが表示される設定
  • 「save」をクリックして完了です。

(LP化にすると他の既存の記事が表示されなくなります。)

トップページを作成手順

 

 

注意事項

ここでの設定で稀に「保護されていない」とSSL設定をされても表示されることがあります。

原因としてトップページを1カムラを選択することが原因ではありませんが、することで「保護されていない」場合も確認してます。

上記でも「保護されていない」と表示される場合は下記の記事で解決できるはずです

あわせてお読み下さい。

SSL設定をしたのに「保護されてない通信」 表示される
参考SSL設定をしたのに「保護されていない通信」と表示がでる原因と解決方法【AFFINGER5】

続きを見る

 

 

最後に

当サイトでもTOPページは今回の説明の様な作り方で作成しています。

アフィンガー5のカスタマイズは他の有料テーマには出来ない程に、おしゃれにカスタマイズが可能です。

アフィンガー5はブログ初心者には向かないと言う噂もチラホラありますが、僕はブログ始めて40日後に購入しましたが、使用してれば慣れるものだと思ってます。

 

気分転換にカスタマイズするのが良いと思います。

是非みなさんもチャレンジしてみて下さい。

 

 

アフィンガー5と言えばライオン
【アフィンガー5】カスタマイズ・問題解決なんだそうだったのか!

続きを見る

 

アフィンガー5の購入検討されてる方は合わせてお読み下さい。

AFFINGER5(アフィンガー5)1年使ってみて思うことを紹介【特典付】

-アフィンガー5
-, ,

© 2020 副業ブログ運営