【マニュアル】AFFINGER5 WINGの機能や文字装飾など出来ること

更新日：2018年10月15日

AFFINGER5で検索しても、記事を書く時にできること（機能や文字装飾）は少ししか紹介されていません。まだまだ知られていない部分も大量にあるので、その魅力を紹介したいと思います。

「どんな機能が備わっているか？」
「どんな文字装飾ができるのか？」
「ランキング機能はしっかりしているか？」

このように「自分の求めている機能があるのか」と疑問をお持ちであれば、読んでください。いろいろ詰め込んでいるので、このページは少し重いですがご了承ください。

購入すればマニュアルサイトがあり、ちゃんと使い方の説明もあって分かりやすいんですが、購入前はそのマニュアルサイトが見れないので、AFFINGER5にどんな機能があるかここでハッキリ理解してから購入しましょう。

基本ここで書いている装飾は、AFFINGER5の通常版でできることを書いています。AFFINGER EXの場合、これ以上の機能を使用することができます。

この記事では、AFFINGERのアップデートに伴い一部反映できていない機能や、逆に使えなくなった機能があるかもしれません。ご了承のうえ、閲覧してください。

記事のもくじ

AFFINGER5 WINGの機能や記事装飾のマニュアル
ランキング機能の詳細
まとめ

AFFINGER5 WINGの機能や記事装飾のマニュアル

AFFINGER5 WINGでは、記事を書く時の装飾がとても豊富にあります。

そして他のテーマと違うところが、この記事の装飾を細かくカスタマイズできることです。

当然、無理にカスタマイズせず、そのままでもボタンをポチポチするだけで初心者でも簡単に装飾をしながら楽しく文章を書けるようになります。

この記事では、AFFINGER5 WINGの使い方は記していません。あくまでも購入前の参考として、あるいはマニュアルとして「こんな機能あったかな？」という時に使用してください。

テキスト

赤文字になる。

太文字になる。

赤字の太字になる。

大文字になる。

小文字になる。

ドット下線を引ける。

参考が書ける。中身は何にでも変更可能

必須も書ける。中身は何にでも変更可能

~~打ち消し線になる。~~

コードも入れれる。

アイコン

はてなマークのアイコンを入れれる。

注意マークのアイコンを入れれる。

人物マークのアイコンを入れれる。

チェックマークのアイコンを入れれる。

メモマークのアイコンを入れれる。

王冠マークのアイコンを入れれる。

初心者マークのアイコンを入れれる。

これらのアイコンは、後にくる文字と連動しており、文字色や大きさを変えることが可能です。

【表示例】

王冠マーク、赤文字、サイズ150％。

カウント

ここからカウント

こんな感じで

表示できる

カウント表示をさせることができます。これを見出しに使うと順番表示ができたりします。

【表示例】

ここからカウント

こんな感じで

表示できる

このカウント機能の良いところは、目次に数字が反映されないところです。目次に1.や2.などが入っていてもSEO上あまり得をしないので、表示されないナンバリングできる機能が優れています。

見出し風

ここに書いてあるのは、あくまで風（ふう）なのでh2見出し風で書かれた場合は、見た目だけがh2になります。

記事タイトル風の見出し

h2風の見出し

h3風の見出し

h4風の見出し

h5風の見出し

まとめ風の見出し

見出しの設定自体は、別途カスタマイザーにて色んな種類に変更できます。用途としては限られてきますが、一度文章を区切りたいときやランキングの見出しに使ったりとあると役立つ機能です。

マーカー

8種類のマーカーがあります。

黃マーカー

黃マーカー（細）

赤マーカー

赤マーカー（細）

青マーカー

青マーカー（細）

鼠マーカー

鼠マーカー（細）

蛍光ペン風のマーカーで記事作成時に見栄えがリッチになります。最近はどのサイトでもこのようなマーカーを使われていますね。CSSに書き込んで使用するのが一般的ですが、AFFINGER5では標準装備されています。

写真の装飾

写真の装飾ができます。

枠線付き

ポラロイド風

風景画像などはポラロイド風で表示すると写真の感じが出て見た目もきれいですね。枠線は、写真の背景が白色や明るいときでも境界線を目立たせるのに役立ちます。

【表示例】

装飾なし画像

枠線あり画像

ポラロイド風にコメント入れる

ここに好きな文字を入れれる

