カード型!アフィンガー5トップページのおすすめカスタマイズ法

カード型!アフィンガー5トップページのおすすめカスタマイズ法

 

アフィンガー5ってカード型のトップページデザインにもカスタマイズも可能なんですね!どうやって作成しましたか?

 

最近こんな質問を受けました。

 

ということで、今回は”KairiBlog風”のカード型トップページにカスタマイズする方法を紹介していきます。

 

イメージはこんな感じ▽

アフィンガー5を使っていないという方は、こちらの記事「アフィンガー5のレビューと購入手順|画像19枚で超簡単に解説」からぜひご覧ください。
かいり

 

メモ

今回紹介していくトップページのカスタマイズは、20~30記事程度の記事数が少なくともあるという方のみ参考にしてください。

なぜなら記事数が少ないとアフィンガー5ではカスタマイズが難しいからです。記事数が少ない方は、まず記事を書くことを優先してみてください!

 

それではさっそく解説していきます。

カード型!アフィンガー5トップページのおすすめカスタマイズ法

カード型!アフィンガー5トップページのおすすめカスタマイズ法

今回はエリア別に解説していくので、まず各エリアの名称について解説しますね。

エリア名称

  1. ヘッダー(エリア)
  2. ヘッダーメニュー(エリア)
  3. おすすめヘッダーカード(エリア)
  4. トップページ(エリア)
  5. サイトバー上部(エリア)
  6. おすすめ記事一覧(エリア)

 

本来のトップページエリアは「新着記事」と「おすすめ記事」のエリアとなるのですが、今回はざっくりこの①~⑥までのエリアのカスタマイズ方法について解説していきますね。

 

KairiBlog風カスタマイズ①:ヘッダーエリア

まずは左寄りにブログのタイトルを配置する方法を解説します。(①)

 

左寄りのタイトルとすることで、メニューをタイトル横に配置することができるようになります

 

かいり
もともと左寄りの方はここは飛ばしてOKです!

 

まずは管理画面を開いて「AFFINGER5 管理」⇒「ヘッダー」の順に進んでください。

 

次に「H ヘッダー設定」の「ヘッダーを分割しない」のチェックを外してください。

これでタイトルが中央から左寄りになります。

 

好きな色への微調整は下記から行ってください。

①ヘッダーエリア

「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」

※ちなみにヘッダー背景の横幅を100%にするをクリックすれば、ヘッダーエリアの背景が画面端まで広がります。

 

 

KairiBlog風カスタマイズ②:ヘッダーメニューエリア

次はメニューをタイトル右隣に配置する方法について解説します。(②)

通常、メニューはタイトル下にあるのすが、タイトル右隣に移動させることもできます。

 

管理画面から、「外観」⇒「メニュー」の順に開きます。

つづいて「メニュー設定」から「ヘッダー用メニュー(横列)」にチェックを入れて、メニューを保存をクリック。

これでメニューがタイトル横に表示されるようになります。

 

かいり
タイトル右隣にメニューを表示している人は少ないので、デザインの差別化になりますね。

あとサイトの第一印象が全体的にスッキリするのでおすすめです。

 

KairiBlog風カスタマイズ③:ヘッダーカードエリア

つづいては、ヘッダーカードエリアの設定方法について解説していきます。(③)

 

まずは管理画面を開き、「AFFINGER5 管理」⇒「おすすめ記事一覧」の順に進みます。

 

そして「おすすめヘッダーカード」の各項目を入力していきます。

  1. 写真のアップロード
  2. ヘッダーカード内の文字入力
  3. リンク先のURL(記事のURL)を入力

「サイト全体に表示する」にチェックを入れると、トップページだけでなく各記事にも表示されるようになります。

 

つづいて下にスクロールすると「デザイン」の項目が現れるので、好きなカードのデザインを選択しましょう。

オシャレなのは「テキストのある背景画面を暗くする」です。シンプル派は「テキストのある背景をぼかす」でもいいかもですね。

