※申し訳ありませんが作業は必ずバックアップの上、自己責任で行って下さい。

AFFINGER4 FAQ 制作ノート

AFFINGER4記事の書き方サクサク講座

投稿日:2016年11月29日 更新日:

WordPressの投稿画面にはビジュアルエディタにて多くの記事作成補助に役立つツールバーがありますが、AFFINGER4ではさらに記事をサクサク書けるように多くのスタイルやクイックタグを用意しております。

2016-11-27_10h29_54

スタイルやクイックタグとはボタンをクリックするだけで「全体を黄色背景のボックス」で囲ったり「左右均等並びのボックス」を挿入するなどなど、あらかじめ用意されたスタイルを挿入できる機能です。これらを利用することで効率的に様々なデザインやレイアウトの記事が書けるようになるのでぜひチェックしてください。

当ページでは大きく分けて

  1. 最初の準備からクイックタグの使い方
  2. タグの基本説明
  3. AFFINGER4独自のスタイル

の3つの順に説明致します。

既にこれらのツールバーの使用に関して精通している方は「AFFINGER4独自のスタイル・クイックタグの説明」まで飛ばしてください。

AFFINGER4独自のスタイル・クイックタグの説明

※キャプチャ画像はWordPress及びテーマのバージョンなどにより異なる場合がございます(一部、次回verの内容も含みます)。
※ショートカットキーはWindowを想定しています。

[toc]

便利に使うための最初の準備

TinyMCE Advancedプラグインの併用

2016-11-28_14h35_46

プラグインの「TinyMCE Advanced」も併用するとテーブルタグなどさらに拡張性が増すのでお勧めです。

※TinyMCE Advancedを有効化するとクイックタグの「スタイル」が隠れてしまうので設定でボタンを再登録して下さい。

2016-11-27_10h35_58

同時に「段落タグの保持」にチェックを入れておくと<p>タグ、<br/>タグが削除されないのでタグが扱いやすくなります。

2016-11-27_10h36_52

ツールバーの使い方

2016-11-27_17h42_00

スタイルは適応したいテキストや画像を①選択状態にしてから②「スタイル」をクリックして③「適応したいスタイル」をクリックすれば反映されます。

クイックタグは挿入したい箇所をクリック(場合により適応したいテキストや画像を選択状態に)してから任意のクイックタグをクリックすると挿入されます。

複数のスタイルなどの上手な設定方法

2016-11-27_17h44_44

同じテキストに連続で複数のスタイルを設定したい場合は

外側のスタイルから内側へ

と適応していくと上手くいきます。

例として「テキストをリスト表示にして、黄色のボックスで包む」スタイルを適応してみます。

2016-11-27_17h43_57

①まずは適応したいテキストを選択して全体を包みたい②「黄色ボックス」を選択

2016-11-27_17h44_23

次にそのまま(テキストを選択したまま)で次のスタイル(番号付きリスト)をクリック

2016-11-27_17h44_44

うまくいきました。
これをリストにしてから黄色ボックスを適応(内側のスタイルから外側のスタイル)しても上手くいかない場合が多いです。

テキストエディタ

ビジュアルエディタは便利な反面、時に自動整形など思わぬタグの挿入や改行による欠損や書式設定の承継などが起こり、思うようなデザインが反映されない場合があります。

そのような場合はテキストエディターモードでタグが正常な形になっているか確認できるとトラブル解決が早く出来ます。また、ある程度の知識が必要となりますが直接テキストエディターモードでタグを挿入すると反映箇所が間違いが起こりにくいでしょう。

2016-11-27_10h32_13

記事を編集する前に「テキストモード」の内容をメモ帳やEverNoteなどにコピーして保存しておく(バックアップ)と編集で見た目が崩れた時もコピペで戻せるので安心です。

覚えておくと便利なHTMLとCSSの基本

生成されているHTML言語やCSSをほんの少しでも理解しておくと問題解決に役立ちます。

