→ 前回の記事歩きながら考える。昔と今で変わらなかった発想の取り方
ブログの記事を読んでいると、目次の少し上に「この記事を書いた人」という欄が置かれているのを、皆さんも見たことがあると思います。
顔写真やイラストと一緒に、
「この分野に○年間携わっています」
「○○の経験があります」
といった短いプロフィールが書かれている、あれです。
プロフィールページとは別に、記事を書いた人がどんな人物なのかを、その場で読者に伝えることができます。
せっかくWordPressでブログを書いているなら、私も作ってみたい。
ただ、記事を投稿するたびに毎回プロフィールを書くのは面倒です。
そこで今回は、WordPressのプラグイン「Advanced Ads」を使って、「この記事を書いた人」を記事の目次上へ自動表示してみました。
最初は文章を表示するだけだったのですが、それでは普通の本文とほとんど変わりません。
そこから枠を付け、プロフィール画像も入れ、スマートフォンでも見やすくなるよう調整していきます。
なお、HTMLやCSSについては私も詳しいわけではありません。
分からないところはAIに聞きながら進めました。
それでも、最終的にはこの記事の目次上に表示されているような形まで作ることができました。
ブログでよく見る「この記事を書いた人」とは？
「この記事を書いた人」は、その名の通り、その記事を誰が書いたのかを読者に伝えるためのものです。
ブログには運営者情報やプロフィールページを用意していることも多いでしょう。
しかし、初めて検索から訪れた人が、わざわざプロフィールページまで読んでくれるとは限りません。
記事の中に短い執筆者情報があれば、
「どんな人がこの記事を書いているんだろう？」
という疑問に、その場で答えられます。
長々と自己紹介する必要はありません。
今回、私がこのブログに設置したのは次のような内容です。
この記事を書いた人｜たつ
60代からブログとWebライティングに挑戦中。
AIやWordPressに悪戦苦闘しながら、実際に試して分かったことを同世代の目線で紹介しています。
これくらいなら記事を読む邪魔にもならず、「誰が書いているのか」も伝えられます。
今回は、この執筆者情報を目次のすぐ上へ自動表示させてみます。
「この記事を書いた人」を目次上に設置してみる
今回使ったのは、WordPressの「Advanced Ads」というプラグインです。
名前に「Ads」と付いているので広告用という印象がありますが、任意の文章などを決めた位置へ表示させることにも利用できます。
今回やりたいことは、
記事の導入文
↓
この記事を書いた人
↓
目次
↓
本文
という並びです。
しかも、過去の記事を一つずつ開いて追加するのではなく、設定した記事へ自動的に表示させたい。
そこでAdvanced Adsで執筆者情報を一つ作り、それを記事へ挿入する方法を取りました。
Advanced Adsで執筆者情報を作成する
Advanced Adsはプラグインのひとつで、WordPress管理画面左のメニューからプラグイン→「プラグインを追加」を選択し、検索窓に「Advanced Ads」を入力してインストールに進みます。
インストールされると左メニューが追加されているので、「Advanced Ads」→広告と進みます。
今回は管理するときに分かりやすいよう、「この記事を書いた人」と分かる名前を付けました。
広告タイプには、文章を入力できるリッチコンテンツを選択します。
難しく考えず、「この記事を書いた人｜たつ」
「60代からブログとWebライティングに挑戦中。」といった、実際に読者へ見せたい文章を入力しました。
ここで大切だと思ったのは、立派に見せることよりも記事内容と自分との関係が分かることです。
資格や肩書きを書いたものが多いのも事実ですが、必ずそう言った内容であることが必須ではありません。
私の場合なら「60代からブログやWebライティングに挑戦している」ということ自体が、このブログの記事を書く立場の説明になります。
「設置」で「目次の上」に表示させる
執筆者情報を作っただけでは、まだ記事には表示されません。
次にAdvanced Adsの「設置」を設定します。
配置の種類では「コンテンツ」を選びました。
ここでは、記事のどこへ作成した内容を挿入するか指定できます。
今回の設定は、「前」→「1」→「見出し2（h2）」です。
これは、記事に最初に登場するH2見出しの前へ挿入するという指定です。
私が使っているWordPressテーマはCocoonです。
実際に設定して記事を確認してみると、Cocoonの目次より上に執筆者情報が入りました。
これで、導入文 → 執筆者情報 → 目次 → 最初のH2という狙っていた順番になりました。
一つひとつの記事へ同じ文章を貼り付ける必要がないのは便利です。
執筆者情報を書き換えたくなった場合も、Advanced Ads側を修正すれば済みます。
そのままでは本文に溶け込んでしまった
位置はうまくいきました。
ところが実際の記事を確認してみると、「この記事を書いた人」が普通の本文と同じように表示されています。
これでは、どこからが執筆者情報なのか分かりにくい。
そこで、「この部分をプロフィールカードのように見せたい」とChatGPTに相談しました。
私はHTMLやCSSを自分で一から書けるわけではありません。
希望する見た目を伝えてコードを作ってもらい、WordPressの追加CSSなどへ設定しました。
手順もChatGPTが教えてくれます。
大事なのは、自分でコードを書けなくても「こうしたい」とAIに伝えることで、見た目を整えるところまでできたことでした。
プロフィール画像を入れて「書いた人」を見えるようにする
文章だけでも執筆者情報にはなります。
ただ、実際にカードにしてみると、何かもう一つ欲しくなりました。
そこでプロフィール画像も入れてみました。
画像はあらかじめメディアライブラリーに保存してあります。
メディアライブラリーでその画像をクリックするとファイルのURLがありますので、ChatGPTに指定された位置に貼り付けます。
大きなプロフィール写真ではなく、小さなアイコンが文章の横にあるくらいなので、記事本文より目立ちすぎることもありません。
実際に表示してみると、文章だけだったときよりも「誰が書いたのか」という印象がかなり強くなりました。
スマホではプロフィール画像を中央表示にする
PCで完成したカードを見ると、プロフィール画像が左、文章が右に並んでいます。
これで完成と思ったのですが、スマートフォンでも確認してみました。
すると画面が狭いため、PCとまったく同じ配置にするより、プロフィール画像を上に置いた方が見やすそうです。
ここもChatGPTに、「スマホではプロフィール画像を中央上に表示したい」とお願いしました。
すると、PCでは横並び、スマホでは画像が中央上に来るよう調整できました。
実際の表示を見る → 気になるところを見つける → AIに希望を伝える → もう一度確認する。
今回は、この繰り返しで形にしていきました。
AIに聞きながらでもここまで作れた
今回、一番書いておきたいのはここかもしれません。
私はHTMLやCSSを自由自在に書けるわけではありません。
Advanced Adsについても、最初からすべての設定方法を知っていたわけではありません。
「目次の上へ入れるにはどうする？」
「文章だけだと本文と区別できない」
「カードみたいにできない？」
「プロフィール画像も入れたい」
「スマホでは画像を上にしたい」
そんなふうに、一つ問題が出るたびにAIへ質問し、実際のWordPress画面で試しました。
すると、表示する → 位置を決める → カードにする → 画像を入れる → スマホを整えると、一段ずつ完成形に近づいていきました。
AIにコードを書いてもらったからといって、何も確認せず貼り付ければいいわけではありません。
実際のサイトで表示してみて、「ここは違う」「もう少しこうしたい」と確認する必要はあります。
それでも、「コードが分からないからできない」で終わらずに済むのは大きいと感じます。
60代になってからWordPressを触っている私でも、分からないことを一つずつ聞きながらなら、こんなカスタマイズまでできました。
まとめ｜「この記事を書いた人」は一度作れば全記事に表示できる
今回はAdvanced Adsを使って、WordPressの記事へ「この記事を書いた人」を自動表示してみました。
最終的に行ったことをまとめると、
- Advanced Adsで執筆者情報を作る
- Placementで最初のH2前へ配置する
- HTMLと追加CSSでカード風にする
- プロフィール画像を追加する
- スマホでは縦並びになるよう調整する
という流れです。
最初に表示されたときは、普通の文章と変わらず「これでは本文と見分けつかないじゃないか」と思いました。
そこから少しずつ手を加えて、現在の形になりました。
そして何より便利なのは、各記事へ同じプロフィールを手作業で追加しなくてもいいことです。
ブログで何度も見かけていた「あの欄」。
自分のブログにも、ちゃんと作ることができました。
追記｜固定ページにも表示されたので修正しました
その後、「サイトマップ」などの固定ページにも「この記事を書いた人」が表示されていることに気づきました。
通常の記事なら問題ありませんが、サイトマップに著者情報があるのは少し不自然です。
そこで今回もChatGPTに、
「通常の記事には残して、固定ページだけ著者情報を消したい」
と聞いてみました。
教えてもらったCSSを「追加CSS」に追記したところ、通常の記事には残したまま、固定ページだけ非表示にできました。
CSSが分からなくても、「こうしたい」とAIに聞けば方法を教えてもらえる。今回もそれで解決できました。
コメント