【テキストパーツ】クリップメモの使い方

クリップメモの設置方法

 

【タグ】→【テキストパーツ】→【クリップメモ】と辿ります。

プルダウンメニューの中から使いたいクリップメモをクリックします。

【メモ】をクリックすると・・・

 メモのタグ
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

エディターには上記のタグが挿入されます。

 

 メモのタグ
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]《　ＲＡＹ の アフィンガー de ＧＯ　》[/st-cmemo]

開始タグと終了タグの間に表示させる文字を入力すると・・・

このように表示されます。

 

 メモのタグ
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]
《　ＲＡＹ の アフィンガー de ＧＯ　》
ダミー記事。サンプル文章。ダミー記事。サンプル文章。
ダミー記事。サンプル文章。ダミー記事。サンプル文章。
ダミー記事。サンプル文章。ダミー記事。サンプル文章。[/st-cmemo]

改行も出来ます。

このように表示されます。

 

 

クリップメモのカスタマイズ方法

アイコンの変更

 メモのタグ
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

タグの内容を説明します。

最初の『webicon="st-svg-file-text-o"』は表示するアイコンを指定しています。

ダブルクォーテーション（"）に挟まれている部分を変更するとアイコンが変わります。

 

『webicon="st-svg-file-text-o"』→『webicon=""』

指定しているアイコンのコードを消してダブルクォーテーションの間にカーソルを移動して・・・

 

【タグ】をクリックすると開くプルダウンメニューの【ショートコード補助】から【Webアイコン（クラス）】をクリックします。

 

利用出来るアイコンのプルダウンメニューが表示されるので・・・

 

【ハート】をクリックすると・・・

 ハートのアイコン
[st-cmemo webicon="st-svg-heart" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]メモ[/st-cmemo]

アイコンの指定がハートになるので・・・

このようにアイコンがハートに変わります。

 

ちなみにアイコンの指定をしないで『webicon=""』とすると・・・

 アイコンの指定なし
[st-cmemo webicon="" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]メモ[/st-cmemo]

このようにアイコンが消えます。

 

 

アイコンの色を変更

ハートなので赤くしたいですよね。

アイコンを指定している次の『iconcolor="#919191"』がアイコンの色を指定している命令です。

『iconcolor="#919191"』→『iconcolor=""』と削除して・・・

 

今度は【ショートコード補助】から【HTMLカラーコード】の【赤】をクリックすると・・・

 

 ハートを赤に
[st-cmemo webicon="st-svg-heart" iconcolor="#f44336" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""]メモ[/st-cmemo]

コードが書き変わり・・・

アイコンが赤になりました。

 

 

背景色の変更

 背景を青薄に
[st-cmemo webicon="st-svg-heart" iconcolor="#f44336" bgcolor="#E1F5FE" color="#000000" bordercolor="" borderwidth="" iconsize=""]メモ[/st-cmemo]

同じ作業で『bgcolor="#fafafa"』を【HTMLカラーコード】から青薄を選んで『bgcolor="#E1F5FE"』に変えるとこのようになります。

 

 

文字色の変更

 文字を橙濃に
[st-cmemo webicon="st-svg-heart" iconcolor="#f44336" bgcolor="#E1F5FE" color="#FFB300" bordercolor="" borderwidth="" iconsize=""]メモ[/st-cmemo]

『color="#000000"』を【HTMLカラーコード】から橙濃を選んで『color="#FFB300"』に変えると・・・

こうなります。

 

 

ボーダーを設定

『bordercolor=""』と『borderwidth=""』はデフォルトでは指定されていません。

指定するとどうなるのか試してみましょう。

 ボーダーカラーを緑に
[st-cmemo webicon="st-svg-heart" iconcolor="#f44336" bgcolor="#E1F5FE" color="#FFB300" bordercolor="#4CAF50" borderwidth="2" iconsize=""]メモ[/st-cmemo]

『bordercolor="#4CAF50"』とボーダーカラーを緑に指定して、『borderwidth="2"』とボーダーの太さを2にするとこのようになります。

 

『borderwidth="10"』と指定するとこうなります。

 

 

アイコンのサイズを変更

