WordPress

【JINカスタマイズ】独自アイコンフォント使用例

【JINカスタマイズ】独自アイコンフォント使用例
こんにちは! Webデザイナーのアズサ(@azusascom)です。

WordPressテーマ「JIN」で、オリジナルのアイコンフォントが搭載されました。せっかくだから効果的に使いたいところ。

そこで今回は、独自アイコンフォントの使用例をご紹介します。

JIN独自アイコンフォント使用例

コード部分をコピペして使用できます。

外部リンク

自分のブログ外へのリンクを設置するときに使えます。

外部リンク 見本

JINのオリジナルアイコンリスト

外部リンク HTML

<p><a href="リンク先URL" rel="noreferrer noopener" target="_blank">[jin_icon_arrowdouble color="カラー指定"]リンク名</a></p>
  • リンク先URL:外部リンクURLに差し替えます。
  • リンク名:表示させたいリンク名に差し替えます。
  • カラー指定:「#」で始まる、数字とアルファベットを使った16進数のカラーコードに差し替えます。

各種SNSリンク

TwitterやInstagramなどへのリンクは、各SNSのアイコンを表示させるとわかりやすくなります。

Twitter 見本

@azusascom

Twitter HTML

<p><a href="Twitterリンク" target="_blank" rel="noopener noreferrer" color="#00aced">[jin_icon_twitter color="#00aced"]ユーザー名</a></p>
  • Twitterリンク:自分のTwitterリンクに差し替えます。
  • ユーザー名:「@」から始まるユーザー名に差し替えます。

Instagram 見本

Instagram

Instagram HTML

<p><a href="Instagramリンク" target="_blank" rel="noopener noreferrer" color="#00aced">[jin_icon_instagram color="#D93177"]Instagram</a></p>
  • Instagramリンク:自分のInstagramリンクに差し替えます

Facebook 見本

Facebook

Facebook HTML

<p><a href="Facebookリンク" target="_blank" rel="noopener noreferrer" color="#00aced">[jin_icon_facebook color="#3B5998"]Facebook</a></p>
  • Facebookリンク:自分のFacebookへのリンクに差し替えます。

リスト

順序のないリストについて、「●」以外のアイコンを使用できます。

リスト 見本

  • リストです
  • リストなの
  • リストだよ

リスト HTML

<ul class="jin-list-icon">
<li>[jin_icon_check color="カラー指定"]リスト</li>
</ul>
  1. カラー指定:「#」で始まる、数字とアルファベットを使った16進数のカラーコードに差し替えます。
  2. 必要な数だけ「<li>~</li>」の部分をコピペします。
  3. リスト:表示させたい文章に差し替えます。

リスト CSS

/*** JIN アイコンフォント ***/
.jin-list-icon li{
  list-style: none;	
  text-indent: -0.75em;
}

HTML・CSSコードの使い方

HTML・CSSコードを使う際は、下記を参考にしてくださいね。

HTML(ブロックエディタの場合)

「フォーマット」の「カスタムHTML」ブロックを選択します。

フォーマットのカスタムHTMLブロック

カスタムHTMLにコピペして使用してくださいね。

HTML(クラシックエディタの場合)

テキストエディタにコピペして使ってください。

クラシックエディタ テキスト編集画面

CSS

以下の場所にコピペしてくださいね。

「外観」「カスタマイズ」「追加CSS」

追加CSSを入力する場所

使用例は追加していきます

今回は、JINの独自アイコンフォントの使用例をご紹介しました。

JIN公式サイトでは、アイコンは順次追加予定とのことなので、当ブログでも使用例を今後追加していきます。

JINの独自アイコンフォントについては「WPテーマ「JIN」の独自アイコンフォントのメリットと使い方」という記事も書いてます。

よかったら読んでみてくださいね。

ではでは。

稼ぐ力を身につけて運命を変えよう!
ビジネスの勉強、試してみる価値あるかも。

COMMENT

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