最後tに忘れないよう「SAVE」をクリック。

 

これでヘッダー周辺の設定は終わりですね!
かいり

 

KairiBlog風カスタマイズ④:トップページエリア

 

次はいよいよトップページエリアの解説です。(④)

少し長くなりますが、20分くらいで終わると思います。

 

トップページを作成する工程は次の4つです。

  1. 固定記事を新規作成
  2. 新着記事一覧を作成
  3. おすすめ記事一覧①バナーの作成
  4. おすすめ記事一覧②ブログカードの作成

 

今回はClassicEditorを利用していくので、Gutenberg(ブロックエディター)の利用者はClassic Editorというプラグインを有効化しておきましょう。

 

かいり
トップページの編集が終わった後に有効化を解除すれば、またGutenbergに戻ります。

 

それでは、さっそく順々に解説していきます。

step
1
固定記事を新規作成

 

はじめに固定ページを新規に作成していきます。

理由は固定ページをトップページとして利用するからです。

 

まずは管理画面から「固定ページ」⇒「新規追加」の順に進みます。

 

次に固定ページのタイトル名を入力していきます。(適当でOK!)

つづいて見出し4で新着記事とおすすめ記事のタイトルを入力して下さい。

 

見出し4のデザインについては下記から変更可能です。

外観」⇒「カスタマイズ」⇒「[+]各テキストとhタグ(見出し)」⇒「H4タグ

 

僕ははこんな感じで設定しています▽

 

次はおすすめ記事下の段落に「レイアウト」を組み込んでいきます。

タグ」⇒「レイアウト」⇒「PCとTab(959px以上)」⇒「左右50%」の順にクリックしてください。

 

ここまで進むとこんな感じになると思います▽

 

これで固定ページの下地は完成です。

いったんここで「下書きを保存」をクリックしておいてください。

 

step
2
新着記事を作成

 

つづいては新着記事のスライドショーを作成していきます。

まずは新着記事のタイトル下に「タグ」⇒「記事一覧/カード」⇒「カテゴリー一覧(スライドショー)」の順にクリックし、コードを挿入してください。

no image

2021/7/1

80記事書いたブログを捨てる決断?【最後の気づきを共有します】

どうもこんにちは、かいりです! 当然ですが本記事限りで、当ブログ『KairiBlog』を捨てる決断を致しました。 今までもこれからも楽しみにしていてくださった方々、申し訳ないです<m(__)m>   今回は当ブログを捨てる決断に至った理由と重要な僕の気づきについて情報共有をしていきます。   80記事も書いたのになぜ捨てるの? どうして捨てられるの? どんな気づきがあって、方向転換に至ったの? これからどんなことに挑戦してみるの?   ここら辺の話に興味がある方は ...

ReadMore

2021/6/24

【ファンを増やせ】ブログのプロフィールの書き方【SEO効果も有り】

悩んでいる人ブログのプロフィールの書き方について教えてほしい! そもそもブログにプロフィールって必要なの?   こんなお悩みを解決します。   本記事の内容 ブログでプロフィールを書くべき理由2つ ブログのプロフィールの書き方【記載すべき内容は4つ】   本記事の信頼性 この記事を書いている僕は、wordpressブログ歴1年半以上の副業ブロガーです。 僕自身プロフィール「『Kairi Blog』の運営者情報」には、力を入れて取り組んでいます。   今回は「本当にプ ...

ReadMore

2021/6/13

【ブログ必須】プライバシーポリシー&免責事項の書き方【サンプル有り】

悩んでいる人ブログでもプライバシーポリシーや免責事項を書かないといけないの?   結論、ブログにもプライバシーポリシーや免責事項は”必須”です。 ブログではGoogleアナリティクスなどの利用で個人情報を取り扱いますし、仮に読者に損害が発生したとき「あなたのせい」にされたら結構マズイことになりますよね。。。かいり   ということで、本記事ではブログ初心者向けにプライバシーポリシーや免責事項の書き方について詳しく解説していきますね。   記事の終盤にはサンプル(ひな型)も用意し ...

