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

2021年12月10日

https://www.siguburo49.com

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

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

 

サンプルサイト↓↓

サンプルをみる

 

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

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

 

デザイン変更の注意点

サンプルデータを使うのが初めての方は、念のため練習用サイトをご用意ください。

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

 

練習用のドメインは、お名前.comの1円ドメインでOK。

解説はサイトの初期状態で使用することを想定しています。

 

プラグインを追加する【カスタマイザー用】

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

カスタマイザーは、テーマのレイアウトや表示に関する設定を行う機能です。

 

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

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

 

デザインサンプルのアップロード

サンプルデータは「zip形式」で保存されるので、解凍して中身を取り出します。

zipファイルの解凍の仕方

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

このデータをインポートしていきます。

 

affinger-export.dat をインポート

プラグイン「Customizer Export/Import」を有効化すると、カスタマイザーに「エクスポート/インポート」が追加されます。

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

画像ファイルを~?にチェック。最後に「インポート」ボタンをクリックしてください。

 

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

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

 

AFFINGER6|設定リスト

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

作業目安は約10分。

慣れれば5分で終わります。

 

サイドバーウィジェットの削除

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

デフォルトで設定されているウィジェットを削除します。

 

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

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

  • 検索
  • 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デザインサンプルは、有料プラグインが無くても設定できます。

機能の使い方を覚えたら、他のサンプルにも挑戦してください。

 

僕は3年ほどアフィンガーを使ってますが、まだ知らない機能もたくさんあります。

それほど奥深いテーマなので、ぜひ探究してください。

 

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

【動画付き】AFFINGER5デザイン済みデータの設定方法

2022年版「AFFINGER5」デザイン済みデータの設定方法です。AFFINGER5の動作環境についても書いてます。

続きを見る

-AFFINGER6