「書いた人情報」にオリジナルボタンを追加する方法 ／THE SONICの活用法

このページでは、記事の上下・サイドバーにある「この記事を書いた人」に、オリジナルリンクのボタンを追加する方法を紹介します。（Ver1.2.7〜）

何につかうの？

マサオカ

やよい

運用しているSNSやサイトリンクを追加する時に使いましょう！

フリーリンクを追加する

フリーリンクの追加方法を紹介します。コードをコピーするだけでかんたんですのでお試しください。

1. STEP

   リンクボタン用コードをコピー

   リンクボタン用コード
   （テキストあり）

   <a href="#" class="share-btn">
   	<i class="fas fa-coffee"></i>
   	<p>Cafe</p>
   </a>

   リンクボタン用コード
   （テキストなし）

   <a href="#" class="share-btn">
   	<i class="fas fa-coffee"></i>
   </a>

   こちらのソースをコピーします。#をリンク先URLに置き換えてください。

2. STEP

   管理画面のプロフィールにアクセス

   プロフィールの編集画面に移動します。

   

   WordPress管理画面＞ユーザー＞プロフィール

3. STEP

   フリーボタン欄にペースト

   

   作ったソースをフリーボタンのエリアに貼り付け、プロフィールの更新を行うとリンクボタンが表示されます。

4. STEP

   フリーボタンが表示される

   

リンクボタン用コードの#をリンクしたいURLに置き換えてご利用ください。

くま

<a href="#" class="share-btn">
	<i class="fas fa-coffee"></i>
	<p>Free</p>
</a>

<a href="#" class="share-btn">
	<i class="fas fa-coffee"></i>
</a>

1. STEP

   FontAwesomeのサイトにアクセス

   

   参考

   Find Icons with the Perfect Look & Feel | Font Awesome

   fontawesome.com
2. STEP

   好きなアイコンを選ぶ

   

3. STEP

   <i> から始まるコードをコピー

   

   赤枠の部分をクリックするとコピーできます。

4. STEP

   リンクボタン用コードに上書き

   

   リンクボタンのコードの<i class="fas fa-coffee"></i>を削除して、コピーしたコード <i class="fas fa-cat"></i> を貼り付けします。

   リンクボタン用コード（前）

   <a href="#" class="share-btn">
   	<i class="fas fa-coffee"></i>
   	<p>Free</p>
   </a>

   リンクボタン用コード（後）

   <a href="#" class="share-btn">
   	<i class="fas fa-cat"></i>
   	<p>Free</p>
   </a>

マサオカ

これで設定は完了です！お疲れ様でした！