上のように、ポラロイド風にコメントを入れることも可能です。

カードスタイル

内部リンクをおしゃれなカードスタイルに変更できます。種類は3つです。

通常の内部リンク

【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方

ブログカードスタイル

: 【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方
続きを見る

カードスタイル

: 【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方
続きを見る

: 【実践編】ムームードメインへ登録して独自ドメインを取得する方法と手順
続きを見る

カードスタイルB

: 【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方
続きを見る

: 【実践編】ムームードメインへ登録して独自ドメインを取得する方法と手順
続きを見る

カードスタイルとカードスタイルBはパソコン上では同じレイアウトになっています。違うところは、スマホで見たときにカードスタイルBはブログカードで表示されることです。

このカードスタイルには少し弱点があって、記事タイトルの長さが違うと縦の長さが変わってしまうことです。これは見た目上あまりきれいではなかったので、私は使用していません。アフィたまでは、ブログカードスタイルのみ使用しています。記事をカードスタイルで表示させたい場合は、別売りの子テーマ「JET」を購入するともっと綺麗な表示になります。

テーブル

横スクロール

商品名	特徴
AFFINGER5	「稼ぐ」に特化したWordPressテーマ。
AFFINGER PACK3	AFFINGER5に有料プラグインが2つ付いたお得なセット。
STINGER PRO2	AFFINGERよりも機能は劣るがその分、価格が安い。

中央配置

商品名	特徴
AFFINGER5	「稼ぐ」に特化したWordPressテーマ。
AFFINGER PACK3	AFFINGER5に有料プラグインが2つ付いたお得なセット。
STINGER PRO2	AFFINGERよりも機能は劣るがその分、価格が安い。

装飾なし

商品名	特徴
AFFINGER5	「稼ぐ」に特化したWordPressテーマ。
AFFINGER PACK3	AFFINGER5に有料プラグインが2つ付いたお得なセット。
STINGER PRO2	AFFINGERよりも機能は劣るがその分、価格が安い。

横スクロールを使うと、スマホで見た時に横にスライドできる表になります。中央配置は文字が全て中央表示になります。装飾なしテーブルを使うと、枠線が消えます。横スクロールは、とても便利ですね。

クリップメモ

9種類のクリップメモ注意書きなど用途は様々。

AFFINGER5のちょっとしたメモ

アイコンの大きさや色、背景色や文字色もその場で簡単に変更可能（ビジュアルエディタで変更可能）

【表示例】

アイコンを3倍にしてアイコン色、背景色、文字色、文字の大きさを変更

ミニ吹き出し

ひとことコメントなどに役立つ、カラフルで綺麗なミニ吹き出し。

ミニ吹き出し

もちろん文字色、背景色、表示位置の調整もできる。

【表示例】

もん平だよ！

ミニ吹き出しのデフォルトの表示位置。

もん平なんだよ！

ミニ吹き出しの表示位置を下に移動させた。ボックスや画像に「目立つひとことコメント」を装飾できます。

AFFINGER5 WINGでは、こんなに細かい設定まで出来ます。他のテーマでは、表示できるとしても移動させるような機能がないものがほとんどです。AFFINGER5はこういうカスタマイズ性で一歩先にいっているテーマです。

たった少しの違いでも、見た目や読みやすさが変わり、文章の伝わりやすさは何倍にも変わります。

複合（アイコンあり、なし）

複合アイコンとは、上で紹介したクリップメモと見に吹き出しを掛け合わせたものです。それぞれアイコンのあり、なしのメモが存在します。

アイコンあり

自由なメモ

AFFINGER5 WINGのメモ

ココがポイント

AFFINGER5 WINGのポイント

ココがおすすめ

AFFINGER5 WINGのおすすめ

ココがダメ

AFFINGER5 WINGのここがダメ

ココに注意

AFFINGER5 WINGの注意

さらに詳しく

AFFINGER5 WINGの詳しく

◯才女性

AFFINGER5 WINGの女性口コミ

◯才男性

AFFINGER5 WINGの男性口コミ

アイコンなし

自由なメモ

アイコンなしメモ

ココがポイント

アイコンなしポイント

ココがおすすめ

アイコンなしおすすめ

ココがダメ

アイコンなしここがダメ

ココに注意

アイコンなし注意

もっと詳しく

アイコンなし詳しく

つまづきポイント

