Menu
カテゴリー
WordPressテーマ『SWELL』特化ブログ
  1. ホーム
  2. SWELL
  3. swell
  4. 【SWELL】「この記事を書いた人」をカスタマイズ【コピペコード付】

【SWELL】「この記事を書いた人」をカスタマイズ【コピペコード付】

広告
swell
悩む人

「この記事を書いた人」にプロフィールページへのリンクを貼ったり、記事内に表示させたりしたいんだけど方法があれば教えてほしいです。

こういった悩みにお答えします。

お知らせ

※画像上はアイコンが「Twitter」のままですが「X」になるようにコードは修正しております。

本記事で解決できること

  • 「この記事を書いた人」にプロフィール詳細ページへのリンクを貼る方法　※リンク先は自分で決めることができます。
  • 「この記事を書いた人」を記事内に掲載する方法
  • 「この記事を書いた人」のコビペコードが手に入る。

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ SWELLでのブロックエディタの使い方を知りたいですか？本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容

【SWELL】の「この記事を書いた人」とは

記事を読み終わった後に表示されている下記画像の赤枠部分です。

以下よりSWELLで用意されている「この記事を書いた人」の設定方法を紹介します。

手順①：著者情報エリアの設定

管理画面メニューから、「外観」＞「カスタマイズ」＞「投稿・固定ページ」＞「記事下エリア」を選択します。

「記事下エリア」を下へスクロールすると「著者情報エリアの設定」が出現します。

著者情報エリアの設定

  • ①：著者情報の表示・非表示を選択できます。
  • ②：著者ページへのリンクの表示・非表示を選択できます。
  • ③：「この記事を書いた人」のタイトルを変更できます。

手順②：「著者名・プロフィール情報・SNSリンク 等」の設定

管理画面メニューから、「ユーザー」＞「プロフィール」を選択します。

「プロフィール」を下へスクロールすると下記画像の画面左側が出現します。

「名前」と「あなたについて」の設定

  • ①：ブログ上の表示名に入力した名前が表示されます。
  • ②：サイトに入力したリンク先が表示されます。
  • ③：「この記事を書いた人」の「プロフィール情報」が表示されます。

さらに下へスクロールすると下記画像の画面左側が出現します。

SWELL追加データ

  • ④：「役職・肩書き」に入力した内容が著者名の下に表示されます。
  • ⑤：入力したSNSetcのリンク先がプロフィール情報の下に表示されます。
  • ⑥：カスタムアバターに挿入した画像が著者名の上に表示されます。

以上がSWELLで用意されている「この記事を書いた人」の設定方法です。

注意点

※「著者名」や「この著者の記事一覧へ」にカーソルを乗せるとユーザーIDが表示されます（ユーザーIDがバレると不正ログインの可能性も😱）。

著者名

この著者の記事一覧へ

では、これより「この記事を書いた人」をカスタマイズする方法を解説していきます。

【SWELL】の「この記事を書いた人」をカスタマイズ

「この記事を書いた人」を「ウィジェット」で関連記事上に設置

SWELLで用意されている「この記事を書いた人」と同じ位置に表示されます。

管理画面メニューから、「外観」＞「ウィジェット」を選択します。

「カスタムHTML」をドラッグ&ドロップで「関連記事上」に入れます。

「カスタムHTML」にコードをコピペします。

以下のコードをコピペします。


