WordPressのテーマ『SANGO』を使い続けて数ヶ月…
色々試行錯誤を繰り返した結果、ようやくプロフィールを見やすくカスタマイズする方法に辿り着きました。
すでに他のSANGOユーザーさんや、SANGOカスタマイズガイド『サルワカ』でも紹介されていますが、WordPress歴の浅い筆者でも実行できたので、紹介させていただきます。
サイドバーにプロフィールを見やすくカスタマイズする
今回参考にさせていただいたのは安定のサルワカです。
参考 サイドバーや記事下にプロフィール（この記事を書いた人）を設置するSANGOカスタマイズガイド今現在設定しているサイドバーのプロフィールは下の写真の赤枠部分になります。
早速手順を説明していきます。
外観→ウィジェットからカスタムHTMLを貼る
WordPressのダッシュボードより「外観」→「ウィジェット」と進み、カスタムHTMLをクリックしたままサイドバーに貼り付けます。
貼り付けたカスタムHTMLを開くと『タイトル・内容』の項目があります。
タイトルは空欄のままで、赤枠「内容」の中に下記のHTMLコードをコピペします。
<div class="yourprofile">
<div class="profile-background"><img src="★背景画像のURL★"></div>
<div class="profile-img"><img src="★プロフィール画像のURL★" width="80" height="80"></div>
<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 noopener" ><i class="fab fa-twitter"></i></a></li>
<li><a href="★facebookのURL★" target="_blank" rel="nofollow noopener"><i class="fab fa-facebook"></i></a></li>
<li><a href="★instagramのURL★" target="_blank" rel="nofollow noopener"><i class="fab fa-instagram" ></i></a></li>
<li><a href="★feedlyのURL★" target="_blank" rel="nofollow noopener"><i class="fa fa-rss"></i></a></li>
<li><a href="★LINEのURL★" target="_blank"><i class="fab fa-line"></i></a></li>
<li><a href="★YouTubeのURL★" target="_blank"><i class="fab fa-youtube"></i></a></li>
</ul>★〜★の中を書き換える
これで完成ではなく、それぞれ★〜★の部分を自分用に書き換えていきます。
背景画像はWordPressダッシュボードの「メディア」より選択し、選択した画像のサイドバーを少し下にスクロールすると表示される「リンクをコピー」からコピペしてください。
プロフィール画像も同様ですが、自動的に円の中に画像が適応されるため、正方形の写真を推奨します。
あとは名前、プロフィール文を記入し、TwitterなどのURLをそれぞれ貼り付けていきます。
プロフィール文で改行したい場合には、下記のような改行コードを使用してください。
<br>使用しないボタンはHTMLコードを削除する
筆者の場合はTwitter、インスタ、YouTubeの３つのみリンクを貼っています。
使用しないボタン部分のHTMLコードは削除すれば表示されません。
facebookを消したい場合には以下の部分を消せば表示されなくなります。
<li><a href="★facebookのURL★" target="_blank" rel="nofollow noopener"><i class="fab fa-facebook"></i></a></li>
SANGOユーザーはサルワカでほぼ解決出来る
様々なプロフィールの表示方法を試しましたが、SANGOユーザーならサルワカのSANGOカスタマイズガイドをそのまま実行すればほぼ解決できます。
参考 SANGOカスタマイズガイドSANGOカスタマイズガイド｜サルワカぜひご参考ください。
[…] スタムHTMLを入力するやり方があります。この手法を「ニワっち」さんという方が紹介していたので、そちらの記事をご参照ください。僕はこれでaltを設定出来ない問題を対処しました。 […]