AFFINGER6

【AFFINGER】アフィンガーのトップページをカスタマイズする手順

2021-11-12

こんにちは、Naokiです(@naoki_blogger)。

この記事ではこんな疑問を解消します。

ともる
WordPressテーマ 「ACTION(AFFINGER6)」のトップページってどうカスタマイズするの?」「ブログカードの表記ズレが起きちゃう...。」

WordPressテーマ 「ACTION(AFFINGER6)」のトップページカスタマイズは、難しそうに感じますよね。しかし案外簡単なんです。

  • 当サイトの記事では、ブログカードの表記ズレを修正する方法
  • 新着記事と、おすすめ記事の設定方法

なおき

この2つを主に解説していきます。

他のブロガーの記事では、ブログカードに表記ズレが起きてしまいます。これってブログカードのサイズを指定してないからなんです。

この記事を読めば、順序よく正確に、WordPressテーマ 「ACTION(AFFINGER6)」のトップページがカスタマイズできます。

記事の内容

  • ブログカードとバナーとは何か?
  • 事前準備、投稿IDのメモ&画像のアップロード場所、確認
  • カスタマイズ編、おすすめ記事と新着記事を表示する方法
  • 反映編、固定ページをホームページ化する設定

記事の信頼性

  • AFFINGERのトップページで表記ズレを経験
  • AFFINGER歴4ヶ月だけど、よく使ってる
  • AFFINGERの設定記事をよく書いている

注意ポイント

お願いがあります。最初に紙とメモを用意してください。AFFINGERのトップページは変更する要素が多いため、混乱しやすいです。紙を使って、設定箇所などをメモしましょう。

トップページの完成画像

KOKOSEIBLOG完成ページ

下準備編、投稿IDのメモ&画像のアップロード場所

具体的なトップページのカスタマイズ方法は、下の見出しで書いていきます。affingerのトップページを変更する前に、やっておくべき過程があります。

メモ

  • ホームページに表示させたい記事を最低4コ用意
  • 記事の投稿IDをメモ
  • バナーに表示させたい画像を2つ用意
  • 画像のアップロード場所を確認

投稿IDの確認方法は、Wordpress管理画面から投稿→投稿一覧→IDと書かれた場所の下をメモ(数字が書かれているはず)。

画像のアップロード場所は、後々バナーに画像を設定する際に役立ちます。画像の投稿方法は、Wordpress管理画面のメディア→ライブラリの下にある新規追加を選択。

バナーとは?

Webライティングと、プログラミングと書かれたエリアのことです。バナーにカテゴリー先のリンクを貼ることも出来ます!

ブログカードとは?

記事の表記方法の一種です。見た目的にもブログカードは、サイトをお洒落にしてくれます。

以下のとおりに進めれば、OKですよ!

画像の用意(最低2枚)→記事の投稿IDをメモ(最低4コ)

画像サイトは以下がオススメ!
»Storyset(クレジット表記必須)
»Illustrations(クレジット表記不要)
»Pixabay(クレジット表記不要)

画像の用意は、上記のサイトから2つ選べばOK!
なおき

記事の投稿IDは、Wordpress管理画面から投稿→投稿一覧→IDと書かれた場所の下をメモするだけ(最低4コあれば大丈夫)。

さて画像の用意と、記事投稿IDのメモが終わったらカスタマイズ編に移りましょう。

カスタマイズ編、おすすめ記事と新着記事を表示する方法

さていよいよカスタマイズ編です。こんな感じで進んでいきます。

ポイント

固定ページの作成→コードの入力→ブログカードの高さ調整→プレビューで確認

画像と一緒に解説しますので、安心してください。プログラミングの知識は不要です。

【AFFINGER】トップページカスタム、固定ページの作成

WordPress管理画面から、固定ページ→新規追加を選択。

新規追加を選ぶと、新規固定ページを追加に飛ばされます。

(2)新規固定ページ

まずは、新規記事のエリアを作成していきます。

「新規記事」と入力し、見出し3を選択。その後、ビジュアル編集画面のタグ→記事一覧 / カード→カテゴリ一覧を選択しましょう。

(3)新規固定ページの設定

ビジュアル編集画面のタグ→記事一覧 / カード→カテゴリ一覧を選択

(4)新規固定ページの設定_新規記事

下のコードのようになっていれば、おkです。

コードの解説

  • st-catgroup=”0”、表示させる記事のカテゴリー(現在は無設定)
  • page=”5”、読み込む記事の数
  • slide=”off”、記事の表示方法をスライドにする設定(重くなるため、オフ)