<!-- ウィジェット（関連記事上）｜カスタムHTMLに添付 -->
<div id="after_article" class="l-articleBottom">
    <section class="l-articleBottom__section -author">
        <h2 class="l-articleBottom__title c-secTitle"><!-- サブタイトルのデザインが反映される。 -->
            この記事を書いた人
        </h2>
        <div class="p-authorBox">
            <div class="p-authorBox__l">
                <img width="100" height="100" src="ここに「カスタムアバター」用に用意した画像のリンクを貼る。" alt="⚪︎⚪︎のアバター" class="avatar"
                    loading="lazy">
                <!-- ブログ上の表示名 -->
                <a href="「この著者のプロフィールページ」のURL" class="p-authorBox__name hov-col-main u-fz-m">
                    ここに「ブログ上の表示名」を入力
                </a>
                <!-- 役職 -->
                <span class="p-authorBox__position u-fz-s u-thin">
                    ここに「役職」を入力
                </span>
            </div>
            <div class="p-authorBox__r">
                <!-- プロフィール情報 -->
                <p class="p-authorBox__desc u-thin">
                    ここに「プロフィール情報」を入力
                </p>
                <!-- 各種リンク -->
                <ul class="c-iconList is-style-circle p-authorBox__iconList">
                    <!-- サイト -->
                    <li class="c-iconList__item -link">
                        <a href="ここに「サイト」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="link">
                            <i class="c-iconList__icon icon-link" role="presentation"></i>
                        </a>
                    </li>
                    <!-- サイト2 -->
                    <li class="c-iconList__item -link">
                        <a href="ここに「サイト2」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="link">
                            <i class="c-iconList__icon icon-link" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Facebook URL -->
                    <li class="c-iconList__item -facebook">
                        <a href="ここに「Facebook」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="facebook">
                            <i class="c-iconList__icon icon-facebook" role="presentation"></i>
                        </a>
                    </li>
                    <!-- X(Twitter) URL -->
                    <li class="c-iconList__item -twitter-x">
                        <a href="ここに「Twitter」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="twitter-x">
                            <i class="c-iconList__icon icon-twitter-x" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Instagram URL -->
                    <li class="c-iconList__item -instagram">
                        <a href="ここに「Instagram」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="instagram">
                            <i class="c-iconList__icon icon-instagram" role="presentation"></i>
                        </a>
                    </li>
                    <!-- TikTok URL -->
                    <li class="c-iconList__item -tiktok">
                        <a href="ここに「TikTok」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="tiktok">
                            <i class="c-iconList__icon icon-tiktok" role="presentation"></i>
                        </a>
                    </li>
                    <!-- 楽天ROOM URL -->
                    <li class="c-iconList__item -room">
                        <a href="ここに「楽天ROOM」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="room">
                            <i class="c-iconList__icon icon-room" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Pinterest URL -->
                    <li class="c-iconList__item -pinterest">
                        <a href="ここに「Pinterest」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="pinterest">
                            <i class="c-iconList__icon icon-pinterest" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Github URL -->
                    <li class="c-iconList__item -github">
                        <a href="ここに「Github」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="github">
                            <i class="c-iconList__icon icon-github" role="presentation"></i>
                        </a>
                    </li>
                    <!-- YouTube URL -->
                    <li class="c-iconList__item -youtube">
                        <a href="ここに「YouTube」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="youtube">
                            <i class="c-iconList__icon icon-youtube" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Amazon欲しいものリストURL -->
                    <li class="c-iconList__item -amazon">
                        <a href="ここに「Amazon欲しいものリスト」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="amazon">
                            <i class="c-iconList__icon icon-amazon" role="presentation"></i>
                        </a>
                    </li>
                </ul>
                <div class="p-authorBox__more">
                    <!-- この著者のプロフィール詳細へ -->
                    <a href="ここに「この著者のプロフィール詳細へ」のURLを入力" class="p-authorBox__moreLink hov-bg-main u-fz-s">
                        この著者のプロフィール詳細へ
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>

コードをコピペしただけでは赤枠部分の見た目がSWELLで用意されている「この記事を書いた人」と異なっています。

では、見た目を整えていきます。

管理画面メニューから、「外観」＞「カスタマイズ」＞「追加CSS」を選択します。

追加CSSに下記のコードをコピペします。


.l-articleBottom__title.c-secTitle {
	font-weight: bold;
	line-height: 1.6;
}

.l-articleBottom__section.-author ul {
	list-style: none;
	padding-left: 0;
}

コピペしました。

これで見た目が整いました。

次は、サブコンテンツのタイトルデザインを決めます。

管理画面メニューから、「外観」＞「カスタマイズ」＞「サイト全体設定」＞「タイトルデザイン」を選択します。

デフォルトでは、サブコンテツのタイトルデザインは「左に縦線」です。

  • 「投稿・固定ページ」から設置：SWELLで用意されている「この記事を書いた人」
  • 「ウィジェット」から設置：カスタムHTMLで用意した「この記事を書いた人」

※カスタムHTMLで用意した「この記事を書いた人」のサブコンテツのタイトルデザインにも反映されます。

下記よりその他のサブコンテツのタイトルデザインを確認できます。

リンク先を自分で決めれるのでユーザーIDがバレる心配もありません。

著者名にカーソルを乗せています。

「この著者のプロフィール詳細へ」にカーソルを乗せています。

「この記事を書いた人」を「カスタムHTML」で記事内に設置

管理画面メニューから、「投稿」＞「新規追加」を選択します。

「ブロック挿入ツールを切り替え」をクリックします。

ブロック挿入ツールを切り替えから、「ブロック」＞「ウィジェット」＞「カスタムHTML」を選択します。

「カスタムHTML」に下記のコードをコピペします。


