【WordPress】記事の冒頭に、詳細な「書いている人」情報を挿入する方法【ブログ】

こんにちは。

ブログ歴20年、ワードプレス歴10年くらいのLeoです!

…と、

ブログの冒頭でよく見かける挨拶ですよね。

今回は、そんなブログ冒頭に挿入すると役に立つ「書いている人」情報をボックスで設置する方法についての話です。

やり方だけ先見る場合はジャンプ

スマホ時代に”ちょっと知りたい”を支えるブログ

ステイホーム時代になってから、いやいや、それ以前から、「アフェリエイト」という収入を目指す活動としてのブログ執筆はもちろん、有名人の発信だったり、企業のイメージ戦略だったりとネット上に無数のブログが溢れる時代ですよね、今。

世界中に貧富の差があるとはいえ、少なくとも日本では中学生がスマホを持っていても驚かないくらい多くの人に普及していて、生活の中の”ちょっとわからないこと”に対しての”答え”を、「ググって」探す時代です。

そんな時に”答え”候補としてブログ記事が出てくることが多いです。

専門家から素人まで、情報発信する時代

ボクも、たとえば、CSSをいじっている時、せっかく買った分厚いCSSの教科書ではなく、ネット検索で方法論を調べることが多いです。それ以外にも、料理のレシピだったり、手紙の冒頭に書く季節ごとの挨拶だったり、生活の中で調べることは実に多岐に渡りますし、そのほとんどが検索の結果得られます。

その中で、検索結果に出てくる”答え”候補となる情報の中には、専門家が書いた記事ではなく、素人のブログが多いことがあげられます。

ボクもこのブログでは専門家として記事を書いていないですが、それでも何らかの情報を求めてやってきたであろう、つまり、「検索サイトから来たアクセス」がアクセスの大半です。

欲しい情報があるのかサクッと知りたい

情報過多とも言える今、ユーザー、つまり情報を探している人は、「この記事を読めば欲しい情報が手に入るのか?」に関心があります。

そのため、今回紹介する記事冒頭に挿入するパーツが効果を持ちます。

たとえば、ボクも含め、専門家ではないけど、「ファン歴10年」とか、今はもう専門家ではないだけで、「元教師」だったり、「毎月2万円節約に成功している」というような実例を伴う紹介を入れると、この人の話は説得力がある可能性がある、と思えますよね。

記事の内容を冒頭で知るためのいろいろ

ということで、記事の冒頭に入れると親切かも知れない挿入パーツを紹介していきましょう。

Twitterアカウントを載せる

昔からよく見かけるやつでいうと、TwitterのユーザーIDを載せているやつがあります。

こんにちは!サッカーブロガーのサカブロ太郎 (@sakablo-taro)です!

こんなやつ、見たことありませんか?

狙い

狙いとしては、一つはフォロワーを増やしたいというのがあると思いますが、もう一つ、そのTwitterを見てもらったら、過去の投稿からどんな人かがわかりやすいからだと思います。

最近では若い人のTwitter離れも聞かれるので見かけなくなっているかも知れません。

ボックス x リストでまとめる

続いては、このブログでもたまーに使う、「この記事を読むとわかること」と「この記事を読むべき人」というボックスxリストの挿入アイテムです。

  • 一人暮らしの始め方
  • 一人暮らしを始めた場合のメリット・デメリット
  • 一人暮らしを始めるための必須アイテム5選

例として、「一人暮らしを始めたい人必見!一人暮らしに向かって何が必要かを紹介します!」みたいな記事の冒頭に入れたい感じのを載せてみました。

「この記事を読むとわかるコト」は、親切なパーツかなーと思いますが、次に載せる「この記事を読むべき人」の方はちょっと攻めた感じです。

  • 一人暮らしの始めたい人
  • 一人暮らしのメリット・デメリットが知りたい人
  • 一人暮らしを始めるための必須アイテムが知りたい人
  • 何がなんでも一人暮らしを勝ち取りたい人

こちらは、同じ記事の想定ですが、最後の言葉が表すように、結構「この記事を読んでくれ!」という圧を含んだ感じになりがちかも知れません。

これらのやり方は見かける頻度は専門家が書く記事に多い気がしますが、記事の要約のようなものが最初にサクッと知れるので助かる・ありがたいという人も多いのではないかと思います。

狙い

恐らく専門家なら特にですが、一回アクセスしてもらったら、しっかり記事を読んでもらいたいと思っているはずなので、記事の内容と、要求(欲しい情報)がしっかりマッチしていることを早期に確定させて、文の最後まで読んでもらったり、その先にある問い合わせなどのアクションにつなげたいという狙いがあると思います。

よくないパターンが、アクセスしてくれたのはいいけど、「これじゃねー」ってなって離脱することです。それが起こるとグーグル先生が評価を下げるので、そうならないために内容をしっかりまとめて紹介しておくというのも狙いかも知れません。

真打!この記事を書いた人ボックス

さて、順番として最後になりましたが、今回の本題がこちらです!

