wp-affinger-profile-sidebar-202002-ec

WordPress

【WordPressブログ】WING AFFINGER5におけるプロフィールの作り方&サイドバーへの設置手順



今回は、WordPressブログをやるなら欠かせない…

「プロフィール」の作成と、サイドバーへの設置

について、僕が愛用しているWordPressテーマ「WING(AFFINGER5)」の場合における手順をご紹介していきたいと思います

ちなみに

「WING AFFINGER5」以外のWordPressテーマでも基本的な流れは同じですが、プロフィールの「網掛け」で今回使う装飾パーツが、そのテーマ付随のものとなります

まずブログにおけるプロフィールは、サイトや運営者に興味をもってくれたユーザーに対して、自分のストーリーやブランディング(世界観)を一目で伝えられる大切な場所

使用する装飾パーツは人それぞれですが、今回は「僕が実際に使ってるおすすめなデザイン」をもとに解説していきたいと思います

ちなみに、初心者の方でも簡単な手順です

10分もかからないよ

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

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

WordPressブログにおけるプロフィールの作り方・サイドバーへの設置手順【WING AFFINGER5の場合】

大きく次の2ステップになります

  1. 投稿編集の画面で、プロフィールの下書きを作成する!
  2. 作成したプロフィールを、「ウィジェット」でサイドバーへ設置する!

順に見ていきますね🐥

【ステップ①】投稿編集の画面で、プロフィールの下書きを作成

pc-work-202001_01

まずは投稿編集の画面を使って、下書きを作っていきます

wp-affinger-profile-sidebar-202002_1-01

↑ WordPress管理画面 > 投稿 > 新規追加 をクリックします

wp-affinger-profile-sidebar-202002_1-02

↑ この記事自体はただの下書き用なので、タイトル名は適当で大丈夫です(その下の「パーマリンク」も、ノータッチでOK)

パーマリンクは、記事ごとのページURLのこと!

wp-affinger-profile-sidebar-202002_1-03

↑ 本文欄に、プロフィールの名前(ブログ上のニックネーム)や自己紹介文を入力していきます

プロフィール文はあんまり長すぎると離脱の原因になるので、要点のみで端的にまとめるのがおすすめです

伝えたいことがたくさんある場合は、「詳しいプロフィールはこちら♪」みたいな形でリンク先の記事で深堀りしよう

wp-affinger-profile-sidebar-202002_1-04

↑ 一通り書き終えたら、その全文を選択します

wp-affinger-profile-sidebar-202002_1-05

↑ 選択した状態で、本文欄の上にある「タグ」ボタンを開き…

タグ > ボックスデザイン > 見出し付きフリーボックス > ポイント を選択しましょう

wp-affinger-profile-sidebar-202002_1-06

↑ すると、さきほど入力したプロフィール内容の上下に、専用のショートコードが挿入されました

この状態でプレビュー画面をチェックしてみると…

wp-affinger-profile-sidebar-202002_1-07

↑ このように、プロフィール文が網掛けデザインで囲われました

ここから、この網掛けデザインを編集していきます

wp-affinger-profile-sidebar-202002_1-08

↑ さきほど挿入されたショートコードの…

  • ポイント
  • fa-check-circle faa-ring animated

の2ヶ所を削除します

その前後の " " 記号部分は消さないように注意!

wp-affinger-profile-sidebar-202002_1-09

↑ 消せたら、元々「ポイント」と書かれてた場所に、「プロフィール」と入力します

title="〇〇〇〇〇" の 〇〇〇〇〇 部分に入力!

wp-affinger-profile-sidebar-202002_1-10

↑ つづいて、同じショートコード内の…

  • bordercolor="#~~~~~~"
  • bgcolor="#~~~~~~"

この2つの部分を見ていきます。 この2つは…

  • bordercolor="#~~~~~~" → 網掛けの枠線カラー
  • bgcolor="#~~~~~~" → 網掛けの背景カラー

をそれぞれ指定する項目です

このカラーの指定には、 #~~~~~~ という形で ~~~~~~ の部分に「6桁のカラーコード」を入力します

編集画面の上部にあるテキスト色アイコン(「A ▼」というボタン)から「カスタム」を選択すると、好きな色のカラーコードがチェックできます

wp-affinger-profile-sidebar-202002_1-11

↑ 色が決まったら、それぞれカラーコードを入力しましょう

ちなみに今回の例では、↑ 画像のように…

  • bordercolor="#ffb049"
  • bgcolor="#f7f7f7"

に指定しています(個人的なお気に入り配色です)

先頭には # を付けるのを忘れずに!

改めてプレビュー画面をチェックしてみると…

wp-affinger-profile-sidebar-202002_1-12

↑ こんなふうになりました

wp-affinger-profile-sidebar-202002_1-13

↑ つづいて、プロフィールの画像を挿入していきます

名前の上に1行分スペースを空けて、画面上部の「メディアを追加」をクリックしましょう

その後、「アップロード」から、プロフィールに使いたい画像を選択します

wp-affinger-profile-sidebar-202002_1-14

