広告

【基本編】AFFINGER|記事執筆前に設定する項目

AFFINGERの初期設定について前回解説しました。

以下の流れで解説しているので、確認してみて下さい。

初期設定の流れ

  1. 子テーマを有効化
  2. WordPress初期設定
  3. AFFINGER6初期設定
  4. 必須のプラグイン

【初級編】へ

この記事は前回設定の続きになります。


サイトはコンテンツが重要です。

ひとまず記事執筆までの手順は解説してきたとおりです。

記事を執筆前に設定しておくと便利な項目を集めました。

こんな方におすすめ

  • AFFINGERで記事を書く前に設定しておく事は?
  • 簡単なデザインの整え方は?
  • ブロックエディタの使い方について

今回はAFFINGER6で最も重要な記事を書く前に設定しておくべき事やブロックエディタについて解説していきます。

AFFINGERの公式サイトでも設定方法が掲載されています。

以下のボタンから公式サイトを見ることができます(購入者パスワードが必要)。

AFFINGER公式マニュアル

公式マニュアルには詳細に手順は掲載されていますが、このページではより重要な項目を掲載しています。

マニュアルと合わせて読んでいただくとより分かりやすいと思いますが、このページだけの設定だけでも完結するようになっています。

記事執筆前設定の流れ

  1. テキスト関連の設定
  2. デザイン関連の設定
  3. カテゴリー・タグ設定
  4. 細部の設定

第1章テキスト関連の設定

AFFINGER6はサイトの設定をかなり細かく設定することができます。

すべての設定を今やるべきではないので記事を書く前にやったほうがいい設定を解説します。

テキスト関連の設定

  • フォント設定
    • サイズと種類
  • 余白設定
    • 段落下やグループブロック
  • 投稿画面設定
    • 投稿幅や使いやすさ

この画面が使いやすい!というのは人それぞれ違うと思うので、当サイトで解説している内容をそのまま設定しなくても大丈夫です。(特にこだわりがない、分からないという方は同じでもOK)

最初に設定しておくことでバランスを取ることができるので、後々デザインを統一させたり綺麗にする際に変更する項目がなくなります。

フォント設定

AFFINGERではフォントについてかなり細かく設定することができます。

見出しだけフォントを変えたり、サイズや行間、カラーまで自由自在ですが、項目が多いのはメリットでもあり、設定しないといけないというデメリットでもあります。

ここでは最初にある程度設定してしまって、あとから変更しなくてもいいように解説しています

フォントサイズ

フォントサイズや行間を細かく設定することができます。

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

フォントサイズの設定

フォントはサイトごとによって適切なものが違います。

ですが、AFFINGERのフォントは設定していない状態だとかなり見づらくなっています。

サイズは(Pタグ 他)を変更して下さい。

デバイスサイズ行間
PC16px32px
タブレット16px35px
スマホ15px32px

サイズはとりあえず上記に設定しておけば、どんなフォントを使ってもかなりマシに見えます。

記事タイトルやH2タグなどは、デザインによって適切なサイズが違うので、各々で設定していくことになります。

当サイトの設定は「AFFINGER6|フォント種類とサイズのおすすめ」に掲載しています。

フォント種類

フォント自体を変更します。

そのまま下に行くとAFFINGERの機能でフォントを変更できる項目があります。

好きなフォントを選択してみて下さい。

おすすめフォントは「游ゴシック」

フォントカラー

フォントカラーの設定をしていきます。

「外観」>「カスタマイズ」>「見出しタグ(hx)/テキスト」>「テキスト色一括変更」

フォントカラーは記事の読みやすさにつながります。

おすすめカラーは「#333」

文字色で見やすさが変わるので以下のようなサンプルを用意してみました。

最初のうちに設定しておきましょう。


フォントの種類に関しても解説しているので、迷ったら以下の記事を参考にして決めてみて下さい。

AFFINGER6|フォント種類とサイズのおすすめ - アフィンガースタジオ
AFFINGER6|フォント種類とサイズのおすすめ - アフィンガースタジオ

affinger418.com

「フォントサイズ」「フォント種類」「フォントカラー」を変更できたらこの項目はOKです!

余白設定

AFFINGERは余白の設定もかなり細かくできるようになっています。

こちらも最初に設定しておくと後で綺麗なサイトに仕上げられるようになっています。

余白は「段落下の余白」と「グループブロック下の余白」の設定をします。

段落下の余白

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

段落下の余白:30px

おすすめの余白は「30px」

初期設定の20pxでは狭く感じるので最低30px以上に変更はしておきましょう。

グループブロック下の余白

グループブロック下の余白も設定していきます。

「Gutenberg設定」>「グループブロック」

Gutenberg設定

グループブロックを作った際の余白も初期値が小さいので、少し大きめに設定します。

おすすめは「大」:50px

文字サイズやデザインによって適切な余白は変わるので、迷っているなら最初は同じでOKです。

投稿画面設定

投稿画面の設定をしていきます。

記事の書きやすさに直接影響するので、最初に設定しておきます。

「Gutenberg設定」>「全般設定」>「基本設定」

投稿画面設定

この中の「投稿画面の幅」を設定します。

おすすめは「700px」

投稿画面の幅はデフォルトではかなり広く取られているので、変更推奨です。

デフォルトと当サイト設定を見比べてみましょう。

より投稿した記事に近づくように設定するのがポイントです。


当サイトのおすすめ設定をまとめます。

どんな設定が良いのかわからない方は最初は同じように設定してみて下さい。

当サイトのおすすめ設定

  • フォントサイズ
    • PC16px,32px スマホ15px,32px
  • フォント種類
    • 游ゴシック
  • フォントカラー
    • #333
  • 段落下の余白
    • 30px
  • グループブロック下の余白
    • 「大」50px
  • 投稿画面の幅
    • 700px

設定はあとからでも全然変更できるので、サイトを運営してみて好きなように変更していくのがいいと思います。

第2章デザイン関連の設定

最低限のデザイン面の設定をしていきます。

AFFINGERはデザインも細かく設定できるので、すべて設定しようとするとかなり時間がかかります。

ここでは記事を執筆する上でのデザインについて解説していきます。

デザイン関連の設定

  • サイトデザイン
  • ロゴとファビコン

ここまでデザインには全く触れてきませんでしたが、記事を書く前にある程度のデザインを決めていきます。

AFFINGERの機能は昔から「あらゆる部分に手が届きますが、手が届くだけで弄るのは自分」という器用貧乏なところがあり、多くのユーザーにデメリットとして取り上げられています。

ここではそんなAFFINGERのデメリットを打開する新機能を解説していきます。

サイトデザイン

サイトのカラーやデザインはAFFINGERの機能で簡単にテンプレートを使うことができます。

「AFFINGER管理」>「全体設定」>「カラーパターン・デザインパターン」

「カラーパターン」と「デザインパターン」を選択するだけである程度サイトの形が整います。

こちらの設定方法は簡単ですが、物凄くシンプルなものになります。

設定を使わない方は「カラーパターン」「デザインパターン」をリセットにしておきましょう。

カラーパターン・デザインパターン

当サイトでおすすめなのは「デザインカードプラグイン」を使用することです。

AFFINGER6購入者は無料でデザインカードプラグインをダウンロードして使うことができます。

有効化手順は簡単で、動画でも説明されています。

デザインカードは以下のリンクから使用方法とダウンロード(AFFINGER6購入者のみ)ができます。

デザインカードプラグインを使えば、細かい設定も一気に完了します。

このプラグインはめちゃくちゃオススメです!

筆者もこのプラグインを使うのにダウンロードページを探したんですが、見つけるのに苦労したのでプラグインのダウンロードページを解説します。

AFFINGERデザインカードサンプル一覧」にいって下の方までスクロールします。

