みなさんこんにちは。ぜぇれさんです。
折角ブログを書いていくんですから自分のことも知ってもらいたいと思って何が悪い！！
という事で投稿者の情報を表示するプラグイン「Simple Author Box」の導入方法を書いてゆきます。よろしくお願いします。
[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]
「Simple Author Box」って？
写真付きで名前や自己紹介を記事の最下部や自分で配置したいところに表示させることができるプラグインです。
CSSなどが分からなくてもデザインの変更も可能で、簡単に導入できるので初心者にも安心です。
こんな感じのやつが挿入されます。
各種設定項目
早速プラグインをインストール！いつものやり方です。
①WordPressのメニューにある「プラグイン」から
②「新規追加」をクリックします。
③右上の検索ボックスで「Simple Author Box」と検索し
④インストール後に有効化しましょう。
⑤そうするとメニューに「Simple Author Box」の項目が追加されていると思います。
プロフィールの入力
表示させたいプロフィール情報やアイコンを設定してゆきます。
①左メニュー内のユーザーから
②あなたのプロフィールへ進みます。
まずはプロフィール情報を入力してゆきましょう。お好きなように入力してください。
このエリアはリンクも挿入できるようなので、ご自身のプロフィールページや記事一覧などへのリンク設定も可能です。
ここに入力します。
アイコンの設定
続いてアイコンの設定です。
ワードプレスはデフォルトの場合「Gravatar」という独特なサービスを用いないとアイコンの変更ができないのですが、「Simple Aythor Box」を用いれば簡単に表示用のアイコンを変更することが可能です。
以下の画像の部分から画像をアップロードし、アイコンの登録を行いましょう。
ソーシャルメディアの登録
投稿者情報の下部に、ご自身のソーシャルメディアへのリンクも設定可能です。
海外のSNSも含めてかなりの種類をカバーしているのでぜひ活用してみましょう。
このようにSNSのURLを登録するだけの簡単な作業です。
複数追加したい場合は「Add new social platform」を押すことで入力フォームが追加されます。
デザインなども設定できます。
「Simple Author Box」はデザインや表示する項目なども管理画面から変更することができ、そこも初心者にお勧めな理由です。
以下に各項目の内容を簡単に説明してゆきます。
ちなみに僕はデフォルトの設定のままです。
WordPressのメニューにある「Simple Author Box」をクリックしてください。
「Simple Author Box」の細かな設定画面へ移動します。
Setting
英語になってしまっているので簡単に説明しますが、上部のプレビューがリアルタイムで切り替わるので直感的に操作可能だと思います。
以下内容ですのでご参考までに。
Manually insert the Simple Author Box
任意の場所に書いた人情報載せたいです、載せるためのコードを教えてください。
Hide the author box if author description is empty
プロフィールが空欄なら書いた人情報はのせへん！
Show author email
書いた人のメールアドレスをアイコンで出します！
Open social icon links in a new tab
SNSアイコンクリックしたら新規タブでリンクさせます！
Hide the social icons on author box
SNSなんてパリピなことやってないからこのエリアは非表示にします！！
Appearance
ここは見た目の設定を行えます。
同様にリアルタイムでプレビューが変化するので直感的に操作が可能です。
ミスっても保存しなければ無問題。
Top margin of author box
Bottom margin of author box
Padding top and bottom of author box
Padding left and right of author box
Border Width
上下左右の余白や、枠線の太さを設定できます。
Author avatar image style
アイコンを四角で表示するか丸で表示するか選べます。
丸に設定した場合のみ
Rotate effect on author avatar hover
アイコンにマウスオンでクルンと回転する。
を選べるようになります。
Show author website
書いた人のWEBサイトのURLを表示するかしないか。
ONにした場合に「新しいタブで開くか」「リンクにノーフォローをいれるか（SEO的な話）」「URLの位置は左寄せか右寄せか」を選択可能になります。
Social icons type
SNSのアイコンをシンプルなシンボルにするか色の入ったアイコンにするかを選択できます。
色の入ったアイコンに変更した場合のみ「四角か丸か」「マウスオンでクルンと回転するか（丸いアイコンのときのみ適用）」「ロングシャドーを入れるか」「細い枠線を入れるか」が設定可能になります。
Colors
ここでは文字や枠線の色を設定できます。以下項目内容です。
Author name color
著者名色
Border color
枠線の色
Background color of social icons bar
SNSアイコンエリアの背景色
Background color of author box
書いた人情報全体の背景色
Color of author box paragraphs
書いた人情報のテキストカラー
Color of author box links
書いた人情報内のリンクの色
Social icons color (for symbols only)
SNSアイコン(シンプルを選択している時)のアイコンの色
Typography
ここでは文字の種類やサイズの設定を行えます。
Google font characters subset
Google提供のWEBフォントを選択できます。
Author name font family
書いた人の名前のフォントを選択できます。
Author description font family
書いた人情報のフォントを選択できます。
Author name font size
Author description font size
Size of social icons
著者名、書いた人情報、SNSアイコンのサイズを変更できます。
Author description font style
フォントを斜め文字にするかどうかを選択できます。
Misc
すみません、ここはちょっとよくわからなかったです。
Load generated inline style to footer
生成されたインラインスタイルをフッターにロードするかどうか
という項目になります。
以上です、シンプルな頭で行くなら細かなセッティングはせずとも、アイコンと説明文とSNSへのリンクだけ登録してしまえば書いた人情報はきれいに表示されます。
いかがでしたか？今回以下のような内容でお話させていただきました。
何のためにブログを書いていくかっていう理由はいろいろあると思うんですが。僕の場合はやはり自分自身を知ってほしいからなんですよね。
そういった意味でもこの著作者情報は早いうちに導入しました。
ぜぇれさんでした。