AFFINGER紹介

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

広告:ページ内にてアフィリエイト広告を利用しています。

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

サイトにサイドバーを設置することで、プロフィールやアフィリエイトのバナー、カテゴリー一覧などを表示することができます。読者にも利便性が高く、広告を載せても本文を邪魔しない機能です。

ぜひ活用したいですね。

ポイント

本記事では、

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

AFFINGER を使って、素敵なサイトを作りましょう!

\ AFFINGER でオシャレなサイトを作る方法は こちら

【サンプルあり】アフィンガーでおしゃれなサイト・トップページを作る方法!デモサイトも紹介

ブロガー必見!WordPressテーマ「AFFINGER(アフィンガー)」で簡単に作るオシャレなサイト。AFFINGERならあなたもオリジナリティ溢れるサイトを手軽に作れます。ここではAFFINGERの魅力満載のサンプル(デモサイト)をご紹介し、さらにオシャレサイトの作り方も詳しく解説します。ワクワクするAFFINGERの世界へ一緒に飛び込みましょう!

続きを見る

初期設定、全体のデザイン
記事の書き方、使い方
サイドバーをデザインする
トップページをデザインする
ヘッダー、フッター、設定する
ファビコンを設定する
PR

サイドバーとは何か?

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を表示します。

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

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

PR

まとめ

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

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

ポイント

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

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

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

トップページ
ヘッダーとフッターを作る
おしゃれサイト

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

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

PR
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記