ConoHa WINGコラボ記念!特別割引中

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

2 min 802 views

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

何につかうの?

マサオカ

マサオカ

やよい

やよい

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

現在利用できるボタン
  • Twitter
  • Facebook
  • YouTube
  • Instagram
  • LINE
  • Feedly(RSS Feed)
  • Amazonほしいものリスト
  • Pinterest
  • Note
  • 楽天ROOM
  • フリーボタン1
  • フリーボタン2

フリーリンクを追加する

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

  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>

アイコンの変更方法

フリーボタンには「FontAwesome 5」のアイコンを利用しています。

  1. STEP

    FontAwesomeのサイトにアクセス

  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>
マサオカ

マサオカ

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

THE SONICからのお知らせ

COPIA

THE SONICのキャンペーン配信機能を、他のWordPressでも利用できる便利プラグイン「COPIA(コピア)」をリリースしました。

THE SONICユーザーの方は現在の利用料金のまま利用可能。

ぜひ、ご利用ください。

THE SONIC

THE SONIC

収益とライティングを"1UP"させるWordPressテーマ「THE SONIC(ソニック)」を開発しています。
アフィリエイター・ブロガー・WordPress開発者の合作テーマです。3つの視点からWordPressテーマをリデザインしました。

FOLLOW

カテゴリー:
CTAエリア
関連記事