【無料】AFFINGER6デザインサンプルを自作する方法

2021年12月10日

https://www.siguburo49.com

AFFINGER6デザインサンプル「MIKU」を自力で設定しました。

サンプルサイトは無料プラグインを使ってます。

サンプルをみる

 

完璧ではないですが、原型に近いデザインに仕上がります。

初心者の方でも設定できるので、よければ参考にしてください。

 

デザイン変更の注意点

デザインが元に戻らなくても保証できません

サンプルデータを使うのが初めての方は、練習用サイトを用意した方がいいです。

 

プラグインを追加する

プラグイン「Customizer Export/Import」を追加します。

このプラグインは、テーマのレイアウトや表示に関する機能を担います。

 

デザインサンプルをダウンロード

デザイン済みデータ配布ページで、「MIKU」をダウンロードします。

 

デザインサンプルを反映させる

サンプルデータは「zip形式」で保存されます。

解凍して中身を取り出してください。

zipファイルの解凍の仕方

データは3種類ありますが、「affinger-export.dat」のみ使います。

 

affinger-export.dat をインポート

Customizer Export/Import」を有効化すると、「エクスポート/インポート」が追加されます。

ここで「affinger-export.dat」をインポートします。

 

ファイルがインポートされたら、サイトデザインが変わります。

これで下準備は完了です。

 

AFFINGER6での作業リスト

  • ウィジェット削除
  • ウィジェットを追加する(検索・プロフィールetc)
  • ヘッダーの設定(分割しない、センタリング)
  • サムネイルスライドショー有効化
  • アイキャッチ画像の有効化
  • タブ式カテゴリー一覧の設定
  • メニューの設定(センタリング、太字)
  • フォントの変更
  • おすすめ記事一覧の表示

AFFINGER6での作業リストまとめです。

作業目安は約10分ほど。

 

ウィジェットの削除

設定:「外観>ウィジェット

デフォルトで設定されているサイドバーウィジェットを削除。

 

サイドバーウィジェットの追加

設定:「外観>ウィジェット

追加ウィジェット

  • 検索
  • 11_STINGERプロフィールカード

 

ヘッダーの設定

設定:「AFFINGER管理>ヘッダー

  • ヘッダーを分割しない

にチェックを入れ保存。

 

その後、

  • ヘッダーエリアをセンタリング

にチェックを入れ保存。

 

サムネイルスライドショー有効化

設定:「AFFINGER管理>ヘッダー下/おすすめ

  • フロントページにチェック
  • 取得記事「10」に変更(任意)
  • タイトルカラーを「白」に変更

終わったら、保存。

 

アイキャッチ画像の有効化

設定:「AFFINGER管理>投稿・固定記事設定

  • アイキャッチ画像の表示をすべての記事で有効化する

にチェック。

 

タブ式カテゴリー一覧の設定

設定:「AFFINGER管理>トップページ

  • カテゴリーA・B・Cに「ID」を入力※
  • タブの背景色を変更(#333333)
  • ボーダーにする(チェックを入れる)

カテゴリーIDは、投稿一覧のカテゴリーで確認。

事前にカテゴリー作成が必要です。

 

メニューの設定

設定:「カスタマイザー>各メニュー設定

PCヘッダーメニューを選択し、

  • 第一階層メニューを太字にする
  • メニューをセンター寄せにする

にチェック。

メニュー設定はこちら

 

フォントの変更

設定:「AFFINGER管理>全体設定

  • 全体:Noto Sans(400)
  • 記事タイトル・見出し:Noto Sans(700)
  • 追加の反映範囲:記事一覧タイトル

フォントサイズはデフォルトのまま使用。

 

おすすめ記事一覧の表示

設定:「AFFINGER管理>ヘッダー下/おすすめ

  • おすすめ記事一覧に表示する文字:PickUp
  • 任意の人気記事を指定する(記事ID)※
  • サイドのスクロールに表示するにチェック

記事IDは、投稿画面でチェック。

投稿一覧

 

サイト確認

設定が終わったら、サイトを確認してください。

スマホ用の設定はしていません。適宜変更お願いします。

 

こちらも一緒に読まれてます

-AFFINGER6
-