ブログ

とりあえず7つ!AFFINGER6初期設定マニュアル(Gutenberg対応)

AFFINGER6 初期設定

https://aokibosai.jp

お悩みタマスケ
お悩みタマスケ
AFFINGER6のインストールまで終わったけど‥こっからの初期設定どうすりゃいいの!?
とりあえずブログ書き始めるための「外側」の初期設定7つを、当ページを例に紹介していきますね!
管理人

 

AFFINGER6初期設定マニュアル(Gutenberg対応)

①サイトの色

サイトの色は細かく設定できますが、まずは簡単に一括で設定してしまいましょう。

[WordPress管理画面]⇒[AFFINGER管理]⇒[全体設定]⇒[カラーパターン]で、おおまかにサイト全体の色調を指定できます。

AFFINGER カラー設定

画家タマスケ
画家タマスケ
いやアンタ、青木防災㈱ページ「赤(エレガント)」って一番メジャーな設定やんか。
実はAFFINGER5から6にアップデートしたときにリセットされたんですよ‥そのままにしてます。
管理人

ちなみに細かいカラー設定は[外観]⇒[カスタマイズ]と進み、[🔰全体カラー設定]等で変更できます。

AFFINGER6 全体カラー設定

他にも例えば、基本的な8つの会話ふきだしの色設定であれば[オプション(その他)]⇒[会話ふきだし]で変更することができます。

会話ふきだし 色変更

二宮タマスケ
二宮タマスケ
お前ホンマ吹き出し好きやなぁ‥ちなみに今って、吹き出し何種類あんの?
113種類。(※千鳥のノブがInstagramのフォロワー数を答える時の速さで読む。)
管理人

 

②サイトロゴの設置

サイトロゴは[外観]⇒[カスタマイズ]⇒[ロゴ画像 / サイトのタイトル]で設定します。

AFFINGER ロゴ画像

ちなみに、弊社のロゴ画像はランサーズを利用して作成を依頼しました。

不安タマスケ
不安タマスケ
青木防災㈱のロゴ超カッコイイ!‥でも、お高いんでしょう?
発注する際に予算も選べますよ!‥弊社は予算が¥50,000円だったので、それで。
管理人

無料もしくは割安でロゴ画像を作成するなら、Canva(無料)がオススメです。

☟調べたところ、何と「7,463点のテンプレート」のロゴがあるとのこと‥スゴッ。

Canva ロゴ

Canva

 

③メニュー

メニューバーの作り方は[外観]⇒[メニュー]と進みます。

メニューバー 青木防災㈱

まず、下へスクロールして「メニュー設定」のヘッダメニューとスマホスライドメニューにチェックを入れましょう。

AFFINGER メニューバー

メニューの項目をメニュー構造に追加していくのですが、そもそも固定ページを作成していないと表示するメニューがありません。

AFFINGER 固定ページ

よって、メニューに何を表示させるかを決めて固定ページを作ってから、メニューの設定を再度行うことになるでしょう。

とりあえず、今ある固定ページをチェックして「メニューに追加」をクリックして保存すればメニューバーに表示されます。

AFFINGER メニュー 設定

 

④ ヘッダー下の画像4つ

青木防災㈱ページにも表示してあるメニューバー下の画像4つについては[AFFINGER管理]⇒[ヘッダー下 / おすすめ]へ進みます。

ヘッダー下オススメ画像 AFFINGER

こちらもリンク先のページを作成しなければ見かけだけの操作になりますが、画像の「アップロード」をしてみましょう。

メディア 追加 AFFINGER

メディアを追加の画面へ任意の画像をドラッグ&ドロップすると画像データが入るので、その「ファイルのURL」をコピーして「画像のURL」欄にペーストします。

画像URL WordPress

ちなみに、ここで使用している画像は「ODAN」という画像サイトで無料ダウンロードできるものを使用しています。