アイコンのサイズ指定の『iconsize=""』を『iconsize="10"』と指定したものです。

 

『iconsize="200"』と指定するとこうなります。

 

 

テキストの書き換え

 メモをハートに
[st-cmemo webicon="st-svg-heart" iconcolor="#f44336" bgcolor="#E1F5FE" color="#FFB300" bordercolor="#4CAF50" borderwidth="2" iconsize="200"]ハート[/st-cmemo]

開始タグと終了タグの間に書いた文字が表示されるので、『メモ』を『ハート』と書き換えると・・・

こうなります。

 

このように自分のサイトのイメージに合わせたパーツをカスタマイズすることが出来ます。

クリップメモの『メモ』で説明しましたがクリップメモ（テキスト）のパーツも同じようにカスタマイズする事が出来ます。

 

 

クリップメモ一覧

 

【クリップメモ】⇒【メモ】

 メモ
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【外部リンク】

 外部リンク
[st-cmemo webicon="st-svg-external-link" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【ブックマーク】

 ブックマーク
[st-cmemo webicon="st-svg-bookmark" iconcolor="#BDBDBD" bgcolor="#fafafa" color="#757575" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【おしらせ】

 おしらせ
[st-cmemo webicon="st-svg-bullhorn" iconcolor="#FFEB3B" bgcolor="#FFFDE7" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【はてな】

 はてな
[st-cmemo webicon="st-svg-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【コメント】

 コメント
[st-cmemo webicon="st-svg-comments" iconcolor="#F48FB1" bgcolor="#FCE4EC" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【コード】

 コード
[st-cmemo webicon="st-svg-code" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="150"][/st-cmemo]

 

【クリップメモ】⇒【ポイント】

 ポイント
[st-cmemo webicon="st-svg-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【ユーザー】

 ユーザー
[st-cmemo webicon="st-svg-user" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" bordercolor="" borderwidth="" iconsize="150"][/st-cmemo]

 

【クリップメモ】⇒【初心者】

 初心者
[st-cmemo webicon="st-svg-bigginer_l" iconcolor="#9CCC65" bgcolor="#F1F8E9" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【注意文】

 注意文
[st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ】⇒【注意文（グレー）】

 注意文（グレー）
[st-cmemo webicon="st-svg-exclamation-circle" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【メモ】

 メモ
[st-cmemo myclass="st-text-guide st-text-guide-memo" webicon="st-svg-pencil" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【参考】

 参考
[st-cmemo myclass="st-text-guide st-text-guide-sankou" webicon="st-svg-quote-left" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【関連】

 関連
[st-cmemo myclass="st-text-guide st-text-guide-kanren" webicon="st-svg-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【注意】

 注意
[st-cmemo myclass="st-text-guide st-text-guide-attention" webicon="st-svg-exclamation-circle" iconcolor="#ef5350" bgcolor="#ffebee" color="#000000" bordercolor="#ffcdd2" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【Check】

 Check
[st-cmemo myclass="st-text-guide st-text-guide-point" webicon="st-svg-check" iconcolor="#FF8F00" bgcolor="#FFF8E1" color="#000000" bordercolor="#FFE082" borderwidth="" iconsize="150"][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【次へ進む】

 次へ進む
[st-cmemo myclass="st-text-guide st-text-guide-next" webicon="st-svg-arrow-right faa-horizontal animated" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="150"][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【前に戻る】

 前に戻る
[st-cmemo myclass="st-text-guide st-text-guide-prev" webicon="st-svg-arrow-left" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize="150"][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【質問】

 質問
[st-cmemo myclass="st-text-guide st-text-guide-question" webicon="st-svg-quora" iconcolor="#29B6F6" bgcolor="#E1F5FE" color="#000000" bordercolor="#81D4FA" borderwidth="" iconsize=""][/st-cmemo]

 

【クリップメモ（テキスト）】⇒【回答】

 回答
[st-cmemo myclass="st-text-guide st-text-guide-answer" webicon="st-svg-font" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

 

 

 

テキストパーツ一覧へ戻る

スタイル一覧はこちら

 

AFFINGER6 EX　公式ページ

AFFINGER6　公式ページ

エックスサーバー　公式ページ