Ver1.3.2をリリースしました(1/27)

サイドバーや記事下にプロフィール(この記事を書いた人)を設置する

プロフィールを表示する

SANGOでは記事下に「この記事を書いた人」というプロフィールを簡単に表示させることができます。

この記事を書いた人

「この記事を書いた人」を表示させる方法

設定は、管理画面の[ユーザー]⇒[あなたのプロフィール]から行います。

ユーザーのあなたのプロフィールを選択

手順1:名前を設定

まず、表示させる名前を決めましょう。下の方にスクロールして①「ニックネーム」欄を表示させたい名前に変更します。②次にブログ上の表示名で①で入力した名前を選択します。

名前を設定する

手順2:肩書きを入力

任意下にスクロールすると「肩書き」という欄があるかと思います。こちらに入力した文字列は以下のように名前の下に表示されます。

肩書が表示される位置

「肩書き」というと何となく響きがよろしくありませんが、つまりは「一言であなたを表すと…」みたいなものですね。

手順3:ソーシャルメディア情報を入力

任意フォローボタンを表示させたい場合には、表示させたいソーシャルメディアボタンのURLを入力していきます。

ソーシャルメディアボタンを設定

入力したURLがそのままフォローボタンのURLとなります。例えばTwitterのフォローボタンを表示させたい場合には、https://twitter.com/saruwakakunというようにプロフィールページのURLを入力します(参考:FeedlyのURLの調べ方)。

手順4:プロフィール情報を入力

プロフィールを入力

次にプロフィール情報を入力します。このプロフィール情報を入力すると、記事下に「この記事を書いた人」が表示されるようになります。逆に、ニックネームやソーシャルメディア情報を入力しても、プロフィール情報が空欄だと何も表示されません。

手順5:プロフィール画像を登録

プロフィール写真(アバター画像)の登録は少しだけ面倒です。というのもWordPressの初期設定では、アバター画像のアップロード機能がついていないからです。そこでGravatarから画像を登録するAavatar Managerなどのアバター画像登録用のプラグインを使います。

プラグインを使えば、プロフィール設定ページに画像のアップロードボタンが表示され、そこから画像を選ぶだけで良いので楽だったりします。

手順6:完成!

これで完成です。記事下に「この記事を書いた人」が表示されているはずです。


サイドバーにプロフィールを表示

次にサイドバーに下のようなプロフィールボックスを表示させる方法を解説します。HTMLをいじることになりますが、基本的にはコピペでOKです。

サイドバーにプロフィール

注意
古いブラウザ(サポート終了済みのAndroidの標準ブラウザなど)でアイコン画像がうまく円形にならない場合があります。あまり気にする必要は無いかもしれませんが。

手順1:ウィジェット設定でサイドバーに「カスタムHTML」を追加

まずウィジェット設定でサイドバーに「カスタムHTML」を追加します。ウィジェット設定の方法がよく分からないという方はこちらの記事をどうぞ。

ウィジェットの設定をするウィジェットの設定をしよう:広告の貼り方も解説

手順2:カスタムHTMLの内容欄に専用のHTMLコードをコピペ

カスタムHTMLにコードをコピペ

以下のHTMLコードを内容欄にコピペします。タイトルは空欄のままにしましょう。

HTML
<div class="yourprofile">
   <p class="profile-background"><img src="★背景画像のURL★"></p>
   <p class="profile-img"><img src="★プロフィール画像のURL★"></p>
   <p class="yourname dfont">★名前★</p>
</div>
<div class="profile-content">
  <p>★プロフィール文★</p>
</div>
<ul class="profile-sns dfont">
    <li><a href="★twitterのURL★"  target="_blank" rel="nofollow" ><i class="fa fa-twitter"></i></a></li>
    <li><a href="★facebookのURL★" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a></li>
    <li><a href="★instagramのURL★" target="_blank" rel="nofollow"><i class="fa fa-instagram" ></i></a></li>
    <li><a href="★feedlyのURL★"  target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a></li>
</ul>

手順3:コードを自分用に書き換え

このコード内の★の部分を書き換えていきます。

画像は管理画面の「メディア」からアップロードすれば良いかと思います。アップロードした画像をクリックすれば、詳細が表示され、ここでURLも取得できます。

画像のURLの取得

プロフィール画像には正方形のアイコンチックな画像を選ぶことをおすすめします。自動で円形に変形されます。

TwitterやInstagramなどのソーシャルメディアボタンはURLを貼るだけでOKです。使わないボタンについては、その前後の<li>〜</li>までをまるっと消してくださいませ。


サイドバーにアイコン型フォローボタンを表示

この画像のようにサイドバーにフォローボタンだけを表示させることもできます(iOSのホーム画面を意識したデザインにしてみました)。

フォローボタンだけを表示

こちらも同様にウィジェットでサイドバーにカスタムHTMLを追加し、内容欄に以下のコードを貼ることで実現できます。

HTML
<div class="follow_btn dfont">
   <a class="Twitter" href="★TwitterのURL★" target="_blank" rel="nofollow">Twitter</a>
   <a class="Facebook" href="★facebookのURL★" target="_blank" rel="nofollow">Facebook</a>
   <a class="Instagram" href="★InstagramのURL★" target="_blank" rel="nofollow">Instagram</a>
   <a class="Feedly" href="★FeedlyのURL★" target="_blank" rel="nofollow">Feedly</a>
</div>

それぞれのURLを書き換え、不要なボタンについては前後の<a>〜</a>をまるっと消してしまってくださいませ。タイトル欄には「Follow Me」や「フォローする」などと入力すると良いでしょう。

58 Comments

BAOOKUN

カスタムHTMLや管理画面のプロフィール欄で入力できるSNSの種類をもう少し増やしていただけると本当にありがたいです!少なくともYotubeは欲しいです!それと余裕が
あれば、PinterestとFlickr、それにTumblrもなどメジャーどころを網羅していただければ飛んで喜びます。

返信する
サルワカくん

アップデートでの実装を検討させて頂きます。ご意見ありがとうございます。

返信する

「この記事を書いた人」の位置をサムネイル画像直下などに移動させる方法も追記していただけると非常に助かります!他のテーマでも頑張ってカスタマイズする人が多いのでニーズはあると思います。ご検討頂けますと幸いです!

返信する

titleタグ内が「の書いた記事|サイトタイトル」となってしまうのですが、どうしたら「投稿者名の書いた記事|サイトタイトル」となりますでしょうか?
お時間ある時にご返信いただけましたら幸いです。
よろしくお願い致します!

返信する

大変失礼しました!なんのことか分からないコメントになっていましたね…(;・∀・)

このサイトでいうところのhttps://saruwakakun.design/author/saruwakadesign です。

titleタグの中身が「CatNoseの書いた記事 | SANGO」となっているかと思いますが…
僕の場合ですと「の書いた記事 | サイトタイトル」となってしまいます。

返信する
サルワカくん

いえいえ、
なるほど。管理画面の「ユーザー」⇒「あなたのプロフィール」でニックネームがきちんと入っているか確認していただけますか?

返信する

間違いなく入っています…。
「Edit Author Slug」というプラグインを入れたのがまずかったのかな…?
と思い、停止し、削除後も同じように「の書いた記事|サイトタイトル」となってしまうので何がなんだか…な感じでございます。。。

サルワカくん

本当ですか…、
キャッシュプラグインは入れていますか?
そのプラグインをオフにした後にもキャッシュが残ってしまっている可能性もあるので。
可能であれば、一度プラグインを全て停止して確認して見て頂けると幸いです。

カスタマイズもfunctions.phpをいじるようなことは特に行っていませんよね?

お騒がせしました!
そして、アドバイスありがとうございます!

プラグインを全て停止して確認したところ悪さしてるプラグインが分かりました。

Xサーバーで運営しているのですが…デフォで入ってる
「TypeSquare Webfonts for エックスサーバー」でした。

こちらを停止したら問題なく「投稿者名の書いた記事|サイトタイトル」となりました!ありがとうございました!

こはる

はじめまして、SANGOを愛用させていただいております。
当ブログでも「サイドバーにプロフィールを表示する」の手順で作成いたしましたが、スマホから確認するとプロフィールアイコンが若干左寄りになっており、サイズも少し小さく表示されます。
256×256ピクセルの正方形画像を使用しておりますが、画像の大きさにより表示がズレることはありますでしょうか。複数ブラウザで確認しましたが、同じような表示(左寄り)となります。
htmlはコピペ、★~★の間のみ差し替えました。
何か考えられる原因等ございましたらご教示願えませんでしょうか?
お忙しいところ恐れ入りますが、よろしくお願いいたします。

返信する
サルワカくん

なるほどなるほど。
詳しい事情は分かりませんが、なぜかimgタグにwidth=”56″ height=”50″というサイズ指定が入っているようです。
こちらを消せば、正しく表示されるはずです。

返信する
こはる

ご返信ありがとうございます!
ブログをchromeの「検証」で確認してみると、確かに画像のURLの後ろにwidthとheightが表示されていました…しかもPC画面サイズとスマホ画面サイズで数字が変わるみたいです。
ただ、ウィジェットのカスタムHTMLの中にはそのような表示がないのですが、これはPHPファイルなどを編集しないと直らないのでしょうか。

返信する
サルワカくん

SANGOにそんな機能はないので原因プラグインだと思います。
JetpackのPhotonとか。

返信する
こはる

ま、まさしくJetpackでした…!
設定の変更でスッキリ解消いたしました。本当にありがとうございます!
実はJetpackの設定は詳しく分からないまま今まで使用しておりまして、今回教えていただかなければ永遠に気づかなかったと思います。
今回のことは大変勉強になりました。レアケースかもしれませんが、体験談としてブログに書いてみたいなと思います。
この度はお忙しい中丁寧にご対応いただきまして本当にありがとうございました。
今後ともよろしくお願いいたします。

ヒロイキ

お忙しいところすみません。
僕のブログでこのページにある『サイドバーにプロフィールを表示』の手順でサイドバーにプロフィールを設置しました。
自分のパソコンで確認してみたところ、プロフィールは設置されたのですが、円形のアイコンと名前の間の余白と名前とプロフィール文の間の余白が広くなっていました。
このページのサンプルで言えば、円形アイコンとCatNoseの間の余白とCatNoseとプロフィール文の余白のところです。
ここの説明通りに設置したつもりなのですが、すみませんアドバイスいただけないでしょうか。
よろしくお願いします。

返信する
サルワカくん

以下の2つの部分に余白が入っているようなので、空白や改行まで含めて消去して詰めてみてくださいませ。
<p class="profile-img"><img 〜></p>と、その直後のpタグとの間
<div class="profile-content"></code>と、その直後のpタグとの間

返信する
ヒロイキ

お忙しい中回答ありがとうございました!
指示通り修正したところ無事にイメージ通りになりました。
ありがとうございました!

返信する
三郎

お世話になっております。

SANGOをブログではなく情報サイトで利用させていただいているので、プロフィールの文言を「この記事を書いた人」ではなく「このサイトについて」といった他の文章に変更したいのですが、どうすればいいでしょうか?

それではよろしくお願いいたします。

返信する
サルワカくん

下記のコードを子テーマのfunctions.phpに貼り付けると、
「このサイトについて」と表示されるようになるかと思います。

//この記事を書いた人⇒このサイトについて、に
  function insert_author_info() {
   $author_descr = get_the_author_meta('description');
   if(!empty($author_descr)):  ?>
  <div class="author-info pastel-bc">
    <div class="author-info__inner">
      <div class="tb">
        <div class="tb-left">
        <div class="author_label">
          <span>このサイトについて</span>
        </div>
        <div class="author_img"><?php $iconimg = get_avatar( get_the_author_meta( 'ID' ), 100 );
          if($iconimg) echo $iconimg; //画像 ?></div>
          <dl class="aut">
              <dt>
                <a class="dfont" href="<?php echo esc_url(get_author_posts_url( get_the_author_meta( 'ID' ) )); ?>">
                  <span><?php esc_attr(the_author_meta('display_name'));//名前 ?></span>
                </a>
              </dt>
              <dd><?php esc_attr(the_author_meta('yourtitle')); ?></dd>
          </dl>
        </div>

          <div class="tb-right">

            <p><?php the_author_meta('user_description'); //プロフィール文 ?></p>
            <div class="follow_btn dfont">
            <?php 
              $socials = array(
                'Twitter' => esc_attr(get_the_author_meta('twitter')),
                'Facebook' => esc_url(get_the_author_meta('facebook')),
                'Instagram' => esc_url(get_the_author_meta('instagram')),
                'Feedly' => esc_url(get_the_author_meta('feedly')),
                'YouTube' => esc_url(get_the_author_meta('youtube')),
                'Website' => esc_url(get_the_author_meta('url')),
                );
              foreach ($socials as $name => $url) {
                if($url){
             ?>
                  <a class="<?php echo $name; ?>" href="<?php echo esc_url($url); ?>" target="_blank" rel="nofollow"><?php echo esc_attr($name); ?></a>
            <?php   }
                  } ?>
            </div>
          </div>
      </div>
    </div>
  </div>
<?php endif; }

