【SWELL】この記事を書いた人の編集方法｜非表示にする方法も

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

『 SWELL 』の〝この記事を書いた人〟は設置済みですか？

SEOにおいて「誰が書いたか（専門性や権威性）」は非常に重要です。

E-E-A-T

そこで、記事の前半で「SWELLの〝この記事を書いた人〟を非表示＆編集する方法」を。

後半では「この記事を書いた人を好きな場所に表示＆自作する方法」について解説します。

本記事を最後まで読むことで、SWELLの〝この記事を書いた人〟をサクッと「ON・OFF」できますよ！

＼使いやすさなら／

国内人気No.1

SWELLの「この記事を書いた人」を非表示にする方法

そもそも「この記事を書いた人」がいらない人は、サクッと非表示にしましょう。

の「著者情報を表示」から✅️を外すだけ。

これで「この記事を書いた人」が非表示になりますよ。

SWELLの「この記事を書いた人」を編集する方法

SWELLのこの記事を書いた人の「編集方法」は、次のとおり。

この章のもくじ

「この記事を書いた人」は次の〝２箇所〟で編集できます。

この記事を書いた人を編集する場所

まずは「プロフィール」から👇️

その①ニックネーム

「この記事を書いた人」の中身は、主にここで編集します。

あなたの名前を「ニックネーム（必須）」に入れてください。

すると、「ブログ上の表示名」でニックネームが選べるようになりますよ。

その②サイト

プロフィール情報の下のリンクは「２種類」あります。

２種類のリンク

いちばん左の「サイトリンク」だけ別なんですね。

ここには「あなたのブログのリンク（例：https://hebochans.xsrv.jp/）」を入れましょう。

サイトリンクはもう１つ設定できますが、「SNSリンク」と一緒に解説しますね。

その③プロフィール情報

「プロフィール本文」はここに入力します。

HTML形式で入力できるので・・・

HTMLに対応

とはいえ、「横長」に収まるほうが美しいですよね。

当ブログの「プロフィール情報」は上記のとおり。

プロフィールの書き方

プロフィールは意外に読まれますからね👇️

関連記事【初心者必見】ブログのプロフィール７つの例文【自己紹介の書き方】

次の「プロフィール写真」はいったんスキップします！

理由はすぐに後述しますね。

その④役職・肩書き

ニックネームの下の「役職・肩書き」はここに入力したものが反映されます。

役職・肩書きの例

ここで個性を出してもいいですね。

ボクは「ブロガー」にしています。

その⑤SNSリンク

「サイト2のリンク」はここに入力しましょう。

もう１つブログを運営していたり、ほかにWebサイトがある人にはありがたいですよね。

SNSリンクは９種類

なんと「Amazonの欲しいものリスト」まで入れられます！

なお、SNSリンクの順番は変更できません。

その⑥カスタムアバター

「プロフィール写真」はここにアップロードしてください。

カスタムアバターから一択！

プロフィール写真からだと、『Gravatar』というサイトを経由します。

Gravatar経由だと

なので、カスタムアバターから一択です。

プロフィール写真に推奨サイズはありませんが・・・

を使っていますね。

さいごに、「プロフィールを更新」をクリックしてください。

関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方９選

その⑦著者情報エリアのタイトル

の「著者情報エリアのタイトル」で、タイトル「この記事を書いた人」を変更できます。

タイトルの例

このあたりが一般的ですね。

その⑧著者ページへのリンクを表示する

の「著者ページへのリンクを表示する」に✅️を入れると、「この著者の記事一覧へ」ボタンが表示されます。

とはいえ、「著者アーカイブページへのアクセス」はプラグイン『SEO SIMPLE PACK』で禁止されています。

の【「著者」のアーカイブページを使用しない】を「いいえ」にしてください。

「設定を保存する」をお忘れなく！

ここで注意点

とはいえ、著者アーカイブページにリンクを合わせるだけで「あなたのユーザー名」がバレてしまいます。

カスタマイズする方法もありますが、そもそも表示しなくていいでしょう。

SWELLの「この記事を書いた人」を記事上部に表示させる方法【画像とブロック】

「この記事を書いた人」はブロックじゃないので、自由に場所を変えられないんですよね。

記事内の好きな場所に表示させる方法

スクショして画像にするのが手っ取り早いですが、「SNSリンク」が機能しませんよね。

そこで、SWELLの便利なブロックを駆使して「この記事を書いた人」を〝自作〟するのがオススメ！

実物は「デモサイト」にも貼っておいたので、確認してみてくださいね。

この章のもくじ

大前提として、自作の「この記事を書いた人」は〝ブログパーツ〟で作りましょう。

一元管理しよう

これでブログパーツを編集すれば、全記事に反映されます。

個別に編集しなくていいので、１つの記事に「複数」使えていいですよね。