公開のプレビューを押して以下の表示例のようになってれば大丈夫。

一回ここまで作業が終わったら、下書き保存をしておきましょう。下書き保存をしておくと、作業の途中でミスをしても安心ですよ。

さておすすめ記事の設定に移ります。

新規記事のコードの下に、「おすすめ記事」と入力します。ビジュアル編集画面からタグ→レイアウト→PCとTabで左右50%を選択。

レイアウトが追加された画面
(8)新規固定ページ_おすすめ記事

ここで下書き保存しておきましょう。
なおき

バナーとブログカードを作成していきます。バナーは、タグのボックスデザイン→バナー風ボックス→基本を選択。

ブログカードの追加方法は、ビジュアル編集画面のカードから可能です。

今回いじるバナーのコード。

  • url=”カテゴリー先のリンク”、カテゴリー先のリンクが好ましい
  • title=”タイトル”、記事のジャンルを入力する
  • backgroud_image="画像のリンク先"、表示させたい画像のURL

それぞれで入力したいコードは変わってきます。あくまで僕の一例ですが、紹介します。

コードの入力例(画像リンクのみ未記入)

数字やアルファベットは、“”内に入力していけば、大丈夫ですよ。

title=”記事のジャンル名”、url=”カテゴリー先のリンク”を入力します。カテゴリー先リンクは、以下の画像のようにコピペすればOkです。

あなたのブログのメニューから設定したい、カテゴリーのリンクをコピペしましょう。
なおき

さて、コードに画像を追加していきます。メディアから新規追加で、用意した画像を設定します。

ファイルをドラッグ&ドロップすれば大丈夫です。アップロードすると以下の表記に変わります。

あとは、「URLをクリップボードにコピー」を選択するだけです。URLは、メモしておいた方がいいですね。

【AFFINGER】トップページのカスタム、コードの入力

この見出しでは、バナーの設定とブログカードの設定方法を解説しますよ!
なおき

さて画像を追加していきます。

おすすめ記事の

内にある、backgroud_image="”に追加していきましょう。

画像を追加すれば、バナーの設定は終わりですよ。下書き保存して、プレビューを見ましょう。

異常がなければ、ブログカードの設定に移ります。

ブログカードの追加方法は、ビジュアル編集画面→カードを選択して、

の下に追加します。

注意ポイント

必ず[/st-flexbox]の下で改行し、ブログカードは追加してください。

ブログカードで、いじる項目は以下のとおり。

  • id=””、記事の投稿ID
  • pc_height=””、ブログカードのサイズ調整
  • readmore=””、続きを見るを設定する項目(offを推奨)

今回は2個なので、2つ分のブログカードを追加していきましょう。

完成画面は以下のとおり。

  1. id=””には、メモした記事の投稿IDを入力します。
  2. pc_height=””は、150を入力。
  3. readmore=””は、offを記入。

公開のプレビューで確認して、リンクとカテゴリー先リンクが機能していれば設定は終わりです。

右側も左と同様に、記入してみてください。必ずpc_height=””の入力は忘れないでくださいね。

設定が完了したら、公開をクリックします。最後に固定ページをホームページ化すれば、完成です。

ホームページ化の方法は、反映編で明らかにしていきます。
なおき

反映編、固定ページをホームページ化する設定

先程、設定をした固定ページをホームページ化していきます。やり方は、WordPress管理画面の外観からカスタマイズ→ホームページ設定へ移動。

その後、ホームページの表示を固定ページに変更します。ホームページの表示の下にある、ホームページから固定ページ選ぶ。

カスタマイズのホームページ設定

ホームページの表示を最新の投稿→固定ページに変更。

手順が少しややこしいですが、標準の投稿ページを固定ページ化するって事です。以上ですべての設定は完了です!

ここまでお疲れさまでした。

AFFINGERの購入は、WordPressテーマ 「ACTION(AFFINGER6)」からどうぞ。

AFFINGERの関連記事

【入れすぎ厳禁】AFFINGERに入れておくべきはプラグイン7個でOK

  • この記事を書いた人
  • 最新記事

なおき|Z世代ブロガー

副業フェスティバルでは、スキルを習得するためのお手伝いをしています。プログラミング学習、Webデザイン学習、ブログ運営など、これからのWeb時代を生き残れるような発信を心がけてます。

18歳のブロガー|シドニーに留学中。16歳の時にNoteを始める→900本近くの記事を投稿。趣味は新しい知識を習得すること。

-AFFINGER6
-, ,

/* LazyLoad for google adsense */