AFFINGER

第4回:アフィンガー入門「サイドバーを整える(初心者向け図解で完全案内)」


座ってパソコンを操作する女性

AFFINGER の「サイドバーの作り方(整え方)」を簡単解説します。

購入、インストールが未済の方は、次の記事を参照してインストールしてください。

サイドバーとは

WordPress を使ったサイトのサイドバーとは、サイトの左(または右)に縦に並べた表示エリアのことです。

サイドバーイメージ

サイドバーでは、主に、プロフィールやカテゴリの一覧、おすすめの記事へのリンク、広告などを配置します。

サイドバーは、大きく「サイドバートップ」「サイドバー」「スクロール広告用」の3エリアの分かれています。

サイドバーの構成
サイドバートップサイドバーの上に表示するサイドバーです。
サイドバーサイドバー本体です。
スクロール広告用画面を立てスクロールした場合に、スクロールのほうがサイドバーの縦幅よりも大きい場合、配置したウィジェットを表示し続けるサイドバーです。
追尾型のサイドバーです。

ポイント

「スクロール広告用」 は、縦スクロールバーでページを下に進めても常にサイドバーに表示されるウィジェットの指定になりますので、思わず広告を貼り付けたくなりますが、「追尾型スクロールで広告を表示してはいけない」 とルール付けされている広告もあります ので、ここに広告は貼らないほうが無難です。

サイドバーの作り方

■ サイドバーの作り方①「ウィジェット編集」

ウィジェットでサイドバーを作る画面

WordPress の管理画面から、「外観」 → 「ウィジェット」 を選択します。

左側の青枠部分が選択できる(利用できる)ウィジェット、右側の赤枠部分が配置場所(ウィジェットを表示する対象の場所)です。左から右にドラッグ&ドロップで配置します。(配置を解除する場合は、右から左にドラッグ&ドロップで解除します)

■ サイドバーの作り方②「ライブビューで編集」

ライブビューでサイドバーを作る画面

WordPress の管理画面から、「外観」 → 「ウィジェット」 → 「ライブプレビューで管理」 を選択します。

左側の赤枠内でウィジェットの配置(編集)を行い、右側で実際の表示イメージを確認することができます。

サイドバーの初期化

■ 初期設定されているウィジェットを削除する

サイドバーの初期設定を削除する

サイドバーには、「検索」や「最近のコメント」ウィジェットなどが初期配置されていますので、サイドバーの設定から、各ブロックを削除します。

ブロックを選択して、削除をクリックします。サイドバーの設定を更新したら上部にある「公開」ボタンをクリックすることで設定が反映されます。

■ 新着記事一覧を非表示にする

最新記事一覧を非表示にする設定

AFFINGER6 利用時に初期状態で「最新の記事一覧」が表示設定になっていますので、非表示にします。後から表示に戻すことも可能です。

WordPress の管理画面で、「AFFINGER 管理」 → 「トップページ」 → 「記事一覧」 を選択し、「新着記事一覧を非表示にする」 をチェックします。

トップページのサイドバーの新着記事一覧を非表示にする
チェックします
下層ページのサイドバーの新着記事一覧を非表示にする
チェックします

サイドバーにウィジェットを配置する

サイドバーにウィジェットを配置してサイドバーを作っていきます。

■ プロフィールカードを設定する

プロフィールカードの設置

サイドバートップ(またはサイドバー)から、「ウィジェットを追加」をクリックして、「11_STINGERプロフィールカード」を選択します。

プロフィールカードをサイドバーに設置する

プロフィールカードをサイドバーに設置します。

プロフィールの設定方法

step
1
プロフィールを設定する

プロフィールを設定する

WordPress の管理画面から 「ユーザー」 → 「プロフィール」 を選択し、必要な情報を入力します。

ニックネームプロフィールカードに表示する自分の名前を入力
twitter (URL) ~ amazon (URL)必要に応じて入力
(入力した場合、アイコンを表示します)
プロフィール情報自己紹介文を入力
プロフィール写真プロフィール写真はここでは指定しません