↑ 画面下部の「サイズ」という項目で、画像の表示サイズを選択できます

ここはあとからでも変更できるので、とりあえずここでは「サムネイル - 150 × 150」を選択してみます

ちなみに上部の「代替テキスト」と「タイトル」の欄には、↑ 画像のようにプロフィールアイコンであることを端的に示すような名前を入れておきましょう(SEO対策)

wp-affinger-profile-sidebar-202002_1-15

↑ 画像が挿入できました。 ただこれだと左に寄ってしまっているので、配置を調整していきます

wp-affinger-profile-sidebar-202002_1-16

↑ 画像をクリックしてから、上部の「中央揃え」ボタンをクリックします

これで画面の中央に移動してくれます

同じように画像の下の「名前」部分も、選択した状態で「中央揃え」ボタンをクリックして…

wp-affinger-profile-sidebar-202002_1-17

↑ 中央に移動させましょう

また改めてプレビュー画面をチェックすると…

wp-affinger-profile-sidebar-202002_1-18

↑ できました。 今回はこの形で、サイドバーに設置していくことにします

wp-affinger-profile-sidebar-202002_1-19

↑ 投稿編集の画面に戻って、画面右上の「テキスト」をクリックしましょう

これで、入力タイプが「ビジュアルエディタ」から「テキストエディタ」に切り替わるよ

wp-affinger-profile-sidebar-202002_1-20

↑ つづいて、「テキストエディタ」に表示が切り替わったこの本文を、丸ごと選択します

選択できたら、キーボードの「Ctrl」+「C」で本文を丸々コピーしましょう

コピーは、「右クリック→コピー」でもOK!

これで、この編集画面での作業はおわりです。 画面右上の「下書き保存」を忘れずにクリックします

「下書き保存」する理由は、あとでこのプロフィールを修正するかもしれないため!

ここから、下書きしたこのプロフィールをサイドバーに設置していきます(次パートへ!)

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

【ステップ②】作成したプロフィールを、「ウィジェット」でサイドバーへ設置

pc-work-202001_02

下書きさえできてしまえば、設置はわりと一瞬です

wp-affinger-profile-sidebar-202002_2-01

↑ WordPress管理画面 > 外観 > ウィジェット をクリックします

wp-affinger-profile-sidebar-202002_2-02

↑ 左下にある「テキスト」をクリックします

wp-affinger-profile-sidebar-202002_2-03

↑ すると選択肢が開くので、「サイドバーウィジェット」を選択して「ウィジェットを追加」をクリックしましょう

wp-affinger-profile-sidebar-202002_2-04

↑ 今度は画面右上を見ると、「サイドバーウィジェット」という項目に、今さっき追加した「テキスト」がセットされています

「ビジュアル」の右側の「テキスト」をクリックして、入力タイプを「テキストエディタ」に切り替えましょう

wp-affinger-profile-sidebar-202002_2-05

↑ 切り替わったら、(本文欄をどこでもいいので一度クリックしてから)さきほど丸々コピーしておいたプロフィールの下書きを、「Ctrl」+「V」で貼り付けます

wp-affinger-profile-sidebar-202002_2-06

↑ 貼り付けたら、「保存」をクリックすれば完了です

これでもうサイドバーへの設置はOK!

実際のプレビュー画面を見てみると…

wp-affinger-profile-sidebar-202002_2-07

↑ サイドバーに、無事プロフィールが表示されました

ちなみにプロフィール画像の「表示サイズ」について、元々の画像サイズによっては、先ほど設定した「サムネイル - 150 × 150」ではやや大きすぎるかもしれません

その場合は…

wp-affinger-profile-sidebar-202002_2-08

↑ 投稿編集の画面に戻って、画像をクリックしてから、真上に表示される「編集」ボタンをクリックしましょう

鉛筆のアイコン!

wp-affinger-profile-sidebar-202002_2-09

↑ すると設定画面が開くので、「サイズ」という項目で別のサイズを選択しましょう

もともとの画像サイズが(ブログで一般的な)「横1000px」前後の場合、わりと…

  • サムネイル 150 × 150 → ちょうどか、やや大きいかも
  • 会話風アイコン 100 × 100 → ちょうどか、やや小さいかも

この2択かなと思います

ちなみにその中間くらいのサイズがいい場合は、「カスタムサイズ」で細かく指定できます

px数(ピクセル数)とかよくわからない場合も、100×100とか150×150とかいろいろ試して調整すればOK

wp-affinger-profile-sidebar-202002_2-10

↑ サイズを調整したら、改めてこの本文欄を「テキストエディタ」に切り替えてから、さっきと同じように丸々コピーしましょう

あとは、また 外観 > ウィジェット > サイドバーウィジェット の入力欄で、さきほど貼り付けた修正前のテキストから新たに差し替えればOKです

wp-affinger-profile-sidebar-202002_2-11

↑ 今回の例で使った画像では、100×100の表示サイズでいい感じのバランスになりました

今回の「プロフィールの作成と設置」の解説は、これで以上です

大変お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.