Affingerには「タグ機能」という便利な機能があります。
タグ機能は、読みやすくおしゃれなブログのデザインに欠かせない機能です。
タグは種類が豊富で、最初はどれを使えばいいのかわからないかもしれませんが、
簡単な操作で自由にオリジナルのデザインに変えることができるので、
「人とかぶりたくない。」という方は、参考にしてみてください。
タグ機能の使い方
タグ機能は記事を作成する画面のビジュアルエディタにあります。
タグのアレンジはどこから？
タグのボタンからパーツを挿入すると、このように文字が表示されます。
[st-cmemo webicon="st-svg-question-circle" iconcolor="#4FC3F7" bgcolor="#E1F5FE" color="#000000" bordercolor="" borderwidth="" iconsize=""]ここにテキストを入れる。[/st-cmemo]
このままだとなんのこっちゃですが、プレビューで見てみると・・このように表示されています。
●テキストパーツ→クリップメモ→はてな
ここにテキストを入れる。
ただの文字の羅列に見えているものはコードと言って、
ウェブ上で様々な指令を出すことができます。
コードの見方は、指令＝"ここに指令の詳しい内容を書く"という書き方になっています。
画像をクリックまたはタップすると拡大されます。
コードの解読
①st-svg-question-circle・・・〇＆はてなのアイコンを表示する、という指示を出しています。
②iconcolor="#4FC3F7"・・・アイコンの色をウェブカラー(#6桁の数字)で指定しています。
③bgcolor="#E1F5FE"・・・背景の色をウェブカラー(#6桁の数字)で指定しています。
④color="#000000"・・・入力したテキストの文字の色をウェブカラー(#6桁の数字)で指定しています。
⑤bordercolor=""・・・""の間にウェブカラー(#6桁の数字)を入れることで外枠の色を指定できます。
⑥borderwidth=""・・・""の間に2pxなど数字を入れることで外枠の太さを指定できます。
⑦iconsize=""・・・アイコンのサイズを変更できます。
1つ1つは簡単な英単語なので、なんとなくイメージがつかめたと思います。
以下にサンプルを載せておきますので、自由にアレンジを楽しんでください。
サンプル集
●ピンクなメモ
ピンクメモの配色
①タグ→クリップメモ→メモを挿入します。
②iconcolor・・・#F06292に変更
③bgcolor・・・#FCE4ECに変更
●むらさきなメモ
むらさきメモの配色
①タグ→クリップメモ→メモを挿入します。
②iconcolor・・・#b958a5に変更
③bgcolor・・・#edd2f3に変更
●グリーンなメモ
グリーンなメモの配色
①タグ→クリップメモ→メモを挿入します。
②iconcolor・・・#97bfb4に変更
③bgcolor・・・#d3e4cdに変更
●青いメモ
青いメモの配色
①タグ→クリップメモ→メモを挿入します。
②iconcolor・・・#344bc7に変更
③bgcolor・・・#577bc1に変更
●黄色メモ
黄色メモの配色
①タグ→クリップメモ→メモを挿入します。
②iconcolor・・・#ff5403に変更
③bgcolor・・・#f4e185に変更
アイコンも変えられます
コードの中の「webicon＝””」のアイコンを変更することで、アイコンも変えられます。
●変更前
自由なメモ
●変更後
アイコンが変わりました
●変更前
ポイント
●変更後
ポイント
タグ機能は、ワンクリックで使えます。
自分だけのオリジナルのカスタマイズを楽しんでくださいね！
