ワードプレス

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

WordPress AFINGER5におけるプロフィール用ボックスの作り方 アイキャッチ



あずきです🐥

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

プロフィール用ボックス

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

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

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

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

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

ということで今回は…

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

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

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

プロフィール

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

サンプル太郎

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

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

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

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

プロフィール

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

サンプル太郎

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

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

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

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

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

前提

今回の内容は、WordPressの「クラシックエディタ」における手順となります

新エディタ「グーテンベルグ」は対象外となりますのでご了承ください

関連:WordPressの「グーテンベルグ&クラシックエディタ」とは?どっちがおすすめ?

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

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

WordPressブログガイド 第6章「デザイン」編 

著者

azuki_01

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

あずき

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

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

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

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

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

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

wp-editor-visual-and-text-20200308_ec
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

続きを見る

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

 

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

ブログガイド_見出し_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におけるプロフィール用ボックスの作り方 サンプル

サンプル太郎

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

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

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

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

 

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

ブログガイド_見出し_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におけるプロフィール用ボックスの作り方 サンプル

サンプル太郎

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

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

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

↑ このようになりました

おしまい♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

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

WordPressブログガイド 第6章「デザイン」編 

あずきのWordPressブログガイド 総合TOP 

 

著者

azuki_01

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

あずき

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

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。