関連記事SWELLのブログパーツの作り方３ステップと６つの使い方

ステップ①「リッチカラム」で２列にする

まずは、「この記事を書いた人」を２列にしましょう。

とはいえ、スマホでは「縦並び（１列）」にしたいので、右のメニューバーから・・・

列数

あとは「画像ブロック」や「段落ブロック」で中身を作っていきます。

ステップ②「画像」や「段落」で中身を作る

デモサイトはスタイルを「角丸」にしています。

あとは「段落ブロック」で〝ニックネーム〟や〝肩書き〟に〝プロフィール文〟を書くだけ。

ステップ③「ソーシャルアイコン」でSNSリンクを作る

SNSリンクはWordPressに標準装備されている「ソーシャルアイコンブロック」が便利！

全47種

さらに「＋」をクリックして、SNSを選択。リンクをコピペしてください。

レイアウトと設定

いろいろイジって、カスタマイズしてみてくださいね。

ブロックを〝グループ化〟すると、この記事を書いた人に「ボーダー」や「スタイル」を設定できますよ。

【コピペOK】この記事を書いた人の作り方【当ブログ限定】

当ブログ限定！この記事を書いた人の「作り方」は、次のとおり。

この章のもくじ

HTMLとCSSで自作しました。WordPressテーマ関係なく使えますよ👇️

元ネタは以前ボクが書いた記事ですが・・・

本記事では、CSSを「AFFINGER6 → SWELLバージョン」にアレンジしています。

関連記事【コピペOK】この記事を書いた人を自作する方法

ステップ①Font Awesomeの読み込みを有効化する

自作する「この記事を書いた人」の「SNSリンク」は『Font Awesome』で読み込みます。

まずは、『Font Awesome』の読み込みを有効化しましょう。

Font Awesomeの読み込み

「バージョン6」を「CSSで読み込む」に✅️を入れたら、「変更を保存」をクリック。

これで『Font Awesome』の有効化は完了です。

ステップ②追加CSSにコードをコピペする

「追加CSS」に以下のコードをまるっとコピペしてください。

右上のCopyをクリック

/* この記事を書いた人 */

/* カード全体 */
.writer-profile-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
	margin: 30px 0 60px!important;
	border: 2px dashed #eee;
}
/* カードの右・左共通 */
.wp-left, .wp-right {
  padding: 25px 20px;
}
/* カードの左側 */
.wp-left {
  width: 35%;
  border-right: 2px dashed #eee;
  text-align: center;
}
/* カードの右側 */
.wp-right {
  width: 65%;
}

/* 左側 */

/* 吹き出し */
.wp-label {
  position: relative;
  margin: 0 0 15px;
  padding: 10px 15px;
  border: 1px solid #222;
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  border-radius: 20px;
}
/* 三角 */
.wp-label::before,
.wp-label::after {
  content: '';
  border: 14px solid transparent;
  position: absolute;
  left: 50%;
  margin-left: -14px;
}
/* 線 */
.wp-label::before {
  border-top-color: #222;
  bottom: -28px;
}
/* 地 */
.wp-label::after {
  border-top-color: #fff;
  bottom: -27px;
}
/* 吹き出し内のテキスト */
.wp-label p {
	 color: #222;
	 margin-bottom: 0!important;
	 font-size: 14px!important;
	 font-weight: 700!important;
}

/* 画像 */
.wp-img {
  width: 100px;
  height: 100px;
  margin: 10px auto;
}
/* 画像を丸く、枠線をつける */
.wp-img img {
  border-radius: 50%;
  border: 2px solid #eee;
}
/* 名前 */
.wp-name {
  font-size: 18px;
  color: #6C9FCE!important;
  margin-bottom: 5px!important;
	font-size: 16px!important;
  font-weight: 700!important;
}
/* 職業 */
.wp-job {
  color: #7b7b7b;
	 margin-bottom: 0!important;
	 font-size: 14px!important;
	 font-weight: 700!important;
}

/* 右側 */

/* リストを左揃え・中央寄せに */
.ul-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}
/* 最後の要素にだけ下に余白をつけない */
.ul-center ul li:not(:last-child) {
  padding-bottom: 3px;
}

/* リストの文字色 */
.ul-center ul .li-point {
  color: #7b7b7b;
	 font-size: 14px!important;
  font-weight: 400!important;
  line-height: 1.7!important;
}
/* リストの✓ */
.li-point:before {
  font-family: "Font Awesome 6 Brands";
  content: "\";
  color: #6C9FCE;
  padding-right: 10px;
}