購入済みユーザーはコチラをクリックすればダウンロードページに飛ぶことができます。

デザインカードをセットすると設定が一括変更されます。

ロゴとファビコン設定

サイトのアイコンとなるロゴとファビコンの設定をしていきます。

AFFINGER6ではアイコンとファビコンはカスタマイザーから設定することができます。

最初にロゴから設定していきたいと思います。

「カスタマイズ」>「ロゴ画像」

ロゴ画像

ロゴ画像はアイコンのみ設定できる「アイコンロゴ画像」もありますが、当サイトではアイコンではなくロゴ画像をおすすめしています。

ロゴ画像はサイズ調整が難しく、パソコン表示時とスマホ表示時のサイズ調整も上級者向けです。

また、文字のフォントもロゴ画像なら一緒に変更できるので、こだわりがない方はロゴ画像を作りましょう。

パソコン用
スマホ用

できればパソコン用とスマホ用で分けたほうがいいと思います。

当サイトのサイズは「600x200px」

作成はCanvaが無料でおすすめです。

背景透過はCanvaでも有料なので、無料の透過サイトを使用しましょう!

関連サイトremovebg

次にファビコンを設定していきます。

ファビコンはサイトのアイコンで、サイトのを表示している時に表示されたり、スマホでホーム画面に追加した際のアプリアイコンになる画像です。

こんな感じの表示になります。

「カスタマイズ」>「サイト基本情報」

サイトアイコン

サイトアイコンの設定欄がファビコンになります。

こちらの画像も背景透過がおすすめです!

当サイトのサイズは「512x512px」

第3章カテゴリー・タグ設定

カテゴリーとタグの設定は記事を書く前にある程度決めておくと、後々記事が書きやすくなります。

ですが、カテゴリーやタグはサイト設計の部分になるので初心者にはかなり難しい設定です。

今回は初心者にも設定しやすいように簡単な設定方法を解説します。

カテゴリーとタグについて

  • カテゴリーはサイトの大きな区切り
  • タグはカテゴリーの下に付く小さな区切り

特化サイトになればなるほどタグを細かくできます。

逆に雑記ブログの場合は広く浅くなります。

カテゴリーとタグの分け方

カテゴリーとタグは取り扱っているジャンルによって作り方が全然違います。

「雑記ブログ」と「特化サイト」で開設するとわかりやすいと思います。

まずは、初心者が最初に作るであろう雑記ブログから解説します。

雑記ブログの場合はカテゴリーの幅が広いです。

小カテゴリーの下にタグが付くので適当につけてみましたが、実際はさらに多いと思います。

カテゴリー同士の幅が広いので、タグまでいくと関連した記事はなくなります。

週刊少年ジャンプに関係のあるサーバーなんてありませんもんね!

これが雑記ブログです。

これがガジェットの特化サイトになるとこうなります。

ガジェット以外の記事はないので、すべての記事が関連記事になります。

また「カテゴリーはガジェットの種類」「小カテゴリーはメーカー名」「タグは追加要素」になっているのでとても分かりやすいですね!

「有線・無線」のタグはマウスのメーカーに付いてますが、キーボードでもありそうです。

これが特化サイトの特徴です。

最初はこれを見本として自分のサイトに合う一番上のカテゴリーを作ってみましょう。

カテゴリー作成のルール

  • カテゴリーの種類は最大4つまで
  • 子カテゴリーは最初はなし
  • 最初はタグは作らないくて良い
  • カテゴリー・タグのURLは英語で作る

上記のルールを守ってカテゴリーを作ってみましょう!

第4章細部の設定

準備中

SNS・OGP

準備中

吹き出し

準備中

アイキャッチ

準備中


準備中

記事執筆前設定の流れ

  1. テキスト関連の設定
  2. デザイン関連の設定
  3. カテゴリー・タグ設定
  4. 詳細な設定

準備中

【中級編】へ

-未分類
-,

PAGE TOP