<!-- 本文上｜カスタムHTMLに添付 -->
<div class="l-articleBottom__section -author">
    <div class="l-articleBottom__title c-secTitle"><!-- サブタイトルのデザインが反映される。 -->
        この記事を書いた人
    </div>
    <div class="p-authorBox">
        <div class="p-authorBox__l">
            <img width="100" height="100" src="ここに「カスタムアバター」用に用意した画像のリンクを貼る。" alt="⚪︎⚪︎のアバター" class="avatar"
                loading="lazy">
            <!-- ブログ上の表示名 -->
            <a href="「この著者のプロフィールページ」のURL" class="p-authorBox__name hov-col-main u-fz-m">
                ここに「ブログ上の表示名」を入力
            </a>
            <!-- 役職 -->
            <span class="p-authorBox__position u-fz-s u-thin">
                ここに「役職」を入力
            </span>
        </div>
        <div class="p-authorBox__r">
            <!-- プロフィール情報 -->
            <p class="p-authorBox__desc u-thin">
                ここに「プロフィール情報」を入力
            </p>
            <!-- 各種リンク -->
            <ul class="c-iconList is-style-circle p-authorBox__iconList">
                <!-- サイト -->
                <li class="c-iconList__item -link">
                    <a href="ここに「サイト」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="link">
                        <i class="c-iconList__icon icon-link" role="presentation"></i>
                    </a>
                </li>
                <!-- サイト2 -->
                <li class="c-iconList__item -link">
                    <a href="ここに「サイト2」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="link">
                        <i class="c-iconList__icon icon-link" role="presentation"></i>
                    </a>
                </li>
                <!-- Facebook URL -->
                <li class="c-iconList__item -facebook">
                    <a href="ここに「Facebook」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="facebook">
                        <i class="c-iconList__icon icon-facebook" role="presentation"></i>
                    </a>
                </li>
                <!-- Twitter URL -->
                <li class="c-iconList__item -twitter">
                    <a href="ここに「Twitter」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="twitter">
                        <i class="c-iconList__icon icon-twitter" role="presentation"></i>
                    </a>
                </li>
                <!-- Instagram URL -->
                <li class="c-iconList__item -instagram">
                    <a href="ここに「Instagram」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="instagram">
                        <i class="c-iconList__icon icon-instagram" role="presentation"></i>
                    </a>
                </li>
                <!-- TikTok URL -->
                <li class="c-iconList__item -tiktok">
                    <a href="ここに「TikTok」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="tiktok">
                        <i class="c-iconList__icon icon-tiktok" role="presentation"></i>
                    </a>
                </li>
                <!-- 楽天ROOM URL -->
                <li class="c-iconList__item -room">
                    <a href="ここに「楽天ROOM」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="room">
                        <i class="c-iconList__icon icon-room" role="presentation"></i>
                    </a>
                </li>
                <!-- Pinterest URL -->
                <li class="c-iconList__item -pinterest">
                    <a href="ここに「Pinterest」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="pinterest">
                        <i class="c-iconList__icon icon-pinterest" role="presentation"></i>
                    </a>
                </li>
                <!-- Github URL -->
                <li class="c-iconList__item -github">
                    <a href="ここに「Github」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="github">
                        <i class="c-iconList__icon icon-github" role="presentation"></i>
                    </a>
                </li>
                <!-- YouTube URL -->
                <li class="c-iconList__item -youtube">
                    <a href="ここに「YouTube」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="youtube">
                        <i class="c-iconList__icon icon-youtube" role="presentation"></i>
                    </a>
                </li>
                <!-- Amazon欲しいものリストURL -->
                <li class="c-iconList__item -amazon">
                    <a href="ここに「Amazon欲しいものリスト」のURLを入力" target="_blank" rel="noopener"
                        class="c-iconList__link u-fz-14 hov-flash-up" aria-label="amazon">
                        <i class="c-iconList__icon icon-amazon" role="presentation"></i>
                    </a>
                </li>
            </ul>
            <div class="p-authorBox__more">
                <!-- この著者のプロフィール詳細へ -->
                <a href="ここに「この著者のプロフィール詳細へ」のURLを入力" class="p-authorBox__moreLink hov-bg-main u-fz-s">
                    この著者のプロフィール詳細へ
                </a>
            </div>
        </div>
    </div>
</div>

次は、サブコンテンツのタイトルデザイン決めですが、「関連記事上」の時と同様で、管理画面メニューの「外観」＞「カスタマイズ」＞「サイト全体設定」＞「タイトルデザイン」で決めたタイトルデザインが反映されますので割愛します。

「この記事を書いた人」を「カスタムHTML」で記事内に設置【アレンジVer.】

  • この記事を書いた人：管理画面メニューの「SWELL設定」＞「エディター設定」＞「カスタム書式」から見出しを作成しています。
  • コード内にある<div></div>で囲まれた「この記事を書いた人」を削除します。

※下記コードは「この記事を書いた人」を「カスタムHTML」で記事内に設置で使用したコードです。

表示すると下記画像の見た目になります。

【最後に】原本を置いておきます。


