affinger5

【図解】AFFINGER5 初心者向け 管理画面を徹底解説

AFFINGER5_beginner_eyecatch


りくの前置き

AFFINGER5は設定項目が多すぎる!!

ブログをはじめてすぐ心が折れました

教科書のように初歩を細かく教えてくれるサイトが無く

ひたすら自分でサーチし、いじり倒すことで得た知識を

とことん丁寧に共有したいと思います。


管理画面ってなんだ?

基礎編解説第一弾は、「管理画面」についてです。

管理画面・・・何をするときもここからスタート。デスクトップのような役割。

僕はブログを開設してすぐ、知らない言葉のオンパレードの管理画面を見て心が折れました。

今回はこの管理画面に並んだ項目は、”それぞれ何ができるのか” を解説します。

※主要な項目のみ抜粋します。

1.投稿

まずは「投稿」項目について解説します。

投稿 項目

この項目は、記事の執筆をしたり、その記事に関する情報を管理するページです。

投稿一覧

投稿一覧

この項目では、

  • 記事のタイトル
  • カテゴリー
  • タグ
  • ID

を確認することができます。

主な使い方

・過去に書いた記事のリライトをする時

・記事のIDを確認する時

「新規追加」の項目はそのままなので飛ばします。

カテゴリー

カテゴリー 項目

この項目では、

  • カテゴリーの新規作成
  • 概要、スラッグの編集
  • IDの確認

がおこなえます。

主な使い方

・カテゴリーの作成や編集

・カテゴリIDを確認する時

タグの項目も同様ですので飛ばします。

2.固定ページ

この項目では固定ページの新規作成や編集を

記事ページと同様のエディタで行うことができます。

固定ページと記事ページの違い

固定ページVS.記事ページ

それぞれのページの違いは以下です。

  • 記事ページはカテゴリに紐付き
  • 固定ページは独立のページ

記事ページはそのカテゴリを開いたときに読み込まれます。

それに対し固定ページは独立しているため、

単体で完結するようなページに使われます。

(トップページのレイアウト用、お問い合わせ、プライバシーポリシーなど)

3.外観

この項目では、サイトのデザイン全般を設定します。

なかなかボリューミーな項目になります。

外観項目

テーマ

ここではテーマ(Wordpressのきせかえ)の新規インストールや、テーマ変更をおこなうことができます。

AFFINGER5を購入している方は、ここで親テーマと子テーマをインストールし、子テーマを有効化しましょう。

以下、参考記事です!

eyecatch
カスタマイズ前に必読!親テーマ・子テーマを理解してデータ消えを防ぐ。

親テーマ・子テーマを理解していますか?何もわからずにコピペでカスタマイズをどんどん進めると取り返しがつかなくなるかもしれません!
この記事では親テーマ・子テーマとカスタマイズの関係について、分かりやすく図解で説明しています。
CSSやPHPをいじり始める前に是非御覧ください。

続きを見る

カスタマイズ

ここは、サイトのレイアウトや色を設定するときに使います。

レイアウトを作り込むときに頻繁に使う項目です。

他項目「ウィジェット」「メニュー」「ヘッダー」「背景」を開かなくても、この「カスタマイズ」内でほとんど設定することができます。

カスタマイズ 項目

主な使い方

・サイト全体の配色を決める

・ロゴ画像やファビコンの設定

・ウィジェットやメニューに何を入れるのか決める

・追加CSSを書き込む

(デフォルトのデザインを自分好みに変更できる)

テーマエディタ

この項目は、中級者向けのカスタマイズをするときに使います。

CSSやPHPがわからない方は、あまりいじらないことをオススメします。

テーマエディタ 項目

というのも、ブログを構成しているすべてのプログラムをここのエディターで書き換えることができるからです。

下手にいじるとサイトが表示されなくなるなどの危険性があります。

簡単なスタイルの変更などは、「カスタマイズ」内の追加CSSでやりましょう。

プラグイン

プラグインとは、例えるならスマホのアプリみたいなものです。

「文字に動くマーカーを引きたい!」

「目次機能をつけたい!」

など、素人では難しい機能を

インストールするだけで簡単に搭載できます。

ただプラグインの入れ過ぎは、

ページの表示速度を下げることになるため注意が必要です。

AFFINGER5管理

AFFINGER5

