WORDPRESS

【AFFINGER5】ブログのサイドバーに、「プロフィール」などテキストや画像を設置する方法【WordPressウィジェット】

【AFFINGER5】ブログのサイドバーに、「プロフィール」などテキストや画像を設置する方法 アイキャッチ



あずきです🐥

このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

サイドバーエリアに、「プロフィール」などテキスト・画像を設置する方法

について、ブログ初心者さん向けに1から解説していきます

まず、「サイドバー」エリアのテキストや画像とは…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 top-01

↑ TOPページのなかの…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 top-02

↑ この部分です

で、方法としては、 外観 > ウィジェット のなかの…

  • テキスト

というウィジェットを使います

この「テキスト」ウィジェット自体は、WordPressデフォルトの無料テーマでも備わってる機能です

ただ「WING(AFFINGER5)」の場合、その設置先となるエリアに「サイドバー」エリアなどの選択肢が加えられてるんですね

やり方も超簡単!

さっそく見ていきましょー🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

AFFINGER5における、ブログのサイドバーエリアに「プロフィール」などのテキストや画像を入れる方法【WordPressウィジェット】

WordPress ヘッダー a-01

 

まずはWordPress管理画面から…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-01

↑ 外観 > ウィジェット をクリックします

ウィジェットの設定画面が開いたら、画面の左側にある…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-02

↑「テキスト」というタブをクリックして開きます

開いたら、そのなかの…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-03

↑「サイドバーウィジェット」という項目を選択して、「ウィジェットを追加」をクリックします

画面の右上を見てみると…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-04

↑「サイドバーウィジェット」という項目が開いて、「テキスト」というボックスがセットされました

ここから、この「テキスト」のなかに好きなテキストや画像を入れていきます(下記手順です)

まず…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-05

↑「タイトル」に任意の名称を入れます

この「タイトル」というのは、実際の画面における…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-06

↑ こちらの「見出し」部分にあたります

この「見出し」自体を非表示にしたい場合は、「タイトル」を空欄のままにすればOKです

ちなみに

この「見出し」のデザインは、 外観 > カスタマイズ から任意のデザインに変更できます

WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順 アイキャッチ
WING AFFINGER5で「ウィジェットの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

ということで「タイトル」が入力できたら、その下の…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-07

↑ 本文欄に、任意のテキストや画像を入れていきます

基本的には、通常の記事作成の画面と同じ入力方法でOKです

ちなみに

記事の作り方については、第7章「記事を作って投稿しよう」で1から解説してます ↓

あずきのWordPressブログガイド 第7章「記事編」TOP アイキャッチ
【2020年】ワードプレスで記事を作って投稿しよう!【あずきのWordPressブログガイド/第7章TOP】

続きを見る

プロフィールデザインの作り方はこちら ↓

【AFFINGER5】ブログの「プロフィール用ボックス」おすすめな作り方 アイキャッチ
【AFFINGER5】ブログの「プロフィール用ボックス」おすすめな作り方【サイドバーウィジェット・記事内】

続きを見る

このブログでも使用中のテーマ「WING(AFFINGER5)」における手順です

ここで1つ、大事なコツがあります

というのも、ここの「テキスト」ウィジェットでは、通常の記事作成と違って「使用できる機能ボタンが極めて少ない」んですね

なので、この「テキスト」ウィジェットに入れるテキストや画像については…

  1. あらかじめ、「通常の記事作成」側の画面で作っておく!
  2. その完成した内容を、「Ctrl+C」で丸々コピー!
  3. この「テキスト」ウィジェットの本文内に、「Ctrl+V」で丸々貼りつけ!

するとスムーズです

ただし!

上記の方法を使う際には、次のポイントに注意しましょう

  • コピーと貼りつけは、「ビジュアル」モードではなく「テキスト」モードに切り替えてから行う!
  • 記事画面とサイドバーでは「横幅」が違うので、貼りつけた後はプレビューで必ずチェックする!

ということで、本文欄にテキストや画像を入力できたら…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-08

↑ 右下の「保存」をクリックすれば完了です

実際のプレビューで見てみると…

WordPress AFFINGER5における、サイドバーにプロフィールなどテキストや画像を設置する手順 1-09

↑ こんな感じのプロフィールが設置できました

ちなみに

上記のような「プロフィールデザイン」の作り方はこちら ↓

【AFFINGER5】ブログの「プロフィール用ボックス」おすすめな作り方 アイキャッチ
【AFFINGER5】ブログの「プロフィール用ボックス」おすすめな作り方【サイドバーウィジェット・記事内】

続きを見る

このブログでも使用中のテーマ「WING(AFFINGER5)」における手順です

おしまい♪

あずき🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

全9章のTOPです

あずきのワードプレスブログ「完全初心者」ガイド

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS