ゼロから始めるAFFINGER6の投稿機能の使い方

1. テキストを入力
2. 「スタイル」でデザインを選択

AFFINGER6でもともと用意されているデザイン毎にテキスト色・背景色が設定できるようになっているので、次の画像のようにより多くのパターンが作成できるようになっています。

ただ色をたくさん使うとゴチャゴチャして見づらくなるので、1記事中に多くても3~4色程度に抑えたほうが良いでしょう。

1. 「/box」と入力
2. 「STINGER：マイボックス」を選択
3. 「ブロックスタイル」で好みのデザインに設定

ブロックメニューで自由に組み合わせができます。

色・アイコン・ボーダーなどいじくりまわして好みのパターンを探してみてください。

1. 「/box」と入力
2. 「STINGER：見出し付きフリーボックス」を選択
3. 「ブロックスタイル」で好みのデザインに設定

見出し付きフリーボックスはマイボックスと設定方法がほぼ同じなので、説明は省略します。

1. 「/スライド」と入力
2. 「STINGER：スライド」を選択
3. 「スタイル」を設定

1. 以下のページで表示させたいアイコンをクリック

2. コードをコピー
3. アイコンクラスに貼り付け
   ※もともとあったコードは削除

1. 「/ボタン」と入力
2. 「STINGER：カスタムボタン」を選択
3. 「ブロックメニュー」でスタイルを設定

1. 「AFFINGER管理」をクリック
2. 「会話アイコン」をクリック
3. 「アイコン画像下に表示する名前」を記入
4. 「アップロード」をクリック
5. 「アイコン画像」を選択して「投稿に挿入」をクリック
6. 「Save」をクリック

これでふきだしに画像が表示されるようになります。

なお、アイコンをプルプル動かしたいなら「会話アイコンを少し動かす」にチェック。

少し大きくしたいなら「会話アイコンを少し大きく」にチェックをいれます。

1. 「/ふきだし」と入力
2. 「STINGER：会話ふきだし」を選択

ちなみに吹き出しのデザインは有料プラグインを購入することでできるようになります。AFFINGER6は厳しい世界ですね。

1. 「/テーブル」を入力
2. 「テーブル」を選択
3. 「表のカラム数・行数」を設定し「表を作成」をクリック
4. 「ブロックスタイル」でデザインを設定

表を横スクロールに対応させる場合は、スタイルで「スクロール（SP）」を選択

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「オプション（その他）」をクリック
3. 「table（表）」をクリック
4. 「お好みのデザイン」に設定
5. 「公開」をクリック

設定項目が多いのである程度思った通りの表は作れると思います。

なお、調整するさいは表を挿入したページを表示させた状態でカスタマイザーをいじるとリアルタイムにデザインが確認できてわかりやすいです。

ステップ挿入箇所から見て直近の見出しがh2なら、ステップの見出しはh3。

ステップ挿入箇所から見て直近の見出しがh3なら、ステップの見出しはh4。

このようにするのがスマートな書き方になります。

1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
2. 「オプション（その他）」をクリック
3. 「ステップ/ポイント」をクリック
4. 「お好みのデザイン」に設定
5. 「公開」をクリック

1. 「リセットする見出し」を選択
2. 「ブロックスタイル」の下の方にある「高度な設定」をクリック
3. 「追加CSSクラス」に以下のコードを記入
   ※もともとあるコードは削除する

is-style-st-heading-custom-step st-step-reset

これでステップの途中で１からカウントされるようになります。

1. 「/」を入力
2. 「ショートコード」を選択
3. 「以下のショートコード」のどちらかをコピー

[st-timeline myclass="" add_style=""]
[st-timeline-list text="STEP.1" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="STEP.2" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="STEP.3" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="STEP.4" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="STEP.5" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[/st-timeline]

[st-timeline myclass="st-timeline-count" add_style=""]
[st-timeline-list text="見出し" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="見出し" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="見出し" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="見出し" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[st-timeline-list text="見出し" url="" myclass="" fontsize="" fontweight="bold" color="#666666" bgcolor="" center=""]ここにコンテンツ[/st-timeline-list]
[/st-timeline]

4. 「ショートコード」に貼り付け

これでタイムラインが作成されました。

投稿画面上では表示されませんが、公開してページを確認すると表示が確認できます。

ショートコードの詳しい設定は以下の公式ページでされているのでそちらをご確認ください。

パスワードの入力を求められたけどパスワードがわからないよぷんすかという方は以下の手順で確認できます。

1. 「購入ユーザー限定ページ」にログイン
2. 「ACTIONマニュアル」をクリック
3. 「旧マニュアル」の下のパスワードを確認

以下のショートコードを表示させたい箇所に入力するだけです。

[star5]

数字が星の数を現しています。5がマックスです。

なお、3.5のような表示はできません。

画像のようなメリット・デメリットボックスを作ったと仮定してマイブロックに登録していく流れを解説していきます。

ちなみにこれは以下のようにして作っています。

• カラム 50/50を設置
• カラムの左右に見出し付きボックスを設置
• 各見出し付きボックスの見出し幅を100%
• 各見出し付きボックスのボーダーの太さを4
• 各見出し付きボックスのボーダーの丸みを1
• 各見出しボックスの見出しアイコンにLikeとBad
• 各見出しボックスの色を調整
• 各ボックスの中に箇条書きリストを挿入
• 各箇条書きリストのスタイルをドット下線

生粋のドMなら毎回これを作ることに快感を覚えるかもしれせんが、大体の人は苦痛だと思いまいますので、繰り返し使いたいものはマイブロックに登録するようにしましょう。

それでは登録の仕方をみていきましょう。

1. 「登録するブロックを選択」して「」をクリック
2. 「コピー」をクリック
3. 「マイブロック」にカーソルをのせ「新規追加」をクリック
4. 「コピーしたブロック」を貼り付け
5. 「タイトル」を記入
6. 「公開」をクリック

これでマイブロックに作ったカラムが登録されました。

あとは投稿管理画面などで呼び出して使うだけになります。

「ショートコード」と「パターン」の使い分けは以下のとおりです。

• 「パターン」
  →マイブロックの内容を記事毎に変える
• 「ショートコード」
  →マイブロックの内容をすべての記事で統一する

これだけです。

例えば、さきほど作ったメリット・デメリットボックスのようなものは、挿入箇所ごとに内容を変えたいのでパターンで挿入。

ランキングやCTAなどは挿入箇所すべてで同じ内容にしたいのでショートコードで挿入となります。

文字だとよくわからないかもしれませんが、画像を見てもうと違いがわかりやすいかと思います。

パターンで挿入する

1. 「+」をクリック
2. 「ボックス名」で検索
3. 表示された「マイボックス」を選択

ショートコードで挿入する

1. 「ショートコード」をコピー
2. 「/ショートコード」と入力
3. 「ショートコード」をクリック
4. 「ショートコード」を貼り付け