アイコンなしポイント

これらの複合メモも、各種カラーの変更がその場でできます。

【表示例】

ココがおすすめ

AFFINGER5は機能が満載！

使い所としては、ワンポイントアドバイスとか注意点としての用途が多いですが、個人的には初めに紹介したクリップメモがあれば必要ない気がします。

まるもじ（小）と（大）

まるもじの装飾ができます。こちらは、さっきの吹き出しのまるもじバージョンです。

まるもじ（小）まるもじ（小）まるもじ（小）まるもじ（小）まるもじ（小）まるもじ（小）

まるもじ（大）

もちろん文字色、背景色、表示位置の調整も自由自在にカスタマイズできる。

【表示例】

8月末まで公式サイトで半額！

公式サイトで半額！先着10名様限定

以上のように、見出しの前や後ろにまるもじの装飾を追加することも可能です。先ほどのミニ吹き出しと同じような使い方もできます。

カスタムボタン

フラットデザインのボタン2個と、カスタムボタンが12個の合計14個ものボタンがあります。

ステップ

step
1ここに文字を入れる

ステップでは、手順を踏んだ流れを伝えたい時に使います。またステップの色や数字、背景色、ボーダー色もカスタマイザーから変更可能です。

【表示例】

アフィたま特典の受け取り方

step
1アフィたまから公式サイトへ

アフィたま内のリンクから公式サイトへ行きます。

step
2公式サイトからinfotopへ

公式サイトの最下部にある赤いボタンを押し、販売ページへ行きます。

step
3購入画面で確認

購入画面に「アフィたまからの贈り物」と書かれていればOKです。

という感じで、購入までのステップ（流れ）を簡潔に分かりやすく伝えることができます。

ラベル

流れる文字

横に流れるようなテロップを表示可能。

流れる文字を表示させることができます。TOPページでお知らせの変わりに使ったりとちょっとおしゃれなアナウンスができますね。

【表示例】

【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。　【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。　【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。　【お知らせ】AFFINGER5 WINGの機能はまだまだあるよ。

1つの文章を長くすると、流れるテロップの速度も早くなります。

バナー風ボックス

タイトル

ここに文字を入れる。

バナー風ボックスとは、好きな画像に文字や画像を入れることで簡単にバナー（クリックできる広告）が作れます。その他にも、表示画像の幅や高さ、文字色、文字サイズ、影色、ボーダー色と太さ、背景色、背景画像のぼかし、nofollow、別窓で開く設定などをビジュアルエディタ画面でカスタマイズが可能です。

【表示例】

さぁ、夜景を見に行こう。

もん平トラベルへ

2日間限定

Amazonプライムデー開催

年に一度のタイムセールが7/16（月）スタート！
無料登録で誰でも参加可！詳細はここから

画像を誰でも簡単にバナー風にできる、こんな機能が実装されているテーマはAFFINGER5以外で見たことがありません。画像の加工が苦手な人でも直感的にできるのが良いですね。

ボックスの種類も豊富

ボックスの種類も豊富にあります。また、記事作成画面でカラーコードなどを使うことで、簡単にボックス色を変更できます。

基本ボックス

黄色いボックスを表示します。

薄赤ボックスを表示します。

グレーボックスを表示します。

引用風ボックスを表示します。

チェックボックスを表示します。
チェックの色は変更可能。
カスタマイザーで変更できる。

ナンバリングボックスを表示します。
ナンバリングの色は変更可能。
カスタマイザーで変更できる。

標準のチェックボックスも
当然あります。

標準のナンバリングも
当然あります。

黄色いボックスの枠線（グレー）は、アフィたまでカスタマイズしているので本来は黄色線で表示されます。チェックボックスやナンバリングボックスの色は変更可能です。

カスタマイズできるボックス

ポイント

ボックスの種類も豊富

ポイント

ボックスの種類も豊富

注意ポイント

ボックスの種類も豊富

はてな

ボックスの種類も豊富

これらのボックスもそのまま使うことが可能ですが、あなたのサイト色に合わせて1つひとつを細かくカスタマイズして使えます。

【表示例】

細かなカスタマイズができる

文字色、線の色と太さ、角の丸み、背景色

ボックスはこれだけではありません。他にも凡用性が高いボックスなどがあります。以下で紹介しています。

見出し付きフリーボックス

見出し（全角15文字）

