あずきです🐥
このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
プロフィール用ボックス
の作り方について、ブログ初心者さん向けに1から解説していきます
具体的な設置エリアとしては…
- 「ウィジェット」に設置するプロフィール（例：サイドバー）
- 「記事内」に設置するプロフィール（例：導入文の末尾）
主にこの2ヶ所を想定してます
「AFFINGER5」は装飾パーツが豊富でいろんなボックスが作れる分、「どれを使えばいいか迷う…」という人も多いかもですよね
ということで今回は…
- 「マイボックス」を使った、極めてシンプルなプロフィールデザイン
- 「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン
の2パターンで、それぞれのカスタマイズ方法をご紹介していきます
まず結論として、今回作るデザインは次のイメージです
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑「マイボックス」を使った、極めてシンプルなプロフィールデザイン
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン
さっそく見ていきましょー🐥
前提
今回の内容は、WordPressの「クラシックエディタ」における手順となります
新エディタ「グーテンベルグ」は対象外となりますのでご了承ください
関連：WordPressの「グーテンベルグ＆クラシックエディタ」とは？どっちがおすすめ？
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
今回の記事はこちらの章に属しています
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
- 1 AFFINGER5における、サイドバーウィジェット・記事内に設置する「プロフィール用ボックス」のおすすめな作り方【カスタマイズ例】
- 1.1 「マイボックス」を使った、極めてシンプルなプロフィールデザイン
- 1.1.1 title＝"●●●●●" タイトル名を指定
- 1.1.2 fontawesome="●●●●●" アイコンを指定
- 1.1.3 color="#●●●●●●" タイトル名とアイコンのカラーを指定
- 1.1.4 bordercolor="#●●●●●●" 枠線のカラーを指定
- 1.1.5 bgcolor="#●●●●●●" 背景のカラーを指定
- 1.1.6 borderwidth="●" 枠線の太さを指定
- 1.1.7 borderradius="●" 四隅の丸みを指定
- 1.1.8 titleweight="●●●●" タイトル名を太字に指定
- 1.1.9 fontsize="●●" タイトル名のフォントサイズを指定
- 1.1.10 完成形をチェック
- 1.2 「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン
- 1.1 「マイボックス」を使った、極めてシンプルなプロフィールデザイン
AFFINGER5における、サイドバーウィジェット・記事内に設置する「プロフィール用ボックス」のおすすめな作り方【カスタマイズ例】
まずは、（サンプル用でもいいので）記事の編集画面を1つ開きましょう
ちなみに、編集モードは「テキスト」ではなく「ビジュアル」のままでOKです
▼「ビジュアルとテキストって何…？」という方はこちら ▼
-
WordPressの「ビジュアルエディタ＆テキストエディタ」とは？【クラシックエディタにおけるブログ記事編集】
続きを見る
ここから、「2パターン」のプロフィールデザインを順に見ていきますね🐥
「マイボックス」を使った、極めてシンプルなプロフィールデザイン
編集画面の上部から…
タグ ＞ ボックスデザイン ＞ マイボックス ＞ 基本
を選択します
すると、ショートコードが（上下に2つ）挿入されます
このショートコード内容を、好みのデザインにカスタマイズしていきます
設定していくのは、上下2つのコードのうち「上側（長い方）」です
頭から見ていきますね🐣
title＝"●●●●●" タイトル名を指定
title="●●●●●"
●●●● にあたる場所に、著者 と入れます
そのほかの入力例： Profile / About me / プロフィール / この記事を書いた人 / このブログの運営者 など…
なにも表示したくない場合は、空欄にすればOK
fontawesome="●●●●●" アイコンを指定
fontawesome="●●●●●"
●●●●● にあたる場所を1回空欄にし、そこにカーソルを合わせた状態で…
タグ ＞ ショートコード補助 ＞ Webアイコン（クラス）
から、「ユーザー」というアイコンを選択します
このアイコンの種類も、任意で好きなものに変えてください
なにも表示したくない場合は、空欄にすればOK
color="#●●●●●●" タイトル名とアイコンのカラーを指定
color="#●●●●●●"
●●●●●● にあたる場所を1回空欄にして、自分のブログで採用してるテーマカラー（＝メインで使ってる色）の「カラーコード6桁」を入力します
この「カラーコード」というのは、「HTMLカラーコード: WEB色見本 原色大辞典」様で簡単に調べられます
ちなみに、カラーコードの先頭には # が必ず付きます
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 → かなり大きめ
参考までに、このブログでは（未入力）にしてます
これで一通り終了です🐥
完成形をチェック
完成形のショートコードを貼ってプレビューで見てみると…
著者
↑ こんな風になりました
あとは…
- 上下のショートコードで囲われたなかに、任意のプロフィールテキストと画像を入れる
- テキストのフォントサイズや中央揃えなどを、任意で調整
- 画像のサイズや中央揃えなどを、任意で調整
すれば完了です
最終的に…
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑ このようになりました🐥
「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン
編集画面の上部から…
タグ ＞ ボックスデザイン ＞ 見出し付きフリーボックス ＞ 基本
をクリックします
すると、ショートコードが（上下に2つ）挿入されます
このショートコードの上側（長い方）を、好みのデザインにカスタマイズしていきます
設定の流れについては、1つ目の「マイボックス」と基本的に同じです
- title → タイトル名を指定（例：著者 / プロフィール）
- fontawesome → アイコンの種類を指定（ タグ ＞ ショートコード補助 ＞ Webアイコン（クラス） から、好きなアイコンを選択）
- bordercolor → 枠線のカラーを指定（カラーコード6桁と、先頭に # をつける。 カラーコードは「WEB色見本 原色大辞典」様で簡単に調べられる）
- color → タイトル名とアイコンのカラーを指定（同上）
- bgcolor → 背景のカラーを指定（同上）
- borderwidth → 枠線の太さを指定（例：1 / 2 / 3 / 4 / 5…）
- borderradius → 四隅の丸みを指定（例：1 / 2 / 3 / 4 / 5…）
- titleweight → タイトル名を太字にするかどうか指定（太字なら bold と入力。太字じゃないなら空欄）
完成形のショートコードを貼ってプレビューで見てみると…
プロフィール
↑ こんな風になりました
あとは…
- 上下のショートコードで囲われたなかに、任意のプロフィールテキストと画像を入れる
- テキストのフォントサイズや中央揃えなどを、任意で調整
- 画像のサイズや中央揃えなどを、任意で調整
で完了です
最終的に…
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑ このようになりました
おしまい♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
今回の記事はこちらの章に属しています
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^