AFFINGER5

AFFINGER5(WING)のカスタマイズまとめ!スライドショーやヘッダーメニューの設置方法など紹介

AFFINGER5(WING)のカスタマイズの方法を紹介!

質問者
高いお金を払ってAFFINGER5をインストールしたけど、やれることが多すぎてまず何から手を付けたらいいかわからない!

 

僕もそうでしたがAFFINGER5をインストールしたとき、なにをどうしたらいいか全くわかりませんでした。

 

そこで今回はブログを始める際にやっておいた方がいいカスタマイズ、記事が増えてきたらやった方がいいカスタマイズについて紹介していきます!

 

AFFINGER5の公式サイトはこちら

 

1.トップページの作成

AFFINGER5 カスタマイズ まとめ

トップページはブログの顔です!

 

Google AdSenseを合格するためにも、見やすいページにする必要があるのでやっておきましょう。

 

作成の方法はこちらの記事で紹介しています!

【AFFINGER5】トップページのカスタマイズ方法を紹介!
【AFFINGER5】トップページのカスタマイズ方法を紹介!

続きを見る

 

1-1.スライドショーの設置

スライドショーとはこれです。

AirPods Pro (1)

2020/9/25

AirPods Pro(エアーポッズプロ)をレビュー!充電用のアダプタが同封されてないので注意!

2019年10月30日に発売された「AirPods Pro(エアーポッズプロ)を購入しました!   ワイヤレスイヤホン&ノイズキャンセリングを今まで使ったことがない人間がAirPods Proを使うとどんな風に感じるのかをレビューします! もくじAirPods Pro(エアーポッズプロ)の外観AirPods Pro(エアーポッズプロ)のサイズと重量附属品注意!充電用のアダプタが同封されてないAirPods Proの充電方法Lightning-USB-Aケーブルを使用USB‐C規格のアダプ ...

ReadMore

【ColorPick Eyedropper】 Webサイトで使われている色を調べる方法

2020/9/21

Webサイトで使われている色を調べる方法【ColorPick Eyedropper】

質問者気になるサイトの色使いを参考にしたいけど、何の色を使っているかわからない   今回はWebサイトで使われている色を確認することが出来るColorPick Eyedropperの使い方を紹介していきます!   もくじWebサイトで使われている色を調べる方法ColorPick Eyedropperのインストール方法ColorPick Eyedropperが表示されない場合ColorPick Eyedropperの使用方法Webサイトで使われている色を調べる方法【ColorPick E ...

ReadMore

【WordPress】 TinyMCE Advancedでテーブルの 背景色を変更する方法!

2020/8/8

【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法!

ビジュアルエディターの拡張機能としてよく使われるTinyMCE Advanced。   TinyMCE Advancedを使うと表(テーブル)が簡単に設置することが出来ます。   今回は表(テーブル)の背景色を変更する方法を紹介します! もくじTinyMCE Advancedでテーブルを表示する方法表の挿入方法テーブルの背景色の変更行の背景色の変更セルの背景色の変更【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法のまとめ TinyMCE Advan ...

ReadMore

人気ブロガー達が 使っているテーマは?

2020/8/30

人気ブロガー達が使っているテーマは?皆さんは知っているあのブロガーのテーマを調べてみました!

今は様々なインフルエンサーと呼ばれるブロガーさんがいます。   そのブロガーさんたちがどんなWordPressのテーマを使用しているか気になりませんか?   今回はこちらの記事で紹介しているWPSNIFFERを使用して有名ブロガーが使用しているテーマを調べてみました!   もくじマクリン|マクリン今日はヒトデ祭りだぞ!|ヒトデクロネのブログ講座|クロネTsuzuki Blog|Tsuzukiかえるのしっぽ|びびZOOLOG|ズーキーNOJI BLOG|NOJI副業コンパス|ク ...

ReadMore

AFFINGER5を半年使ってみた感想レビュー|メリット&デメリットを紹介!

2020/9/25

AFFINGER5を半年使ってみた感想レビュー|メリット&デメリットを紹介!