見出し付きフリーボックスはサイドバーにも使えるので便利。アフィたまではプロフィールをこれで装飾して書いています。

見出し付きフリーボックスも、文字色、文字の太さ、ボーダー色、ボーダーの太さ、背景色などが変更可能です。

【表示例】

好きな文字入れて！

タイトル前にアイコン表示、アイコンにアニメーション付与、タイトル背景色を緑色っぽく、文字色は白色、背景色を水色っぽく、ボーダーを太くした。

メモボックス

メモ

一般的なメモボックス。文字フォントの大きさがデフォルトで小さくなっている。

実はこのメモは上のボックスと少し違い、文字の大きさが少し小さめの設定になっている。なので、補足を書くのにピッタリだったりします。補足情報は全ての方が欲しい情報ではないので、少し小さめの文字フォントが良いですね。あくまでも補足なので目立たせないのがGoodです。

スライドボックス

+ 本当にクリックしますか？

もん平

あげぽよ～！

ボス嫁

カーモンッベイベーアメリカ♪

パンダASP

クリックすると思ってたっす。

トラ広告主

いいぞ、期待通りの反応だ！

クリックすると隠されているコンテンツが現れるスライドボックス。縦長になってしまうコンテンツを「もっと見る」みたいな形で使うと良いですね。こちらも基本的な色の変更などができます。

こんな方におすすめボックス

個人的にも、かなり使いやすく気に入っているおすすめボックス。

こんな方におすすめ

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

こんな方におすすめボックスは、文字色、背景色、下線の有無、タイトルアイコン、リストのアイコンなどが変更可能です。

ガイドマップメニュー

ガイドマップメニューをツークリックで簡単表示できます。

記事を読む順番や購入手順などを順番に読んで欲しいコンテンツを並べることができます。それぞれに記事リンクやカテゴリーリンクなどを設定可能で、カラーの設定もできます。

この機能の良いところは、サイドバーでも表示できることです。

【表示例】

会話吹き出し

もん平

会話吹き出しもあるよ。

ボス嫁

これが便利よねっ(*´艸｀*)

パンダASP

背景色も自由自在っす！

トラ広告主

画像も簡単登録できるぞっ！

会話吹き出し機能は、8個まで登録できます。好きな画像や写真を一度設定しておけば、2クリックで何度でも簡単に呼び出して使うことができます。もちろん、そのキャラクターに合った背景色への変更や画像を動かすことも可能です。

【表示例】

向きを反対にすることも簡単っす！

パンダASP

拡張プラグイン（有料）を使うと、この会話機能をほぼ無限に増やすことも可能です。基本的に8個あれば足りると思います。

レイアウトも多種多様

レイアウトはサイト運営する上でちょくちょく使用するものです。この機能があれば、ちょっとした文章の分割や画像の分割をする時にとても役立ちます。

読者は縦長のコンテンツを嫌う傾向にあるので、分割レイアウトをうまく使用していきましょう。

PCとタブレットのみ分割【3分割】

左側33%

真ん中33%

右側33%

PCとタブレットで見ると横に3分割されて表示されます。

【表示例1】

スマホでは、縦に表示されます。今スマホで見ている方は同じ縦に並んだ画像が並んでますが、PCで見ると横並びに見えます。

【表示例2】

PCとタブレットのみ分割【4：6】

左側40%

右側60%

凡用性の高い、幅違いの分割もワンクリックで実装できる。PCとタブレットのみ横に並んで表示される（4：6）

【表示例】

右側のコンテンツ60%
例えば左に商品画像を入れて、右のこの部分には商品の説明や特徴を文章として入れるとランキングに似たものができる。

スマホから見ると、右側60%が写真の下に表示されているはずです。この4：6は表示例のように左を画像、右を文章にすることでランキングを自作で作る時にもとても役立ちます。

PCとタブレットのみ分割【5：5】

左側50%

右側50%

PCとタブレットのみ横に5：5で並んで表示される。

【表示例】

PCとタブレットのみ分割【3：7】

左側30%

右側70%

PCとタブレットのみ横に3：7で横に並んで表示される。

【表示例】

これも左に商品画像を入れて、
この部分には商品の説明や特徴を
リスト化（箇条書き）にしても良いよね。

全サイズで分割【5：5】

左側50%

右側50%

PC、タブレット、スマホとすべての表示で横並びになるレイアウト。