よろしくお願い致します。

返信する
三郎

お忙しい中迅速な対応ありがとうございます。

無事文言を変更することができました。

返信する
みのる

サルワカさん御世話になります
ワードプレス を使用してまもないのですが、良く分からずにGravatar ミニプロフィール(jetpack)をウェジットでホームページに入れたのですが、英語で書いてあるページから入り題名と文章を入れたのですが、そこに行って書きなおすそうと思うのですが、書いた場所にたどり着くことができずに困っております、もしお分かりになれば教えて頂けないでしょうか、それと削除の仕方もわかれば宜しくお願い致します。

返信する
平田

いつも愛用させてもらっています。
プロフィール画像の大きさを変えたい場合は(もう少し大きくしたい)
どうすればいいでしょうか?
ご教授ください。

返信する
サルワカくん

対応が遅くなってしまいすみません。
自己解決ありがとうございます。

返信する
サルワカくん

そちらのサイトのタイトルは画像ですね・・・。
画像を作って貼るしかありません。

返信する
キキ

サイドバーでのみ起こる現象なのですが、JetPackの画像最適化機能で

“Serve images from our servers”

という機能をONにすると、プロフィール画像が読み込まれている最中に段階的に小さく表示されていき、本来見せたい大きさよりもひと回り小さく表示されてしまいます。

以前、Storkというテーマを使っている際に、吹き出し部分の画像でも同様の事が起こりましたが、SANGOの吹き出しでは起きません。

SANGOではサイドバーのプロフィール画像だけで起きるので、なにかいい解消法はないかと思っているのですが、解決策があったらご享受お願いしますm(_ _)m

返信する
サルワカくん

JetPackで勝手に画像サイズが変えられてしまうようなので、対処法は分からないですね・・・。
すみません。

返信する
マサキ

お世話になります。
複数人数でブログを運営しているため、「この記事を書いた人」のレイアウトを固定ページに縦に複数並べたいのですが、HTMLのサンプルコードを掲載していただけると幸いです。よろしくお願いいたします。

返信する
マサキ

お世話になります。
プロフィールの中のウェブサイト項目を複数にしたい場合のカスタマイズ方法をご教授していただければ幸いです。またWebsiteという表示もカスタマイズしたいです。
よろしくお願いいたします。

返信する
サルワカくん

プロフィールのウェブサイト欄は空欄にして頂き、
以下のコードを子テーマのfunctions.phpに追記すれば、良いかと思います。
★★の部分をウェブページのリンクと表示名に変えてくださいませ。