AFFINGER5を使ってブログを始めて半年がたちました。   そこで今回はこれからAFFINGER5を購入しようかどうか迷っている方に向けて、メリットとデメリットをそれぞれ3つずつ紹介してきます!   AFFINGER5購入サイト   もくじAFFINGER5のメリットAFFINGER5のメリット カスタマイズの自由度が高いAFFINGER5のメリット Googleアドセンスの設置が楽AFFINGER5のメリット 多彩なタグAFFINGER5のデメリットAFFINGER5の ...

ReadMore

僕は新着記事にスライドショーを設定していますが、普通の文字だけのトップページと違い動きがあります。

 

このような機能を入れると他のサイトとの区別にもなるので積極的に導入していきましょう!

【AFFINGER5】スライドショーの設定方法を紹介!
【AFFINGER5】スライドショーの設定方法を紹介!

続きを見る

 

1-2.タブ(切替ボタン)の設置

タブ(切替ボタン)とはこれのことです。






タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

タブ4のコンテンツ


タブ(切替ボタン)の最大のメリットはスクロール量を少なくできることだと思っています。

 

こちらの記事ではタブ(切替ボタン)の設置方法、色などのカスタイマイズ方法を紹介しています!

 

2.ヘッダーのカスタイマイズ方法の解説

ヘッダーとは主にサイトタイトルやメニューバーなどページの上の部分のことを指します。

AFFINGER5 カスタマイズ

 

今回解説は以下の4つについて紹介します!

  • サイトタイトルとキャッチフレーズの設定とカスタマイズ方法
  • サイトタイトルを左寄りから中央揃えにする方法
  • ヘッダーメニューの設定
  • おすすめヘッダーカードの設定方法

2-1.サイトタイトルとキャッチフレーズの設定とカスタマイズ方法

サイトタイトルキャッチフレーズとはこれのことです。

【AFFINGER5】サイトタイトルとキャッチフレーズの設定方法

  • サイトタイトル:kane blog
  • キャッチフレーズ:理学療法士がブログを始めました

あまりいじることがない部分だとは思いますが、サイトの顔になる大切な部分です。

 

よく考えて設定していきましょう!

 

これらの設定方法とカスタイマイズ方法をこちらの記事で紹介しています!

 

2-2.サイトタイトルを左寄りから中央揃えにする方法

先ほど紹介したサイトタイトルですがデフォルトでは左寄りになっています。

【AFFINGER5】サイトタイトルを左よりから中央揃えにする方法

 

左寄りは設定を変えることで中央揃えに変更できます。

【AFFINGER5】サイトタイトルを左よりから中央揃えにする方法4

 

やり方はこちらの記事で紹介しています!

 

2-3ヘッダーメニューの設定

ヘッダーメニューとは、ブログにどんなカテゴリーがあって、そのカテゴリーではどんな記事が書かれているかを見ることができるものです。

 

僕のブログで言うこれです。

AFFINGER5 メニュー

 

設定すると訪問者が目的の記事を見つけやすいため設定するのをおすすめします!

【AFFINGER5】 ヘッダーメニュー(グローバルメニュー)の設置方法を紹介!
【AFFINGER5】ヘッダーメニュー(グローバルメニュー)の設置方法を紹介!

続きを見る

 

2-4.おすすめヘッダーカードの設定方法

トップページや記事の上(ヘッダー)の部分におすすめのカテゴリーや記事を設定できます。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!9

ヘッダー部分は多くの人の目にふれるため渾身の1記事ブログを代表するカテゴリーなどを表示させるとみてもらえる機会が増えるかもしれません。

 

設定は簡単にすることができるので是非設定をしてみてください!

 

やり方はこちらの記事で詳しく説明しています。

 

3.サイト管理者紹介(プロフィールカード)

AFFINGER5 プロフィール

サイト管理者紹介とは、このブログを運営している人はどんな人かを紹介するものです。

 

簡単に言えば管理者の自己紹介をするところです。

 

皆さんはブログを読むとき、だれが書いたかわからないブログよりはしっかりとわかるブログを読みたいと思いませんか?

 

こちらも最初に設定しましょう。

 

