【AFFINGER5】トップページのデザインをブログカードにカスタマイズ

この記事は

  • AFFINGER5でトップページのデザインをブログカードにしたい


こんな人向けの記事です。

サイトのトップページをブログカードにするだけで、シンプルで見やすいデザインになるので、読者に親しまれやすいおしゃれなトップページを作ることができます。

筆者のサイトも全てブログカードで構成されています。
もちろん、筆者もアフィンガーユーザーです。

今回は、筆者と同じトップページを作成します。

ブログカードの作成方法は、とても簡単なので安心して読めると思います。
設定方法は、とても簡単なので真似しながら実践してみてください。

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

この記事の信頼性

Aさん
  • ブログ運営7ヶ月目
  • AFFINGER5使用歴5ヶ月目
  • サイトがシンプルで見やすい!のコメント多数
  • AFFINGER5をあいしている



本記事の内容

  • トップページのデザインをブログカードにする

AFFINGER5を使用している人限定の記事です。


トップページのデザインをブログカードにする:ヘッダー編

takablog
takablog


まずはじめに、ヘッダーの設定方法を解説します。
手順は、次のとおりです。

①ダッシュボードを開く

②AFFINGER5 管理を開く

③おすすめ記事一覧を開く

まずはここまで一緒にやってみましょう。

WordPressにログインできたら、「ダッシュボード」を開いてください。

takablog
takablog


ダッシュボードが開けたら、上の画像表示になるかと思います。
次に、赤枠で囲まれている「AFFINGER5 管理」という項目をクリックします。

takablog
takablog


AFFINGER5 管理をクリックすると、上の画像が表示されます。
次に、「おすすめ記事一覧」をクリックします。

takablog
takablog

おすすめ記事一覧をクリックし、下へスクロールすると、上のような画像が表示されると思います。

takablog
takablog


上のように表示させるには、次のような項目に記入したり、画像のURLを挿入する必要があります。

  • 画像のURL→「アップロード」を押して背景にしたい画像を選択する
  • テキスト→記載したい文字を入力する
  • リンク先URL→表示したい記事ページを貼り付ける

上の3つが完了すると、トップページに上のような表示がされます。

設定が完了したら、一回確認してみてください。
以上で、ヘッダーの設定は完了です。


トップページのデザインをブログカードにする:トップページ編①

takablog
takablog


続いて、トップページのデザインをブログカードにします。
2つに分けて解説していきます。

まず、1つ目は、赤枠の箇所をブログカードにします。

赤枠で囲まれているブログカードは、下のように新着記事をスライドで表示させる機能になっています。

2021/9/27

【暴露】ブログ初心者が稼げないNG行為5選【辞めれば稼げます】

驚く人 今のブログ運営のやり方で稼げるのか不安だから正しい運営方法を教えて欲しい! この記事では、こんな悩みを解決します。 ブログ初心者の頃は自分のやり方で本当に稼げるのか心配で仕方ないはずです この記事では、そんな悩みを解決できるようにブログ初心者がやりがちなNG行為について解説してきます。 こんな方におすすめ ブログ初心者の方 ブログが伸びない方 ブログでの成果が出ない方 記事の信頼性 僕はブログ運営11ヶ月目でようやく月5桁後半を稼げるようになりました。 上記の成果はブログ運営11ヶ月目の報告で解説 ...

ReadMore

2021/9/20

ブログを1年継続したらどれくらい稼げるようになるのか|takablog

悩む人 副業でブログを始めようと思ってるけど本当に稼げるのか不安。。稼げるまでに時間がかかるって聞いたけど、それなのにブログで稼ぐことに意味あるの? この記事では、このような悩みを解決します。 ブログって稼ぐ方法の明確な手順がないので本当に稼げるのか不安になりますよね この記事の結論 『継続』すれば必ず稼げるようになる もちろん、ただ継続するだけではダメです。 どうしたら稼げるようになるのかもこの記事では一緒に解説していきます。 こんな方におすすめ 副業でブログを始める方 ブログに興味ある方 ブログで挫折 ...

ReadMore

2021/9/20

ブログ運営11ヶ月目の収益・PV数を報告|takablog

この記事の結論 ブログ運営11ヶ月目のpv数・収益は10ヶ月目の倍以上になった凡人でもブログを継続したら家賃支払えるくらいまで稼げる ブログを初めてとうとう1年経過しました。 ブログで1年継続できる人は10%と言われているくらいなので、その中に入れてうれしく思います。 もともと、お小遣い程度稼げればいいなと思い、副業として始めたブログをついに家賃を支払えるほど稼げるようになりました。 今ではブログをしたくてしたくて仕方ありません! たか memo ブログを継続をしたことで稼げるようになっただけでなく仕事に ...

ReadMore

FIFINE K678

2021/9/17

Amazon評価4.5のUSBマイク『FIFINE K678』を辛口レビュー

悩む人 ゲームやパソコンで友達と通話したいんだけど、音割れしない高性能なマイクないかなぁ 大事なミーティングや会議がZOOMで開かれるから、雑音が入らない高音質マイクが欲しい! ひらめいた人 この記事では、このような悩みを解決します。 大事なところで何言ってるのか聞き取れない。みたいな事態は避けたいですよね よく友達に『ボソボソしてて何言っているのか聞こえない』と言われてました。 たか 僕も音の録音やゲーマーの友達用にマイクが欲しいと思い、高評価順で最初に出てきた『FIFINE K678』というマイクを購 ...

ReadMore

2021/9/14

