【WordPress】有料テーマのアフィンガー５では、サイトのトップページを多彩にカスタマイズすることが可能です。
AFFINGER5のトップページのカスタマイズについて
「どんな方法で作ったら良いかよくわからない」
と悩んでる方も多いのかと思います。
トップページはサイトの顔となるページです。
初心者だとしても、カスタマイズはこだわりたいと思う気持ちは、ぼくも同じです。
みなさんの悩みは次のことでしょうか？
- トップページの作り方が分からない
- トップページの作り方が知りたい
今回はAFFINGER5のトップページのカスタマイズ方法を紹介します。
あわせて、これからトップページのカスタマイズの参考になる
「おしゃれな参考サイト」3サイトも紹介させて頂きます。
AFFINGER5でトップページをお洒落にカスタマイズ
カスタマイズ手順簡単な流れ
- 固定トップページの作成
- タグを使い分けて、好きな画像でバーナー風のボタン設置
- AFFINGER5管理でトップページの設定
簡単ではありますが、このような流れでトップページの作成方法を説明します。
固定ページでトップページを作成手順
具体的に詳しくトップページの作り方を説明します。
step.1
「固定ページ」➞「新規追加」をクリックします。
step.2
- タイトルに自分が解りやすい「タイトル名」を決めます
- 改行を2つ下にします（これは後で作業がやり易くする為です。作業の失敗、デザイン変更の理由で、この空欄に追加でタグを入れる事も簡単にする為です。）
step.3
バーナー風の５０％：５０％ので分けたカスタマイズ方法
今回はバナー風のカスタマイズの説明をします。
自分でデザインを考えた場合、他のタグを挿入しても良いので、あくまでも今回は参考までの説明です。
前の説明で2行空けた位置に「タグ」➞「レイアウト」➞「PCとTab」➞「左右５０％」を選択します。
step.4
- 画像のタグが挿入されます。テキストは消去してくだい（カーソルでなぞるのですがうまく出来ない場合、前後どちらかの文字を1つ残してから消去）
step.5
- テキスト消去した場所にタグを挿入します。
- 「タグ」➞「ボックスデザイン」➞「バナー風ボックス」➞「基本」を選択します。
step.6
タグを挿入した状態（今回のサンプルでは、タグは両方挿入して説明します。）
step.7
- ここで「ブレビュー」で確認してみます。
- 「タイトル」が横並びに2つ並びます。（バナー風なのでボタン風です。既存のボタンも挿入可能ですが、今回はここに好きな画像を挿入方法説明します。）
画像の挿入手順
上記で作成したバナー「タイトル」の背景画像の挿入方法を説明します。
step
1
- 「リンク先のURL」を挿入します。（バナーボタンをクリックした時に移動する先のURL）
- 「タイトル」を決めます。(タイトル名が長すぎると画像が縦に大きくなります。）
- バナーに決める画像のURLを「メディア」から決める。画像のURLをコピーして貼り付けます。
step
2
「メディア」画像URLのコピーの説明
- 「メディア」➞「ライブラリー」➞「画像の選択」➞「URL」をコピー（うまく行かない場合「ｈ」を入れずにコピーします貼り付けた後で「ｈ」を入れます。）
＊うまくいかない場合
ここまでがバナー風ボタンでトップページを作成する方法を紹介しました。
次に、多彩にある「タグ」から好きな種類を合わせてカスタマイズするサンプル例です。
他のタグも挿入してカスタマイズ
他にタグを直ぐ下に挿入する場合、「[/st-flexbox]」を改行して直ぐ下にタグを挿入します。（カードやボタン多種多彩に挿入し好みのカスタマイズが可能です。）
サンプル
サンプル
「ボタンやスライドショーやレイアウト」など多彩に自分好みにカスタマイズができます。
一度にトップページのカスタマイズをされても大変な時は、記事を作成するあい間にされるのもおすすめです。
「スライドショー」「ボックスメニュー」について詳しく説明してます合わせてお読み下さい。
-
【アフィンガー５】スライドショー徹底解説 おしゃれにカスタマイズ
続きを見る
-
参考affinger5 カスタムボタンのボックスメニュー ４列のカスタマイズのやり方
続きを見る
アフィンガー５の管理画面の設定
ここでは、上記で作成された固定トップページを、実際にサイトのトップページとして認識させる設定を説明します。
step
1
作成した固定ページのID番号をここに入力します。
step
2
- 「1カムラ」サイドバーが無い表示設定
- 「トップページのレイアウトをリセットする」普通のタイプのサイドバーが表示される設定
- 「save」をクリックして完了です。
（LP化にすると他の既存の記事が表示されなくなります。）
注意事項
ここでの設定で稀に「保護されていない」とSSL設定をされても表示されることがあります。
原因としてトップページを1カムラを選択することが原因ではありませんが、することで「保護されていない」場合も確認してます。
＊上記でも「保護されていない」と表示される場合は下記の記事で解決できるはずです。
あわせてお読み下さい。
-
参考SSL設定をしたのに「保護されていない通信」と表示がでる原因と解決方法【AFFINGER５】
続きを見る
AFFINGER５おしゃれにカスタマイズされてる参考サイトの紹介
AFFINGER５を使用してるブロガー様の、おしゃれにカスタマイズされてる３サイトを紹介します。
はじめてトップページのカスタマイズを作られる方の、参考にできればと思い紹介させて頂きます。
ここで紹介しておりますサイトは、どれもとても参考になると自負しております。
同時に、サイトのカスタマイズだけではなく、コンテンツもとても興味深く参考にできると思いますので覗いてみて下さい。
AFFINGERおしゃれ参考３サイト
- ricoblog
- 下流家庭育ちの私がセレブ婚をした恋愛術を公開するブログ
- キットブック
ricoblog
下流家庭育ちの私がセレブ婚をした恋愛術を公開するブログ
キットブック
如何でしたでしょうか？
トップページの色やデザインは、誰でもこだわりたくなるものですよね。
自分には無いセンスや発見が沢山見つかります。
他のブロガーさんのサイトを拝見することも勉強のひとつですよね。
気になる方は僕のTwitterもフォローして頂けたら、次回、募集を求めた時にはいち早く参加できると思いますのでよろしくお願いします。
最後に
当サイトでもトップページは、今回の説明の様な作り方で作成しています。
アフィンガー５のカスタマイズは、他の有料テーマには出来ない程に、おしゃれにカスタマイズが可能です。
ブログ初心者には向かないと言う噂もチラホラありますが、僕はブログ始めて４０日後に購入しましたが、使用してれば慣れるものだと思ってます。
ブログのモチベーションアップのためにも、気分転換にカスタマイズするのが良いと思います。
是非みなさんもチャレンジしてみて下さい。
-
【アフィンガー５】カスタマイズ・問題解決なんだそうだったのか！
続きを見る
アフィンガー５の購入検討されてる方は合わせてお読み下さい。
