サイドバーにプロフィールを表示させる方法【プラグイン未使用】

プロフィールの設置は必要なのか

そもそもプロフィールの設置すべきか否かの疑問について解説します。

結論からすればプロフィールは設置すべきです。設置することにより運営者の信頼度を向上させる要因になる可能性もあります。更にはプロフィールを設置する事により、運営者個人に興味を持ってもらい、目的のページ以外のページも閲覧してくれる可能性も生まれます。

この考えは運営者情報を設置すべき理由について他記事にまとめております。

→関連記事：運営者情報を設置する事のメリット

サイドバーにプロフィールを掲載する手順

プロフィールを掲載する手順を解説します。

手順１プロフィール画像を用意しよう

顔出しで運営しているなら自分の写真を用意しましょう。匿名で行うなら、アバター画像を用意しましょう。

サイズは150px以上で大きすぎず正方形である事が理想です。

最後に画像をメディアにアップロードしておきましょう、ALTにはプロフィールや運営者画像と記入してください。

手順２ウィジェット画面でスペースを設置しよう。

ダッシュボード > 外観 > ウィジェットよりサイドバーエリアに「カスタムHTML」または「テキスト」を追加してください。

これでスペースの設置は完了です。

手順３構成を考えよう

次に構成を考えます。構成を決める際ですが、個人的には記事作成画面にあるクラシックエディターが使いやすく思います。現に当サイトのプロフィール画面も下地はクラシックエディターで行いました。

まず最上段部分には先ほど用意したプロフィール画面ですね。

その下には名前を少し大きめの文字で書きましょう。

更に下には自己紹介文を記入して、最後はお好みですが、Twitterのフォローボタンを付けることにしましょう。

Twitterのフォローボタンを用意しよう

Twitterのフォローボタンを用意しておきましょう。

まずはTwitterのPublishサイトにアクセスしましょう。

外部リンク：Twitter Publish

その後自身のTwitterアカウントページのURLを入力します。

続いて「Twitter Buttons」を選択します。

「Follow Button」を選択します。

最後に「Copy Code」を選択するとクリップボードにフォローボタンのHTMLがコピーされています。テキスト等に張り付けて、一時保存しておきましょう。

手順４プロフィールを書いてみよう

記事作成画面へ戻り手順３の構成通りに配置しておきましょう。完成すると下記画面のようになるかと思います。

作成したプロフィールはHTMLに変換します。

このHTMLを手順２で作成したウィジェットのスペースに張り付けます。ここで一度表示してみましょう。

あれれ、何やら思っていたのと違いますね！これはウィジェットにCSSが当てられていないからです。テーマによると記事と同様のCSSがコチラにも適用される事がありますので、この段階で自分の思っていた見た目になっているなら作業終了です。

手順５CSSを記入して配置を整えよう

CSSとはなんぞやという方はコチラの記事でCSSについて基礎知識を解説しています。

→関連記事：CSSって何？

CSSの記入場所はカスタマイズ画面より行えます

まずはプロフィール画面を囲んでいるclass名を確認しましょう。

凡その場合手順２でテキストを選んだ場合「textwidget」カスタムHTMLを選んだ場合は「textwidget custom-html-widget」となっているかと思います。カスタムHTMLの場合は「textwidget」「custom-html-widget」どちらのclassを使用してもOKです。

確認の行い方はグーグルクロームを使用している事を前提で解説しますが、プロフィールが表示されている場所にマウスを持っていき、右クリックから検証を選択します。

初めて検証画面を開いた方には少し説明不足となりますが、HTMLをいろいろマウスオンしていくと表示サイトの何処の箇所のHTMLを表しているのか色分けしてくれます。初めにプロフィールにマウスを持っていき検証を開くことでかなり近い位置まで移動してくれていますので、全体を囲んでいるdivタブ探してください。

上の画像のdivタブがカスタムHTMLのclassとなります。

次はここのclassに対してスタイリングしていきます。

CSSについて詳しいかたは自由にスタイリングしてOKですが、CSSが分からない方は最後にコードをまとめておきますので、そのままコピペしてOKです！

では、個人でも手直ししやすいように、段階に分けて解説していきます。CSSの専門解説ページではありませんので、サクサクと解説していきますね。

まず画像は画面中央に持っていき、角を丸くして雰囲気をやわらげましょう。

上から順に解説すると（かなりざっくり）

「display: block;」で画像をブロックとして扱います。

「margin:auto;」で左右上下の空白の幅を均等にします。幅が均等になる事で自然に画像は真ん中に配置されます。

「border-radius: 50%;」角を丸くします。数値を変えると角の丸さが変わります50％にすると完全に円形になります。

お次はぎゅうぎゅうに詰まって窮屈そうな文字をスタイリングしていきます。

かなり完成に近づいてきました！

「font-size: 14px;」で文字のサイズを決めています。

「font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;」で文字のフォントを指定しています。

「text-rendering: optimizeLegibility;」でユーザエージェント読みやすさを優先しています。別になくてもいいですか一部のブラウザーで表示する時に読みやすくなります。

「 -webkit-font-smoothing: antialiased;」これもなくていいですが、色を付けるならカラーのぼやけが無くなります。

「line-height: 2;」列と列の間の幅を指定しています。これさえ入れればある程度スッキリします。

最後に「pタグ」の周りに余裕を持った幅を設置します。ここでは40pxと結構な距離を空けてますが、なんとなく30pxより個人的に好感が持てました。

これで完成です！！全体像は当サイトのプロフィール画面を見てください。

後はサイトによってLPページの導線を設置したりお仕事依頼の連絡先や、クラウドソーシングのプロフィール画面へのリンクを設置する等、目的に合わせてカスタマイズしましょう。

プラグインを使うよりも圧倒的に自由にカスタマイズできるので、自作のプロフィールは圧倒的おすすめです。

まとめ

この記事ではサイドバーにプロフィールを設置する方法を解説しました。

プラグインを使わないほうが自由にカスタマイズできます。サイトの表示スピードも速くなりますので、圧倒的におすすめです。

最後にコピペ用にコード全文を記載しておきます。