Wordpressのテーマ「sango」にnoteのロゴをリンク付きで貼る方法！

1 見た目だよ

僕のwebsaiteなんだけど、右上の方に自己紹介（ピンクで囲ったところ）にnoteの表示があるね。ポチッとするとここのトップページに飛んでくるよ。

2 codeだよ

sangoカスタマイズガイドの「サイドバーや記事下にプロフィール（この記事を書いた人）を設置する」っていうサイトを元に作成しているよ。

<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">Ito_Hideo</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>twitter</li>
   <li><a href="noteの自分のアカウントのURLだよ" target="_blank" rel="nofollow noopener"><img style="border-radius: 50%;" src="ここはメディアライブラリのurlだよ" alt="note"></a>note</li>
</ul>

下から3行目ツイッター部分のcodeは標準装備で、下から2行目のcodeを僕が少し修正したよ。"noteの自分のアカウントのURLだよ"は、
僕の場合”https://note.com/ito_hideo”って入力して、srcはメディアライブラリのurlを転記するよ。

3 noteのロゴを取り込もう

メディアライブラリにnoteのロゴを取り込もう。noteヘルプセンター＞ブランドリソース＞ブランドリソースのところのロゴデータから取れるよ。

4 メディアライブラリの場所とsrcのurlだよ

Wordpressのメディアライブラリの場所だよ。ここにnoteのロゴを入れておいたから、ここのurlを貼り付けるよ。やり方は、
ダッシュボード＞メディア＞ライブラリ
ここに画像が入っているから、さらにその画像を
＞画像クリック＞右下にあるurlをコピー
このurlを2のcodeのsrcに貼り付けるよ。

5 それじゃcodeを書いていく手順だよ

⑴ トップページの上左から2番目にあるブログの名前にカーソルを置くよ。
⑵ ウィジェットをクリックして画面を開くよ。
⑶ カスタムHTMLをサイドバーの1番上にドラッグするよ。
⑷ 開いたカスタムHTMLの内容にcodeを書いていくよ。

6 なんとなく形になったかな

とりあえずリンクを貼れれば、自分のブログからnoteを読んでもらいやすくなるね。後は、おしゃれにカスタマイズするなり時間をかけて自分の好みの形に変更していけばいいね。