SWELLカスタマイズ｜著者情報を目次の前に表示するシンプルな方法

最近、目次の上に「この記事を書いた人（著者情報）」を表示してるブログが増えてますね。本文を読む前に書き手のキャラクターが分かるので私は好きです。

私もやってみたいと思ったけど、SWELLの場合、テーマで著者情報を表示できるのは記事下エリアだけで、目次の上には出せないことが分かりました。惜しい。

しかし！ちょっとした発想の転換で、目次上に著者情報を表示することができました。

実際作ってみたものがこちら 

具体的には、目次広告のコードを入力する欄に著者情報を入れてしまえばよい、というわけ。ブログパーツ（＋カスタムHTML）と追加CSSを利用してます。裏技的な方法ではあるので、詳しく紹介しますね。

この記事を書いた人：つむり

夫と娘と3人暮らし。北陸出身、晴れの国なう。転勤族の妻。おうちと仕事のすきまで、のんびり子育て中。子育て、暮らし、働き方……毎日のあれこれを、ちょっと軽やかにするためのヒントを綴っています。

プロフィールを見る

SWELLでは著者情報は記事下だけってどういうこと？

SWELLには記事下エリアに「この記事を書いた人（著者情報）」を表示する機能があります。

この機能は、WordPressの「ユーザー」＞「プロフィール」画面に入力した情報を自動的に記事下に表示してくれるので便利だし、基本的にはこれで十分という人が多いはず。

ただし表示位置は記事下エリア限定で、他の位置に表示することはできません。別の位置も選べたら完璧なんだけどな。SWELLがものっそい高機能なだけに、本当に惜しいです。

目次上に著者情報を表示する裏技的方法

さて本題、目次上に著者情報を表示するための手順を紹介しますね。

基本的には管理画面から設定できます。テーマファイルエディタも使わなくていいので、初心者さんでも割と簡単に作れるのではないかな。以下、順を追って詳しく説明します。

手順①ブログパーツで著者情報を作成

以下のような構成のブログパーツを作っていきます。

ブログパーツを追加する

WordPressの管理画面を開き、「ブログパーツ」＞「投稿を追加」をクリックします。

ブログパーツを編集する

ブログパーツのタイトルは、分かりやすければ何でもいいです。

カラムブロックを追加します。「＋」ボタンをクリックして、「カラム」を選択します。

「えっリッチカラムブロックじゃないの？」って声が聞こえてきた気がしましたが、今回は2列のカラムが作れれば十分なのでリッチカラムブロックじゃなくていいです。

カラムのレイアウトはとりあえず 33 / 66で。横幅は後で調整します。

左カラムの編集

画像ブロックでプロフィール画像を挿入、以下のように設定します。

左カラム全体を選択し、左カラムの設定を変更します。

右カラムの編集

段落ブロックを挿入し、太字（B）で「この記事を書いた人：●●」と入力します。段落ブロックの設定は以下のとおり。

もうひとつ段落ブロックを挿入し、プロフィール文を入力します。段落ブロックの設定は以下のとおり。

SWELLボタンブロックを挿入し、以下のように設定します。

カスタムHTMLブロックを挿入し、SNSボタンの表示用コードをコピペします。

コードはサイドバーのSWELLプロフィールから取ります。

まず、サイドバーにSWELLプロフィールを表示している記事をブラウザで開きます。

ブラウザ上で右クリックして「ページのソースを表示」

ソースからサイドバーのSWELLプロフィールに対応する箇所を探します。

<aside id="sidebar" class="l-sidebar">
　<div id="swell_prof_widget-15" class="c-widget widget_swell_prof_widget">

これらのタグが目印です。数字は異なる場合があるかも。けっこう下の方にあるので、Ctrl＋F（command＋F）で、swell_prof_widgetを検索したほうが早いとおもう。

その少し後にある目的のコードをコピー、カスタムHTMLにペーストします。

<ul class="c-iconList p-profileBox__iconList is-style-circle">
 <li class="c-iconList__item -twitter-x"><a href="XのURL" target="_blank" rel="noopener external noreferrer" class="c-iconList__link u-fz-14 hov-flash-up" aria-label="twitter-x" data-wpel-link="external"><i class="c-iconList__icon icon-twitter-x" role="presentation"></i></a></li>
 <li class="c-iconList__item -instagram"><a href="インスタグラムのURL" target="_blank" rel="noopener external noreferrer" class="c-iconList__link u-fz-14 hov-flash-up" aria-label="instagram" data-wpel-link="external"><i class="c-iconList__icon icon-instagram" role="presentation"></i></a></li>
 <li class="c-iconList__item -room"><a href="楽天ROOMのURL" target="_blank" rel="noopener external noreferrer" class="c-iconList__link u-fz-14 hov-flash-up" aria-label="room" data-wpel-link="external"><i class="c-iconList__icon icon-room" role="presentation"></i></a></li>
 <li class="c-iconList__item -rss"><a href="ブログのURL/feed/" target="_blank" rel="noopener" class="c-iconList__link u-fz-14 hov-flash-up" aria-label="rss" data-wpel-link="internal"><i class="c-iconList__icon icon-rss" role="presentation"></i></a></li>
 <li class="c-iconList__item -contact"><a href="メールフォームのURL" target="_blank" rel="noopener" class="c-iconList__link u-fz-14 hov-flash-up" aria-label="contact" data-wpel-link="internal"><i class="c-iconList__icon icon-contact" role="presentation"></i></a></li>
</ul>

