多くのブロガーが設置しているサイドバーの人気記事。
おすすめ記事の表示がある事で、ユーザーに興味を持ってもらい、別記事へのアクセスやブログの滞在時間を伸ばしてもらう事に繋がります。
それを可能にしてくれる、人気なプラグインは「WordPress Popular Posts 」です。アフィンガー利用者でも、このプラグインをおすすめしている方は多くおられますが、このプラグインはとにかく重いのです。
管理人もWordPress Popular Postsを一時期利用していましたが、設定いじって対策してもサイトは重くなるし、きちんと表示されないこともあり、大変ストレスでしたので削除しました。
そして現在は、アフィンガーの機能を使って、人気記事をサイドバーに表示させています 。
今回はその方法をご伝授します。AFFINGER（アフィンガー）はせっかくの有料テーマですので、フルに活用していきましょう。
このブログは「AFFINGER」を使用しています
おすすめ記事サイドバーへの表示方法(追尾させない) ダッシュボードの「AFFINGER管理」＞「ヘッダー下/おすすめ」＞「おすすめ記事一覧」
「任意の人気記事を指定（投稿又は固定記事ID）」に、表示させたい投稿記事のIDを記入してください。複数指定する場合は半角カンマ「,」で区切ってください。
投稿記事IDはダッシュボードの「投稿」＞「投稿一覧」から確認できます。
AFFINGERには人気記事(おすすめ記事)の自動作成機能はありません。このように、手動で作成しなければなりません。
アクセスが多いページは、Googleサーチコンソールなどにて確認できますし、手動であることで本当に読んでほしい記事を表示させることができるメリットがあります。
手間と思われる方もおられるかもしれませんが、利点もしっかりと生かしておすすめ記事を作成していきましょう。
表示させたい投稿記事のIDを記入しましたら、「save」のクリックをお忘れなく。
続いて、ダッシュボードの「外観」＞「ウィジェット」 を開いてください。
「STINGER カスタムHTML」を、サイドバーウィジェットに追加してください。
該当ウィジェットを開き、「タイトル:」には「人気記事」「アクセスランキング」などと記載したら分かりやすいです。
「内容:」には以下のコードを入力してください。
[st-osusume]
このコードは、AFFINGERのおすすめ記事表示用のショートコードです。こちらを使うことで、おすすめ記事ランキングを任意の場所に表示させることができるのです。
最後に「保存」をクリックしてください。
以上でサイドバーに人気記事がランキング形式で表示されるようになります。確認されてみてください。
※ランキング形式ではな い 、番号無しで表示させる方法は後述します。
おすすめ記事をサイドバーで追尾させる方法 当サイトでは、サイドバーのスクロール追尾箇所には記事の目次を表示しているので、上記のようにおすすめ記事をただサイドバーに置く方法をご伝授しました。
中にはおすすめ記事を追尾させたい方もおられると思いますので、その方法をご説明します。
ダッシュボードの「AFFINGER管理」＞「ヘッダー下/おすすめ」＞「おすすめ記事一覧」
「おすすめ記事一覧に表示する文字」にタイトルを記入します。(「人気記事」「よく読まれる記事」など) 表示させる投稿記事のIDを記入 「 サイドのスクロールに表示にする（抜粋非表示）」にチェックを入れてください。 これだけで、スクロールしても追尾するおすすめ記事が反映されるのです。
おすすめ記事の見出しについて 追尾させないでサイドバーに置く設定の際、おすすめ記事のタイトルを、ウィジェットのほうに設定しましたが、これは他のサイドバータイトルと統一感を出すためです。
AFFINGER管理でタイトルを設定しますと、以下のような装飾のタイトルになります。
こちらも可愛くて素敵なので、どちらが良いかはお好みで設定されてください。
おすすめ記事のカラー変更方法 ダッシュボードの「外観」＞「カスタマイズ」＞「オプション(その他)」＞「おすすめ記事」
こちらから6カ所のカラーを経変更することができます。
①見出し文字色
一番下の「ナンバーを非表示」にチェックをいれると、番号無しの表示になります。
ランキング形式にしたくない場合は、こちらにチェックを入れてください 。
完了しましたら上部の「公開」をクリックして保存してください。
アフィンガーでおすすめ記事をサイドバーの好きな場所に設置する方法 まとめ 今回、アフィンガーでおすすめ記事を表示させる方法を、ご紹介しました。
方法１．サイドバーの任意の場所に置く 方法２．サイドバーで追尾させる カラーの変更や番号の有無を決める。 プラグインを使用しない分、サイトに負担がかからないので、お勧めな方法です。ぜひ設定されてください。
サイドバーを整えよう！ サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。
現在管理人は、ユーザビリティ向上を第一に、以下の項目をサイドバーに置いています。
検索ウィジェット おすすめ記事 プロフィール カテゴリー タグ 目次 最新記事
アフィンガーでプロフィールカードを作る｜サイドバーを整えよう
サイトの右側のサイドバーにある自己紹介の欄。 こちらをプロフィールカードといいますが、アフィンガーでは、プラグインなしにおしゃれで見やすいプロフィールカードを作ることができます。 今回はアフィンガーの機能をつかったプロフィールカードの作り方をご紹介していきます。 プロフィールカードの自己紹介文の装飾方法も、徹底紹介しています。ぜひご参考ください。 アフィンガーでプロフィールカードを作る 概要 手順は以下の通りです。 ①プロフィール画像・ヘッダー画像の設定 WordPressダッシュボードの「外観」＞「カス ...
ReadMore
アフィンガーでサイドバーをデザインする方法を徹底解説！
サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。 現在管理人は、ユーザビリティ向上を第一に、以下の項目をサイドバーに置いています。 検索ウィジェット おすすめ記事 プロフィール カテゴリー タグ 目次 最新記事 この記事では、上記のうち「カテゴリー」「タグ」「検索ウィジェット」などを置く方法、サイドバーウィジェットのタイトルカラーの変更方法をお伝えします。 アフィンガーでサイドバー作成の概要 プロフカードを設置す ...
ReadMore
アフィンガーでおすすめ記事をサイドバーの好きな場所に設置する方法｜プラグイン使用なし！
多くのブロガーが設置しているサイドバーの人気記事。 おすすめ記事の表示がある事で、ユーザーに興味を持ってもらい、別記事へのアクセスやブログの滞在時間を伸ばしてもらう事に繋がります。 それを可能にしてくれる、人気なプラグインは「WordPress Popular Posts」です。アフィンガー利用者でも、このプラグインをおすすめしている方は多くおられますが、このプラグインはとにかく重いのです。 管理人もWordPress Popular Postsを一時期利用していましたが、設定いじって対策してもサイトは重 ...
ReadMore
アフィンガーでおしゃれなトップページを作る｜ブロックエディタでの作り方を解説
AFFINGER6（アフィンガー6）を購入したかたは、せっかくの有料テーマですので、それを生かした素敵なトップページをつくりたいと考えていると思います。 クラシックエディターを使った方法が上位表示されていますが、当ブログでは、ブロックエディターのみを用いたアフィンガーでのトップページの作り方をご紹介していきます。 現在のトップページは、すべてブロックエディターで作り上げました。ご参照ください。 前置きはそこそこに、早速作っていきましょう！ このブログは「AFFINGER」を使用しています アフィンガーでト ...
ReadMore
Table of Contents Plusで見やすいブロブにカスタマイズする｜アフィンガー環境で快適目次
「Table of Contents Plus」は記事に目次を表示できるWordPressプラグインです。 今回はTable of Contents Plusを用いて、AFFINGER(アフィンガー)環境化でスマホに目次に戻る項目を表示させる方法と、実装したカスタムをご紹介します。 このブログは「AFFINGER」を使用しています 概要 使用するプラグイン Table of Contents Plus(無料) Widget Options(無料) 使用環境 Affinger(アフィンガー6) 記事のの内容 ...
ReadMore
アフィンガー｜「目次に戻る」をスマホの固定フッターメニューの中に入れる
今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次に戻るボタン」なのです。 今回は、フッターの中に「目次に戻る」項目を作っていきたいと思います。 フッターメニューに入れることで、追従してくれますのでとても便利です。 この記事を読めば、以下の動画のようなことができるようになります。 まだ、スマホに固定するフッターメニューを設置していない方は、こちらご参照くださ ...
ReadMore
UpdraftPlusで自動バックアップから復元方法を解説｜保存先はGoogleドライブ
UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp-content ディレクトリと、WordPressを丸ごとバックアップして、復元までプラグインで行えます。 WordPressのデータをバックアップとして有名なプラグイン「BackWPup」がありますが、BackWPupの復元はFTPでファイルアップロードして、phpMyAdminでデータベースを復元する手順 ...
ReadMore
アフィンガーでヘッダーカードを作る｜設定と表示の方法を徹底解説
AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。 作成方法【簡易版】 どのようなヘッダーカードを作るか、構想を練る ヘッダーカードの背景画像を作る(canvaなど) ヘッダーカードの挿入と設定(デザインや文字入など) ヘッダーカードの背景を変更する(必要な場合のみ) どのようなヘッダーカードを ...
ReadMore
ブログの作り方(アフィンガー)｜当ブログのサイトマップ
ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 おすすめサーバー「スターサーバー」 スターサーバーのメリット・デメリット 当ブログでも愛用していますレンタルサーバー「スターサーバー」の、メリット・デメリット、その機能や料金についてまとめた記事です。 スターサーバーの契約方法・設定方法 スターサーバーの契約方法や、設定するべき項目を網羅して解説しています。 独自ドメインからメールアドレスを作成する スターサーバーを契約し、独自ドメイン ...
ReadMore
Contact Form 7の問い合わせフォーム作成方法と使い方を紹介
ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイト Contact Form 7の導入方法と、問い合わせフォームを作成する方法を紹介します。 下記のようにお問い合わせフォームを作り、サイトのフッターメニュー（ブログの最下部エリア）に設置していきます。 Contact Form 7の使い方【簡易】 Contact Form 7をインストール・有効化 お問い合 ...
ReadMore
スターサーバーのメリット・デメリットと、性能や料金を徹底紹介
月額138円～という格安でありながら、高性能サーバーであると言われているスターサーバー。 日本マーケティングリサーチ調べでは、 WordPress 利用者注目度・ブロガー&アフィリエイター満足度・レンタルサーバー初心者満足度No.1を記録しています。 管理人も、スターサーバーを利用してこのブログを運営しています。 この記事では、スターサーバーの機能や料金まとめ、メリット・デメリットをお伝えします。 ＼スターサーバーの公式サイト／ スターサーバー機能一覧 無料お試し２週間は、全プラン対象 ...
ReadMore
スターサーバーの契約方法・設定方法を徹底解説
この記事ではスターサーバーを使い、ワードプレスの設定方法を初心者でもわかりやすいようにお伝えします。 スターサーバーのメリット・デメリットについては、こちらの記事をご参照ください。 スターサーバーの有料プランを契約すると、独自ドメインが無料で作成することができます。 また、スターサーバーは各サーバーの中でもお得な値段設定ですので、費用を抑えてブログを始めてい方には、うってつけです。 管理人も、スターサーバーの安さと設定のしやすさから、契約を決めました。 はてなブログやアメーバーブログなどの、大手ブログから ...
ReadMore
アフィンガー｜スマホのヘッダーやメニューをおしゃれに設定する方法
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」にて、スマホのヘッダーをおしゃれにする方法を、ブログ初心者さん向けに１からわかりやすく解説していきます。 今回紹介する方法で、どのようなデザインになるのか、ご提示します。 デフォルトはシンプルなものですが、好きな画像をヘッダーに置いておしゃれで個性的なデザインにしていきましょう。 操作方法（簡易） スマホヘッダーメニューの表示設定 スマホのヘッダーメニューを作成する スマホヘッダーメニューのカテゴリー追加 スマホヘッダーエ ...
ReadMore
投稿タグを選択式（チェック）にする｜らくらくタグ設定
投稿記事の作成編集ページのタグは、フリー記述方式なので、タグの入れ漏れがある可能性があります。 管理人も、どんなタグ前に作ったっけ？と、確認しながら入力していました。 しかしながら、そのような面倒な作業はもう必要ありません！ この方法を使うことで、以下のようになるのです。 予め作ったタグを一覧表示にし、その上選択式になります。 このようにすることで、投稿編集ページで確認しながら簡単にタグをつけることができます。 プラグイン無しで、コードの貼付けのみで実装できますので、手軽です。 それでは、タグを選択式にす ...
ReadMore
AFFINGERでヘッダーを個性的でおしゃれにする方法
有料テーマのAFFINGERを購入したからには、デザインに優れた機能をつかい、かっこいいブログにしたいところです。 今回は、AFFINGER6のヘッダーエリアと、ヘッダーメニューエリアを個性的でおしゃれにする方法をお伝えします。 AFFINGER6のデフォルト状態のヘッダーと、今回紹介するカスタマイズ方法を利用したヘッダーの完成イメージを提示します。 ▼▼▼▼▼ 何ということでしょう、シンプルでザ・デフォルト ...
ReadMore
WING（AFFINGER6 ver）
デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。
WING（アフィンガー6）公式サイト
月額料金がライトプランで220円〜（税込）なので、コスパよく爆速なサイト運営が可能に！
管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです！
＼ Twitterでも口コミ良好！ ／
スターサーバー公式サイト