ほとんどのHTMLタグには開始タグ閉じタグが存在します。

2016-11-28_144949

閉じタグの位置が変わったり欠損すると正常なデザイン及びレイアウトになりませんので注意して下さい。

2016-11-28_145136

段落と改行

<p>タグは文章と文章の段落を意味します。<br/>タグは改行となり、反映のスタイルは似ていますが異なりますので注意して下さい。

エディタではテキストの途中で「Enterキー」で段落、「Shift+Enter」で改行となります。

divタグ

レイアウトや比較的広い範囲などのコンテンツを囲むスタイルは<div>タグが使用されることが多く、特に<div>タグの閉じタグが欠損するとレイアウトは大きく崩れるので注意しましょう。

クラスとID

HTMLタグにクラスやIDを指定することで様々なスタイルを反映させます。

興味のある方はぜひ、勉強してみて下さい、

覚えると便利なショートカット

WordPressにもショートカットが多数あります。その中でも覚えておくと便利なのをいくつか紹介します。

挿入タグ ショートカット
画像挿入 「Shift」+「Alt」+「m」※数字変更でh3~可能
リンク挿入 「Shift」+「Alt」+「a」※数字変更でh3~可能
リンク削除 「Shift」+「Alt」+「s」※数字変更でh3~可能
hタグ(見出し) 「Shift」+「Alt」+「2」※数字変更でh3~可能
 改行  「Shift」+「Enter」
 コピー  「Ctr」+「C」
 ペースト  「Ctr」+「P」

参考WordPressのキーボードショートカット

スタイル・クイックボタンの基本説明

WordPress独自のクイックタグ、TinyMCE AdvancedとAFFINGER4独自のクイックタグボタンから使用頻度が高いと思われるボタンを簡単に説明します。

AFFINGER4独自のスタイル及びクイックタグは次項で詳しく説明します。

※TinyMCE Advancedプラグインのスタイルには一部対応していないものもございます。

WP:WordPressデフォルト
TinyMCE:TinyMCE Advanced有効化で表示されるもの
AFFINGER4:テーマ独自のもの

2016-11-27_14h34_15

①テキストを太字にします(WP)

②テキストに<em>タグを挿入します(WP)

③文章を「引用」にします(WP)

これはダミーの例です

④テキストをリストにします(WP)

  • これはダミーの例です
  • これはダミーの例です
  • これはダミーの例です

⑤テキストを数字の連番のリストにします(WP)

  1. これはダミーの例です
  2. これはダミーの例です
  3. これはダミーの例です

⑥画像やテキストの配置を変更します(WP)

2016-11-27_143432

①リンクを設置、解除します(WP)

これはダミーの例

②テーブルタグを挿入します(TinyMCE)

これはダミーの例 これはダミーの例 これはダミーの例
これはダミーの例 これはダミーの例 これはダミーの例

③操作を「進む」「戻る」を行います(TinyMCE)

④テキストに背景色を付けます(TinyMCE)

2016-11-27_143445

①<p>タグからh2タグ~6までの見出しタグを設定します

②テキストを両端揃え(TinyMCE)

③テキストに打消し線を加えます(WP)

④インデントを変更します(TinyMCE)

⑤テキストの付加する書式設定などの情報などを取り除いたプレーンな状態で貼り付けます(TinyMCE)

書式設定をクリアにします(TinyMCE)

特殊文字を入力します(TinyMCE)

2016-11-27_17h20_36

2016-11-27_143459

「続きを読む」を挿入します(WP)

顔文字を挿入します(TinyMCE)

テキストの色を変更します(TinyMCE)

AFFINGERに用意されている様々なスタイルを適応します(AFFINGER4)

AFFINGERに用意されている便利なタグを挿入します(AFFINGER4)

アドセンスのショートコードを挿入します(AFFINGER4)

2016-11-27_143509

①ウィジェットで作成したオリジナルのショートコードを挿入します(AFFINGER4)

