WING(アフィンガー5)

Affinger5でオシャレなトップページを作りたいけど、もっと簡単にかっこよくできないの?

トップページのカスタマイズDesigned by slidesgo / Freepik

Affinger5でオシャレなトップページを作りたいけど、もっと簡単にかっこよくできないの?

アフィンガー5は、それほど気を使わなくても簡単にサイトの見た目をオシャレにできます。

top-page1

通常の形式では、書いた記事が新たにページ上部に追加されていきます。しかし、ページに記事が追加されるだけでは、サイトに来てくれた方に対して効果的に情報を提供することができません。そこで、効果的な情報提供ができるようにトップページを作ってみたいと思います。

 

トップページの例

まずは、トップページを作成してみましょう。一度、以下のようなページが作成できるようになれば、あとは個人でどんどんカスタマイズし、満足度の高いサイトにしていけるかと思います。

top-page2

 

トップページの作成手順

アフィンガー5でトップページを作成するのは、非常に簡単です。以下に手順を示します。

トップページ作成手順

  1. トップページ用として固定ページを新規作成する。
  2. AFFINGER5管理のトップページ設定に移動し、固定ページのIDを指定場所に入力する。

 

1.トップページ用として固定ページを新規作成する。

「WordPressサイドメニュー」 > 「固定ページ」 > 「新規追加」

top-page作成

 

固定ページを「下書き保存」あるいは「公開」し、記事IDを取得する

top-page4

タイトルは、任意で「HOME」や「TOP」などにします。そして「下書き保存」あるいは「公開」をクリックすると、記事IDを取得することができます。

 

top-page5

記事IDは、「固定ページ一覧」をクリックすると確認できます。上の写真でいうと、右側の「ID」の項目になります。後ほど、作成した固定ページのID番号が必要になりますので、メモしておきます。

 

2.AFFINGER5管理のトップページ設定に移動し、固定ページのIDを指定場所に入力する。

「WordPressサイドメニュー」 > 「AFFINGER5 管理」 > 「トップページ」

top-page6

上の写真の赤枠内に、先ほど取得した固定ページのIDの番号を入力します。そして、「トップページの設定」下部にある「save」をクリックして終了になります。

 

トップページのカスタマイズ

top-page2

上の写真のようなトップページは簡単にカスタマイズできます。どのようにカスタマイズするかは個人のセンスですが、サイトに来てくれたユーザーが利用しやすいように作りこむのがベストです。

トップページのカスタマイズ

  1. おすすめ記事(ヘッダーカード)の作成
  2. 人気の記事を設置
  3. 記事のスライドショーの設置

※数字は上の写真内の番号に合わせています。

 

おすすめ記事(ヘッダーカード)の作成

ヘッダーカードは、カード型のリンクで最大4つまで設定できます。記事のリンクを設定することもできますし、カテゴリーのリンクを設定することもできます。

「WordPressサイドメニュー」 > 「AFFINGER5 管理」 > 「おすすめ記事一覧」

top-page7

上の写真の赤枠内の「アップロード」と「テキスト」、「リンク先URL」について、以下に説明していきます。

 

アップロード

WordPressのメディアの中から目的の写真を選択し、アップロードするだけです。メディアの中にヘッダーカード用の写真がなければ、あらかじめ追加しておきます。

 

テキスト

テキストは、カードのリンク先の記事一覧あるいは記事の内容について入力します。このテキストは画像に表示されますので、適切な説明文を入力しましょう。

 

リンク先URL

httpあるいはhttpsから始まるページのURLを入力します。これは記事単体でも良いですし、カテゴリーページのURLでも良いです。記事がいくつかのカテゴリーに分類されている場合は、カテゴライズされたページのURLを入力する方が良いかと思います。

 

以上でおすすめ記事(ヘッダーカード)の設置は終了です。

 

人気の記事を設置

ここからは、最初に作ったトップページにする固定記事を編集していきます。

top-page8

上の写真のように、いつものように記事を書くような感じで編集していきます。「段落」を使ったり、「レイアウト」を使います。レイアウトは左右50%にし、それぞれに記事をカードスタイルで挿入します。

top-page9

 

記事のスライドショーの設置

「タグ」 > 「記事一覧/カード」 > 「カテゴリ一覧(スライドショー)」

スライドショー

スライドショーのコード

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

 

民法編

2021/10/20

失踪宣告、不在者財産管理人

