「AFFINGER」 一覧

webアイコン

アイコン

Webアイコン 4千種類のアイコンから選んで使える

2018/10/16  

好きなアイコンを自分のサイトで使える「Webアイコン」 Font Awesomeというサイトを使えば数千種類のアイコンを自分のサイトで表示できます。 step1使いたいアイコンを選ぶ         step2ソースをコピー step3テキストモードでサイトに貼り付け  サイトに貼り付けると左のようにアイコンが表示される。デフォルトは黒色 注意バージョン4とバージョン5があるが、バージョン5だとサイトで表示できないことが多いのでバージョン4を使う      色をつけたい場合はCSSで設定が必要 アイコンに色をつけたい場合は別途CSSで設定が必要です。 step1ワードプレスにログイン→外観→カスタマイズ→追加CSSを選び書きを貼り付け保存をクリック

step2アイコンのコードに「my-色コード」をつける 例:fa fa-timesの後ろに「my-red」をつける ×

 

ステ子(クイックタグ)

AFFINGER ステ子(クイックタグ)

ボックス(囲み)

2018/10/1  

ステ子→ボックス(囲み)で使えるタグです。 「ポイント 黄色 背景(薄黄色)」、「ポイント 黄色 背景無し(白色)」は明るい背景時には見にくいので基本的に使いません。 ポイント 黄色 背景(薄黄色) ポイント

      ポイント 黄色 背景無し(白色) ポイント

      ポイント 緑色 背景(薄黄色) ポイント

      ポイント 緑色 背景無し(白色) ポイント

      ポイント 水色 背景(薄黄色) ポイント

      ポイント 水色 背景無し(白色) ポイント

      ポイント 赤色 背景(薄黄色) ポイント

      ポイント 赤色 背景無し(白色) ポイント [crayo ...

テキスト装飾

スタイル(装飾タグ)

①テキスト装飾 太字・赤太字

2018/10/10  

ビジュアルモード→スタイル→「テキスト」で表示されるタグです。 赤字 これは赤字です。

原則、赤字は使わずに赤太字を使う       太字 これは太字です。

      赤字(太字) これは赤字(太字)です。

      大文字 これは大文字です。

      小文字 これは小文字です

原則使わない       ドット線 これはドット線です。

      参照リンク これは参照リンクです。

上記に文字(リンク)を入れる       参考 参考これは参考マークです(例:参考という文字を記入してから使用)

上記に文字(リンク)を入れる &n ...

アニメーション

スタイル(装飾タグ)

②アニメーション(文字・画像が動く) AFFINGER5 タグ・ショートコード

2018/10/3  

ビジュアルモード→スタイル→「アニメーション」で表示されるタグです。 45°揺れ これは「45°揺れ」です。

      ベル揺れ これは「ベル揺れ」です。

      横揺れ これは「横揺れ」です。

      縦揺れ これは「縦揺れ」です。

      点滅 これは「点滅」です。

      バウンド これは「バウンド」です。

      回転 これは「回転」です。

      ふわふわ これは「ふわふわ」です。

      大小 これは「大小」です。 [crayon-5ce779c7817424399 ...

アイコン

スタイル(装飾タグ)

③アイコン

2018/10/10  

ビジュアルモード→スタイル→「アイコン」で表示されるタグです。 はてな これは「はてな」マークです

      注意 これは「注意」マークです

      人物 これは「人物」マークです

      チェック これは「チェック」マークです

      メモ これは「メモ」マークです

      王冠 これは「王冠」マークです

      初心者 これは「初心者」マークです

  アイコンマークは「外観→カスタマイズ」の「オプション」でカラーを設定できます。※通常エディタ上では表示されません

見出し風装飾

スタイル(装飾タグ)

④見出し風 装飾 見出しではないので目次に表示されない

2018/10/3  

ビジュアルモード→スタイル→「見出し」で表示されるタグです。 あくまで見出し風に見せるタグなので目次には記載されません。目次は増やしたくないけど、ちょっと強調したい時に使います。基本的に使う機会は無いでしょう。 カウント カウント

カウントは設定したテキストや見出し(hタグ)などに自動で番号を振付けます。 手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。       記事タイトル 記事タイトル

      h2風 h2風

      h3風 h3風

      h4風 h4風

      h5風 h5風

      まとめ まとめ

記事 ...

ランキング用 見出し

スタイル(装飾タグ)

⑤ランキング用 見出し

2018/10/3  

ビジュアルモード→スタイル→「ランキング(管理CSS対応)」で表示されるタグです。 ランキングのアイコンは管理画面の左カラムにある「ランキング管理」→「アイコン」で変更できます。 ランキング1位(基本) ランキング1位(基本)

      ランキング2位 ランキング2位

      ランキング3位 ランキング3位

      ランキング4位以下 ランキング4位以下

      h4の見出しを使ってのランキングなので、見出しとしての使い方に注意。 h2~h4の順番に注意する事。逆にならないように

マーカー

スタイル(装飾タグ)

⑥マーカー 文字の背景に色を付ける

2018/10/3  

ビジュアルモード→スタイル→「マーカー」で表示されるタグです。 黄マーカー これは黄マーカーです。

      黄マーカー(細) これは黄マーカー(細)です。

      赤マーカー これは赤マーカーです。

      赤マーカー(細) これは赤マーカー(細)です。

      青マーカー これは青マーカーです。

      青マーカー(細) これは青マーカー(細)です。

      鼠マーカー これは鼠マーカーです。

      鼠マーカー(細) これは鼠マーカー(細)です。

 色んなマーカーを使うとサイトがゴチャゴチャして見にくくな ...

写真 枠・ポラロイド風・ワイド

スタイル(装飾タグ)

⑦写真 枠・ポラロイド風・ワイド

2018/10/1  

ビジュアルモード→スタイル→「写真」で表示されるタグです。 枠線

写真に「枠線」を付与します。境界が曖昧な写真などに、とくに有効です(クイックボタン「写真枠」でも使用できます)       ポラロイド風

      ワイド

ボックス

スタイル(装飾タグ)

⑧ボックス(枠)

2019/2/16  

ビジュアルモード→スタイル→「ボックス」で表示されるタグです。 黄色ボックス 黄色ボックスです

      薄赤ボックス 薄赤ボックスです

      グレーボックス グレーボックスです

      引用風のボックス 引用風のボックスです

      チェック(ulタグ) ulタグの番号なしリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「チェック(ulタグ)」を適応してから「番号なしリスト」を適応すると正しく表示されます。 ※カスタマイザーの「オプション」でカラー変更が可能です これはダミーのリストです これはダミーのリストです これはダミーのリストです

先に「番号無しリスト」を適用してから「チェック(ulタグ)」を適用すると、色やスタイルが反映されません。 必ず番号無しリストじゃない状態から「チェック(ulタグ)」→「番号無しリスト」の順に適用してください。     & ...

AFFINGER5 レイアウト

スタイル(装飾タグ)

⑨レイアウト センター寄せや回り込み解除など

2018/10/3  

ビジュアルモード→スタイル→「レイアウト」で表示されるタグです。 回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除します       センター寄せ

要素をセンター寄せにします。       下に余白

要素の下に「10px」の余白を付けます。       カードスタイル ブログカード(内部、外部サイトへの紹介リンク)が縦表示に変わる。 ※PC・スマホ・タブレット、どのサイズで見ても縦表示になります。

【手順】テキスモードに切り替え→記事IDを記載→IDを選択した状態で「ブログカード風」ボタンをクリック→ショートコードが出るのでそれを選択した状態で「カードスタイル」をクリック(これで縦書きになる。) 注意ポイント アイキャッチ画像が元の大きさのまま表示されてしまうので単独では使わない。下記のように画面を3分割にすると綺麗に表示されるので基本的に縦に3分割して使う。

【手順】ビジュア ...

テーブルタグ

スタイル(装飾タグ)

⑩テーブル(表)

2018/10/3  

ビジュアルモード→スタイル→「テーブル」で表示されるタグです。 テーブル テーブル(表の作成)には「TinyMCE Advanced」プラグインが便利です。 注意 表の内容が頻繁に変わる場合や、定期的に内容を更新する必要がある場合は「TablePress」 プラグインを使ってください。       横スクロール スマートフォン閲覧時など横幅がはみ出る場合にtableタグを<div class="scroll-box"></div>で囲むことで横スクロールに対応させます。 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト

      中央配置 table内のテキストを上下左右の中央に配置します。 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト

      装飾なし テーマで用意されたデフォルトデザインを解除します。 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト

※設定が上手くできない(tableタグを囲めない)場合は「テキストモード」での作業をお勧めします

見出し一覧

AFFINGER

見出しタグ一覧 h2~h6 AFFINGER5 タグ・ショートコード

2018/10/1    

ビジュアルモード→「段落」で表示されるタグです。 見出しはh2とh3を基本的に使う。h4やh5は原則使わない。 また、h2とh3の順番が逆にならないように注意。見栄えで見出しの順番を逆にするのはNG これはh2タグの見出しです

      これはh3タグの見出しです

      これはh4タグの見出しです

原則使わない       これはh5タグの見出しです

原則使わない       これはh6タグの見出しです

原則使わない

吹き出し

AFFINGER ステ子(クイックタグ)

吹き出し・口コミ タグと画像

2019/3/18  

AFFINGER専用の吹き出しプラグインでないとAMPで表示されない プラグイン名PCスマホAMP Speech Bubble〇〇× WP-Speech-Balloon〇〇〇 (AFFINGERでは×)

Copyright© 【SEO Wiki】初心者でもできるSEOでアフィリエイト , 2019 All Rights Reserved.