②サイト内の他ページをブログカード風に挿入します(AFFINGER4)

YouTube動画をリンク画像で貼り付けます(AFFINGER4)

④アフィリエイトタグ管理プラグインで登録したアフィリエイトタグをIDで呼び出します(AFFINGER4)

⑤アフィリエイトタグ管理プラグインで登録したアフィリエイトタグをスラッグで呼び出します(AFFINGER4)

参考アフィリエイトタグ管理プラグイン

AFFINGER4独自のスタイル・クイックタグの説明

スタイル

2016-11-27_17h23_00

太字

テキストを太字にします

太字(赤)

テキストを太い赤字にします

大文字

テキストを大文字にします

小文字

テキストを小文字にします

ドット線

テキストにドット線を追加します

黄マーカー

テキストに黄色のマーカーを入れます

赤マーカー

テキストに赤色のマーカーを入れます

写真に枠線

写真などの画像に枠線を入れます。境界のわかりにくい画像に便利です。

pixta_14588092_M

記事タイトルデザイン

記事タイトル(h1)と同じデザインを適応します

これはダミーの見出しです

2016-11-27_17h23_18

code

コードをハイライトします。例<p class="hoge">

吹き出し

吹き出しのようなデザインを入れます

これはダミーの文章です

はてな

はてなマークをテキストの頭に入れます

注意

注意マークをテキストの頭に入れます

人物マーク

人物マークをテキストの頭に入れます

チェックマーク

チェックマークをテキストの頭に入れます

メモマーク

メモマークをテキストの頭に入れます

※各マークはビジュアルエディタ上では反映されません(青い背景色が付きます)。各マークはカスタマイザーでカラーを変更できます

回り込み解除

floatを解除します

センター寄せ

囲んだコンテンツをセンターに寄せます

下に余白

囲んだコンテンツの下に10pxの余白を入れます

2016-11-27_17h23_35

黄色ボックス

黄色のボックスエリアで囲みます

薄赤ボックス

薄赤のボックスエリアで囲みます

グレーボックス

グレーのボックスエリアで囲みます

引用風ボックス

引用(blockquote)と同じデザインを適応します

olタグを囲む数字ボックス

olタグをデザインします(カスタマイザーでカラー変更可能)

  1. これはダミーのテキストです
  2. これはダミーのテキストです
  3. これはダミーのテキストです

※設定方法は以下「ulタグを囲む数字ボックス」を参照

ulタグを囲む数字ボックス

ulタグをデザインします(カスタマイザーでカラー変更可能)

  • これはダミーのテキストです
  • これはダミーのテキストです
  • これはダミーのテキストです

設定方法はテキストエディタにて以下のように<ul>~</ul>全体を選択してから「ulタグを囲む数字ボックス」をクリックします

2016-11-29_10h13_22

ランキングボックス

ランキングボックスと同じ背景色を反映します

table横スクロールボックス

tableタグを囲むことでoverflow-x: autoを指定してスマホ閲覧時などに横スクロールするように指定します。(テキストモードで設定した方が上手くいきます)

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
imgインラインボックス

要素にdisplay:inlineを付与します。

装飾なしテーブル

tableタグを囲むことでデフォルトのtableのスタイルを削除します。

タグ

※次回公開verの内容を含みます

2016-11-27_17h23_48

スマホに表示しないボックス

ショートコード[ pc ]と[ /pc ]に囲まれたコンテンツはスマホに表示しません。

※[ pc ]の※全角空白は削除

PCに表示しないボックス

ショートコード[ nopc ]と[ /nopc ]に囲まれたコンテンツはスマホ以外に表示しません。

※[ nopc ]の※全角空白は削除

PCとTab左右40:60%

 PC(パソコン)とTab(タブレット)の場合のみ左40%右60%の横並びで表示します。スマートフォン閲覧時は縦並びとなります

※%指定のボックスの「スマートフォン閲覧時」とは599px以下のWidthの端末を指しています。