失踪宣告、不在者財産管理人 失踪宣告 失踪宣告はその人との関係を断ち切るものであり、権利能力を失わせるものではない。従って、失踪宣告を受けた者が生存しており、別の場所で法律行為を行ったとしても、契約の無効を主張することはできません。 メモ 失踪宣告 普通失踪・・・行方不明になってから7年間経過して失踪宣告の申立てができ、7年間の期間満了時に死亡したものとみなされる。 特別失踪・・・危難の去ったときから1年間経過して失踪宣告の申立てができる。危難の去ったときに遡って死亡したものとみなされる。 申立人 利害関 ...

ReadMore

民法編

2021/10/20

成年被後見人、被保佐人、被補助人

成年被後見人、被保佐人、被補助人 成年被後見人は、日用品の購入その他日常生活に関する行為を除き、ほぼ何もできないとしています(ほぼ全てにおいて同意が必要)。被保佐人は民法第13条1項以外の行為をすることができます。13条1項に記載されている行為をするときは保佐人の同意が必要です(同意が必要な事項を増やすこともできます)。被補助人は同意見を与える旨の審判により特定の法律行為をするには補助人の同意が必要ですが、基本的に全ての行為をすることができます。 関連 家庭裁判所は、保佐開始の審判の請求権者又は保佐人若し ...

ReadMore

民法編

2021/10/20

未成年者

designed by freepik 未成年者 未成年者の年齢 年齢が18歳の者は成年です(民法4条)。これまでは満20歳が成年とされてきましたが、2022年4月より施行されます。婚姻は男女共に18歳にならなければできないので(民法731条)、これまで存在した成年擬制(未成年の者が婚姻したときに成年とみなすこと)は廃止されました。一方、喫煙や飲酒、養親になる年齢などは20歳のままです。   未成年者ができること 未成年者が法定代理人の同意を得ずに単独でできるもの 単に権利を得、または義務を免れ ...

ReadMore

司法書士試験_会社法

会社法

2021/10/19

組織再編

組織再編とは 組織再編とは、事業の分割や統合、株式の移転や資産の移転により会社の組織を変更することをいいます。経営の一元化やノウハウの終結を目的とし、これによりコスト削減や競争力の強化を達成します。組織再編を行う手法には、合併、会社分割、株式交換、株式移転があります。   合併の種類 吸収合併・・・例えば、合併契約によりA社が解散し、B社がA社の権利義務を包括承継することです。このとき、解散するA社を吸収合併消滅会社、承継したB社を吸収合併存続会社と言います。 新設合併・・・例えば、A社とB社が ...

ReadMore

司法書士試験_会社法

会社法

2021/10/16

社債

社債 社債とは、投資家などから資金提供を受ける代わりに満期まで利子を支払い、満期には元本を返済する有価証券のことを言います。つまり資金調達の方法の一つになります。この社債は株式会社だけでなく全ての会社が発行できます。   ポイント 株式・・・払い込まれた金銭を返さなくてよい自己資本としての資金調達方法(出資金) 社債・・・払い込まれた金銭を返す必要のある他人資本としての資金調達方法(借入金) 純資産において株式は増加しますが、社債は変化しません。 議決権など経営参加において株式は権利が与えられま ...

ReadMore

 

スライドショーの設定

  • st-catgroup cat="0"

デフォルトの数字は「0」になっていて、ランダムに記事が表示されます。カテゴリーを指定したい場合は、カテゴリーIDの数字を入力します。カテゴリーIDは、「WordPressサイドメニュー」 > 「投稿」 > 「カテゴリー」で見ることができます。

  • page="5"

デフォルトは「5」ですが、ページ数を増やすこともできます。

  • slide="on"

デフォルトはスライドが「on」になっています。スライドをさせたくなければ「off」にします。

  • slides_to_show="3,3,1"

デフォルトは表示されるスライドの枚数が3枚です。5枚にしたい場合は、「5,3,1」にします。

  • slide_more="ReadMore"

デフォルトは「ReadMore」になっています。「もっと詳しく」など日本語表示も可能。

 

まとめ

サイトをオシャレにかっこよくするのは、自分の満足のためでもありますが、SEO対策的にもユーザビリティの向上につながります。いろいろ試行錯誤して、良いサイトを作っていける手掛かりになれば幸いです。

-WING(アフィンガー5)

© 2021 NABE BLOG