【表示例1】

スマホ表示でも横並びになる。

【表示例2】

スマホで横並び表示だと小さくなるので、使い所は考えた方が良いでしょう。

全サイズフリー

80%

20%

全サイズフリーで自由に幅を決められる。

均等横並び

均等横並び
均等横並び
均等横並び

これを使えば、全サイズ（PC、タブレット、スマホ）で3分割表示も可能です。

レイアウトには、これ以外にも「回り込み解除」や「センター寄せ」、「下に余白」、「ランキングボックス」、「wide100％リセット」、「imgインラインボックス」などもあります。

星評価（スター）

「」、「」、「」、「」、「」、「」、「」

星の大きさは自由に変えられる。

【表示例】

ランキングやちょっとした商品のレビューに欠かせない星の評価（スター）。また、☆4.5や☆3.5などの細かい設定があるのが嬉しいところ。テーマのほとんどがデフォルトでこの機能がない為、プラグインで対応しないといけないがAFFINGER5にはこの機能が標準装備されている。

アドセンスタグ

初めに設定したアドセンス広告を1クリックで簡単に貼ることができます。サイドバーウィジットや文章の途中など好きなところへ呼び出せます。

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

オリジナルショートコードをポチッと押せば、事前に作成しておいた塊（かたまり）を呼び出すことができます。

【表示例】

上のような画像、文章、ボタンなどの少し複雑な組み合わせを作っておけば、何回でも簡単に呼び出せます。（他にも全ての記事下に厳選記事を表示させるとか）内容を修正するときも、1つを直せば全てが修正されます。この機能は便利ですが、1つしか作れないのが欠点です。専用プラグイン「AFFINGERタグ管理マネージャー」を使えば何個でも作れるので私は使っていません。

また、AFFINGER5には別のショートコードを記事中に書くことで、下のような記号も簡単に表示可能です。

【表示例】

[ 下矢印 ]と入れると表示される下矢印。

[ st-under-t color="#000" ]と入れると表示される下矢印。

[ st-maru ]を入れると表示されるマル記号。

[ st-x ]を入れると表示されるバツ記号。

※カッコ[]の中にある半角スペースは消して使用すること。

あまり知られていませんが、上記のようなショートコードもあり、とても簡単に使用することが可能です。

YouTube動画の貼り付け

上は通常の埋め込み方法です。通常のYouTube動画を記事中に埋め込むと、記事の表示スピードが遅くなります。AFFINGERでは、ショートコード[ youtube id= ]を使用することで表示速度の低下を抑える工夫が施されています。

※無料プラグイン「Easy FancyBox」が必要です。

【表示例】

このショートコードを使用すると、貼り付けているのが画像データとなり通常よりも読み込み速度が改善されます。弱点としては、貼られている見た目の画像だけ少し粗くなることですね。（再生中の動画が劣化するわけではありません。）しかし、サイトの表示スピードはGoogleの順位ランキングにも影響があるので、正直うれしい機能です。

目次ショートコード

目次を表示させるショートコードを入れることで、好きなページにのみ目次の表示が可能です。このページのトップに出ているような目次（項目の詳細へジャンプできる機能）を呼び出すことができる。目次のカラー設定も可能。

※無料プラグイン「Table of Contents Plus」もしくは、専用プラグイン「SUGOIMOKUJI」が必要です。

【表示例】

この目次は、アフィたま独自のカスタマイズをしているものです。実際の目次とは見た目が違います。アフィたまの購入特典で、プラグイン「SUGOIMOKUJI」のカスタマイズをプレゼントしています。

＞＞アフィたまの購入特典を見る

用途としては、基本目次を表示させない設定にしておいて、この記事とこの記事だけ目次を表示させたいなどという時に使います。普段あまり使わない機能ですが、あるとやはり便利な機能です。

記事一覧

1: サイトの作り方
AFFINGER5が「稼ぐサイト」と呼ばれる理由！アフィリエイトを始めるならテーマはこれ
2018/03/14

2: プロフィール
もん平のプロフィール
2016/12/17

3: サイトの作り方
稼ぐサイト・ブログの作り方！初心者でもWordPressでアフィリエイトサイトを作る手順
2017/12/20

記事一覧をどこでも自由に表示させられる。この一覧の順番や記事内容は自由に決められるのが便利。ランキング表示のON、OFFもその場で変更が可能です。ここが良い！EXだと…。

