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

2020年2月18日

AFFINGER5(アフィンガー5)おしゃれに トップページ カスタマイズ
ぽん助です。

 

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

 

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

 

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

 

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

 

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

 

初心者だとしても、カスタマイズはこだわりたいと思う気持ちは、ぼくも同じです。

 

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

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

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

 

あわせて、これからトップページのカスタマイズの参考になる

「おしゃれな参考サイト」3サイトも紹介させて頂きます。

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】

続きを見る

 

AFFINGER5おしゃれにカスタマイズされてる参考サイトの紹介

AFFINGER5を使用してるブロガー様の、おしゃれにカスタマイズされてる3サイトを紹介します。

 

はじめてトップページのカスタマイズを作られる方の、参考にできればと思い紹介させて頂きます。

 

ここで紹介しておりますサイトは、どれもとても参考になると自負しております。

 

同時に、サイトのカスタマイズだけではなく、コンテンツもとても興味深く参考にできると思いますので覗いてみて下さい。

 

AFFINGERおしゃれ参考3サイト

  • ricoblog
  • 下流家庭育ちの私がセレブ婚をした恋愛術を公開するブログ
  • キットブック

 

ricoblog

ricoblog

 

下流家庭育ちの私がセレブ婚をした恋愛術を公開するブログ

 

 

キットブック

 

 

如何でしたでしょうか?

 

トップページの色やデザインは、誰でもこだわりたくなるものですよね。

 

自分には無いセンスや発見が沢山見つかります。

 

他のブロガーさんのサイトを拝見することも勉強のひとつですよね。

 

今後もここでAFFINGERを使ってる、おしゃれなサイト様を紹介する予定です。

気になる方は僕のTwitterもフォローして頂けたら、次回、募集を求めた時にはいち早く参加できると思いますのでよろしくお願いします。

 

最後に

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

 

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

 

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

 

ブログのモチベーションアップのためにも、気分転換にカスタマイズするのが良いと思います。

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

 

 

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

続きを見る

 

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

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

-アフィンガー5
-, ,

© 2020 副業ブログ運営