ODAN(https://o-dan.net/ja/)

大阪のオバタマ
大阪のオバタマ
無料画像サイトのオーダン?‥ほんならウチはOBAN(オバン)やで!
マダムの自虐はさておき、ODANめちゃ多用するので本当にオススメ。
管理人

 

⑤ トップページのデザイン(Gutenberg対応)

トップページは「固定ページ」を編集して表示すると楽ですので、当サイトと同様にその方法を紹介します。

step
1
[固定ページ]⇒[新規追加]で固定ページ作成画面へ進む。

タイトルは何でもいいですが、分かりやすいので当サイトと同じ「トップページ」としておきましょうか。

AFFINGER 固定ページ作成

step
2
H3の見出しで「新着記事」と記入する。

Gutenberg H3 見出し

その後、右下の「+ ブロックを追加」ボタンをクリックします。

Gutenberg ブロックを追加

step
3
「クラシック」を表示して、「タグ」からショートコードを入力。

ブロックを追加で表示された中から、「クラシック」をクリック。

クラシック Gutenberg

クラシックで表示されたバーの中にある「タグ」のボタンをクリック。

クラシック Gutenberg タブ

[記事一覧 / カード]⇒[カテゴリ一覧]をクリック。

カテゴリ一覧 AFFINGER

すると、以下の様なショートコードが表示されます。

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

例えば、表示するブログの数を増やしたいのであればショートコード内の「page="5"」の5を任意の数に変更すればOKです。

AFFINGER 新着記事 作成

☝この部分が、できあがりました。

step
4
「おすすめ記事」欄を作成する

続いて上記と同じくH3見出しで「おすすめ記事」と入力します。

AFFINGER カラム50%

[レイアウト]⇒[全サイズ]⇒[左右50%]と移動して、クリックするとページを二分割するカラムが表示されます。

step
4
カラム内にバナーを作成

カラム内の片側で “このテキストは最後に消して下さい(50%)” から改行して、下の部分に[ボックスデザイン]⇒[バナー風ボックス]⇒[基本]を追加します。

バナー風ボックス AFFINGER

すると、以下の様なショートコードが表示されます。

[st-flexbox url="" rel="nofollow" target="" webicon="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0" myclass=""]

[/st-flexbox]

両側のカラムにバナー風ボックスのショートコードを入力し、タイトルや背景画像「backgroud_image=""」を変更します。

背景画像変更の “” 箇所には画像のURLを入力します。

バナー風ボックス AFFINGER

step
5
ブログカードを並べる

続いて[カード]をクリックして、ブログカードを表示します。

ブログカード AFFINGER

すると、以下の様なショートコードが表示されます。

[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]

[/st-flexbox]

ショートコード内の「id=""」の欄には、表示させたいブログ毎に割り振られる記事idを入力します。

ブログカード ショートコード

「readmore="off"」に変更すると[続きを読む]ボタンが非表示になります。

おすすめ記事 AFFINGER

☝上記の操作を繰り返すと、この部分が仕上がります。

 

そして出来上がった固定ページをトップに表示させる為に、WordPress管理画面の「設定」⇒「表示設定」へと進み、そこの「ホームページの表示」というところで「固定ページ」を選択します。

トップページ 固定ページ 表示

「ホームページ」のタブ内を、先ほど作った固定ページに設定することで、トップページを表示させることができます。

 

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

サイドバーウィジェットは、青木防災㈱ページでいう右側の部分になります。

青木防災㈱ サイドバーウィジェット

サイドバーウィジェットの編集をするには[外観]⇒[ウィジェット]を開きます。

サイドバーウィジェット AFFINGER

左側の「利用できるウィジェット」の中から、追加したいものを「サイドバーウィジェット」の中へドラッグ&ドロップします。

プロフィールカードの編集方法については、WING公式マニュアルをご覧下さいませ。

ちなみに当サイトの様に、サイドバーウィジェットに表示するプロフィールカードと記事末尾の「この記事を書いた人」を別々にしたい場合は、例えばタマスケ広報課長(6)とアオキ シュンスケという2つの管理者を設定してログインすることで設定できます。

プロフィールカード 別々

 

⑦ファビコンの設定

ファビコンとは、ブラウザのタブ等に表示される小さいサイトのアイコンのことです。

ファビコン AFFINGER

[外観]⇒[カスタマイズ]⇒[サイト基本情報]へと進むと、ファビコンをアップロードできます。

画像をファビコンのサイズにしてくれる無料のサイトは幾つかありますが、当サイトは「ファビコンを作ろう!」で生成しました。

以上の7つを完了すれば、とりあえず「外観」だけは青木防災㈱ページっぽくなるはずです。


トルコタマスケ
ほな、続いて‥サイトの中身こしらえていきましょか!
ちょっとタイム、疲れた!‥ちょっと休憩させてくれ。
管理人

やること沢山ありますが、一歩ずつ前に進んでいきましょう!

 

◎ まとめ

  • AFFINGER6のインストールまで終わった方向けに、とりあえずブログ書き始めるための「外側」の初期設定7つを、当ページを例に紹介した。
  • 「サイトの色・ロゴの位置・メニュー・ヘッダー下の画像4つ・トップページのデザイン(Gutenberg対応)・サイドバーウィジェットの追加・ファビコンの設定」の計7項目で外観のみ青木防災㈱サイトに近づける方法をまとめた。
  • この初期設定を終えてからブログ記事や固定ページを増やしていくと、より本格的なサイトにできた。
  • この記事を書いた人

管理人

【経歴】鈴鹿高専材料工学科 ⇒ 静岡大学工学部(3年次編入学) ⇒ 院 ⇒ 鈴与㈱ ⇒ 青木防災㈱【保有資格】消防設備士全類・第二種電気工事士・工事担任者(AI・DD総合種)・第三種電気主任技術者【主な活動】月刊誌「電気と工事(オーム社)」コラム執筆・ブログ(月間25万PV)・Twitter企業アカウント(フォロワー数3.2万人)の運営

-ブログ