カテゴリー一覧（スライドショー対応）

: アフィリエイトの始め方
【2019年】アフィリエイトで儲かるジャンルの選び方！失敗しないおすすめなジャンルとは

: アフィリエイトの始め方
アフィリエイトの種類を決めよう！初心者におすすめの種類とは…

: アフィリエイトの始め方
ASPへ無料登録しよう！アフィリエイトのサイト審査なしで登録できるASP一覧

カテゴリー一覧を表示させる機能。先ほどの「記事一覧」と似ているが、カテゴリーIDを指定するだけでカテゴリー内の記事全てを表示可能。もちろん表示数を減らすこともできる。

【表示例1】

PCだと3列表示、スマホだと2列表示されています。

アフィリエイトの始め方

2019/1/3

【2019年】アフィリエイトで儲かるジャンルの選び方！失敗しないおすすめなジャンルとは

アフィリエイトのサイトやブログを作っていく上で避けて通れないのが、アフィリエイトのジャンル選定です。アフィたまを読んでくれている、あなたが今ジャンル選びで迷っているのであれば参考になる記事だと思います。アフィリエイト初心者におすすめするジャンルを私が一言でアドバイスするとしたら「儲かるジャンル」をおすすめします。もん平儲かるジャンルを選ぶだけなら楽勝じゃんっ！アフィリエイトで儲かる為には、儲かるジャンルで儲かる商品を紹介していくことが基本です。もちろん例外もありますが、どんなビジネスも基本は一緒で ...

これを読む

アフィリエイトの始め方

2017/12/24

アフィリエイトの種類を決めよう！初心者におすすめの種類とは…

アフィリエイト初心者は「どんな種類のアフィリエイトサイトを作っていけば良いのか？」、「そもそもどんな種類のアフィリエイトがあるのか？」分からない方も多いと思います。 ASPへ登録したら、次にどんな形のサイトを目標にサイト作成をしていくのか考える必要があります。ここがブレてしまうと、後々収益化しにくいサイトになってしまうので、参入ジャンルを決める前に一度この記事を読んでおくと良いでしょう。本記事では、アフィリエイト初心者におすすめなサイトの種類を解説していきます。前回の記事を見ていない方はこちら「AS ...

これを読む

アフィリエイトの始め方

2018/12/16

ASPへ無料登録しよう！アフィリエイトのサイト審査なしで登録できるASP一覧

アフィリエイト初心者は、まず初めにASP（アフィリエイト・サービス・プロバイダー）という仲介業者へ登録しなければアフィリエイトができません。しかし、ASPへ登録するには基本的に自分のサイトを持っていなければ登録すらできないんです。理由はASPへ登録する時に「サイト審査」というものがあるからです。でも実際にはASPへ登録しないと分からないことが多く、アフィリエイト初心者にとって悩ましいところかもしれません。「アフィリエイトできる商品は、どんなものがあるのか？」「その商品を売ると、どのぐらいの報酬にな ...

これを読む

アフィリエイトの始め方

2018/6/3

アフィリエイトを始める前に準備するもの

アフィリエイトをいざこれから始めようという方は「まず何から準備していけば良いか？」が分かりづらいと思います。アフィリエイトを始めるには、基本的に4つ準備するもの（必要なもの）があります。もん平4つだけなら楽勝かな！？前回の記事を見ていない方はこちら「アフィリエイトとは何か？アフィリエイトの仕組みを知ろう！」をチェックしてからご覧ください。記事のもくじアフィリエイトを始める前に準備するものパソコンを用意しようインターネット回線を繋ごうアフィリエイト専用のメールアドレスを作ろうアフィリエイト専用の銀行 ...

これを読む

アフィリエイトの始め方

2017/12/24

アフィリエイトとは何か？アフィリエイトの仕組みを知ろう！

アフィリエイトを始めるには、まずアフィリエイトのことをよく知る必要があります。あなたが現在アフィリエイト初心者だとしたら、参考になる記事です。この記事では、アフィリエイトの基礎の基礎である「アフィリエイトとは何か？」からアフィリエイトでどのように報酬（お金）が発生するのか「アフィリエイトの仕組み」を紹介していきます。アフィリエイト初心者にこそ読んでもらいたい部分です。記事のもくじアフィリエイトとは何か？アフィリエイトの仕組みアフィリエイターから見た仕組みASPから見た仕組み広告主から見た仕組みユー ...

