Ver1.3.1をリリースしました(11/22)

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

プロフィールを表示する

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"><i class="fa fa-twitter"></i></a></li>
    <li><a href="★facebookのURL★" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="★instagramのURL★" target="_blank"><i class="fa fa-instagram" ></i></a></li>
    <li><a href="★feedlyのURL★"  target="_blank"><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">Twitter</a>
   <a class="Facebook" href="★facebookのURL★" target="_blank">Facebook</a>
   <a class="Instagram" href="★InstagramのURL★" target="_blank">Instagram</a>
   <a class="Feedly" href="★FeedlyのURL★" target="_blank">Feedly</a>
</div>

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

18 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タグとの間

返信する
ヒロイキ

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

返信する

コメントを残す

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