step
2
カードを切り替えてアバターを設定する

プロフィールカードを設定する

WordPress の管理画面から 「外観」 → 「カスタマイズ」 → 「オプション(その他)」 → 「プロフィールカード」を表示します。

旧プロフィールカードに変更このチェックを外すことでプロフィールの形式を変更します。

アバター画像(プロフィールカード)
※ 150 px 以上の正方形の画像推奨
ここでアバターに使用するプロフィール画像を登録します。

step
3
アバターを丸くする

アバターが四角く表示される場合があります。次の設定でアバターを丸く表示します。

アバターを丸くする設定

WordPress の管理画面から 「AFFINGER 管理」 → 「投稿・固定記事」 → 「この記事を書いた人」にて「アバター画像を丸くする(※コメント欄のアバター画像含む)」をチェックします。

step
4
プロフィールカード完成

プロフィールカードの完成イメージ

プロフィールカードの完成です。実際に表示して完成イメージを確認してください。

■ 検索フォームを設定する

検索フォームの設置

サイドバートップ(またはサイドバー)から、「ウィジェットを追加」をクリックして、「検索」を選択します。

検索フォームの設置サンプル

「検索」ウィジェットをサイドバーに設置します。

■ カテゴリーを設定する

カテゴリの設置

サイドバートップ(またはサイドバー)から、「ウィジェットを追加」をクリックして、「カテゴリー」を選択します。

カテゴリーウィジェットの設置サンプル

「カテゴリー」ウィジェットをサイドバーに設置します。

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

AFFINGER テーマにて用意されているウィジェットです。

00_STINGER カスタム HTML任意の HTML コードを表示します。
01_STINGER サイドバーメニューサイドメニューを表示します。項目や並び順は「カスタムメニュー」で設定します。
02_STINGER 問合せボタン問い合わせボタンを表示するウィジェットです。
03_STINGER フリーボックストピックス風の自由なボックスです。
04_STINGER_RSS ボタンRSS 配信用ボタンです。
05_STINGER 最新の投稿一覧新着投稿一覧を表示します。
06_STINGER オリジナルボタンオリジナルボタンを表示するウィジェットです。
07_STINGER お知らせエリアお知らせ一覧を表示します。
08_STINGER カテゴリ別ボックスカテゴリ別に表示を分けるボックスです。
09_STINGER カスタム投稿一覧カスタム投稿一覧を表示します。
10_STINGER 記事別ボックス記事別に表示を分けるボックスです。
11_STINGER プロフィールカードサイト管理者紹介を表示します。
15_STINGER ランキングウィジェットサイドバー用のランキングウィジェット
17_STINGER ガイドマップメニューガイドマップメニューを表示します。
18_STINGER ガイドマップメニューガイドマップメニュー2を表示します。

それぞれのウィジェットの動作は実際に使って試してみてください。

まとめ

本気でブログ・サイト・アフィリエイトを取り組みたいなら、WordPress の優良テーマ「AFFINGER(アフィンガー)」がお勧めです。

AFFINGER(アフィンガー)でのサイドバーの作り方を紹介させていただきました。

  • 「ウィジェットで編集」または「ライブビューで編集」します。
  • 「プロフィール」や「検索」、「カテゴリー」を配置します。
  • 「AFFINGER」専用ウィジェットが配置できます。

AFFINGER(アフィンガー)は、初心者でもオシャレなサイトを作ることができ、上級者になっても満足して使える優良なテーマです。

ぜひ活用ください。よければ、本サイトを経由してのご購入をお願いします。

ご協力のお願い

本サイトから購入していただければ、私の AFFINGER のテクニックを皆様へお伝えする記事作成のモチベーションが爆上がりします。本当にうれしいです。

これからも良い記事をたくさん書かせていただきたいと思いますので、ぜひご協力をお願いします

AFFINGER ご購入ページはこちら

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com