WORDPRESS

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

【AFFINGER5】ブログの「プロフィール用ボックス」おすすめな作り方 アイキャッチ



あずきです🐥

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

プロフィール用ボックス

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

具体的な設置エリアとしては…

  • 「ウィジェット」に設置するプロフィール(例:サイドバー)
  • 「記事内」に設置するプロフィール(例:導入文の末尾)

主にこの2ヶ所を想定してます

「AFFINGER5」は装飾パーツが豊富でいろんなボックスが作れる分、「どれを使えばいいか迷う…」という人も多いかもですよね

ということで今回は…

  • 「マイボックス」を使った、極めてシンプルなプロフィールデザイン
  • 「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン

の2パターンで、それぞれのカスタマイズ方法をご紹介していきます

まず結論として、今回作るデザインは次のイメージです

プロフィール

WordPress AFINGER5におけるプロフィール用ボックスの作り方 サンプル

サンプル太郎

このプロフィールはサンプルです

このプロフィールはサンプルです

このプロフィールはサンプルです

↑「マイボックス」を使った、極めてシンプルなプロフィールデザイン

プロフィール

WordPress AFINGER5におけるプロフィール用ボックスの作り方 サンプル

サンプル太郎

このプロフィールはサンプルです

このプロフィールはサンプルです

このプロフィールはサンプルです

↑「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン

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

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

ACTION AFFINGER6 バナー 01-300px

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

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

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

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

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

 第6章 デザイン 編          

 

About me

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

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

あずき

 

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

 

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

AFFINGER5における、サイドバーウィジェット・記事内に設置する「プロフィール用ボックス」のおすすめな作り方【カスタマイズ例】

まずは、(サンプル用でもいいので)記事の編集画面を1つ開きましょう

ちなみに、編集モードは「テキスト」ではなく「ビジュアル」のままでOKです

▼「ビジュアルとテキストって何…?」という方はこちら ▼

WordPressの「ビジュアルエディタ&テキストエディタ」とは? アイキャッチ
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

続きを見る

ここから、「2パターン」のプロフィールデザインを順に見ていきますね🐥

 

「マイボックス」を使った、極めてシンプルなプロフィールデザイン

WordPress ヘッダー a-01

 

編集画面の上部から…

タグ > ボックスデザイン > マイボックス > 基本

を選択します

すると、ショートコードが(上下に2つ)挿入されます

このショートコード内容を、好みのデザインにカスタマイズしていきます

と言っても簡単なのでご安心を

設定していくのは、上下2つのコードのうち「上側(長い方)」です

頭から見ていきますね🐣

 

title="●●●●●" タイトル名を指定

title="●●●●●"

●●●● にあたる場所に、著者 と入れます

そのほかの入力例: Profile / About me / プロフィール / この記事を書いた人 / このブログの運営者 など…

なにも表示したくない場合は、空欄にすればOK

 

fontawesome="●●●●●" アイコンを指定

fontawesome="●●●●●"

●●●●● にあたる場所を1回空欄にし、そこにカーソルを合わせた状態で…

タグ > ショートコード補助 > Webアイコン(クラス)

から、「ユーザー」というアイコンを選択します

このアイコンの種類も、任意で好きなものに変えてください

なにも表示したくない場合は、空欄にすればOK

 

color="#●●●●●●" タイトル名とアイコンのカラーを指定

color="#●●●●●●"

●●●●●● にあたる場所を1回空欄にして、自分のブログで採用してるテーマカラー(=メインで使ってる色)の「カラーコード6桁」を入力します

この「カラーコード」というのは、「HTMLカラーコード: WEB色見本 原色大辞典」様で簡単に調べられます

ちなみに、カラーコードの先頭には # が必ず付きます

つまり「 # のあとに6桁」の形!

 

bordercolor="#●●●●●●" 枠線のカラーを指定

bordercolor="#●●●●●●"

●●●●●● にあたる場所を1回空欄にして、枠線のカラーに使いたい「カラーコード6桁」を入力します

参考までに、このブログでは #e0e0e0 を使ってます(薄いグレーです)

また # を忘れずに!

 

bgcolor="#●●●●●●" 背景のカラーを指定

bgcolor="#●●●●●●"

●●●●●● にあたる場所を1回空欄にして、背景のカラーに使いたい「カラーコード6桁」を入力します

参考までに、このブログでは(未入力)にしてます(なにも入力しないと、色ナシになります)

 

borderwidth="●" 枠線の太さを指定

