【無料】AFFINGER6デザイン済データを自作する方法

2021年12月10日

ヒロ
AFFINGER6デザイン済データを自作する方法です。

それほど難しい作業はないので、興味があれば挑戦してください。

 

今回自作したデザイン済データは「MIKU」です。

サイト作成時のバージョンはこちら↓↓

  • WordPress6.0.1
  • AFFINGER6: 20220810

サンプルをみる

注意点として、不具合が起きても保証できません。

心配な方はサンプルサイトを準備してからお試しください。

 

サンプルサイトのドメインは「.xyz」で問題ありません。

ドメインは、お名前ドットコムで「1円~」で購入できます。

お名前.com

 

デザイン済データ「MIKU」のダウンロード

はじめに「MIKU」をダウンロードします。

 

デザイン済データは、利用規約にチェックを入れないとダウンロードできません。

3ヶ所チェックする場所があるので、まずはチェックを入れましょう。

デザイン済みデータ配布ページ

 

Customizer Export/Import を追加する

プラグイン「Customizer Export/Import」を追加します。「プラグイン>新規追加」で検索可能です。

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

 

MIKU「zipファイル」の中身を取り出す

デザイン済データは「zip形式」で保存されます。

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

zipファイルの解凍の仕方

 

上が「zipファイル」の中身です。

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

 

affinger-export.dat をインポート

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

ここで先ほど取り出した「affinger-export.dat」をインポートします。

 

ファイルを選択をクリックし、「affinger-export.dat」を選びましょう。

画像ファイルを~にチェックを入れ、インポートをクリックしてください。

 

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

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

 

デザイン修正・追加方法まとめ

以下、デザイン修正もろもろまとめです。

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

初心者の方でもできる操作です。ご安心ください。

 

ウィジェットの削除

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

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

 

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

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

追加するウィジェットは以下の2つ。

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

他、お好みで追加してください。

 

ヘッダーの設定

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

ヘッダーを分割しないにチェックを入れ保存。

その後、ヘッダーエリアをセンタリングにチェックを入れ保存。

 

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

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

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

終わったら、保存します。

他のサムネ設定は、デフォルト状態です。

 

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

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

アイキャッチ画像の表示をすべての記事で有効化する、にチェックを入れて保存。

 

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

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

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

タブ式カテゴリーを表示する場合は、事前にカテゴリー作成が必要です。

※カテゴリーIDは、投稿一覧のカテゴリーで確認できます

 

メニューの設定

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

メニューを表示させる場合は、事前にメニューを作成する必要があります。

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

上2ヶ所にチェックを入れ保存。

メニュー設定の方法が分からない方は、下記ページを参照してください。

WING公式マニュアル(メニュー設定)

 

フォントの変更

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

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

上3ヶ所にチェックを入れ保存。

フォントサイズはデフォルトのまま使用してます。適宜変更してください。

 

おすすめ記事一覧の表示

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

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

※記事IDは、投稿画面でチェックできます。

投稿画面の右側に「記事ID」が表示されてます。

以上で、デザイン修正・追加終了です。

 

サイトに不具合が起こった場合

もし不具合が起こった場合は、カスタマイザーをリセットしてください。場所は「カスタマイザー>全体設定」。

念のため、WINGマニュアル「ご利用の前に必ずお読みください」のリンク貼っておきますね。

WINGマニュアル(ご利用の前に必ずお読みください)

 

関連【AFFINGER6】すごいもくじLITEの使い方

関連【初心者向け】AFFINGER6プロフィールカード設定方法

-カスタム, デザイン
-