これを読む

【表示例2】

PCだと2列表示、スマホだと1列表示されています。

アフィリエイトの始め方

【2019年】アフィリエイトで儲かるジャンルの選び方！失敗しないおすすめなジャンルとは

これに決めた

アフィリエイトの始め方

アフィリエイトの種類を決めよう！初心者におすすめの種類とは…

これに決めた

アフィリエイトの始め方

ASPへ無料登録しよう！アフィリエイトのサイト審査なしで登録できるASP一覧

アフィリエイトとは何か？アフィリエイトの仕組みを知ろう！

これに決めた

【表示例3】

PCだと2列表示、スマホだと1列表示+両端見える設定。

サイトの作り方

2018/11/24

WordPressの初期設定｜初心者が記事を書く前に必ずやること

WordPress（ワードプレス）をインストールしたら、まず初期設定をしていきましょう。このWordPress初期設定では、セキュリティー（個人情報の保護）を強化したり、SEO効果を向上させる目的で行います。記事を書く前にやっておかないと大変なことになってしまうので、この初期設定は必ずおこなうこと。内容が難しく思えるかもしれませんが、初心者さんにも分かるようにすべて図解入りで1つひとつ解説していくので、一緒に頑張りましょう。もん平セキュリティーとか大切そうだね。トラ広告主うむ、初期設定は必ずやっ ...

サイトの作り方

2018/10/23

【全図解】WordPressを簡単にインストールする方法｜エックスサーバー編

WordPress（わーどぷれす）といわれるサイトを構築する為のソフトがあります。これをレンタルサーバーにインストールしていくことで、サイトやブログの作成がとても簡単になります。（無料です）今回、レンタルサーバーは「エックスサーバー」を使い、初心者の方でも分かりやすいように、すべて図解入りでWordPressを簡単にインストールする方法解説していきます。もん平出た。わーるどぷれすやっ！トラ広告主「わーどぷれす」な。独自ドメインとレンタルサーバーの紐付け設定（関連付け）がまだの方は、前回の記事を参考 ...

サイトの作り方

2018/11/24

ドメインとサーバーを紐付ける設定方法｜ムームードメイン×エックスサーバー

独自ドメインとレンタルサーバーを取得したら、そのドメインとサーバーを紐付ける設定（関連付ける）をします。そのままだと両方とも使い物になりません。この記事では、ムームードメインとエックスサーバーで取得した2つを紐付ける設定方法を書いていきます。（画像を見るだけでもおおかた設定できます。）簡単なイメージをすると、あなたの土地（サーバー）に住所（ドメイン）を設定することです。そうすることで、あなただけのサイトを所有することができます。もん平土地と住所を紐付けるのか…。トラ広告主意外と簡単に出来るぞっ！ ...

サイトの作り方

2018/10/15

【マニュアル】AFFINGER5 WINGの機能や文字装飾など出来ること

AFFINGER5で検索しても、記事を書く時にできること（機能や文字装飾）は少ししか紹介されていません。まだまだ知られていない部分も大量にあるので、その魅力を紹介したいと思います。「どんな機能が備わっているか？」「どんな文字装飾ができるのか？」「ランキング機能はしっかりしているか？」このように「自分の求めている機能があるのか」と疑問をお持ちであれば、読んでください。いろいろ詰め込んでいるので、このページは少し重いですがご了承ください。購入すればマニュアルサイトがあり、ちゃんと使い方の説明もあって ...

サイトの作り方

2018/10/10

【実践編】AFFINGER5の購入方法と手順｜初めてでも分かるアフィンガーの買い方

今回は実践編ということで、AFFINGER5 WING（アフィンガー5 ウィング）の購入方法と手順を、初心者の方でも分かるように図解で解説していきます。もん平途中から訳が分からなくなって、買うのヤメちゃった…。トラ広告主うむ…。AFFINGERを購入するのは、少しややこしいからな！ AFFINGER5は多くの方が認める、とても優秀なWordPressテーマです。しかし、購入するのが少し面倒くさいです。「購入方法や場所がよく分からない。」「購入手順が複雑で分からない。」「インフォトップって何？」 ...

サイトの作り方

2018/5/7

【実践編】ムームードメインへ登録して独自ドメインを取得する方法と手順