全サイズ左右50%

全てのサイズで左右50%横並びで表示します

全サイズ左右free%

widthをstyleで指定しているので左右の%をテキストエディタで変更できます

見出し付フリーボックス

ウィジェットと同じ「フリーボックス」のデザインを挿入します(カスタマイザーで変色可能)

タイトル(全角15文字)

ここに本文を記述
目次(TOC+)

プラグイン「Table of Contents Plus」で用意されたショートコード[ toc ]を挿入します※全角空白は削除

均等横並び

2016-12-02_11h59_00

ver20161201より搭載したスタイル「均等横並び」について説明します

2016-12-02_11h59_26

任意の位置で「均等横並び」をクリックすると上記の様な3列のボックスが表示されます。

テキストの「横並びのコンテンツ」を任意の内容に変更して下さい。

2016-12-02_12h00_01

タグの中身は<li>タグです。
<li>タグを増やす事で横並びのコンテンツを増やす事が出来ます。

テキストエディタのクイックタグにて<ul>を直接囲むタグを設定できます。

オリジナルショートコード

2016-11-29_11h03_14

アドセンス

記事内に広告ウィジェットを挿入します(PCの場合は336px、スマホは300px)

例↓

スポンサーリンク

オリジナルSC

ウィジェットで作成した「オリジナルウィジェット」の内容を挿入します

ブログ風カード

別ページを以下のようにブログカード風に読み込みます

設定方法

2016-11-29_10h25_09

➀表示したい記事IDを記入して選択
②「ブログカード風」をクリック

2016-11-29_10h25_26

自動でショートコードの形になります。

YouTubeID

YouTube動画を画像リンクにします。

設定やプラグインを併用することで多数の動画を貼っても重くなりにくくなります(例のYouTube画像は「EasyFancyBox」プラグインも併用しています。やり方は下記URL参照)。

普通にYouTube動画を20個貼り付けた例

2016-11-29_10h48_42
 

表示に18秒、ページサイズは1.52MB

このページのように張り付けた例

2016-11-29_10h49_38

表示に4.6秒、ページサイズは602KB

なんと約5倍も速くなりました。

参考複数のYouTubeの挿入方法

 アフィリエイトタグID/アフィリエイトタグSlug

アフィリエイトタグ管理プラグイン」にて登録したアフィリエイトコードをショートコードで呼び出します。

例↓

コピペリン

外注さんなどにお願いした記事がどこかからコピペしただけではないかチェックするツールです。似たツールは多数ありますが、一番軽くてテキストをそのまま貼り付けて使用できる点が気に入っています。

 

その他のショートコード

投稿で使用できるショートコードです。(クイックボタンはありません)

[ frontonly ] トップページだけに表示 [ /frontonly ] 

[ postonly ] 投稿ページだけに表示[ /postonly ]

[ pageonly ] 固定ページだけに表示[ /pageonly ]

[ catonly cat="1,5" ] カテゴリIDが1と5の時のみ表示 [ /catonly ]

※全角空白は削除して下さい

ボタンの作成

AFFINGER4ではランキングで使用できるボタンを投稿内の任意のリンクで作成できます。

ボタンはランキングCSS管理と連動しているので好きなカラーに変更も可能です。

ボタンの設定方法

①<a href="~">で囲まれたリンクテキストを選択した状態で②の「公式ボタン」又は「詳細ボタン」をクリックします。

上図のようになれば完成です。

見た目の感じ。

※まれにプラグイン利用の影響で以下のように<p>タグが重複すると上手くデザインが反映されませんので注意してください。

広告が溶け込む魔法の子テーマ「JET」

大人気!

詳しく見る

便利プラグイン情報

WING WordPress プラグイン

2018/6/16

外部URLのコピペでブログカードをサムネイル付きで表示するWordPressプラグイン

