shutterstock_138342692

AFFINGER4 faq 制作ノート

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

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

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

2016-11-27_10h29_54

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

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

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

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

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

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

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

目次

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

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を付与します。

width100%リセット

width: initialで初期状態にリセットします

装飾なしテーブル

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)

例↓

スポンサーリンク

ad

オリジナルSC

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

ブログ風カード

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

no image
AFFINGER4管理の完全マニュアル

AFFINGER4管理の説明 AFFINGER4は「AFFINGER管理」「カスタマイザー」「ウィジェット」「投稿・固定ページ」「カテゴリ」に主な機能があります。 ここではテーマの全体的な設定をする「 ...

続きを見る

設定方法

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 ]

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

ad

ad

※記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ

御注意

当サイトの内容の一部はAFFINGER3以前のものであり、現AFFINGER4と異なる場合があります。

NEWS

amp2 1

AMPがGoogleモバイルの通常検索結果にまで拡大したことを受けて通常の検索結果のAMPに対応した「AFFINGER4ver20161107」をUP致しました。 AMP(アクセラレイティッド・モバイ ...

affinlion 2

新しく有料配布とさせていただいた「AFFINGER4」。 今までのサイト作成を通して必要な機能や便利な仕組みを思いつく限り詰め込んだ万能テーマに仕上がっています。 micataやSTINGER PLU ...

2016-09-28_163821 3

AFFINGER4はSTINGERとmicataの両方を兼ね備えた、STINGER系の中でもっとも最新かつ最高位のテンプレートです。 試験的にAFFINGER4の管理画面の中をのぞいて頂ける管理画面用 ...

-AFFINGER4, faq, 制作ノート

Copyright© アフィリエイトのAFFINGER , 2016 AllRights Reserved Powered by AFFINGER4.