【AFFINGER5】サイト管理者紹介(プロフィールカード)を設定する方法
【AFFINGER5】サイト管理者紹介(プロフィールカード)を設定する方法

続きを見る

 

3-1.プロフィール画像

合わせて、プロフィール画像も設定しましょう!

 

プロフィール画像とは僕のこれです。

 

できれば顔がいいです。今は3000円程度お金を払えばイラストレーターさんが書いてくれるので、自撮りはちょっとという方はお願いしてもいいかもですね!

 

ちなみに僕は「ココナラ」というサイトを使用してイラストレーターさんに書いてもらいました!

【AFFINGER5】Gravatarやプラグインいらず!プロフィール画像(アバター画像)を設定する方法を紹介!
【AFFINGER5】Gravatarやプラグインいらず!プロフィール画像(アバター画像)を設定する方法を紹介!

続きを見る

 

4.おすすめ記事の設定方法

AFFINGER5おすすめ記事

 

これは記事数が増えてきたらでいいとは思います。

 

いくつか記事を書くと人気のある記事、この記事をみんなに読んでほしい!と思う記事ができると思います。

 

そんな時はおすすめ記事としてサイドバーに設定して、訪問者に読んでもらいやすくしましょう!

 

【AFFINGER5】おすすめ記事の表示方法について紹介!
【AFFINGER5】おすすめ記事の表示方法について紹介!

続きを見る

 

5.Twitterカード

Twitterカード

 

書いたブログをみんなに見てもらいたからTwitterも始めたけど、みんなみたいに画像が出るんじゃなくてURLだけになっちゃう。

 

という方はこちらの記事を読んでください。

【AFFINGER5】Twitterカードの設定方法を紹介!WordPressでブログをやっている方向け
【AFFINGER5】Twitterカードの設定方法を紹介!WordPressでブログをやっている方向け

続きを見る

 

AFFINGER5であれば簡単に設定ができます。

 

6.Googleアドセンス広告の貼り方

Googleアドセンスに合格した方は広告を貼ることが出来ますがどうやったらいいのかわからないと思います。

 

広告を貼るにはコード取得コードをウェジェットやAFFINGER5管理に設定するのが必要になります。

 

下記の記事ではそれぞれのやり方について紹介しています!

Googleアドセンス広告のコードを取得する方法を紹介!
Googleアドセンス広告のコードを取得する方法を紹介!

続きを見る

【AFFINGER5】Googleアドセンス広告の設置方法のまとめ!
【AFFINGER5】Googleアドセンス広告の設置方法のまとめ!ダブルレクタングルやインフィード広告など

続きを見る

 

参考

まだGoogleアドセンスに合格してない方は、こちらの記事で合格をするまでにした方が良いことを紹介しているのでご覧ください!

 

7.記事一覧のカード型の設定方法




AFFINGER5 記事一覧 カード型

AFFINGER5 記事一覧 カード型2


 

このようなちょっとしたカスタマイズは他のサイトとの差別化にもつながるので是非やってみてください!

 

4980円する子テーマJETやCSSを使えば簡単に設定できますが、お金に余裕がない方やCSSをいじるのは怖いという方はやり方をこちらの記事で紹介していますのでご覧ください!

 

8.会話吹き出しの設定方法とカスタイマイズ方法

質問者
会話吹き出しはこれのことです。
アイコンのサイズ、背景、枠線の有無などを変えることが出来ます。
カピパラ

 

それぞれ以下の様な方法で可能です。

  • 設定:タグ→会話ふきだし
  • カスタイマイズ:AFFINGER管理→会話・ファビコン等

 

詳しいやり方は【AFFINGER5】会話吹き出しの設置方法とカスタマイズ方法という記事で紹介しているので参考にしてみてください。

 

9.AFFINGER5(WING)のカスタマイズまとめ!スライドショーやヘッダーメニューの設置方法など紹介のまとめ

今回はAFFINGER5のカスタマイズについて紹介しました!

 

最初はやることが多すぎて迷うかと思いますが慣れれば簡単です!

 

ある程度のカスタマイズは必要ですが、カスタマイズがある程度できたらあとは記事をどんどん書いていきましょう!

 

では、また次の記事で会いましょう!!

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.