プロフィールについて

　Webサイトを運営していく上で、やっぱりちゃんとしておきたいのがプロフィールです。
　ネット上の情報は玉石混淆ですが、その記事を信頼するかどうかはそのWebサイトがどんな個人・団体によって運営されているか、記事を書いたのがどんな奴かという情報 ¹を読んで判断していることと思います。

　実のところ、柳がサイトを作り始めた頃はあまりその辺をちゃんと考えていたわけではありませんでした。
　元来、柳のサイトは何か有益な情報をガシガシ広めてやろうという性質のものではなく、おそろしく読者層の狭そうな小説と韻文、某天使様にすっころんだ挙句の憑き物くさいテンションで書き散らした駄文の置き場です。あくまでも御用とお急ぎのない方向けに、暇潰しになれば幸いぐらいに思って書いていた訳ですから、プロフィールなんていらんだろ、くらいに思っていたのでした。

　しかしWordPressには標準でプロフィールを入力しておく欄が存在します ²し、Cocoonに至ってはちゃんとブロックも存在します ³。そうか、やっぱりやっとかないと不味いのかなと思って一応文言はつくっていたのですが、それをきちんと掲示してきた訳ではありませんでした。

　それがこのところ、Googleセンセイが

「過去＊＊日間でクリック数が＊＊クリックに到達しました。」

　…などというメールを送って下さるのです。
　これはその昔、Google Search Consoleにサイトを登録して一応アクセス解析なぞ試みた遺産 ⁴です。

こんな苦労もあったのですよ

アナリティクスの落とし穴

サイト構築時からつけているアクセスカウンターがあまりにもおおらかで、賑やかし以上の意味がないような…というお話は以前にもしたような気がします。正直、柳としては「書きたい文章を書いて体裁整えてuploa...

　アクセス解析の手法としては、昔はUA（ユニバーサル・アナリティクス）という方式でカウントしていたらしいのですが、これが2023年7月にサポートが終了、現在はGA4（Googleアナリティクス4）に移行しているそうです。
　…といっても、柳自身その仕組みが理解できているとは決して言えない状況です。Googleセンセイにオンブにダッコ状態で一応セッティングしてみたというだけで、リアクションが返ってきてるところをみると…まァとりあえず移行には成功したらしいナ、というていたらく。まこといい加減といわれても…ぐうの音も出ません。
　改めてコレについて平易な説明を探し歩いたのですが、この辺りが比較的判りやすかったですね。ご興味のある向きは参考になさってください。

GA4とUAの5つの違いを徹底比較 | 変更点・共通点を解説

Google アナリティクス4プロパティ（GA4）とユニバーサルアナリティクス（UA）の違いは、5つのポイントに分類できます。本記事では比較表を用いながら、両者の違いを徹底解説します。GA4とUAの違...

　ちょっと回り道したのですが…
　とどのつまりGoogleセンセイによれば、千柳亭春宵の書いたものを検索で掘り当ててクリックしてくれている方が一定数いらっしゃるというのです。…コレは吃驚。

　概ね閑雲亭のお客様のようですが、かくなる上は、一応プロフィールページをちゃんと表示されるようにしたほうがいいと思い立った次第です。千柳亭書房本館（小説ページ）はともかくとして、本稿のようないわゆるエッセイ的なものにはちゃんと各ページを開いたらプロフィール欄がすみっこに載るように改造してみました。

　本稿も使用しているCocoonはプロフ画像・名前つきのプロフィールブロックがあるのでそれをサラッと使用するだけなのですが、「天からキャベツが降ってきた」「閑雲亭」「千柳亭画房」は今のところ「Twenty Seventeen」「Twenty Twenty-Four」をカスタマイズして使っているので、一工夫することにしました。

Cocoon

Cocoonプロフィールブロック

　Cocoonのページは上記のアイコンからプロフ画像の入ったプロフィールブロックを入力出来ます。（画像は本館のプロフ、CSSを別途適用したバージョン）

WordPress公式テーマ「Twenty Seventeen」

WordPressデフォルトのプロフ情報ブロック

「Twenty Seventeen」はWordPressデフォルトのプロフィール情報ブロック+プロフ画像+見出しブロックを組み合わせました。（画像は子育てエッセイ「天からキャベツが降ってきた！」より）

WordPress公式テーマ「Twenty Twenty-Four」

　いっぽうで千柳亭画房は写真+韻文サイトです。このため本館と同様ページ毎にプロフィールというのは馴染まないなぁと考え、フッターにプロフィールページへのボタンを貼り付けることにしました。ブロックテーマはこの辺りの編集が楽でいいですね。

　ついでに、新しいプロフ画像をコパイロット先生に描いてもらいました。今回のアイキャッチです。しかし、これを作るにもそれなりの苦労がありました。

“Please draw a polar bear in a comical style. The polar bear is sitting facing left and reading a thick red book. There are books piled up around him. The back of the screen is filled with bookshelves full of books”とお願いして描いてもらったTake-1
（勿論、日本語で書いてGoogleセンセイに翻訳して貰ったのですよ）

