備忘録_50 / wordpress_19
最近、何となくブログとしての体裁が整ってきて、ようやく「ぁゃしぃ」を抜け出しつつある、私の備忘録（仮）改め、offtoonblogです。
右上の方にプロフィールウィジェットが表示されていると思います。
今回の備忘録はこのプロフィールの作り方です。
プロフィールの必要性
企業HPに社名、会社所在地、電話番号、メールアドレスが記載されておりますように、個人のブログサイトにもプロフィールは必要だと思います。特にフリーランスの方でブログ記事の投稿が仕事のPRも兼ねるようなコーポレートサイトに近い作りのブログサイトでは、企業情報に代わる詳細なプロフィールが必須になってきます。
プロフィール欄を表示することは、記事をご覧になっているユーザーの皆様の安心感と満足度を増加させ、しいてはその信頼がブログサイトのリピーター増加に繋がって行きます。またクローラーによるサイト分析の結果、プロフィール欄が設置してあると検索サイトの評価が上がる効果もあるようです。
以外に細かい所までチェックの対象になっていますね…。
ですが、良い事ばかりではありません。当然デメリットも存在しています。スパムの増加とPCウィルス脅威、個人情報の流出、なりすまし（スプーフィング）といった良からぬリスクも増加の一途を辿ります。
ですから、ブログサイトをマネタイズする予定が特にない場合は、必要以上の個人情報をさらけ出すことはメリットよりデメリットの方が深刻になりますので、私生活に影響を及ぼさない範囲で自己紹介をしてみましょう。
馬鹿正直に最初からすべてのプロファイルをオープンせずとも、様子を見ながら徐々に露出を増やしていく方法も全然ありだと思います。
プロフィールウィジェットを表示させる方法
[図_1]
本文記事、右側をサイドバーと言います。「最近の投稿」「関連記事」「検索窓」などの便利なツール群をウィジェットと呼びます。
今回は、「プロフィール」ウィジェットを利用して行きます。
左管理ツールバーより、
・ [外観] → [ウィジェット]
をマウスクリックします。
[図_2]
ウィジェットエリアの編集画面が開きます。
・ スクロールバーを中ほどまで下にスクロールさせて下さい。
[図_3]
一番最後のウィジェットの下、サイドバーの一番下に赤枠で囲った部分に新規ブロックを追加する⊕カラムがあります。
・ ブロックを追加します。
![[C]プロフィール1](https://i0.wp.com/www.offtoon.org/blog/wp-content/uploads/2021/11/03_2021.11.09_1a.jpg)
[図_4]
更に下にスクロールさせて、ツール群の中から、
・[C]プロフィールを選択します。
![[C]プロフィール2](https://i0.wp.com/www.offtoon.org/blog/wp-content/uploads/2021/11/04_2021.11.09_1a.jpg)
[図_5]
サイドバーにプロフィールのウィジェットが配置されました。
① 四角のフレームを円形にできます
✅ 画像を円形にする。
② サイドバーにおけるウィジェットの順序を入れ替えます。一番上にしたい場合、一番上まで移動させます。
③ 最期は忘れずに [更新] しましょう
[図_6]
ブログのサイドバー最上部にプロフィール欄が追加されました。
プロフィール内容は管理画面から変更可能です→プロフィール設定画面
※このメッセージはログインユーザーにしか表示されません。
では、次にプロフィールの編集を行います。上記のリンクからジャンプする事も可能ですが、最初から説明します
プロフィールの編集方法
[図_7]
左管理ツールバーより、
・ [ユーザー] → [プロフィール]
をマウスクリックします。
[図_4]
④ あなたのプロフィール をクリックしても、同様にこのページにジャンプできます。
プロフィール情報
[図_8]
① プロフィール情報 編集の必要な項目に個人情報を書き加えます。
いつもの定番項目ですが、
・名前・ニックネーム・あだ名
・生年月日・年齢・血液型・星座
・出身地・職業
・趣味・特技・マイブーム
・好きなこと（食べ物）・苦手なこと
・子供の頃の夢
・自分の性格・尊敬する人・好きな人
購読者になってくれる人とは、実は自分に似たタイプの人が多いものです。相手に共感するという感情は、要するに「あるある」から来るものなのですね。ですから、万人受けする事は無いのだと思います。多分…
プロフィール画像
② プロフィール画像
Twitterのようにプロフィール画像を設定する事ができます。
Gravatarでプロフィール画像の変更が可能です。 と書かれているように、wordpress公式ではプロフィール機能を「サイトやプラットフォームを越えて利用できるアバターを作成できる」Gravatar社の拡張機能を使う事を推奨しております。
こちらは次回以降でやりますが、今回は拡張機能を使わない簡単な方法で設定します。
アイコンのサイズですが…wordpress公式の推奨サイズは記述が見当たりませんでした
Gravatar を使えば、複数のウェブサービス上で共通するアバターを持つことができます。アバターは、通常、80×80ピクセルのユーザーが作成した画像です。
via:WordPressCodex_Gravatarの使い方
こちらwikiによると、アバターの標準サイズは80×80ピクセルになっております。記載ありませんが正方形が基本です
本当かと思い、念のためフォトショップで上記[図_9]のサンプルアイコン画像を実測してみたのですが、実際にブラウザ上に表示されているwordpressの画像サイズは100×100pixcelのようです。
ですから、80x80pixcelで作ってしまうと、20％ぐらい画像が引き伸ばされると思います。
大きめの画像を無劣化で縮小することは可能ですが、拡大すると画質が落ちてしまいます。後々Twitterなど他のサービスでも同じアイコンで使い回すことも考えて、オリジナル画像は240×240pxぐらいの大きめのサイズで持っていた方が良いと思います。
[図_10]
次の問題はアイコン画像をどこから調達するかです。
本人の写真を貼っても問題は無いのですが、リアルの私はとてもガッカリな写真しか持ってないのです…。
アイコン画像を持ってません…。
諦めてはいけない、困った時は、
星宝転生ジュエルセイバー がある！
- 目を逸らさず真っ直ぐ真正面を向いたアングルが良いでしょう。
- 威圧感を与えない誠実で柔和な表情の物が良いでしょう。
- 自身の性別・年齢が一致したアバターが望ましいでしょう。
- ぼさぼさの髪、だらしない服装は見苦しいです。清潔にしましょう。
- 戦闘民族系のアグレッシブな髪型は卒業しましょう。
- 背景を ビビッドカラーにすると良くも悪くも目に付きます。
しかし、困った事に…星宝転生ジュエルセイバーはミーハーなキャラクターが多くて真面目っぽい系が少ないです…
プロフィールウィジェットのカスタマイズ
style.cssプログラムに修正を加えることにより、ウィジェットの演出を変える事が可能です。
⚠️必ずバックアップを作成して下さい。
CSSは失敗すると、画面が真っ白になります。
こちらが今回使用したプログラムで、このままコピー＆ペーストで使えます。
/* プロフィールの背景色を変える 開始 */
.author-box {
background: -moz-linear-gradient(top,#0054a6, white 30%);
background: -webkit-linear-gradient(top,#0054a6, white 30%);
background: linear-gradient(to bottom,#0054a6, white 30%);
}
.author-thumb img {
border: 0px solid white;
}
/* プロフィールの背景色を変える 終了 */
プログラムの説明
カラムの一番上から下に向かい30％の位置まで、 青色から 白色へのグラデーションを適用します。
現在適用しているカラフルラインスキンではプロフィールアイコンに縁取りの演出があったのですが、その縁取りを打ち消しました。
① 管理メニューより、「外観」→ ②「テーマエディター」と開きます。
③ スタイルシート（style.css）をクリックします。
テーマファイルを改造するときのお約束ですが、必ず子テーマを弄ります。説明はこちら。
④ 改変するプログラムを、一番下の行にコピペで付け加えます。
⑤ 忘れずに [ファイルを更新] します。
今回は以上です。ありがとうございました。
| 2021/11/14 |
Eyecatch image：星宝転生ジュエルセイバー/ブリリアントサービス