ブログを充実させる~コンパクトなプロフィール掲載~

2020年2月13日

これのカテゴリを技術系に入れるか迷いました。。。
でも、考えるの面倒だったんで技術カテゴリにぶち込みます。

今回は、プロフィールを入れていこうと思います。
なお、このサイトを作った当初から別ページ『管理人』を、とりあえず作ってはいましたが、正直不必要だなと思っていました。
それなのに残していた理由は、あまりにもコンテンツが無くてみすぼらしかったからです。

そう思って放置していたところ、多数のブロガー様がサイドバーなどにコンパクトでスタイリッシュなプロフィールを載せられていて、こっちの方が良いと感じたので、真似っこしてみます。

※私のサイトでのやり方を実施している為、本ページを参照している方の wordpress では、テーマによっては表示内容が一部差異がある場合もあります。


まずは、プロフィール用の画像。
出来れば何かキャラクター絵が欲しかったのですが、今のところ可能な限り現金コストは低く見積もっている為見送りまして、現在の写真となりました。
なお、写真は2019年5月に北海道旅行の際に撮ったもので、よく見てもらうと分かるのですが、指ごと食われてちょっと痛かったです。。。

次に、プロフィールを載せる場所。
今回はサイドバーのトップに持ってくるので、外観>ウィジェットを選択。


画面遷移したら、利用できるウィジェットの中にある『テキスト』を選択。
そうすると、ドロップダウンリストが表示されるので、デフォルトバーを選択し、ウィジェット追加を選択。
※今回は『汎用サイドバー(タイトルH3タイプ)』を選択


そうすると、汎用サイドバーにテキストが追加されるので、中身の追加に移ります。


上記には、既に入力してある状態を表示していますが、最初は空なので誤解されないようお願いします。
さて、入力を進めましょう。
まず、タイトルは任意ですので、お好きなタイトルをつけてください。

次に、カモメの画がある部分です。
こちらは、私の場合ビジュアルで一通りやってから、細かい部分をテキストで仕上げています。
具体的には、以下のような流れです。

  1. ビジュアルを選択
  2. 写真をライブラリにアップ
  3. 管理人名入力
  4. 簡易自己紹介を入力
  5. テキストを選択し、細かい部分を修正

なお、上記プロフィール本文をテキストにした場合の中身は以下です。

<center>
<img class="profileimg" src="画像のアップ先" width="150" height="150" /></center>
<p style="text-align: center;"><strong>管理人:綾部カオル</strong></p>
三日坊主が得意なIT土方です。
アニメ・ゲーム・ガンプラ・洋画・旅行・バイクが好きな金欠者でもあります。


なお、なぜビジュアルで書き、テキストで仕上げるかというと、楽に綺麗にできるからです。
ビジュアルだけだと画像の塩梅が中途半端になったり、テキストだけだといちいちコードを思い出すのが面倒で時間がかかるので、ざっくりビジュアルで書いて、テキストで細かい修正をするのをおススメしています。

上記までで問題なく書けたら、右下の保存を選択してください。


最後に、ちょっとした工夫をします。
私のように写真が角張ってて可愛くなければ、以下のようにすると見栄えが良くなるかもしれません。
まず、テーマ>カスタマイズ(外観)を選択。


開いたら、下方に追加CSSがあるので選択。

中身には、以下のように書いてください。
上記にて書いた class 名『profileimg』を調整してくれます。

.profileimg {
border-radius: 50%;
}


プレビューを見て、問題無ければ公開を選択しましょう。
あとは、実際に見えるサイト側にて問題なければ、全部完了です。