borderwidth="●"

● にあたる場所を1回空欄にして、枠線の太さを指定する数字(基本は1桁)を入力します

  • 0 枠線なし
  • 1 かなり細い
  • 2 やや細い
  • 3 普通くらい
  • 4 やや太い
  • 5 かなり太い
  • 6以上 さらに太くなります

参考までに、このブログでは 2 にしてます

 

borderradius="●" 四隅の丸みを指定

borderradius="●"

● にあたる場所を1回空欄にして、(ボックスの)四隅の丸みを指定する数字(基本は1桁)を入力します

  • 0 1と同じ直角
  • 1 直角
  • 2 ほぼ直角
  • 3 少しだけ丸み
  • 4 さらに少し丸み
  • 5 わりと丸み
  • 6以上 さらに丸くなります

参考までに、このブログでは 5 にしてます

 

titleweight="●●●●" タイトル名を太字に指定

titleweight="●●●●"

●●●● にあたる場所で、タイトル名を「太字」にするかどうかを指定します

  • 太字にしたい場合 → "" のなかに、 bold と入力
  • 太字にしたくない場合 → "" のなかを空欄にする

参考までに、このブログでは bold にしてます

 

fontsize="●●" タイトル名のフォントサイズを指定

fontsize="●●"

●● にあたる場所に、タイトル名のフォントサイズを指定する2桁 or 3桁の数字を入力します

デフォルトでは(未入力)になってますが、この(未入力)の状態は「94」というサイズに相当します

つまり、デフォルトの大きさから変更したい場合は、「94」というサイズを基準に指定しましょう

  • 80 → かなり小さめ
  • 90 → やや小さめ
  • 94 → デフォルト(空欄の状態と同じ)
  • 100 → わりと大きめ
  • 110 → かなり大きめ
サイズは「1」単位で指定できるよ!

参考までに、このブログでは(未入力)にしてます

これで一通り終了です🐥

 

完成形をチェック

完成形のショートコードを貼ってプレビューで見てみると…

著者

↑ こんな風になりました

あとは…

  1. 上下のショートコードで囲われたなかに、任意のプロフィールテキストと画像を入れる
  2. テキストのフォントサイズや中央揃えなどを、任意で調整
  3. 画像のサイズや中央揃えなどを、任意で調整

すれば完了です

最終的に…

プロフィール

WordPress AFINGER5におけるプロフィール用ボックスの作り方 サンプル

サンプル太郎

このプロフィールはサンプルです

このプロフィールはサンプルです

このプロフィールはサンプルです

↑ このようになりました🐥

 

「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン

WordPress ヘッダー a-02

 

編集画面の上部から…

タグ > ボックスデザイン > 見出し付きフリーボックス > 基本

をクリックします

すると、ショートコードが(上下に2つ)挿入されます

このショートコードの上側(長い方)を、好みのデザインにカスタマイズしていきます

設定の流れについては、1つ目の「マイボックス」と基本的に同じです

  • title → タイトル名を指定(例:著者 / プロフィール)
  • fontawesome → アイコンの種類を指定( タグ > ショートコード補助 > Webアイコン(クラス) から、好きなアイコンを選択)
  • bordercolor → 枠線のカラーを指定(カラーコード6桁と、先頭に # をつける。 カラーコードは「WEB色見本 原色大辞典」様で簡単に調べられる)
  • color → タイトル名とアイコンのカラーを指定(同上)
  • bgcolor → 背景のカラーを指定(同上)
  • borderwidth → 枠線の太さを指定(例:1 / 2 / 3 / 4 / 5…)
  • borderradius → 四隅の丸みを指定(例:1 / 2 / 3 / 4 / 5…)
  • titleweight → タイトル名を太字にするかどうか指定(太字なら bold と入力。太字じゃないなら空欄)

完成形のショートコードを貼ってプレビューで見てみると…

プロフィール

↑ こんな風になりました

あとは…

  1. 上下のショートコードで囲われたなかに、任意のプロフィールテキストと画像を入れる
  2. テキストのフォントサイズや中央揃えなどを、任意で調整
  3. 画像のサイズや中央揃えなどを、任意で調整

で完了です

最終的に…

プロフィール

WordPress AFINGER5におけるプロフィール用ボックスの作り方 サンプル

サンプル太郎

このプロフィールはサンプルです

このプロフィールはサンプルです

このプロフィールはサンプルです

↑ このようになりました

おしまい♪

あずき🐥

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

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