実践編ということで、実際に独自ドメインを取得する方法や手順を「画像付き」で詳しく解説していきます。この記事をスマホやパソコンで見ながら、同じ手順で一つひとつ実践していけば初心者の方でも簡単に独自ドメインを取得できるようになります。

日付の非表示や矢印の色などは全体設定で変更が可能で、記事の投稿画面から簡単にスライドショー化をすることができる。PCとタブレットでは2個並びの表示にして、スマホで見たときは1個表示にすることが可能。また、TOTAL表示数も3個だけにしたり、10個にしたりと、ある程度は自由にカスタマイズが可能。

カテゴリー一覧は、記事一覧と似ている機能だが、ランキング機能はない、また表示数を限定しても表示されるものは投稿した順で自動表示されると思われます。

条件表示

AFFINGER5には、以下の条件表示ができる機能も標準装備されています。

コメントアウト
PC閲覧時のみ表示
PC閲覧時のみ非表示
AMPページのみ表示
AMPページのみ非表示
フロントページのみ非表示
指定したカテゴリーIDのみ非表示

それぞれの指定を簡単にできます。

例えば、表（table）を作ったとして「PCでの見栄えは良いけど、スマホで見ると表が見にくい」という現象は、サイトやブログ運営をしている人は誰もが通る道です。

私達はいかに分かりやすく読ませられるか、腕の見せところです。

PCでは、下の表だけを表示したい。（スマホでは読みにくい）

商品名	AFFINGER5	WING	STINGER PRO2
詳細	「稼ぐ」に特化したWordPressテーマです。Twitter見ててもなんやかんやSEOに強い印象。	WINGはAFFINGER5と同一商品。二つ名みたいなもの。少し紛らわしい。	AFFINGERよりも機能は劣るがその分、価格が安い。昔からのファンも多いよね。

スマホでは、下の表だけを表示したい。（PCでは読みにくい）

商品名	詳細
AFFINGER5	「稼ぐ」に特化したWordPressテーマです。Twitter見ててもなんやかんやSEOに強い印象。
WING	WINGはAFFINGER5と同一商品。二つ名みたいなもの。少し紛らわしい。
STINGER PRO2	AFFINGERよりも機能は劣るがその分、価格が安い。昔からのファンも多いよね。

両方とも書かれている内容は同じですが、どの端末から見るかで読みやすさが違います。

【表示例】

条件分岐を使用した。（実際にPCとスマホで比べて見てね。）

商品名	AFFINGER5	WING	STINGER PRO2
詳細	「稼ぐ」に特化したWordPressテーマです。Twitter見ててもなんやかんやSEOに強い印象。	WINGはAFFINGER5と同一商品。二つ名みたいなもの。少し紛らわしい。	AFFINGERよりも機能は劣るがその分、価格が安い。昔からのファンも多いよね。

スマホから見比べると分かりやすいですが、上記のような条件分岐もAFFINGER5なら簡単に反映できます。

WEBアイコン

15種類のWEBアイコンを手軽に呼び出せます。ボタンの前後にアイコンを表示させたり、ボックスのチェックマークを他のアイコンへ変更することもできます。記事の編集画面から簡単に入れることができます。

【表示例】

AFFINGER5詳細

AFFINGER5ランキング

ダウンロードはこちら

アニメーション

アイコンにアニメーション（動き）の機能を付けることができ、目を引きつけることができます。このアニメーションは、16種類のパターンが使えます。

45℃揺れ

ベル揺れ

横揺れ

縦揺れ

点滅

バウンド

回転

ふわふわ

大小

シェイク

シェイク（大）

拡大（揺れ）

過ぎる

戻る

バースト

落ちる

上で紹介した機能「ボタン」や「クリップメモ」、「まるもじ」に使用するとオシャレ感がUPします。基本的に、WEBアイコン用として手軽に使えるアニメーション機能ですが、これらを応用すれば文字や画像に動きをつけることもできます。

【表示例】大小

もん平

ハックション！

文字や画像へアニメーションの動きを付ける場合は<span>タグで指定する必要があるのでちょっと面倒です。AFFINGER5では、文字や画像にもわずか2クリックで適応できます。欠点として、文字にアニメーションを付けると文字フォントが変わりメイリオになってしまうので注意しましょう。基本的には、アイコンや会話吹き出しで使えば良いですね。