ブログ運営

【AFFINGER (アフィンガー)】このブログのカスタマイズ状況を紹介

投稿日:2017年10月7日 更新日:

このブログのカスタマイズについて聞かれることが多かったので記事にしてみました。

もしブログが壊れた際に戻せるよう、自分の備忘録の意味も込めて・・・。

 

使用テーマ 「Affinger」

このブログでは有料の WordPress テーマであるAffingerを使用しています。

無料テーマが溢れている中で、9,800 円とそこそこの価格の有料テーマを使うことに抵抗はありましたが、有料なりに大きなメリットがあります。

 

まず自分のシステム運用方針としてWordPress を過度にイジりすぎるのは好きじゃないというのがあります。

 

WordPress 自体はカスタマイズ範囲がほぼ無限大で、本気を出せばどんなカスタマイズも可能です。

ですが調子に乗って php や css を変更しまくってしまうと、変更箇所がわからなくなってしまい、システムトラブルなどでゼロから復旧させないといけないようなことになった場合、元の状態に戻すのが非常に困難になってしまいます。

 

またソースコードに書き加える変更は何かしらシステムに影響を及ぼす恐れがあり、WordPress やプラグインのバージョンアップなどが原因でお互いが動作しなくなるようなことも十分想定されます。

 

そこでソースコードをイジることなく、テーマ設定だけで幅広いカスタマイズが可能なテーマを探していたところ、その条件を満たしていたのがAffingerでした。

 

Affinger の価格の 9,800 円は、自分のブログメンテナンス工数の削減のため、また将来に向けてシステムトラブルを避けるため保険のようなものだと考えています。

 

↓↓当サイト経由なら、800 円引き9,000 円で購入することができます。

AFFINGER4 の購入はこちらCheck!

 

 

 

 

 

紹介する範囲

 

 

 

 

 

カスタマイズ① ヘッダー画像

ヘッダーを設置する効果

 

ブログの看板であるヘッダー画像ですが、このブログではいうところの上記の部分になります。

始めて訪問した人に「おっ!!」と思ってもらえるよう、ヘッダーの設定をしたほうがよいと思います。

 

ヘッダー画像のデザイン

当ブログのヘッダー画像は、おかなおさんに描いていただきました。

OKANAO ILLUSTRATION イラストレーター おかなお

 

当ブログでも以前測定したことがあるのですが、ヘッダー画像を設置するとユーザの視点は格段に違ってきます。

 

ヘッダ設置前

 

ヘッダ設置後

 

ヘッダ配置前はトップページ上部はほとんど見られておらず (青色)、死にエリアとなっていましたが、

ヘッダを配置することでユーザの目を引き (赤色)、領域の無駄遣いをなくすことができました。

 

【ヒートマップ】ブログのデザイン変更を効果測定する

ブログデザインを変更してはや 1 週間ですが、デザイン変更が予想外に効果あったという話です。

続きを見る

 

ヘッダーの設定

PC 版ヘッダーの設定

 

「外観」 > 「カスタマイズ」 > 「ヘッダー画像」

「現在のヘッダー」から「新規画像を追加」でヘッダーにしたい画像を選択します。

 

スマホ版ヘッダーの設定

 

「外観」 > 「カスタマイズ」 > 「ヘッダー画像」

「モバイル用ヘッダー画像」から「画像の変更」でヘッダーにしたい画像を選択します。

 

スマホ用のヘッダー画像を設定しない場合は PC 版の画像が適用されますが、

PC 版の画像をスマホ版でそのまま表示すると、ヘッダー画像内にブログタイトルが含まれている場合、縮小されすぎて見えなくなってしまうため、できれば PC 用ヘッダー画像とスマホ版ヘッダー画像をそれぞれ用意したほうがよいです。

 

このブログのスマホ版ヘッダー画像は、ブログタイトルの文字サイズを大きくし、キャラクターもアップにしたものを使用しています。

 

サイト名、キャッチフレーズを非表示にする

ヘッダー画像内にサイト名・キャッチフレーズ (サイトの説明文) が含まれているため、文字表記を非表示にします。

 

 

 

「AFFINGER4 管理」 > 「ヘッダー設定」

以下にチェックし、「save」をクリックします。

  • 「ヘッダーにサイト名(またはロゴ)を表示しない」
  • 「ヘッダー(及びフッター)にキャッチフレーズを表示しない」

 

 

 

 

 

カスタマイズ② フッター画像

 

各ページの下部にある画像がフッターになります。

これ自体がトップページへのリンクにもなっているので、ページ下部まで来たユーザが簡単にトップページに戻れるようになるため、ユーザ利便性のためにも設置したほうがいいでしょう。

 

フッター画像の設定

 

「外観」 > 「カスタマイズ」 > 「ヘッダー画像」

「フッターロゴ画像」「画像の変更」から設定します。

 

当ブログでは、モバイル版ヘッダーと同様の画像を設定しています。

 

 

 

 

 

