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

  • 2020年4月13日
  • 2020年4月20日
  • wordpress
サイドバーにプロフィールを表示させる方法【プラグイン未使用】
サイドバーにプロフィールを表示させたい
プラグイン使い過ぎてるから自作がしたい
この記事ではサイドバーにプロフィールを設置する方法を解説しています
プラグインを使用すれば比較的簡単に設置できますが、プラグインは使えば使うほどサイトの表示速度に影響を与えてしまいます
プロフィールを設置する方法は比較的簡単です。HTMLやCSSの知識がなくてもコピペOKですので、一度自作で作ってみてはいかがでしょうか。WordPressのカスタマイズに慣れるかもしれません。

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

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

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

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

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

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

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

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

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

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

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

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

ウィジェット画面

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

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

手順3構成を考えよう

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

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

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

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

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

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

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

外部リンク:Twitter Publish

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

twitter-publish

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

twitter-publish

「Follow Button」を選択します。

twitter-publish

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

twitter-publish

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

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

プロフィール作成

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

プロフィール画面のHTML

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

プロフィールを表示

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

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

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

→関連記事:CSSって何?

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

CSS記入場所

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

凡その場合手順2でテキストを選んだ場合「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の専門解説ページではありませんので、サクサクと解説していきますね。

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

CSSカスタマイズ

上から順に解説すると(かなりざっくり)

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

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

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

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

CSSカスタマイズ

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

「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より個人的に好感が持てました。

CSSカスタマイズ

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

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

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

まとめ

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

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

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

.textwidget img{
display: block;
margin:auto;
border-radius: 50%;
}

.textwidget{
font-size: 14px;
font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
line-height: 2;
}

.textwidget p{
margin: 40px auto 0;
}

>プログラミング情報サイト「In-Output」

プログラミング情報サイト「In-Output」

当サイトではプログラミング言語の情報を発信しています。
HTMLやCSSのマークアップ言語の学習方法や解説、WordPressでのサイト開設方法、python等のプログラミング言語を使用して日頃の作業の効率化等、皆様のお役に立てるサイトを目指しています。

CTR IMG