【ブログ収益月5桁の僕が教える】ブログで稼ぐための運営ルーティーン

悩む人 社会人になってブログを始めたけれど、仕事で疲れてブログを書く時間があまり取れない。。社会人ブロガーでブログ運営を継続してる人のルーティンを知りたい! この記事では、このような悩みを解決していきます。 ブログをしているけど、仕事から帰ってきてYouTubeや娯楽に興味が出てしまい、中々手につかないですよね。 この記事の結論 1時間集中して記事を書く 社会人になったら次の日も仕事なので時間に追われることが増えますよね。 そこで僕がオススメするのは、『時間を決めて集中する』ことです。 こんな方におすすめ ...

ReadMore

↑こんな感じ。

サイトに訪れた人にいち早く認知させることができるので、クリックされることもかなり多いです。

それでは、さっそく設定方法を解説します。
まずはヘッダーの設定と同じように、AFFINGER5 管理まで表示しましょう。

次に、「トップページ」を選択します。
そしたら、下のように表示されます。

takablog
takablog


挿入コンテンツをいじります。

普段からブロックエディターで記事を書いている人

ブロックエディターで普段から記事を書いてる人はここで少し戸惑うかと思います。
※筆者も普段はブロックエディター民なので、困った時期があります。

実はアフィンガー全般の設定がクラシックエディターなんです。
理由は、クラシックエディターのがデザインが豊富だからですね。

クラシックエディターをはじめて触る人向けにわかりやすく解説するので、安心してマネしていってください。


まず、ブログカードがどのような記事なのかわかりやすく示す必要があります。
つまり、見出しのことです。

takablog
takablog


まずは、見出しを設定します。
挿入コンテンツの欄に「新着記事」と入力します。

次に、新着記事を全選択し、「スタイル」→「見出しh4風」を選択します。

注意ポイント

筆者は記事を書くときに見出し2、3しか使用しないので使用しない見出しをトップページ用に見出し4を使いました。
その理由は、記事の見出しとトップページの見出しを分けたかったからです。
もし、記事と同じ見出しで言い方は、見出し2をおすすめします。

見出しのデザインはお好みでどうぞ。
これで、ブログカードの見出しは完了です。

次に、いよいよブログカードの設定に入ります。
※長くなってごめんなさい

takablog
takablog



新着記事の見出しを改行して「タグ」→「記事一覧/カード」→「記事一覧(スライドショー)」を選択します。
そうすると、変なコードが出てくるかと思います。

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off" fullsize_type=""]


上と同じになるように変更してください。

重要なところのみを解説します。

  • st-catgroup cat="id"→idの部分を0にすることで、1番新しい記事を表示する
  • page="数字"→スライドして表示する数
  • slides_to_show="数字,数字,数字"→左から「PC」、「タブレット」、「モバイル」で表示される数


設定が完了したら、確認してみてください。

以上でトップページの新着記事のブログカード(スライドショー)の設定が完了しました。


トップページのデザインをブログカードにする:トップページ編②

takablog
takablog


最後に、上のようなブログカードの設定方法を解説します。

ここで、筆者のサイトトップページをみて、こう思ったかと思います。

悩む人

ブログカードの魅力って、2列で表示させられることじゃないの?

確かに、ブログカードの魅力は記事を2列に表示させることができて、おしゃれに見せることができる点です。

筆者も以前は2列で表示させていましたが、やめてしまいました。
その理由は、ブログカードの高さが合わなくなるからです。

ブログカードの高さが合っていない


また、高さが合わなくなる原因は、タイトルの文字数や画像の大きさが原因になります。
もちろん、高さを合わせることは可能ですが全てのブログカードの高さを合わせるので下に無駄な余白が生まれてデザインが崩れてしまうのです。

なので、筆者はおすすめしていません。

1列にしてしまうと、トップページに表示できる記事数は減ってしまいますが、高さのズレがなくなるので読者から見やすいサイトとして認識されます。
※実際にお褒めのコメントをいただきました。


それでは、設定方法を解説します。
先ほどのブログカード(スライドショー)の下に移動します。

見出しで「おすすめ記事」を作成します。
「新着記事」同様で見出し4風です。

それが作成し終わったら、改行をします。
タグ」→「記事一覧/カード」→「記事一覧」を選択します。

すると、下のようなコードが出てきます。

[st-postgroup id="" rank="" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off" type=""]


これを全て選択し、「スタイル」→「レイアウト」→「カードスタイルB」を選択します。

st-postgroup id=""のところには、記事idを入力してください。

記事idの調べ方

takablog
takablog

ダッシュボード→投稿→投稿一覧で確認できます。

ここまで終わったら、保存して確認してみてください。
筆者と同じようなブログカードになっていると思います。

これで、サイトトップページの記事をブログカードにすることができました。

できたらこんな感じ↓

takablog
takablog



まとめ

affinger5
affinger5


今回は、AFFINGER5でトップページのデザインをブログカードにしてみました。

とてもシンプルなデザインなので、カッコ良いですよね。
サイトのトップページがカッコ良いと、ブログのモチベが上がると思います。

これからも今のデザインが気に食わないなぁと思うときがくると思いますので、自分好みのトップページを作成していきましょう。

この記事が少しでもあなたの役に立てれば幸いです。

  • ここのデザインがわからない
  • 他にも色々なデザインを教えて欲しい

などのAFFINGER5の設定でわからないことがあれば、質問も受けるので気軽にメールください。
なんでも構いません。

© 2021 takablog