AFFINGER5 WordPress

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

この記事は

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


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

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

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

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

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

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

この記事の信頼性

たか
  • ブログ運営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つ目は、赤枠の箇所をブログカードにします。

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

affinger5

AFFINGER5 WordPress

2021/5/8

【AFFINGER5】Lasy Load SEOを無効化した理由とその根拠

AFFINGER5でも優秀で人気な有料プラグイン「Lasy Load SEO」をご存知でしょうか。その機能は素晴らしく、筆者も以前まで使用していました。簡単にいうと、サイトで使用している画像を遅延してサイトの表示速度を上げるプラグインです。その結果は凄まじく、以前このようなツイートをしていました。 昨日から頑張ってサイトスピード上げることに成功しました、!✨✅モバイル:38→73✅パソコン:78→95頑張ったんで、少し仮眠してきます💤#サイトスピード pic.twitter.com/QOEwXAMeo0& ...

ReadMore

affinger5

AFFINGER5 WordPress

2021/5/5

【AFFINGER5】mainエリアにドロップシャドウを追加する方法

悩んでる人 ネットで「AFFINGER5のmainエリア(記事)ドロップシャドウを追加する方法」と、いくら検索しても自分の目当ての記事がなくて悩みが解決できません。他のテーマだと、シャドウを追加する方法はいくらでも出てくるのにアフィンガーだけ出てこないのでmainエリアにシャドウを追加する方法がわかりません。 このように、 mainエリアにシャドウを追加して記事エリアとサイドバーエリアの区別をつけたい! という人向けの記事になります。※AFFINGER5ユーザー専用筆者もつい最近、あなたと同じような悩みを ...

ReadMore

blog

Blog

2021/5/4

ブログ運営7ヶ月目の収益・PV数を公開|takablog

みなさん、こんにちは!この記事では、ブログ運営7ヶ月目の収益・PV数を大公開します!先月と比べて、どれくらいの差があるのか。。先月よりも成果が下がっていたら少し凹みますね。笑今月は、色々なことに挑戦しました! memo 被リンク対策サイト表示速度改善記事の読みやすさ改善(段落やフォントなど) 今月は記事を書く前に、自分のサイトを他のサイトと比べてしまい、記事作成に集中できないときが多々ありました。自分の満足いくデザインにしないと気が済まない!というときありますよね。笑※今のデザインにだいぶ満足していて記事 ...

ReadMore

blog

Blog

2021/5/7

【必ず成果が出る】初心者ブロガーにおすすめするブログ参考書4選

この記事は、ブログ初心者に読んで欲しい記事です。 PV数を増やしたい読まれる記事を書けるようになりたいブロガーとして成長したい こう思うブロガーは、おそらく10割だと思います。筆者もそうでした。 落ち込んでる人 いくら記事を書いても平均10PV全く記事が読まれず意気消沈 ブログの勉強をするまで、こんな感じでした。ブログの勉強をしてから、筆者のブログライフが一変しました。なぜなら、勉強したことにより、ノウハウも溜まりますし、なにをすればいいのかわかるからです。結論から言うと、この記事で紹介している本を読めば ...

ReadMore

403エラー

WordPress

2021/4/30

【ロリポップ!】403エラーでページが開けなくなる対処法【1分で解決】

この記事は ロリポップを契約していてwordpressを使用しているページを開こうとしたら403エラーが表示されて開けない こんな人向けの記事になります。WordPressを使用していて、ロリポップユーザーの皆さん。ページを開こうとしたら、下のようなページが表示されて、ページを開けないことがありませんか? 403エラー 403エラー 「不正なパラメーターが送信されたため、アクセスをブロックしました。対処法については、こちらをご確認ください。」 この403エラー画面はロリポップユーザーに多く表示されるみたい ...

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の設定でわからないことがあれば、質問も受けるので気軽にメールください。
なんでも構いません。




-AFFINGER5, WordPress

© 2021 takablog