この記事を書いた人
LeoProf

ここにメッセージ

こんな感じです。

多くのブログで、記事の末尾に「書いた人」を紹介するボックスが実装されていると思います。今使っている「ZEEN」というWordpressテーマももちろん装備されていますし、この間まで使っていた無料テーマの「Cocoon」でもありました。

基本的にはその「書いた人」を紹介するボックスを文頭に持って来るイメージでこれを作りました。

記事ごとに本文を変えられる

ポイントは、ボックス内のメッセージを記事に合わせて都度書いてくところです。記事下の「書いた人」ボックスでは、固定のプロフィール用文章が抽出されますが、それだと記事ごとの信憑性とか、この記事を読むべきだ、と思うに至る根拠が説明しきれない場合が多くなります。

たとえば元サッカー選手、というキャラクターで、Jリーグの試合解説ばっかり書いている人なら成立するかも知れませんが、ボクのように雑記ブログに近い人だと記事ごとに、内容が変えられる方が良いです。

狙い

このパーツを使う際の狙いは、「書いている人」をビジュアルで見せつつ、上記の通り記事ごとに、どんな人がなぜ書いたのか、なぜ記事に説得力があるのか、などの点をわかりやすくまとめて紹介することが狙いです。

顔を載せないブロガーさんもこの世には多いと思いますが、顔を見せて、「この人の記事がもっと読みたいな」と思わせることもフォロワーや読者を増やしたいなら有効なやり方です。

やり方

さあ、もしこの「書いている人」ボックスを使ってみたいと思った方に、ボクが作ったボックスのHTMLとCSSのコードを紹介します。

HTML
<div class="writer-box">
<div class="writer-box_title">この記事を書いた人</div>
<div class="writer-box_image"><img src="プロフィール用の画像" alt="LeoProf"></div>
<div class="writer-box_name"><a href="プロフィール用ページがあればリンクを挿入" target="0" rel="noopener">書いた人の名前</a></div>
<p>ここにメッセージ</p>
</div>

こちらのコードを本文内に挿入すれば、その場所にボックスが現れます。

AddQuickなどのプラグインに登録しておくと便利です。

CSS

 

/*「この記事を書いた人」(記事上)*/
.writer-box {
position: relative;
margin: 50px 36px 60px 36px;
padding: 35px 20px 20px 14px;
border: 1px solid #95afc0;
border-radius:2px;
width:90%;
background: none;
position: relative;
opacity: 0.9;
}

 

.writer-box: before , .writer-box: after {
clear:both;
content:””;
display:block; }

/*「この記事を書いた人」(記事上)のタイトル*/
.writer-box .writer-box_title {
position:absolute;
top:-20px;
left:20px;
padding:6px 10px;
background:#fff;
color:#30336b;
font-weight:bold;
font-style:italic;
border-radius: 0px;
border:0px solid #30336b;
display:inline-block;
font-size: 17px;

}
.writer-box_title:before {
font-family: “Font Awesome 5 Free”;
content:”\”;
font-weight:900;
margin-right:0px;
}

/*アイコン画像*/
.writer-box img {
width:80px;
height:80px;
left:-40px;
top:-50px;
border-radius:50%;
margin:0 20px 7px 15px;
}

/*名前*/
.writer-box .writer-box_name {
margin:-10px 0px 2px 0px;
padding:0;
font-size:20px;
color:#2980b9;
font-weight:bolder;
}

/*プロフィール本文*/
.writer-box p {
margin:0;
padding:0;
font-size:90%;
}

.writer-box_image {
float:left;
margin:0px 14px 3px 0;
padding:0;
width:100px;
text-align:center;
}

で、こちらのCSSコードをstyle.cssなどに入れておきます。

ボクは、パソコンからのアクセスの場合幅を90%にしていて、それでスマホから見ると狭すぎるなどの点から、@mediaを利用してスマホから見た場合は横幅いっぱいになるように、などの調整をしています。

使用例

この記事を書いた人
LeoProf

18歳の大学1回生の時にどうしても一人暮らしがしたくて夏休み、週6でバイトして敷金、礼金を貯めた経験があり、その後も一人暮らししたい学生のサポート経験が豊富にあります!

さっき紹介していた、一人暮らしについての記事の場合を想定した自己紹介を入れてみました。

どうでしょうか?

「この人の話、読んでみたい」ってなりませんでしたか?

こんな感じで、せっかく書いた記事なので、アクセスしてくれた方が「読んでみよう!」と思えるような仕掛けがこれからますます必要になります!

まとめ

  • 誰もがスマホなどで情報を”サクッと”検索する時代!
  • 欲しい情報があるか否かをわかりやすくするべき!
  • そんな用途に最適な「書いている人」ボックスは有用なはず!

ブログの種類や書いている人の傾向などにより色々あるとは思いますが、今の時代にあった親切なパーツとして、「書いている人」をわかりやすく見せつつその人が書く記事が”なぜ”読み進めるべきかを伝えられる方法を紹介してみました!

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!