AFFINGER5

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

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

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

 

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

 

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

 

AFFINGER5の公式サイトはこちら

 

1.トップページの作成

AFFINGER5 カスタマイズ まとめ

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

 

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

 

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

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

続きを見る

 

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

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

【F12020】 第5戦70周年記念GP決勝結果

2020/8/10

【F12020】第5戦70周年記念GP決勝結果

F12020シーズン第5戦70周年記念GPの決勝結果です!   今シーズンのスケジュールはこちらの記事で紹介しています! もくじR.5 70周年記念GPGP(シルバーストーン・サーキット) 8/7~8/9サーキット概要F12020シーズン第5戦70周年記念GP決勝結果今なら1か月間無料でF1を視聴可能です! R.5 70周年記念GPGP(シルバーストーン・サーキット) 8/7~8/9 出典:https://sports.yahoo.co.jp/f1/ サーキット概要 開催地:イギリス/シルバース ...

ReadMore

【F12020】 第5戦70周年記念GP予選結果

2020/8/8

【F12020】第5戦70周年記念GP予選結果

F12020シーズン第5戦70周年記念GPの予選結果です!   今シーズンのスケジュールはこちらの記事で紹介しています! もくじR.5 70周年記念GP(シルバーストーン・サーキット) 8/7~8/9サーキット概要70周年記念GP Qualifying170周年記念GP Qualifying270周年記念GP Qualifying3F1を見るならDAZNがおすすめです! R.5 70周年記念GP(シルバーストーン・サーキット) 8/7~8/9 出典:https://sports.yahoo.co ...

ReadMore

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

2020/8/8

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

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

ReadMore

【F12020】 第4戦イギリスGP決勝結果

2020/8/10

【F12020】第4戦イギリスGP決勝結果

F12020シーズン第4戦イギリスGPの決勝結果です!   今シーズンのスケジュールはこちらの記事で紹介しています! もくじR.4 イギリスGP(シルバーストーン・サーキット) 7/31~8/2サーキット概要F12020シーズン第4戦イギリスGP決勝結果今なら1か月間無料でF1を視聴可能です! R.4 イギリスGP(シルバーストーン・サーキット) 7/31~8/2 出典:https://sports.yahoo.co.jp/f1/ サーキット概要 開催地:イギリス/シルバーストーン 全長/周回数 ...

ReadMore

【F12020】第4戦イギリスGP予選結果

2020/8/2

【F12020】第4戦イギリスGP予選結果

F12020シーズン第4戦イギリスGPの予選結果です!   今シーズンのスケジュールはこちらの記事で紹介しています! もくじR.4 イギリスGP(シルバーストーン・サーキット) 7/31~8/2サーキット概要イギリスGP Qualifying1イギリスGP Qualifying2イギリスGP Qualifying3F1を見るならDAZNがおすすめです! R.4 イギリスGP(シルバーストーン・サーキット) 7/31~8/2 出典:https://sports.yahoo.co.jp/f1/ サー ...

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.