カスタマイズ③ メニュー

AFFINGER では PC 版とスマホ版でメニューを出し分けることが可能なため、それぞれのデバイスに適したメニューを設定しています。

 

PC 版メニュー

 

スマホ版メニュー

 

メニューの設定

PC 版メニューの設定

 

まずメニューを作成します。

 

「外観」 > 「メニュー」 > 「新規メニューを作成」

①メニュー名

任意の名前を設定します。

※例: [PC 用メニュー]

 

②カスタムリンク

  • URL: メニューにしたいページの URL

    ※例: [https://toushi-shakkin.com/]

  • リンク文字列: メニューに表示させる文字列

    ※例: [HOME]

入力が終わったら、「メニューに追加」をクリックします。

 

③メニューの位置

以下にチェックを入れます。

  • ヘッダー用メニュー

 

④「メニューを保存」をクリックします。

 

 

つぎに、AFFINGER の設定でメニューの位置を設定します。

 

 

「AFFINGER4 管理」 > 「メニュー設定」 > 「PC用グローバルメニュー」

以下にチェックし、「save」をクリックします。

  • PC用メインメニューを下に表示する(デフォルト) 

 

スマホ版メニューの設定

 

まずメニューを作成します。

 

「外観」 > 「メニュー」 > 「新規メニューを作成」

①メニュー名

任意の名前を設定します。

※例: [スマホ 用メニュー]

 

②カスタムリンク

  • URL: メニューにしたいページの URL

    ※例: [https://toushi-shakkin.com/]

  • リンク文字列: メニューに表示させる文字列

    ※例: [HOME]

入力が終わったら、「メニューに追加」をクリックします。

 

メニュー名の先頭にアイコンを付けたい場合

 

メニュー名の先頭にアイコンを付けたい場合は「リンク文字列」に以下の様に入力します。

 

<i class="fa fa-home" aria-hidden="true"></i><br/>HOME

 

メニューにはWebアイコン「fontawesome」も使用できます。

使用したいアイコンのコードをコピーして以下の様に記述します。

例)ホーム

<i class="fa fa-home" aria-hidden="true"></i><br/>ホーム

例)TOP

<i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>TOP

スマホ用フッターメニューの追加 

 

③メニューの位置

以下にチェックを入れます。

 

④「メニューを保存」をクリックします。

 

 

つぎに、AFFINGER の設定でフッターメニューを有効にします。

 

 

「AFFINGER4 管理」 > 「メニュー設定」 > 「スマホ用アコーディオンメニュー」

以下にチェックし、「save」をクリックします。

  • スマートフォンメニューを表示しない
  • スマホ用フッターメニューを表示する

 

 

 

 

 

カスタマイズ④ フッターメニュー

 

「サイトマップ」「プライバシーポリシー」「お問い合わせ」は、ブログ下部にフッターメニューの形で設定しています。

 

フッターメニューの設定

「外観」 > 「メニュー」 > 「新規メニューを作成」

①メニュー名

任意の名前を設定します。

※例: [フッター 用メニュー]

 

②カスタムリンク

  • URL: メニューにしたいページの URL

    ※例: [https://toushi-shakkin.com/sitemap]

  • リンク文字列: メニューに表示させる文字列

    ※例: [サイトマップ]

入力が終わったら、「メニューに追加」をクリックします。

 

③メニューの位置

以下にチェックを入れます。

  • フッター用メニュー

 

④「メニューを保存」をクリックします。

 

 

 

 

 

カスタマイズ⑤ おすすめ記事

 

おすすめ記事の設定

 

「AFFINGER4 管理」 > 「メニュー設定」 > 「おすすめ記事一覧の作成」

①任意の人気記事を指定

オススメ記事に表示させたい記事の ID を指定します。

 

記事 ID を確認する方法

まず例として、投稿IDを確認する方法を見ていきましょう。管理画面メニューの[投稿]>[投稿一覧]をクリックします。

すると、これまでに作成した投稿の一覧画面が表示されますね。ここで、IDを確認したい投稿のタイトルをマウスオーバー(マウスカーソルを上に重ねる)してみましょう。すると、ブラウザのステータスバーにURLが表示されます。

IDを確認する方法1

このURLの中にある、post=のあとに続く数字が、この投稿のIDになります。

記事ID・カテゴリーIDを確認する方法

 

以下にチェックし、「save」をクリックします。

  • 投稿の記事下に表示にする
  • トップの挿入固定記事下に表示にする

このブログではチェックを入れた 2 箇所にだけ表示させていますが、お好みで場所を変更してください。

おすすめ記事

1

借金返済に追われる日々が続くと、「この苦しみは、完済するまで終わらない」「完済なんて無理だし、一生このまま借金漬けの状態が続く」などと考えてしまいがちです。

-ブログ運営

Copyright© ボクと投資と借金と。 , 2017 All Rights Reserved.