/*プロフィール欄を変更*/
function insert_author_info() {
   $author_descr = get_the_author_meta('description');
   if(!empty($author_descr)): //プロフィール情報が埋まっているときに表示 ?>
  <div class="author-info pastel-bc">
    <div class="author-info__inner">
      <div class="tb">
        <div class="tb-left">
        <div class="author_label">
          <span>この記事を書いた人</span>
        </div>
        <div class="author_img"><?php $iconimg = get_avatar( get_the_author_meta( 'ID' ), 100 );
          if($iconimg) echo $iconimg; //画像 ?></div>
          <dl class="aut">
              <dt>
                <a class="dfont" href="<?php echo esc_url(get_author_posts_url( get_the_author_meta( 'ID' ) )); ?>">
                  <span><?php esc_attr(the_author_meta('display_name'));//名前 ?></span>
                </a>
              </dt>
              <dd><?php esc_attr(the_author_meta('yourtitle')); ?></dd>
          </dl>
        </div>

          <div class="tb-right">

            <p><?php the_author_meta('user_description'); //プロフィール文 ?></p>
            <div class="follow_btn dfont">
            <?php
              $socials = array(
                'Twitter' => esc_attr(get_the_author_meta('twitter')),
                'Facebook' => esc_url(get_the_author_meta('facebook')),
                'Instagram' => esc_url(get_the_author_meta('instagram')),
                'Feedly' => esc_url(get_the_author_meta('feedly')),
                'YouTube' => esc_url(get_the_author_meta('youtube')),
                'Website' => esc_url(get_the_author_meta('url')),
                );
              foreach ($socials as $name => $url) {
                if($url){
             ?>
                <a class="<?php echo $name; ?>" href="<?php echo esc_url($url); ?>" target="_blank" rel="nofollow"><?php echo esc_attr($name); ?></a>
            <?php   }
                  } ?>
              <a class="Website" href="★URL★" target="_blank" rel="nofollow">★名前★</a>
              <a class="Website" href="★URL★" target="_blank" rel="nofollow">★名前★</a>           
            </div>
          </div>
      </div>
    </div>
  </div>
<?php endif; }
/*END プロフィール欄を変更*/
返信する
りこ

こんばんは。いつもお世話になっております。

サイトを参考にさせて頂き、プロフィール画像を設定することが出来ました。
しかしiphfoneやipadでプロフィール画像をズームアップすると、プロフィール画像がどんどん小さくなってしまうのです。

一見問題なく画像も設置出来ているようなのですが、ズームした時にだけこのような現象が起きてしまいます。
どうにか解決する方法はありますでしょうか・・・?

何卒アドバイス頂けましたらと思います。
どうか宜しくお願い致します。

返信する
サルワカくん

本当ですね。不思議なバグ・・・
どうやらJetpack Photonにより画像ファイルの表示方式が勝手に書き換えられているようです。
プラグインの設定を見直して頂くか、Photonの機能はオフにして頂くのが良いかと思います。

返信する
りこ

ありがとうございます。教えて頂いた通りにPhotonの機能をオフにしたところ、あっという間に解決出来ました。迅速なご回答に本当に感謝致します。

連続で申し訳ないのですが、もう一点お伺いしても良いでしょうか…?

プロフィールの表示箇所を『サイドバー』と『記事下』の二点にしています。PCやタブレット端末では問題ないのですが、スマホ等ではサイドバーの表示も記事下にくるため、プロフィールのすぐ下にプロフィールが二重に表示されてしまいます。

スマホ端末での表示の時だけ、プロフィール表示を一カ所にしたいのですが、どのように操作したら良いでしょうか?

どうか宜しくお願いします。

返信する
サルワカくん

なるほど。
一番簡単な対処法は、外観⇒カスタマイズ⇒詳細設定で
「スマホ/タブレットではサイドバーを非表示にする」
にチェックを入れることかと思います!

返信する
りこ

お返事が遅くなってしまい申し訳ありません。
教えて頂いた通りに対応してみましたところ、すぐに解決出来ました。ありがとうございます。

サルワカさんの丁寧なサポートには、本当に日々感謝ばかりです。
今後もブログ運営に励んでいきたいと思っています。どうか宜しくお願い致します。

サワコ

こんにちは。いつもお世話になっております。
「この記事を書いた人」の背景色(#eef9ff)を変えたいのですが、どうすればよいでしょうか?
教えていただけると嬉しいです。
よろしくお願いします。

返信する
サルワカくん

こんにちは。

#inner-content .article-footer .author-info {
    background: #色コード;
}

をCSSに追加して頂ければと思います。

返信する
サワコ

早速の返信ありがとうございます!!
style.cssで良いのでしょうか??
追加いたしましたが、変化しなかったので・・・

返信する
サルワカくん

あら!スタイル適用の優先順位が他のCSS指定に負けてしまったようです・・・。
申し訳ないですが、以下に変えて頂けますか?

#inner-content .article-footer .author-info {
    background: #色コード;
}

style.cssでOKです。変更後はブラウザのキャッシュ削除をお願いします!

