AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。
この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プラグインを使用しないで手動で設定する方法を説明しています。
この記事単体だけではデザイン済みテンプレートを設定することはできませんので、まずはこちらの記事を読んだ上でこの記事の設定を行ってください。
-
AFFINGER6:デザイン済みテンプレートを設定する方法【完全版】
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6ではデザイン済みのテンプレートが数種類用意されています。 デザイン済みデータは公式マニュアルでダウロードできますが、それを設定する手順を説明していきます。 デザイン済みテンプレートを ...
注意事項として以下の点に注意してください。
AFFINGER管理(下画像の赤枠部分)の項目を手動で設定していきます。
この記事ではデザイン済みテンプレート「Tidy2 EX」のAFFINGER管理設定項目について説明しています。
Tidy2 EX
表の「変更なし」はデフォルトでチェックが入っていて変更する必要がない項目ですが、念のためチェックが入っているか確認してください。
「変更必要」の項目について表と画像を参考にしてチェックを入れて変更してください。
上位項目にチェックをして保存した状態でないとチェックができない項目があります。
全体設定の設定項目
項目名 | チェック一覧 | 変更 |
---|---|---|
カラーパターン | 青(やさしい) | 変更必要 |
デザインパターン | ブログ(初心者おすすめ) | 変更なし |
カテゴリーリンク | カテゴリーリンクに簡易デザイン適応 | 変更なし |
カテゴリーリンク カラー: | WEBカラーコード:「#edbbcf」を選択 | 変更必要 |
サイト全体のレイアウト | サイト全体のレイアウトをリセットする | 変更必要 |
サムネイル画像設定 記事一覧 | フルサイズにする サムネイル画像をポラロイド風にする PC(960px以上)のサムネイル画像を大きくする スマホ(599px以下)でもサムネイル画像を大きくする サムネイル画像をさらに大きく(β) | 変更必要 |
スライド・カード型 サムネイル画像の縦横比 | 16 : 9 | 変更必要 |
【基準】 | 自動(高さに応じて) フルサイズ画像を読み込む | 変更なし |
フォントのサイズ | 基本(Pタグ 他)「16」 | 変更必要 |
フォントの種類 | Googleフォントに「display=swap」を付与(表示速度改善) | 変更なし |
フォントの種類 全体 | 游ゴシック(500) | 変更必要 |
記事タイトル・見出し(h2~3)・ウィジェットボタンなど | Noto Sans(700) | 変更必要 |
その他(優先): | 「font-family: 'Kaisei Opti', serif;」を入力 | 変更必要 |
追加の反映範囲: | サイト名 h4,h5見出しタグ 記事一覧タイトル おすすめ記事・ブログカードタイトル 各メニュー(第一階層及びウィジェットボタン) 目次(※要プラグイン) ランキング見出し | 変更必要 |
Googleフォント | 「link href=」の欄に「https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@700&display=swap」を入力 | 変更必要 |
続けて「font-family: 'Kaisei Opti', serif;」を入力 | 変更必要 | |
Googleフォント反映箇所 | サイト名・コメント・NEW ENTRY・関連記事 記事タイトル・見出しタグ・ウィジェットタイトル 他 記事一覧タイトル 各メニュー(第一階層以下) ブログカード・おすすめ記事タイトル | 変更必要 |
適応ID及びクラス: | 「.st-tab-category label」を入力 | 変更必要 |
全体設定 補足
カラーパターン/デザインパターン
- カラーパターンで「青(やさしい)」にチェック
- デザインパターンで「ブログ(初心者おすすめ)」にチェック
カテゴリーリンク
- カテゴリーリンク カラーでWEBカラーコード:「#edbbcf」を選択します。
サイト全体のレイアウト一括設定
- 「サイト全体のレイアウトをリセットする」にチェック
サムネイル画像設定
- 「フルサイズにする」にチェック
- 「サムネイル画像をポラロイド風にする」にチェック
- 「PC(960px以上)のサムネイル画像を大きくする」にチェック
- 「スマホ(599px以下)でもサムネイル画像を大きくする」にチェック
- 「サムネイル画像をさらに大きく」にチェック
スライド・カード型サムネイル画像の縦横比
- 「16:9」にチェック
- 「自動(高さに応じて)」にチェック
- 「フルサイズ画像を読み込む」にチェック
フォントサイズ
- 基本(Pタグ 他)のサイズ欄に「16」を入力
フォントの種類
- 「Googleフォントに「display=swap」を付与」にチェック
- 「游ゴシック(500)」にチェック
- 「Noto Sans(700)」にチェック
フォントの種類(記事タイトル・見出し(h2~3)・ウィジェットボタンなど
その他(優先)入力欄に「font-family: 'Kaisei Opti', serif;」をコピペして貼り付けてください。
追加の反映範囲:チェック項目
- 「サイト名」にチェック
- 「h4,h5見出しタグ」にチェック
- 「記事一覧タイトル」にチェック
- 「おすすめ記事・ブログカードタイトル」にチェック
- 「各メニュー(第一階層及びウィジェットボタン)」にチェック
- 「目次(※要プラグイン)」にチェック
- 「ランキング見出し」にチェック
Googleフォント
Googleフォント
①の入力欄に「https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@700&display=swap」をコピペして貼り付けてください。
②の入力欄に「font-family: 'Kaisei Opti', serif;」をコピペして貼り付けてください。
③適応ID及びクラス入力欄に「.st-tab-category label」をコピペして貼り付けてください。
- 「サイト名・コメント・NEW ENTRY・関連記事」にチェック
- 「記事タイトル・見出しタグ・ウィジェットタイトル 他」にチェック
- 「記事一覧タイトル」にチェック
- 「各メニュー(第一階層以下)」にチェック
- 「ブログカード・おすすめ記事タイトル」にチェック
メニュー設定項目
項目名 | チェック一覧 | 変更 |
---|---|---|
PC用グローバルメニュー | PC用メインメニューを上に表示する(デフォルト) | 変更なし |
【アイコンデザイン】 | クール | 変更必要 |
【メニューの位置】 | 左 | 変更なし |
検索アイコン | スマホヘッダーに検索アイコンを追加する オーバーレイ | 変更必要 |
その他のスマホメニュー | ヘッダーメニュー(横列)を有効化 | 変更必要 |
メニュー設定 補足
アイコンデザイン/メニューの位置/検索アイコン
- アイコンデザインの「クール」にチェック
- メニューの位置の「左」にチェック
- 検索アイコンの「スマホヘッダーに検索アイコンを追加する」にチェック
- 検索アイコンの「オーバーレイ」にチェック
その他のスマホメニュー
- 「ヘッダーメニュー(横列)を有効化」にチェック
ヘッダー設定項目
項目名 | チェック一覧 | 変更 |
---|---|---|
スマホヘッダーの高さ(px) | 「80」を設定 | 変更必要 |
スマホ(タブレット含む)のみ | フロントページを除く | 変更なし |
PCのみ PCヘッダーの高さ(px) | 「80」を設定 | 変更必要 |
PCのみ | フロントページを除く ヘッダーを分割しない ヘッダーエリアをセンタリング | 変更必要 |
スライドショー設定 | フェードイン・アウト | 変更なし |
ヘッダーコンテンツ設定 | コンテンツ全体を上下左右を中央寄せ | 変更必要 |
記事スライドショー設定 | ヘッダーに記事をスライドショーで表示する サムネイル画像の縦横比設定を反映しない 右から左 カテゴリーリンクを非表示 横並びにする メイン以外を暗くする | 変更必要 |
ヘッダー設定項目 補足
スマホのみ/PCのみ
スマホ(タブレット)のみ
- スマホヘッダーの高さに「80」を入力
- 「フロントページを除く」にチェック
PCのみ
- PCヘッダーの高さに「80」を入力
- 「フロントページを除く」にチェック
- 「ヘッダーを分割しない」にチェック
- 「ヘッダーエリアをセンタリング」にチェック
ヘッダーコンテンツ設定
- 「コンテンツ全体を上下左右を中央寄せ」にチェック
記事スライドショー設定
- 「ヘッダーに記事スライドショーで表示する」にチェック
- 「サムネイル画像の縦横比設定を反映しない」にチェック
- 「右から左」にチェック
- 「カテゴリーリンクを非表示」にチェック
- 「横並びにする」にチェック
- 「メイン以外を暗くする」にチェック
ヘッダー下/おすすめ 設定項目
項目名 | チェック一覧 | 変更 |
---|---|---|
ヘッダーカード(ヘッダーカード1) | 画像のURL:https://dl.easyuploader.cloud/20211108192502_37694677.jpg | 変更必要 |
ヘッダーカード(ヘッダーカード2) | 画像のURL:https://dl.easyuploader.cloud/20211108192702_574e6268.jpg | 変更必要 |
ヘッダーカード(ヘッダーカード3) | 画像のURL:https://dl.easyuploader.cloud/20211108192702_78333444.jpg | 変更必要 |
ヘッダーカード(ヘッダーカード4) | 画像のURL:https://dl.easyuploader.cloud/20211108192702_56395447.jpg | 変更必要 |
デザイン | テキストのある背景画像を暗くする | 変更必要 |
サムネイルスライドショー | 無効 昇順(DESC) ID センター寄せにする(スマホ) 画像 + テキスト 画像を角丸にする 画像に影を付ける | 変更なし |
ヘッダー下/おすすめ 補足
ヘッダーカード
デザイン
- 「テキストのある背景画像を暗くする」にチェック
トップページ設定項目
項目名 | チェック一覧 | 変更 |
---|---|---|
トップページのレイアウト | 1カラムにする LP時にヘッダー(headerエリア)を表示する | 変更必要 |
記事一覧 | トップページのコンテンツ内の新着記事一覧を非表示にする トップページのサイドバーの新着記事一覧を非表示にする | 変更必要 |
タブ式 カテゴリー記事一覧 | タブ式 カテゴリー記事一覧をフロントページに表示する ボーダーにする 表示記事数:「9」を入力 昇順(DESC) ID 無限ループにする | 変更必要 |
カテゴリーB(ID) | 「4」を入力 | 変更必要 |
カテゴリーC(ID) | 「5」を入力 | 変更必要 |
最新記事一覧タブ名: | 「NEW」と入力 | 変更必要 |
お知らせに表示する件数: | 「3」 | 変更必要 |
トップページ設定 補足
トップページのレイアウト
- 「1カラムにする」にチェック
- 「LP時にヘッダーを表示する」にチェック
記事一覧
- 「トップページのコンテンツ内の新着記事一覧を非表示にする」にチェック
- 「トップページのサイドバーの新着記事一覧を非表示にする」にチェック
タブ式カテゴリー記事一覧
- 「タブ式カテゴリー記事一覧をフロントページに表示する」にチェック
- カテゴリーBに「4」、カテゴリーCに「5」を入力
- 「ボーダーにする」にチェック
- 表示記事数に「9」を入力
- 「昇順」「ID」にチェック
- 「無限ループにする」にチェック
NEWS(お知らせ)の表示
- お知らせタイトルバーに表示する文字に「NEW」と入力
- お知らせに表示する件数に「3」と入力
投稿・固定記事 設定項目
項目名 | チェック一覧 | 変更 |
---|---|---|
カテゴリー・タグ | 記事タイトル上のカテゴリーを非表示にする | 変更必要 |
投稿日(更新日) | 記事一覧・関連記事一覧の投稿日(更新日)を非表示にする 更新日のみ表示する(投稿日は表示しない) | 変更必要 |
コメント | 何もしない | 変更なし |
アイキャッチ設定 | アイキャッチ画像をタイトル下表示に変更する ポラロイド風にする | 変更必要 |
記事一覧のカードデザイン化[EX] | トップページ及びアーカイブの記事一覧をカードデザインにする 投稿記事下の関連記事一覧をカードデザインにする カードデザインパターンをBタイプ(枠あり)に変更 | 変更必要 |
この記事を書いた人 | 記事上にライター情報を表示する アバター画像を丸くする(※コメント欄のアバター画像含む) | 変更必要 |
関連記事一覧 並び順 | ランダム(デフォルト) もっと読む(無限スクロール)を使用する | 変更必要 |
記事一覧(管理画面) | 投稿一覧(管理画面)にサムネイル・文字数を表示 固定記事一覧(管理画面)を新着順にする | 変更なし |
投稿・固定記事 補足
カテゴリー・タグ
- 「記事タイトル上のカテゴリーを非表示にする」にチェック
投稿日(更新日)
- 「記事一覧・関連記事一覧の投稿日(更新日)を非表示にする」にチェック
- 「更新日のみ表示する」にチェック
アイキャッチ設定/記事一覧のカードデザイン化
- 「アイキャッチ画像をタイトル下表示に変更する」にチェック
- 「ポラロイド風にする」にチェック
- 「トップページ及びアーカイブの記事一覧をカードデザインにする」にチェック
- 「投稿記事下の関連記事一覧をカードデザインにする」にチェック
- 「カードデザインパターンをBタイプ(枠あり)に変更」にチェック
この記事を書いた人
- 「記事上にライター情報を表示する」にチェック
- 「アバター画像を丸くする」にチェック
関連記事一覧
- 「ランダム(デフォルト)」にチェック
- 「もっと読む(無限スクロール)を使用する」にチェック
その他の設定項目に関しては変更不要です。
以上で「Tidy2 EX」のAFFINGER管理設定は完了です。
AFFINGER6/EX:デザイン済みデータ
AFFINGER6で利用できるデザイン済みデータは5種類(EX版でも利用可能)
- SIMPLE START
- Tidy2
- MUKU
- cloud
- Study Bear
SIMPLE START
「SIMPLE START」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「SIMPLE START」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
Tidy2
「Tidy2」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「Tidy2」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
MUKU
「MUKU」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「MUKU」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
cloud
「cloud」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「cloud」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
Study Bear
「Study Bear」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「Study Bear」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
AFFINGER6EX限定:デザイン済みデータ
AFFINGER6EX版限定のデザイン済みデータです。
- INAZUMA 6EX
- Separate
- mocha 6EX
- MUKU EX
- Tidy2 EX
- WIDE / EX
INAZUMA 6EX
「INAZUMA 6EX」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「INAZUMA 6EX」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
Separate
「Separate」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「Separate」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
mocha 6EX
「mocha 6EX」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「mocha 6EX」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
MUKU EX
「MUKU EX」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「MUKU EX」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
Tidy2 EX
「Tidy2 EX」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「Tidy2 EX」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
WIDE / EX
「WIDE / EX」のAFFINGER管理設定項目についてはこちらの記事を参考に設定してください。
-
AFFINGER6:デザイン済みテンプレート「WIDE / EX」を有料プラグイン無しで設定する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
AFFINGER6でデザイン済みテンプレートを設定するには3つのデータをインポートする必要があります。 この記事ではその3つのデータのうち1つである「AFFINGER管理」のデータのインポートを有料プ ...
AFFINGER6ではデザイン済みテンプレートの他にデザインカードというプラグインを利用したテンプレートも利用可能です。
デザインカードプラグインに関してはこちらの別記事をご覧になってください。
-
AFFINGER6:デザインカードプラグインでサイトデザインを変更する方法
2024/7/18 AFFINGER6(アフィンガー6), AFFINGER6デザインカスタマイズ
2023年12月にデザインカードプラグインを利用して簡単にサイトデザインを変更することができるようになりました。 デザインカードの種類は公式サイトから確認できます。 → AFFINGER6公式サイト( ...
ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。
AIなんて難しそう・・・
そう感じて活用しないのは勿体無いです。
気軽に使うのに無料お試しがお勧め♪
現在は多くのAIライティングツールがあります。
そのほとんどが無料お試しでの利用が可能です。
お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。
無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。
\\ 無料お試し利用がずっと可能なAIライティングツール//
-
無料お試しがずっと可能なAIライティングツール
「記事作成にAIを活用してみたいなぁ」 「でも料金はかけたくないなぁ」 そんな方に無料お試しがずっと可能なAIライティングツールをいくつか紹介します。 もちろん無料お試しなので、機能をフルに使用するこ ...
AFFINGER6:記事一覧
- AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
- (通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】
- AFFINGER6を実際に利用したガチ評価-2年以上愛用して感じたメリットとデメリット
- AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由
AFFINGER6の購入とインストール方法
- AFFINGER6の購入方法と購入プランの選び方
- AFFINGER6(アフィンガー6)のインストール方法-初心者でも安心!購入プランから徹底解説!
- AFFINGER6(アフィンガー6)EX版の購入とアップグレードの方法
AFFINGER6の設定関係
- AFFINGER6導入後にまず何をしたらいいの?-初心者にお勧めの初期設定4項目
- AFFINGER6(アフィンガー6)にお勧めのプラグイン【初心者向け】
- AFFINGER6のアップデート方法(2パターンを解説)
- AFFINGER6(アフィンガー6)でGoogleアナリティクスを導入する方法
- AFFINGER6:Googleサーチコンソールへの登録方法
- AFFINGER6のステマ規制対策-広告表記を表示させる方法