この記事では見やすさのため改行を入れましたが、実際のコードは1行です。SNSのURLが入っているし、表示したいSNSアイコンも人それぞれなので、自分のブログのコードをコピぺするのがいちばん手間がないはず。

右カラムを全体を選択し、右カラムの設定を変更します。

追加CSSクラス名は、既存のクラスとかぶらなければ何でもOKです。私はストレートで分かりやすい名前が好きです。追加CSSクラスの名前を変更する場合は、追加CSSを設定する際にそちらのクラス名も変更してくださいね。

カラムブロック全体の編集

カラムブロック全体を選択し、カラムをグループに変換します。

必要に応じて、ボーダーやスタイルを設定します。

ブログパーツの「公開」ボタンを押します。手順①は完了です！

手順②追加CSSを設定

このまま表示すると著者情報のデザインが崩れるため、先に追加CSSを設定します。

カスタマイザーを開きます。

カスタマイザーの一番下、「追加CSS」に必要なコードを書きます。とりあえずは以下のコードをコピペしたら整うはず。

/* 目次上著者情報の書式設定（ブログパーツ） */
@media (min-width: 960px) {
.blogparts_author-info p{
	text-align: left;
	}

.blogparts_author-info .swell-block-button{
	text-align:left;
	}
	
.blogparts_author-info ul.c-iconList{
	list-style: none;
	margin-left: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-bottom: 0;
	}
}

@media (max-width: 959px) {
	.blogparts_author-info .c-iconList{
		display: block;
		list-style: none;
		text-align: center;
		padding: 0;
	}
}

.blogparts_author-info .c-iconList .c-iconList__item{
	display: inline-block;
	}

/* SNSアイコンの枠線・背景色 */
.blogparts_author-info .c-iconList__link{
	background: #444;
	border: #444;
}

/* SNSアイコンの文字色 */
.blogparts_author-info .c-iconList__icon{
	color:#fff;
}

ブログパーツ作成時に追加CSSクラスの名前を変えた場合は、追加CSSの.blogparts_author-info も変えてください。

SNSアイコンの色は、枠線・背景色・文字色のカラーコード3箇所を編集したら変えられます。ボタンと合わせるとキレイだと思う。お好みで。

「公開」ボタンを押します。手順②も完了です。

手順③目次広告にブログパーツの呼び出しコードを貼り付ける

ブログパーツの「呼び出しコード」をコピーします。

SWELL設定＞「広告コード」タブを開き、「目次広告」に「呼び出しコード」をペーストします。

「目次広告」に他のコードが入ってる場合は、コードの上か下に入れます。個人的には、広告コードがない方がスッキリするとは思う。

「変更を保存」ボタンを押します。手順③は完了です。

手順④カスタマイザーで「目次の前に設定する」に変更

再びカスタマイザーを開きます。

「投稿・固定ページ」＞「目次」を開き、「目次広告の表示設定」を以下のように設定します。

「公開」ボタンを押します。

これで完成です。お疲れ様でした！

Q&A形式の補足情報

最後に、作っていて「ん？」と思ったところをQ&A形式でまとめました。ご参考に。

CSSが効かないんだけど？

SWELLとブラウザのキャッシュをクリアして、ブラウザの更新ボタンを押してみてください。

これでダメなら検索して解決策を探った方がいいかも。WordPressやSWELLの設定、また導入済みのカスタマイズによってはCSSがうまく効かないことも普通にあると思います。私もSNSボタンの設定でハマったし。がんばれ。

著者情報が表示されない記事があるんだけど？

各記事の編集画面で、「表示の上書き設定」で「目次広告を隠す」にチェックを入れてないか確認してください。私、5記事くらいはこれになってた。

リッチカラムブロックで作っちゃダメ？

SWELLERは本当にリッチカラムブロックが好きだな！ｗ

カラムブロックで十分だけど、リッチカラムブロックでもできると思います。でも、設定項目が少ない方がラクじゃないです？

スマホ表示だとバランス悪くならない？

レスポンシブルデザインにしたから大丈夫。パソコンは2カラム左寄せ、タブレットやスマホは1カラム中央寄せです。タブレットも2カラムがいいって人はリッチカラムブロックかなー？

SWELLの著者情報のデザインに寄せたいんだけど？

スッキリしててキレイだしね！わかりみ。

一番カンタンなのは、SWELLの著者情報のHTMLコードを目次広告のところに直接コピペする方法です。ソースから記事下の著者情報に該当する箇所を探してコピーね。もちろん、ブログパーツで作って呼び出しコードを目次広告のところに入れてもOK。レイアウトは追加CSSで調整！

複数著者ブログでも使える？

使えません！ブログパーツに著者情報を直接入力してるので。
複数著者のブログなら、著者別の情報を動的に出力するギミックを仕込まないといけないんじゃないかなー？

誰か賢い人がやってるんじゃないかと思って検索したらありました。functions.phpを編集するのでハードル高めですがリンクしときます。興味のある方はドゾ。

参考 SWELLカスタマイズ｜著者プロフィールを記事の先頭に表示する

皆さん「ん？」ってなるのこれっくらいかなと思います。

コードを探してコピペするのはちょっと手間だけど、検索結果からブログに来てくれた初見の読者さんにも書き手の人となりが見える、いい感じのカスタマイズになったんじゃないかな。と、臆面もなく自画自賛したところで終わります！試してみてもらえたら嬉しいです！

＼ 当ブログでも愛用中 ／

WordPressテーマ「SWELL」