ebay輸出のことや、Amazonプライムビデオのおすすめ作品などをヨッタさんへ教えるブログ

前略、ヨッタさんへ

コピペOK!WINGのクリップメモをSNSやウェブサービス用にカスタマイズ【AFFINGER5】

このページは に更新されました。

clipmemo-eye

WING(AFFINGER5)で「クリップメモ」という機能を発見しました。

こんなやつです。

初心者向け記事

カスタマイズも可能!
2行でも大丈夫!

使い方

タグ > デザイン > クリップメモ

クリップメモへのルート画像

ルートをたどると9パターンのショートコードが用意されている

ショートコード

[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" iconsize="100"][/st-cmemo]

ボタンを押すだけで簡単に使える機能で、9パターンを使い分けが可能です。

さらに表示されるショートコードは、カラーや数値を変更してオリジナルパターンを作成することもできます。

そこで今回、主要なSNSやWEBサービスを模したクリップメモをカスタマイズして用意しました。コードをコピペしてご利用ください。

主要なSNSやWEBサービスのクリップメモ

※注:各コードのアイコンサイズ(iconsize)を200で設定しています。お好みの数値へ変更されてください。

メモ

以下の設定内容は、STINGERオリジナルボタンにもそのまま流用可能です。※後述あり

インスタグラム(instagram)

インスタグラム

コピペ用 ショートコード

[st-cmemo fontawesome="fa-instagram" iconcolor="#fff" bgcolor="#D93177" color="#fff" iconsize="200"]インスタグラム[/st-cmemo]

  • Web フォント : fa-instagram
  • 背景 : #D93177
  • テキスト色 : #fff

Google+

Google+

コピペ用 ショートコード

[st-cmemo fontawesome="fa-google-plus" iconcolor="#fff" bgcolor="#dd4b39" color="#fff" iconsize="200"]Google+[/st-cmemo]

  • Web フォント :fa-google-plus
  • 背景 :#dd4b39
  • テキスト色 : #fff

ツイッター(Twitter)

Twitter

コピペ用 ショートコード

[st-cmemo fontawesome="fa-twitter" iconcolor="#fff" bgcolor="#55acee" color="#fff" iconsize="200"]Twitter[/st-cmemo]

  • Web フォント : fa-twitter
  • 背景 : #55acee
  • テキスト色 : #fff

色の反転でこんな感じにもできます

[st-cmemo fontawesome="fa-twitter" iconcolor="#55acee" bgcolor="#fff" color="#55acee" iconsize="200"]ここにツイッターのスクリプト入れる[/st-cmemo]

目次へ移動

フェイスブック(facebook)

facebook

コピペ用 ショートコード

[st-cmemo fontawesome="fa-facebook-square" iconcolor="#fff" bgcolor="#3B5998" color="#fff" iconsize="200"]facebook[/st-cmemo]

  • Web フォント :fa-facebook-square
  • 背景 :#3B5998
  • テキスト色 : #fff

LINE@

アイコン違いで3パターン

LINE@

コピペ用 ショートコード

[st-cmemo fontawesome="fa-commenting" iconcolor="#fff" bgcolor="#00b900" color="#fff" iconsize="200"]LINE@[/st-cmemo]

  • Web フォント :fa-commenting
  • 背景 :#00b900
  • テキスト色 : #fff

LINE@

コピペ用 ショートコード

[st-cmemo fontawesome="fa-comment" iconcolor="#fff" bgcolor="#00b900" color="#fff" iconsize="200"]LINE@[/st-cmemo]

  • Web フォント :fa-comment
  • 背景 :#00b900
  • テキスト色 : #fff

LINE@

コピペ用 ショートコード

[st-cmemo fontawesome="fa-comment-o" iconcolor="#fff" bgcolor="#00b900" color="#fff" iconsize="200"]LINE@[/st-cmemo]

  • Web フォント :fa-comment-o
  • 背景 :#00b900
  • テキスト色 : #fff

Youtube

Youtube

コピペ用 ショートコード

[st-cmemo fontawesome="fa-youtube" iconcolor="#cd201f" bgcolor="#fafafa" color="#000" bordercolor="#000" iconsize="200"]Youtube[/st-cmemo]

  • Web フォント :fa-youtube
  • 背景 :#fafafa
  • テキスト色 :#cd201f

Youtube

コピペ用 ショートコード

[st-cmemo fontawesome="fa-youtube-play" iconcolor="#cd201f" bgcolor="#fafafa" color="#000" bordercolor="#000" iconsize="200"]Youtube[/st-cmemo]

  • Web フォント :fa-youtube-play
  • 背景 :#fafafa
  • テキスト色 :#cd201f

[st-cmemo fontawesome="fa-youtube" iconcolor="#cd201f" bgcolor="#000" color="#fff" bordercolor="#000" iconsize="300"]youtubeコードと合せてみた[/st-cmemo]

WINGのタグ機能:4)タグ > その他パーツ > YouTube

note風

note風

コピペ用 ショートコード

[st-cmemo fontawesome="fa-file-o" iconcolor="#2dcdb5" bgcolor="#f7f9f9" color="#000" iconsize="200"]note風[/st-cmemo]

  • Web フォント :fa-file-o
  • 背景 :#f7f9f9
  • テキスト色 :#2dcdb5

WordPress

WordPress

コピペ用 ショートコード

[st-cmemo fontawesome="fa-wordpress" iconcolor="#000" bgcolor="#21759b" color="#000" iconsize="200"]WordPress[/st-cmemo]

  • Web フォント :
  • 背景 :#21759b
  • テキスト色 :#000

bitcoin(ビットコイン)

bitcoin

コピペ用 ショートコード

[st-cmemo fontawesome="fa-btc" iconcolor="#fff" bgcolor="#FFA726" color="#fff" iconsize="200"]bitcoin[/st-cmemo]

  • Web フォント : fa-btc
  • 背景 : #FFA726
  • テキスト色 : #fff

STINGERオリジナルボタンにも使える

サイドバーなどで表示できるウィジェット機能に、「06_STINGERオリジナルボタン」ってありますよね。

side-stingeroriginal

サイドバーにあるボタン(こういうやつ)

STINGERオリジナルボタンはウィジェットで装飾可能でして、上記した3つの項目

  • Web フォント:
  • 背景:
  • テキスト色:

これらをオリジナルボタンに設定する事でも、同じようなWEBサービスのボタンになると思います。

例えば、Twitterボタンを作るなら

外観 > ウィジェット > 06_STINGERオリジナルボタン

twitter-original-b

こんな感じで設定できます。

クリップメモは、ボタンのように全体をクリックすることはできませんので、ボタンが必要な場合は上手いこと併用されると良いかもしれません。

-WING(AFFINGER)

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.