ReadMore

【運営レポート】ブログ6ヶ月目のご報告まとめ【2021年5月】

2021/6/3

【運営レポート】ブログ6ヶ月目のご報告まとめ【2021年5月】

かいりこんにちは、かいりです。   僕は2021年12月までにブログ収入100,000円/月達成することを目標に、ブログを書いている者です。   そんな僕ですがブログ立ち上げから6ヶ月(半年)が経ちましたので、その運営レポートをご報告します。   本記事の内容は、主に次の3つです。 ブログ6ヵ月目のPV数、収入額 ブログ6ヶ月目の活動内容まとめと振り返り 今後の活動目標とブログ7ヶ月目の行動目標   それではさっそくブログ6ヶ月目のPV数と収入額について公開していき ...

ReadMore

2021/5/29

ブログ初心者でも売れる商品紹介の書き方【おすすめのコツ6つを紹介】

悩んでいる人ブログで収益が発生しない!売れる商品紹介の書き方についてポイントを教えてほしい!   こんなお悩みを解決します。   本記事の内容 売れる商品紹介の書き方【おすすめのコツ6つを紹介】 商品紹介を書くときに意識しておきたいポイント3つ   本記事の信頼性 この記事を書いている僕は、wordpressブログ歴1年半以上の者です。 現在はブログの商品紹介のみで1万円以上の収益化に成功しています。   今回は「ブログで成果を上げるために商品紹介ではどんな部分に気 ...

ReadMore

 

上記は写真ですが、こんなコードが出てくると思います。

僕と同じようにしたい方は、「ReadMore」を「続きを読む」に変更すると全く同じものになります。

 

文字列の仕組みを紹介すると下記の通りです。

st-catgroup cat="カテゴリID(0はすべての記事)"

page="ページ数"

order="記事の新旧(古い記事”desc"、新しい記事”asc”)"

orderby="並び方(idでOK)"

child="子カテゴリー(含めるon、含めないoff)"

slide="スライドショー(する”on”、しない”off”)"

slides_to_show="記事の表示数((PC、タブレット、スマホ)"

slide_date="日付(含める”on”、含めない”off”)"

slide_more="ボタンの表示名(続きを読む、readmoreなど)"

slide_center="画面いっぱいに表示する”on”、しない”off""

fullsize_type="アイキャッチ画像のみ”on”、アイキャッチ+文章”off”"

かいり
少し自分風にカスタマイズしたいなって方は参考にしてください。

 

これで新着記事の作成は完了です。

 

step
3
おすすめ記事一覧①バナーの作成

 

つづいてはバナーを作成していきます。(イメージ▽)

 

まずはおすすめ記事下の左側の「このテキストは最後に消して下さい(50%)」の末尾にカーソルを合わせます。

 

そして「タグ」⇒「ボックスデザイン」⇒「バナー風ボックス」⇒「基本」の順にタグを設置していきます。

 

実際に設置されたタグはこんな感じですよね▽

 

細かく設定はできますが、基本は下記の2箇所だけ入力すればOK!

①title="":タイトルを記載(例:wordpressの始め方)

②backgroud_image="":背景にしたい画像のURL

 

背景にしたい画像のURLは、「メディアに登録した画像URL」を入力してください。

詳しくは管理画面から「メディア」→「ライブラリ」の順に進み、URLを調べたい画像をクリックすることで、画像のURLが表示されます。

 

あとは下記画像の通り、画像URLをコピーして貼り付ければ完了です。

 

かいり
複数のバナーカードをまとめて設置する際も、同じ手順で行ってください。

 

注意ポイント

バナーボックスを設置し終わったら「このテキストは最後に消して下さい(50%)」を削除しましょう。