URLを指定するだけでブログカード風のリンクにします。 外部のサイトも自動スクリーンショットによりサムネイル表示が可能です。 【サンプル例】 プラグインの使い方と注意事項 インストール ダウンロードした「st_card_url_file.zip」を一度だけ解凍して、中の「st-card-ex.zip」をZipファイルのままWordPressの「プラグイン」>「新規追加」よりアップロードして有効化して下さい。 テーマ設定 プラグインを有効化するとエディタに新しく「カードURL」というボタンが追加されます 任 ...

ReadMore

WING WordPress プラグイン

2018/6/16

投稿ごとに記事をバックアップ(エクスポート)できるWordPressプラグイン

シカ子あ~!前の文章の方が良かった!! ブログやアフィリエイトで反応(CVR)を見ていると、そう思うことは少なくないのではないでしょうか? ユーザーに行動を起こさせる文章はほんの少しの言い回しの変化で良くも悪くも大きく効果が変わります。そんな時に絶対に必要なのが「バックアップ」。いつでも簡単に1クリックでそれを行うことができたら、しかも「年月、時間、記事タイトル-サイト名」としてテキストファイルを残せたら凄く便利ではないでしょうか? 記事バックアップ「安心くん」はそんな想いから生まれました。 いつでも、ど ...

ReadMore

WING WordPress プラグイン

2018/6/16

記事(コンテンツ)内容を一括で置換するWordPressプラグイン

投稿画面のテキストモードの記事内容を一括置換します。gu検索フラグの正規表現にも対応。 例えばアップデートで挿入されるようになったTinyMCEAdvancedの不要なtableタグも簡単に削除でき便利です。 プラグインの使い方と注意事項 インストール ダウンロードした「st_replace_file.zip」を一度だけ解凍して、中の「st-replace-meta-box.zip」をZipファイルのままWordPressの「プラグイン」>「新規追加」よりアップロードして有効化して下さい。 専用フォームの ...

ReadMore

WING WordPress プラグイン

2018/6/16

iframe対応!SEOを配慮した遅延読込WordPressプラグイン「LasyLoadSEO」

SEOを配慮した遅延読込プラグインです。 通常のLazyLoadでは画像がスクロールされるまで表示されないため、Googleのロボットには「画像が無い」と判断されています。このプラグインでは<noscript>を付与することで遅延読込を行いつつ、画像の有無も認識させることができます。 また、iframeにも対応しているため多数のYouTube動画を貼り付けている記事などにも効果的です。 アザらんLasyLoad(遅延読込)はサイト表示速度の改善に効果があるとして人気なんだけど、Googleには ...

ReadMore

AFFINGER4 お知らせ バージョンアップ プラグイン

2017/9/23

AFFINGER4タグ管理マネージャー ver20170923アップデートのお知らせ

「AFFINGER4タグ管理マネージャー」をver20170923にアップデート致しました。ご購入済みユーザー様は無料でアップデートして頂けます。 参考AFFINGERタグ管理マネージャーについて 【主なアップデート内容】 ログ一覧で「ホスト名」が確認できるように UA(ユーザーエジェント)及びOSのother一括によるフィルタ除外の追加 ダウンロードに関する詳細は以下のページをご確認下さい。 https://on-store.net/contact/aftm-from/aftm-topics/ ※閲覧に ...

ReadMore

お知らせ バージョンアップ プラグイン

2017/9/1

「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」「ABテストプラグイン」をアップデート致しました(ver20170828)

「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」「ABテストプラグイン」をアップデート致しました 購入済みユーザー様のアップデート期限は平成29年9月14日までです。御注意下さいませ(商品はアップデート保証を行っておりません) ver20170828 「AFFINGERタグ管理マネージャー」「STINGERタグ管理プラグイン」 ※画像は「AFFINGERタグ管理マネージャー」 一覧の「スラッグ」のショートコード表示 IDに加えて「スラッグ」による検索の対応 他 「ABテストプラ ...

ReadMore

便利すぎるWING特製プラグインランキング

