今回はWordPressテーマ「SWELL」の記事下に表示できる「この記事を書いた人」ブロックの編集方法について解説します。
デフォルト設定では記事下に表示される、下記プロフィールボックスのことです。
これは非表示にもできますし、内容ももちろん編集できます。
また当サイトでは少しだけCSSでカスタマイズして、下記の表示にしています。
そんな「この記事を書いた人」部分の表示/非表示や内容の編集、デザインカスタマイズの方法についてまとめました。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
SWELL「この記事を書いた人」を非表示にする方法
まずは意外とニーズの高い、非表示にする方法からお伝えします。
ダッシュボードから「外観→カスタマイズ→投稿・固定ページ→記事下エリア」と進み、著者情報エリアの設定項目を見ましょう。
「著者情報を表示」のチェックを外すと、表示されなくなります。
注意点
個人の見解ですが、注意点をお伝えしておきます。
「このサイトは自分だけが更新するから、表示しなくていい」という理由で、著者プロフィールを非表示にしたい方の声をよく聞きます。
しかしわざわざブログ運営者のプロフィールページを見に行ってくれる読者は稀ですから、すべての記事に表示しておいた方が読者にとっては親切です。またページごとに著者情報を明記しておく方がサイトの信頼性も高まりますし、Googleクローラーも著者情報を重視します。
よって「ライターがたくさんいるけれど、編集部名義で統一して個人のライター情報を出したくない」など運用上の理由がある場合以外は、きちんと著者情報を表示しておくことをおすすめします。
SWELL「この記事を書いた人」を設定する方法
次に、さまざまな設定をおこなう方法について解説します。
表示する見出し名を変更する方法
ダッシュボードから「外観→カスタマイズ→投稿・固定ページ→記事下エリア」と進み、著者情報エリアの設定項目を見ましょう。
上記「著者情報エリアのタイトル」部分を変更することで「この記事を書いた人」以外のテキストに変更できます。
表示する見出しデザインを変更する方法
「外観→カスタマイズ→サイト全体設定→タイトルデザイン」と進み「サブコンテンツのタイトルデザイン」を調整します。
「装飾なし、下線、左に縦線、左右に横線」の4種類から選べます。
写真やプロフィールを編集する方法
写真やプロフィールは、ユーザー設定から変更します。
ダッシュボードの「ユーザー」へ進み、プロフィールを変更したいアカウントを選び、プロフィール設定へ。
下記画面の「ブログ上の表示名」が名前に。「プロフィール情報」がプロフィール文として表示されます。
またSNS情報などは、「SWELL追加データ」の部分で調整します。
写真は「カスタムアバター」に登録したものが表示されます。
「author構造化データ」もできる範囲で入力しておくと、クローラーがそのページの著者情報を得る手助けになります。
記事に表示させる著者情報を別の人に変える方法
「この記事を書いた人」として表示される著者情報は、記事ごとの「投稿者」として設定したユーザーのものが表示されます。
複数アカウントで運用していて著者情報を変えたい場合は、投稿者を該当ユーザーへと変更しましょう。
SWELL「この記事を書いた人」のCSSカスタマイズ
ちょっとしたCSSカスタマイズをご紹介します。
コードの基本的な記述などは、下記の記事もご参考ください。
枠線を太くして角丸にして影をつけるカスタマイズ
上記のように、プロフィールボックスの枠線を太くして角丸にして影をつけるには、下記のコードを記述します。
.p-authorBox{
border:solid 2px #000;/*枠線の種類、太さ、色*/
border-radius:20px;/*角の丸さ*/
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;/*影のデザイン*/
}それぞれ数値を調整すれば、色を変えたり、角の丸さを変えたりできます。（border-radiusを0にすれば、角ばったデザインにもできます）
box-shadowについては、『Beautiful CSS box-shadow examples』からの引用です。いろいろな種類のデザインが掲載されていますので、参考にしてみてください。
背景色・文字色を変更するカスタマイズ
配色バランスが難しいかもしれませんが、上記のように背景色や文字色を変更するには下記のコードを記述します。
.p-authorBox{
background:#1f2f54;/*背景色*/
color:#fff;/*文字色*/
}下手に色を変えるとクドくなりがちですが、うまく調整できそうな方はチャレンジしてみてください。
まとめ
「この記事を書いた人」のボックスは、基本的には表示させておいて、読者から見てわかりやすい著者情報を書いておくのが理想です。
もちろん好みや運用上の理由で非表示にしても良いのですが、諸々検討してみてください。