返信する
Noimi

こんにちは!
サイドバーのプロフィール設定をしたのですが、アイコンが小さすぎるのですが解決策はありますか?

返信する
サルワカくん
.yourprofile .profile-img {
    width: 150px;/*幅*/
    height: 150px;/*高さ*/
    margin: -75px auto 0;/*75pxの部分はwidthの半分の値に*/
}
.yourprofile .profile-img img {
  border-radius: 50%;
}

とかでどうでしょうか。子テーマのstyle.cssなどに追加してくださいませ。

返信する
Dai

こんにちは。
お世話になっております。
現在”この記事を書いた人”のニックネームをクリックするとホームページに飛ぶのですが、このリンクを好きなURLに変えるのはどこを変更すれば良いのでしょうか?

返信する
サルワカくん

少し長いですが…
下のコードを子テーマのfunctions.phpに貼り付けて、★ここにURL★の部分を好きなURLに書き換えればOKです。

  function insert_author_info() {
   $author_descr = get_the_author_meta('description');
   if(!empty($author_descr)): ?>
  <div class="author-info pastel-bc">
    <div class="author-info__inner">
      <div class="tb">
        <div class="tb-left">
        <div class="author_label">
          <span>この記事を書いた人</span>
        </div>
        <div class="author_img"><?php $iconimg = get_avatar( get_the_author_meta( 'ID' ), 100 );
          if($iconimg) echo $iconimg; //画像 ?></div>
          <dl class="aut">
              <dt>
                <a class="dfont" href="★ここにURL★">
                  <span><?php esc_attr(the_author_meta('display_name'));//名前 ?></span>
                </a>
              </dt>
              <dd><?php esc_attr(the_author_meta('yourtitle')); ?></dd>
          </dl>
        </div>

          <div class="tb-right">

            <p><?php the_author_meta('user_description'); //プロフィール文 ?></p>
            <div class="follow_btn dfont">
            <?php
              $socials = array(
                'Twitter' => esc_attr(get_the_author_meta('twitter')),
                'Facebook' => esc_url(get_the_author_meta('facebook')),
                'Instagram' => esc_url(get_the_author_meta('instagram')),
                'Feedly' => esc_url(get_the_author_meta('feedly')),
                'YouTube' => esc_url(get_the_author_meta('youtube')),
                'Website' => esc_url(get_the_author_meta('url')),
                );
              foreach ($socials as $name => $url) {
                if($url){
             ?>
                  <a class="<?php echo $name; ?>" href="<?php echo esc_url($url); ?>" target="_blank" rel="nofollow"><?php echo esc_attr($name); ?></a>
            <?php   }
                  } ?>
            </div>
          </div>
      </div>
    </div>
  </div>
<?php endif; }
返信する
Dai

ありがとうございます。
問題なく出来ました!
素早いご対応ありがとうございます。

返信する
ぴよねこ

こんにちは!sangoを使い始めてサイドバーと記事下にプロフィールを入れたのですが、ツイッターなどのSNSのロゴが表示されるのとされないものがあります。
対処法を教えていただけると助かります。

返信する
サルワカくん

FontAwesome5のデータを読み込もうとしているからだと思います。
SANGOでは、FontAwesome4.7を使用しています。FontAwesome5の読み込みリンクを外していただき
4.7のアイコンから選んで頂くようお願いします。

返信する
ようこ

この記事を書いた人のSNSボタン下に表示される「Twitter」などの表示を非表示にする方法を教えていただきたいです。よろしくおねがいいたします。

返信する
サルワカくん

ユーザー⇒「あなたのプロフィール欄」でTwitterのURLを空欄にすれば消えるはずです。

返信する
ようこ

お返事いただきありがとうございます。

説明不足で申し訳ございません。Twitterの「アイコン」は表示させたいのですが、「文字」は非表示にしたいと考えています。

よろしくおねがいいたします。

返信する
サルワカくん

あ、そういうことですね!少し邪道な方法ではありますが、以下のCSSを追加することで非表示にできるかと思います。

.follow_btn a {color: #FFF!important;}
返信する
ようこ

迅速なご対応ありがとうございます。

非表示にできることを確認できました。

ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です