何か赤っぽい背景がキツいナ～と思ったので、「背景の本の背表紙にバリエーションをつけてみてください」とお願いしてみたTake-2
何だか背景が寒々とした上にゴミまで散らかってる感じになってしまいました。
一体何のバリエーションをつけたのか謎な一枚です。

気を取り直して「全体に、明るい色調にすることは出来ますか？」とお願いしてみたTake-3

採用！

　…ということで、「WordPressで小説サイト！」のプロフ画像はこちらになりました。順次変更していこうと思っていますが、前のプロフ画像…ぬいぐるみクマさんも結構捨てがたいので何処かに残るかも知れません。

　前のプロフ画像…実はニベアスキンミルク ⁵の景品だったのですが、お気づきの方はおられましたでしょうか？色違いで2～3種類いたはずですが、柳はこのシロクマさんがいたく気に入っていたのでした。

近況

　従来テーマとブロックテーマの編集の仕方について、ようやく少しずつ目が慣れてきた気がします。今回も、ブロックテーマと従来テーマを並べて作業していてかなりこんがらかってしまいました。
　サイト全体の修正をしようとしたときは確かにブロックテーマの方が簡単にできるという印象は受けます。でもまあ、まだまだ勉強が必要なことには違いないですね。

追記（2025/5/5）

　この投稿をアップした後になって、「Twenty Seventeen」では記事欄にしかプロフ情報ブロックが出ないことが判りました。慌てて確認してみると、確かに「閑雲亭」と「天キャベ」におけるサイドバーとフッターのウイジェットはプロフ情報も普通の段落ブロックになっていることも判明。

　はて？自分で設定しといて忘れたか？

　首捻ってばっかりもいられないので、とりあえず公式テーマでプロフ情報を反映させる方法を検索してみました。コパイロット先生にもお訊ねした挙げ句、結局カスタムショートコードで名前と紹介文だけ引っ張ってくることにしました。

コパイロット先生謹製
カスタムショートコードの設定（functions.phpに追加）

function custom_user_profile_shortcode() {
    $user_id = get_current_user_id();
    if (!$user_id) return 'ログインしていません';

    $user_info = get_userdata($user_id);
    $avatar = get_avatar($user_id, 96);
    $name = esc_html($user_info->display_name);
    $bio = esc_html(get_the_author_meta('description', $user_id));

    return "<div class='user-profile'>{$avatar}<div class='name'><strong>{$name}</strong></div><div class='bio'>{$bio}</div></div>";
}
add_shortcode('user_profile', 'custom_user_profile_shortcode');

これでショートコード

[user_profile]

で任意の場所にプロフ情報をはりつけることが出来る…筈。コパイロット先生は親切にもCSSまで提示してくれているのでとりあえず使ってみました。

.user-profile {
    text-align: center;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    background: #f9f9f9;
}

.avatar img {
    border-radius: 50%;
}

.name {
    font-size: 1.2em;
    margin-top: 10px;
}

.bio {
    font-size: 1em;
    color: #666;
    margin-top: 5px;
}

　ところがこのコードを見る限り、同時にアバター（プロフ写真）も表示できる筈なのですが、これがどうしても拾ってこない。

　.avatar img{
　　 content: url('/wp-content/themes/twentyseventeen/images/avatar.png');
　   border-radius: 50%;
}

　あ、アバターを指定してないからだ、と気づいてCSSから上記のようにメディアライブラリ内のファイルを指定してみましたがこれも巧くいかない。

　.avatar img{
　　 content:url('https://example.com/images/avatar.png')
　   border-radius: 50%;
}

じゃあ絶対指定してやればいいんじゃないかとやってみたけどこれも駄目。

　どうあっても画像が出ないので、結局シンプルに画像ブロックで挿入。名前はキャプションで入れることにしました。
　コード弱者の柳としましては…こうなると、「やっぱりCocoonいいなぁ」という感想に落ち着くのでした。表示もスタイリッシュですしね。しかしいつまでもCocoon頼りっきりでは勉強にならないので、時々こういうチャレンジもしてみるのです。
　つくづく、タイムパフォーマンスという概念と疎遠だなぁと思いますよ、自分でも（笑）

意地悪いようですが、その情報が必ずしも真実とは限らないということを弁えたスタンスは必要ですよね。
【ダッシュボード】→【ユーザー】→【プロフィール】でユーザー名に対応したメールアドレスやサイト、プロフィール情報を入力出来ます。
Cocoonの場合は上記に加えて X、インスタなどSNSのURLが入力出来るようになっており、プロフィールブロックにボタンで表示されるようになっています。実例は後述。
つまり、お恥ずかしながら今現在殆ど構っていないということで…。
ニベアスキンミルクシリーズ – NIVEA 化粧品とは疎遠な柳ですが、これにはもうウン十年来お世話になっております。