/* 文章を左揃え・中央寄せに */
.wp-content {
  text-align: center;
  display: block;
}
/* 文章 */
.wp-content p {
  text-align: left;
  display: inline-block;
  color: #7b7b7b;
	 margin-bottom: 0!important;
	 font-size: 14px!important;
  font-weight: 400!important;
  line-height: 1.7!important;
}
/* SNSボタン全体 */
.wp-sns {
  text-align: center;
  padding: 20px 0 0!important;
	 margin: 0!important;
	 list-style: none!important;
}
/* SNSボタン */
.wp-sns li {
  display: inline-block;
  border: 1px solid #222;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding-bottom: 0!important;
	margin: 0 3px;
	box-sizing: border-box;
}
/* SNSボタンにポイントをあてた時の挙動 */
.wp-sns li:hover{
  position: relative;
  top: 1px;
}
/* SNSアイコン */
.wp-sns li a i {
  font-size: 19px;
  color: #222;
}
/* SNSアイコンの位置 */
.wp-sns li a i::before {
  position: relative;
  top: 6px;
	left: 0;
}

/* 767px（iPad）以下 */

@media (max-width: 767px) {
  /* カードを縦並びに */
  .writer-profile-card {
    display: block;
  }
  /* 左右の幅を100%に */
  .wp-left, .wp-right {
    width: 100%;
    padding: 35px;
  }
  /* 点線を左から下に */
  .wp-left {
    border-right: none;
    border-bottom: 2px dashed #eee;
  }
}

右上の「公開」をクリック。

これで「CSS」の読み込みも完了です。

ステップ③ブログパーツで「この記事を書いた人」を作る

一元管理できるように「この記事を書いた人」は〝ブログパーツ〟で作りましょう。

「ブログパーツの作り方」は次のとおり。

ブログパーツの作り方

「用途」はなくてもOKです。

「この記事を書いた人」はHTMLで書かれているので「カスタムHTMLブロック」にコピペしてください。

右上のCopyをクリック

<div class="writer-profile-card">
    <div class="wp-left">
        <div class="wp-label"><p>この記事を書いた人</p></div>
        <div class="wp-img"><img src="ここに画像URL" alt="ニックネーム" width="100" height="100"  /></div>
        <p class="wp-name">ニックネーム</p>
        <p class="wp-job">役職・肩書き</p></div>
    <div class="wp-right">
    <div class="wp-content">
        <p>プロフィール情報（１行目）<br>
            <br>
            プロフィール情報（２行目）<br>
            <br>
            プロフィール情報（３行目）</p></div>
        <ul class="wp-sns">
            <li><a href="ここにサイトのURL"><i class="fa-solid fa-link" aria-hidden="true"></i></a></li>
            <li><a href="ここにTwitterのURL"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a></li>
            <li><a href="ここにInstagramのURL"><i class="fa-brands fa-instagram" aria-hidden="true"></i></a></li>
            <li><a href="ここにfacebookのURL"><i class="fa-brands fa-facebook" aria-hidden="true"></i></a></li>
            <li><a href="ここにYouTubeのURL"><i class="fa-brands fa-youtube" aria-hidden="true"></i></a></li>
        </ul>
    </div>
</div>

コピペしたら、中身をアレンジしてくださいね。

「この記事を書いた人」はスマホでは〝縦並び〟になりますよ。

さいごに、「公開」をクリック。

関連記事SWELLのブログパーツの作り方３ステップと６つの使い方

ステップ④ブログパーツで呼び出す

あとは、「この記事を書いた人」を使いたい場所で〝ブログパーツ〟を呼び出すだけ。

「デモサイト」に貼っておいたので、確認してみてください。

「この記事を書いた人」以外は投稿エディタに直接書いています。

修正したくなったら、「ブログパーツ」を変更してくださいね。

【Q&A】SWELLの「この記事を書いた人」に関するよくある質問

SWELLのこの記事を書いた人に関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

長くなってしまったので、一つだけ。

Q1：Swellのプロフィールはどこにありますか？

A「この記事を書いた人」とは別に【[SWELL] プロフィール】があります。

ブロガーが「サイドバー」に設置するやつですね。

プロフィールの作り方

ややこしいですが、「ユーザー › プロフィール」とは別に設定する必要があるんです。

くわしくは別記事でまるっと解説しています👇️

関連記事【最低限】SWELLおすすめの初期設定方法４つを完全解説！

関連記事SWELLのカスタマイズのやり方｜おしゃれなトップページの作り方

【まとめ】SWELLの「この記事を書いた人」でEEATをアピールしよう！

SWELLの「この記事を書いた人」について解説しました。

まとめ

『 SWELL 』の〝この記事を書いた人〟はON・OFFも編集もかんたん！

あなたの「専門性」や「権威性」をアピールするためにも設置したほうがいいですよ！

合わせて読みたい

「この記事を書いた人」以外も解説しています。ブックマーク推奨です🙌

＼使いやすさなら／

国内人気No.1

SWELLを導入したい方へ