MENU
カテゴリー

AFFINGER6の投稿機能の使い方

こんな悩みありませんか?

  1. 文字の装飾の仕方がいまいちわからないなぁ…
  2. ボックスってどうやって使うんだろう?
  3. タイムラインってどうやって挿入するんだ?
  4. スマホで見たとき表を横スクロールさせたいんだけど…

そんな悩みこの記事を見てもらえばリンゴの皮を剥くより簡単に解決できます

この記事ではAFFINGER6の記事投稿画面をベースに説明をしているので、記事投稿画面を開きながら読み進めていただくと理解がしやすくなっています。

目次

段落(通常の文章)の装飾

段落のスタイルを色々いじくるとこんな感じのデザインが作れます

段落スタイルのサンプル1
段落スタイルのサンプル2
段落(通常の文章)の装飾する手順1。詳細は吹き出しボックスに記載
段落(通常の文章)の装飾する手順2。詳細は吹き出しボックスに記載
  1. テキストを入力
  2. 「スタイル」でデザインを選択

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

段落(通常の文章)の装飾する手順4。詳細は吹き出しボックスに記載

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

マイボックスを挿入する

マイボックスも色々なデザインが作れます

マイボックスのスタイルサンプル1
マイボックスのスタイルサンプル2
マイボックスの設定手順1。詳細は吹き出しボックスに記載
マイボックスの設定手順2。詳細は吹き出しボックスに記載
  1. 「/box」と入力
  2. 「STINGER:マイボックス」を選択
  3. 「ブロックスタイル」で好みのデザインに設定

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

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

見出し付きフリーボックスを挿入する

このような見出し付きフリーボックスが作れるようになっています

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

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

スライド(アコーディオン)の設定

スライドはクリックするとシュッと閉じたり、シャッと開いたりするやつです。一般的にアコーディオンと呼ばれているような機能です。

スライド(アコーディオン)を挿入する

スライドのスタイルサンプル1
スライドのスタイルサンプル2
スライドを挿入する手順1。詳細はボックスに記載
スライドを挿入する手順2。詳細はボックスに記載
  1. 「/スライド」と入力
  2. 「STINGER:スライド」を選択
  3. 「スタイル」を設定

スライドのアイコンを変更する方法

スライドのアイコンを変更のスタイルサンプル1
スライドのアイコンを変更のスタイルサンプル2
スライドのアイコンを変更する手順1
スライドのアイコンを変更する手順2
スライドのアイコンを変更する手順3
  1. 以下のページで表示させたいアイコンをクリック
  1. コードをコピー
  2. アイコンクラスに貼り付け
    ※もともとあったコードは削除

ボタンの設定

ボタンを挿入する

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

吹き出しの設定

吹き出しのアイコンを設定する

吹き出しアイコンの設定手順1。詳細はボックスに記載
吹き出しアイコンの設定手順2。詳細はボックスに記載
吹き出しアイコンの設定手順3。詳細はボックスに記載
吹き出しアイコンの設定手順4。詳細はボックスに記載
吹き出しアイコンの設定手順5。詳細はボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「会話アイコン」をクリック
  3. 「アイコン画像下に表示する名前」を記入
  4. 「アップロード」をクリック
  5. 「アイコン画像」を選択して「投稿に挿入」をクリック
  6. 「Save」をクリック

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

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

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

吹き出しを挿入する

吹き出しの挿入手順1
吹き出しの挿入手順2
  1. 「/ふきだし」と入力
  2. 「STINGER:会話ふきだし」を選択

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

表の設定

表を挿入する

表のスタイルサンプル1
表のスタイルサンプル2
表の挿入手順1。詳細はボックスに記載
表の挿入手順2。詳細はボックスに記載
表の挿入手順3。詳細はボックスに記載
表の挿入手順4。詳細はボックスに記載
  1. 「/テーブル」を入力
  2. 「テーブル」を選択
  3. 「表のカラム数・行数」を設定し「表を作成」をクリック
  4. 「ブロックスタイル」でデザインを設定

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

表のデザインを設定する

表のデザイン設定手順1。詳細はボックスに記載
表のデザイン設定手順2。詳細はボックスに記載
表のデザイン設定手順3。詳細はボックスに記載
表のデザイン設定手順4。詳細はボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「table(表)」をクリック
  4. 「お好みのデザイン」に設定
  5. 「公開」をクリック

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

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

ステップの設定

ステップを挿入する