<!-- 原本｜カスタムHTMLに添付 -->
<div id="after_article" class="l-articleBottom">
    <section class="l-articleBottom__section -author">
        <h2 class="l-articleBottom__title c-secTitle"><!-- サブタイトルのデザインが反映される。 -->
            この記事を書いた人
        </h2>
        <div class="p-authorBox">
            <div class="p-authorBox__l">
                <img width="100" height="100" src="ここに「カスタムアバター」用に用意した画像のリンクを貼る。" alt="⚪︎⚪︎のアバター" class="avatar"
                    loading="lazy">
                <!-- ブログ上の表示名 -->
                <a href="https://サイトドメイン/author/ユーザー名/" class="p-authorBox__name hov-col-main u-fz-m">
                    ここに「ブログ上の表示名」を入力
                </a>
                <!-- 役職 -->
                <span class="p-authorBox__position u-fz-s u-thin">
                    ここに「役職」を入力
                </span>
            </div>
            <div class="p-authorBox__r">
                <!-- プロフィール情報 -->
                <p class="p-authorBox__desc u-thin">
                    ここに「プロフィール情報」を入力
                </p>
                <!-- 各種リンク -->
                <ul class="c-iconList is-style-circle p-authorBox__iconList">
                    <!-- サイト -->
                    <li class="c-iconList__item -link">
                        <a href="ここに「サイト」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="link">
                            <i class="c-iconList__icon icon-link" role="presentation"></i>
                        </a>
                    </li>
                    <!-- サイト2 -->
                    <li class="c-iconList__item -link">
                        <a href="ここに「サイト2」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="link">
                            <i class="c-iconList__icon icon-link" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Facebook URL -->
                    <li class="c-iconList__item -facebook">
                        <a href="ここに「Facebook」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="facebook">
                            <i class="c-iconList__icon icon-facebook" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Twitter URL -->
                    <li class="c-iconList__item -twitter">
                        <a href="ここに「Twitter」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="twitter">
                            <i class="c-iconList__icon icon-twitter" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Instagram URL -->
                    <li class="c-iconList__item -instagram">
                        <a href="ここに「Instagram」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="instagram">
                            <i class="c-iconList__icon icon-instagram" role="presentation"></i>
                        </a>
                    </li>
                    <!-- TikTok URL -->
                    <li class="c-iconList__item -tiktok">
                        <a href="ここに「TikTok」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="tiktok">
                            <i class="c-iconList__icon icon-tiktok" role="presentation"></i>
                        </a>
                    </li>
                    <!-- 楽天ROOM URL -->
                    <li class="c-iconList__item -room">
                        <a href="ここに「楽天ROOM」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="room">
                            <i class="c-iconList__icon icon-room" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Pinterest URL -->
                    <li class="c-iconList__item -pinterest">
                        <a href="ここに「Pinterest」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="pinterest">
                            <i class="c-iconList__icon icon-pinterest" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Github URL -->
                    <li class="c-iconList__item -github">
                        <a href="ここに「Github」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="github">
                            <i class="c-iconList__icon icon-github" role="presentation"></i>
                        </a>
                    </li>
                    <!-- YouTube URL -->
                    <li class="c-iconList__item -youtube">
                        <a href="ここに「YouTube」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="youtube">
                            <i class="c-iconList__icon icon-youtube" role="presentation"></i>
                        </a>
                    </li>
                    <!-- Amazon欲しいものリストURL -->
                    <li class="c-iconList__item -amazon">
                        <a href="ここに「Amazon欲しいものリスト」のURLを入力" target="_blank" rel="noopener"
                            class="c-iconList__link u-fz-14 hov-flash-up" aria-label="amazon">
                            <i class="c-iconList__icon icon-amazon" role="presentation"></i>
                        </a>
                    </li>
                </ul>
                <div class="p-authorBox__more">
                    <!-- この著者の記事一覧へ -->
                    <a href="https://サイトドメイン/author/ユーザー名/" class="p-authorBox__moreLink hov-bg-main u-fz-s">
                        この著者の記事一覧へ
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>

記事内に原本を設置する際の注意点

  • 「この記事を書いた人」が見出しタグ（<h2></h2>）で囲まれていると、管理画面メニューの「外観」＞「カスタマイズ」＞「投稿・固定ページ」＞「コンテンツのデザイン」内の「見出しのデザイン設定」が反映されてしまいます。サブコンテンツのタイトルデザインを反映させるためには、他のタグ（例えば<div></div>）で囲みます。　
  • 必須ではないですが<section></section>の中には見出しタグ（例えば<h2></h2>）を置きます。見出しタグ（<h2></h2>）は削除するので他のタグ（例えば<div></div>）に置き換えます。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ SWELLでのブロックエディタの使い方を知りたいですか？本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。

今回は以上です。

swell

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
本記事の内容