【WordPress】SANGOでサイドバーにプロフィールを見やすくカスタマイズする方法

【WordPress】SANGOでサイドバーにプロフィールを見やすくカスタマイズする方法

WordPressのテーマ『SANGO』を使い続けて数ヶ月…

色々試行錯誤を繰り返した結果、ようやくプロフィールを見やすくカスタマイズする方法に辿り着きました。

すでに他のSANGOユーザーさんや、SANGOカスタマイズガイド『サルワカ』でも紹介されていますが、WordPress歴の浅い筆者でも実行できたので、紹介させていただきます。

サイドバーにプロフィールを見やすくカスタマイズする

今回参考にさせていただいたのは安定のサルワカです。

参考 サイドバーや記事下にプロフィール(この記事を書いた人)を設置するSANGOカスタマイズガイド

今現在設定しているサイドバーのプロフィールは下の写真の赤枠部分になります。

サイドバーにプロフィールを見やすくカスタマイズする

早速手順を説明していきます。

外観→ウィジェットからカスタムHTMLを貼る

WordPressのダッシュボードより「外観」→「ウィジェット」と進み、カスタムHTMLをクリックしたままサイドバーに貼り付けます。

サイドバーにプロフィールを見やすくカスタマイズする

貼り付けたカスタム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をそれぞれ貼り付けていきます。

プロフィール文で改行したい場合には、下記のような改行コードを使用してください。

HTML
<br>

使用しないボタンはHTMLコードを削除する

筆者の場合はTwitter、インスタ、YouTubeの3つのみリンクを貼っています。

使用しないボタン部分のHTMLコードは削除すれば表示されません。

facebookを消したい場合には以下の部分を消せば表示されなくなります。

HTML
 <li><a href="★facebookのURL★" target="_blank" rel="nofollow noopener"><i class="fab fa-facebook"></i></a></li>



SANGOユーザーはサルワカでほぼ解決出来る

様々なプロフィールの表示方法を試しましたが、SANGOユーザーならサルワカのSANGOカスタマイズガイドをそのまま実行すればほぼ解決できます。

参考 SANGOカスタマイズガイドSANGOカスタマイズガイド|サルワカ

ぜひご参考ください。

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)