ステップのスタイルサンプル2
ステップのスタイルサンプル1
ステップを挿入する手順1。詳細はボックスに記載
ステップを挿入する手順2。詳細はボックスに記載
ステップを挿入する手順3。詳細はボックスに記載
ステップを挿入する手順4。詳細はボックスに記載
  1. 「ステップの見出しになるテキスト」を入力
  2. 「テキスト」を「見出し」に変更する
    ※入力する位置でh2~h5を選択する
  3. 「ブロックスタイル」で「ステップ」を選択
    見出し一つ一つにスタイルを適応する
  4. 「スタイル」の「色」でデザインを設定

これでステップが入力できました。

なお、ステップ色はスタイル設定だとうまく反映されない色があります。そんなときは次のカスタマイザーでのカラー設定を試してみてください。

ステップの見出し設定について補足

ステップを挿入する手順5。詳細はボックスに記載
ステップを挿入する手順6。詳細はボックスに記載

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

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

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

ステップの色をカスタマイザーで調整する

ステップをカスタマイザーで色変更する前
ステップをカスタマイザーで色変更した後
ステップの色をカスタマイザーで調整する手順1
ステップの色をカスタマイザーで調整する手順2
ステップの色をカスタマイザーで調整する手順3
ステップの色をカスタマイザーで調整する手順4
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「ステップ/ポイント」をクリック
  4. 「お好みのデザイン」に設定
  5. 「公開」をクリック

途中でカウントをリセットする(1からカウントする)

ステップのカウントをリセットサンプル2
ステップのカウントをリセットサンプル1
ステップのカウントをリセットする手順1
ステップのカウントをリセットする手順2
  1. 「リセットする見出し」を選択
  2. 「ブロックスタイル」の下の方にある「高度な設定」をクリック
  3. 「追加CSSクラス」に以下のコードを記入
    ※もともとあるコードは削除する
is-style-st-heading-custom-step st-step-reset

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

タイムラインを挿入する

タイムラインの表示サンプル
カウントアップの表示サンプル

AFFINGER6はリストを使ってタイムラインを作れるんですが、ボクが確認した限り機能が限定されることと、使い勝手がいまいちだったので、ここではショートコードを使った方法を紹介します。

タイムラインの設定手順1
タイムラインの設定手順2
  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]
  1. 「ショートコード」に貼り付け

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

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

ショートコードの詳しい設定方法

パスワードの確認方法1
パスワードの確認方法2

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

あわせて読みたい

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

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

評価スター(星)を挿入する

AFFINGER6で星を表示させる手順1
AFFINGER6で星を表示させる手順2

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

[star5]

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

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

マイブロックの設定

マイブロックは、「スタイルで作ったボタン」「スタイルで作ったボックス」などを登録しておくことで、使いたいときにすぐ呼び出せるようにする機能です。

ボタン、ボックスだけでなく、記事中で使っているブロックはほぼすべて登録できます。

よく使うものは登録しておくことで効率化につながるので、この機能の使い方は覚えておくとよきです。

マイボックスに登録するサンプルイメージ

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

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

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

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

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

作成したスタイルをマイブロックに登録

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

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

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

「パターン」と「ショートコード」の使い分けについて補足

マイブロックを挿入する方法として「パターン」と「ショートコード」の2つがあります。

この違いを理解して使い分けないと後々めんどうなことになるので、しっかりと理解しておきましょう。

パターンとショートコードの違い

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

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

これだけです。

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

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

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

登録したマイブロックの挿入方法

登録したマイブロックを挿入する手順1

パターンで挿入する

  1. 「+」をクリック
  2. 「ボックス名」で検索
  3. 表示された「マイボックス」を選択
登録したマイブロックを挿入する手順2
登録したマイブロックを挿入する手順3
登録したマイブロックを挿入する手順4

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

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

AFFINGER6の投稿機能の使い方は以上です。

おつかれさまでした!

AFFINGER6の使い方まとめ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

アフィリエイト切っ掛けでWEB業界にどっぷり浸かり、10年以上WEB関連のお仕事で食べてる人。個人から法人成りし新規で始めたサービスがうけて誰しもが知るビックネーム企業数社と契約することに成功。勝ち確定や!と思われたやさきコロナ化に突入。フルマラソンで調子良く走ってたら空から隕石が降ってきたぐらいの衝撃を受ける。ビックネーム企業との契約が見事に全部打ち切り。「わいにBtoBは向いてなかったんや・・」と現在は猫3匹と自由気ままに生きる毎日。

コメント

コメントする

目次