最初にこれを削除するとデザインが崩れるので注意です。

 

step
4
おすすめ記事一覧②ブログカードの作成

まずはブログカードを入れる前に下記の通りデザインの調整を行います。

AFFINGER5管理」→「デザイン

①「サムネイル画像設定」から「□フルサイズにする」にチェックを入れる

②「抜粋設定」⇒「PC閲覧時~の抜粋を非表示にする」にチェックを入れる

デザインの微調整はこれでOK。

 

つづいては先ほど作成したバナー風ボックスカードのコード下にブログカードを挿入していきます。

ブログカードは「カード」をクリックすれば挿入可能です▽

 

するとこんなコードが入力されます。

st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""

 

 

細かく設定できますが、基本は下記の2箇所だけ入力すればOK!

①id="":記事の個別IDを入力

②readmore="":offへ変更(ReadMoreボタンを設置するか否か)

 

記事の個別IDは「投稿」⇒「投稿一覧」から確認することができます。

 

ここまでの入力が完了すれば、次はブログカードを正方形のカード型に切り替えていきます。

 

先ほどのブログカードのコードを選択し、「スタイル」⇒「レイアウト」⇒「カードスタイル」の順にクリックします。

 

すると下記のようにブログカードが変化するはずです。

「カードスタイルB」を選択すると、スマホで見たときにデザインが崩れるためご注意ください。

 

これで確実に正方形のカード型になるかと思います。

あとは表示させたい記事を入力していけばOKです。

 

最後にバナーボックスとブログカードとの距離を少し空けたいという方は、下記を参考にしてください。

余白を作るには、線をなしくしたボックスでブログカードを囲うというやり方があります。

 

具体的には、まずバナー下に「タグ」⇒「マイボックス」⇒「しかく(枠のみ)」でボックスを挿入します。

st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