AFFINGERが初心者殺しなのは、この項目の理解しづらさにあります。

「ここ変えたいけど、設定どこだっけなぁ」

ってことがしょっちゅうです。

ここで主に使う設定をまとめますので、

ブックマークして都度参考にして下さい!

<デザイン> 設定

デザイン 項目画像

サイト全体のレイアウト一括設定

幅設定

「PC閲覧時のサイトの幅」→ 1114px 

に設定します。

これはGoogleアドセンスの広告を並列で配置するためです。

ほかはデフォルトの設定でOKです。

サムネイル画像設定

サムネイル画像設定

始めたての時には、

正方形にする。

を選択することをおすすめします。

フルサイズに設定すると、

フルサイズ 例

トップページでこうした ”画像が上、タイトルが下” のレイアウトを作ることができます。

(※画像サイズを圧縮しないと重くなるので注意)

フォントのサイズ

フォントサイズ

おすすめの設定です。

自分で書いた記事と見比べながら、しっくりくるサイズに設定しましょう。

<トップページ> 設定

固定ページを挿入

トップページのレイアウトを固定ページで作った場合は、

ここに固定ページIDを挿れます。

固定ページレイアウト例

トップページを固定ページでつくると

上の画像のように自分で好きにレイアウトをつくれます。

僕の場合は以下の部分だけ固定ページで作っています。

 

固定ページ_例

<投稿・固定記事> 設定

投稿・固定記事

ここで設定するのは「関連記事一覧」くらいです。

記事の下に表示される関連記事の

”表示名”と”件数”を設定します。

関連記事_例

”表示名=関連記事””表示件数=2”

にすると上のように表示されます。

<ヘッダー> 設定

ヘッダー設定

ここでは「ヘッダー設定」を上記のように変更します。

(※好みの問題)

この設定にすることで、PC画面でサイトのロゴ画像を中央寄せにすることができます。

<メニュー> 設定

ハンバーガーメニュー

いわゆる「ハンバーガーメニュー」と言われる、

3本線のメニューのデザインとレイアウトを決めます。

好きなデザインと左右どちらに配置するかを決めましょう。

スマホメニュー

ヘッダー用メニュー・ミドルメニュー・フッターメニューの表示ON/OFFを選択します。

実際に見比べてみてどれをONにするか決めましょう。

ちなみに僕は下のようにヘッダーメニュー(横列)のみONにしています。

ヘッダーメニュー

まとめ

今回は設定の多いAFFINGER5の管理画面の概要をまとめました。

覚える項目が多くて大変ですが、一つ一つ覚えていきましょう。

それぞれの詳しい説明は別記事を作って解説いたします!

関連記事

affinger5

AFFINGER5 モバイル用ロゴを中央寄せ&サイズ調整 CSSコピペでOK!

AFFINGER5を使っている方、ロゴ画像の大きさや配置に悩んでいませんか?
今回はモバイル用ロゴ画像の設定の仕方や、大きさ・配置・背景色の設定方法を図解で丁寧に解説しています!!

eyecatch画像

affinger5

【affinger5】Twitterのブログリンクを画像付きにするには? Twitter カードを解説

ツイートのリンクを目立たせる機能”Twitterカード”について丁寧に解説しています!
affinger5のテーマを使っている方向けの記事となっています。
ブログ初心者の方(わたし)がつまずくところだと思います。参考にしてください。

よく読まれている記事

プロジェクターアイキャッチ 1

10万円で手が届く、高画質・高機能のプロジェクターの選び方、おすすめの商品を紹介しています。
解像度、コントラスト、明るさ、機能性、値段などからあなたに最適のプロジェクターを紹介します!
最近増えてきた、モバイル用プロジェクターや変わり種も!

motorscooter_eyechatch 2

当サイトの運営はエックスサーバー で行っております。 悩んでる人日常の足になるような電動バイクってどんな種類がある? 通 ...

vezel_eyecatch 3

ツイートのリンクを目立たせる機能”Twitterカード”について丁寧に解説しています!
affinger5のテーマを使っている方向けの記事となっています。
ブログ初心者の方(わたし)がつまずくところだと思います。参考にしてください。

eyecatch 4

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

-affinger5
-,

Copyright© りくぶろぐ ~ブログ×ガジェット×モビリティ~ , 2020 All Rights Reserved Powered by AFFINGER5.