※このブログカードも「ブログカード外部URL対応プラグイン」で表示しています

第1位テンプレート管理・ランキング機能強化(クリック計測機能付き)
AFFINGERタグ管理マネージャー2(PDFマニュアル「AffiliateRUN~なぜ売れないか?」付き) - 【公式】STINGER STORE
AFFINGERタグ管理マネージャー2(好評PDFマニュアル「AffiliateRun~なぜ売れないか?」付き

使いまわしたいコードのテンプレート化、リンクの表示回数とクリック数の計測(CTR)を実現するプラグインです。AFFINGER版ではランキングを複数作成することも可能。STINGER版ではCTAデザイン

第2位テンプレート管理・ランキング機能強化(クリック計測機能なし
STINGERタグ管理プラグイン2 - 【公式】STINGER STORE
STINGERタグ管理プラグイン2

使いまわしたいコードのテンプレート化するプラグインです。AFFINGER版ではランキングを複数作成することも可能。STINGER版ではCTAデザインを作成できます。

第3位他人のサイトも簡単ブログカードリンクに!
ブログカード外部URL対応プラグイン - 【公式】STINGER STORE
ブログカード外部URL対応プラグイン

URLを指定するだけでブログカード風のリンクにします。外部のサイトも自動スクリーンショットによりサムネイル表示が可能です。

第4位たくさん画像やYouTube動画を使用したサイトにおすすめ!
LazyLoad SEO(画像・iframe遅延読み込み) - 【公式】STINGER STORE
SEOを考慮した遅延読込プラグイン「LazyLoadSEO」

SEOを配慮した遅延読込プラグインです。通常のLazyLoadでは画像がスクロールされるまで表示されないため、Googleのロボットには「画像が無い」と判断されています。このプラグインでは<noscr

第5位複数設定可能な高機能ABテストプラグイン
ABテストプラグイン - 【公式】STINGER STORE
ABテストプラグイン

作成したテンプレートやリンクをランダム(又は%指定)で表示するABテストプラグインです。「AFFINGERタグ管理マネージャー2」との併用ではCTR(クリック率)のABテストデータを取ることが出来ます

第6位「大切な記事」を1クリック保存
記事バックアップ「安心くん」 - 【公式】STINGER STORE
「記事バックアップ安心くん」

いつでも、どのタイミングでも1クリックで記事を保存します。保存前の状態も可能です。「テキストモード」のソースで保存するのでタグによる装飾も安心です。

第7位投稿内のコードを簡単に一括置換
かんたん便利「置換くん」 - 【公式】STINGER STORE
「かんたん便利!置換くん」

投稿画面のテキストモードの記事内容を一括置換します。gu検索フラグの正規表現にも対応。例えばアップデートで挿入されるようになったTinyMCEAdvancedの不要なtableタグも簡単に削除でき便利

第8位カスタマイズが豊富!「ほぼ無限」の会話アイコン作成
会話ふきだしプラグイン - 【公式】STINGER STORE
会話吹き出しプラグイン

ご確認下さい 本プラグインはWordPressテーマ「STINGER PRO」「AFFINGER4」 ...

第9位外注管理におすすめ!メッセージのやりとりや管理画面カスタマイズに
外注管理プラグイン「CHAIN」 - 【公式】STINGER STORE
外注管理プラグイン「CHAIN」 - 【公式】STINGER STORE

メッセージの通知・投稿画面のカスタマイズできるWordPressプラグイン 投稿者・寄稿者権限で外注 ...

第10位サイトの複数作成に便利な「テーマ管理」バックアップ
データ引継ぎプラグイン - 【公式】STINGER STORE
データ引継ぎプラグイン - 【公式】STINGER STORE

2018年8月31日まで!2,980円→1,980円 データ引継ぎプラグインはWordPressテー ...

-AFFINGER4, FAQ, 制作ノート

Copyright© AFFINGER(WING) , 2018 All Rights Reserved Powered by AFFINGER5.