[/st-mybox

こんなコードが挿入されますよね。

 

次は「borderwidth="2"」と「bordrradius="2"」の数字を”0”に変更してください。

これは「ボックスの縦と横の線を消す」という意味になります。

 

あとはボックスの[/st-mybox~]と[/st-mybox]の間に先ほど作成したブログカードを挿入すれば、こんな感じで余白のあるブログカードが作成されます。

 

詳細な解説はここまでです。複数のバナーやブログカードを設置する場合は、同様のやり方で進めてください!

 

 

トップページの作成が終われば、次はトップページに今作成した固定ページを反映させていきましょう。

 

まずは管理画面を開き「外観・カスタマイズ」⇒「ホームページ設定」の順に開きます。

次にホームページの表示で「固定ページにチェック」を入れます。

そしてホームページに先ほど作成した固定ページを選択して設置していきます。

 

かいり
これでトップページに先ほど作成した固定ページが反映されるかと思います。ですのでトップページの解説はここまでです!

 

KairiBlog風カスタマイズ①:サイドバートップエリア

 

つづいては、サイドバー上部エリアについてのカスタマイズ法を解説します。(⑤)

 

こちらは「外観」⇒「ウィジェット」⇒「サイドバートップ」から設定可能です。

実際の設定画面はこんな感じ。

 

ちなみに、まだプロフィールカードを作成していないという方は下記から設定を進めてください。

ポイント

  • プロフィールの詳細設定:「ユーザー」⇒「プロフィール」
  • プロフィールカードの設定:「外観・カスタマイズ」⇒「[+]オプションカラー」⇒「サイト管理者紹介(プロフィールカード)」

(詳細↑)

 

 

ちなみに、自身が使っているwordpressテーマやサーバーなどの紹介をしたいときは、こんな感じで設定可能です▽

  • 画像の挿入
  • リンク(URL)の挿入

僕は「外観」⇒「ウィジェット」の順で開き、サイドバートップの下の「サイトバーウィジェット」に設置しています。

 

これでサイドバートップの解説は終わりです。

KairiBlog風カスタマイズ⑥:おすすめ記事一覧エリア

最後に、おすすめ記事一覧エリアの解説をします。ここは簡単です。

まずは管理画面から「AFFINGER5 管理」⇒「おすすめ記事一覧」を開きます。

開いたら表示したいエリア名を入力し、表示させたい各記事のIDを指定していきます。

 

記事を選ぶ際のポイント

ポイント

おすすめ記事として表示させる場合:収益化につながる記事読者にとって喜ばれそうな記事を選ぶことがポイント

人気記事として表示させる場合:収益化につながる記事よく読まれている記事を選ぶことがポイント

 

ちなみに、よく読まれている記事はGoogleアナリティクスから見つけられます。

まずGoogleアナリティクスを開いたら「行動」⇒「概要」の順にクリック。

 

次に画面右上の期間を「ブログ立ち上げから現在まで」と設定します。

すると、画面右下に各記事の読まれた回数や読まれているパーセンテージ(%)などが表示されますので、そこを参考にしてください。

 

各記事IDの入力が終われば、最後に「サイドのスクロールに表示する(抜粋非表示)」にチェックをいれて保存してください。

 

かいり
これでおすすめ記事一覧エリアの設定も完了です!

 

トップページカスタマイズの微調整(背景色・文字の大きさ・文字の種類など)

トップページカスタマイズの微調整(背景色・文字の大きさ・文字の種類など)

 

ここからは下記の3つのカスタマイズについて解説します。

解説ポイント3つ

  1. 背景色の設定
  2. 文字の大きさ・行間の設定
  3. 文字の種類の設定

 

トップページカスタマイズの微調整①:背景色の設定

僕の場合トップページの背景色を灰色に設定しているので、その方法を解説します。

 

まずは管理画面から「外観・カスタマイズ」⇒「基本エリア設定」⇒「背景色」にクリック。

次に「背景色」の色設定を行います。

僕の場合は「#f2f2f2」にしています。

 

注意ポイント

サイト背景色は基本的には設定しないことをおすすめします。理由は、ここの色を設定するとヘッダーの背景幅が1100に設定されてしまうため。

仮に僕のように画面幅いっぱいにヘッダーの背景幅を設定したくなった場合に、その設定がうまくできないトラブルの原因となります。

 

トップページカスタマイズの微調整②:文字の大きさ・行間の設定

次はいい感じの文字の大きさ・に設定していきましょう。

これは「Tsuzukiblogさんの設定」を参考にしています。

 

 

まずは管理画面から、「AFFINGER5 管理」⇒「デザイン」の順に開きましょう。

そしてフォントサイズを下記のように設定すればいい感じになります。

 

かいり
もし行間を変更したい場合は、目安としてフォントサイズの1.5~2倍におさめるといい感じになりますよ。

 

トップページカスタマイズの微調整③:文字の種類の設定

つづいて文字の種類の設定をしていきます。

設定場所は先ほどのフォントサイズを設定した画面から下にスクロールするとあります。

 

Kairiblogではフォントファミリーを下記のように設定しています。

font-family:'メイリオ', 'Meiryo', sans-serif;

 

少し丸みを帯びた「メイリオ」というフォントが好きな方にはおすすめです。

実際の設定済み画面はこんな感じ。

 

 

かいり

 

まとめ:カード型!アフィンガー5トップページのおすすめカスタマイズ法

まとめ:カード型!アフィンガー5トップページのおすすめカスタマイズ法

今回はアフィンガー5のトップページをカスタマイズする方法について解説してきました。

アフィンガー5は設定が細かいのが少しネックなのですが、今回の記事が参考になればうれしく思います!

 

 

こんな記事「ブログ運営に役立つ神ツールおすすめ12選【時短可能|無料有り】」も作成しているので、よかったら参考に見ていってください。

© 2021 Kairi Blog Powered by AFFINGER5