PickUp

1

ここでは、 どんな特典が手に入るのか特典付きでAFFINGER6を購入する方法 この2つについて詳しく解説していきます。 購入特典について まずはじめに、当サイトが提供している購入特典について簡単に説 ...

2

AFFINGER6には「アニメーション」機能があります。 アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。 たとえば、 注意 ふきだしを ...

3

ブログでよく使うWebアイコンをまとめました。 使用するWebアイコンは、 AFFINGERオリジナルアイコンFont AwesomeREMIX ICON この3つです。 ※REMIX ICONを使用 ...

AFFINGER6で作成したデモサイト

AFFINGER6のデフォルト機能のみで作成したデモサイト一覧です。

以下の画像をタップするとデモサイトが開きます。

キャンプ系

TOPページ(headerエリア)

 ▼

記事エリア

ファッション系

TOPページ(headerエリア)

記事エリア

ガジェット系

TOPページ(headerエリア)

記事エリア

教育系

TOPページ(headerエリア)

記事エリア

当サイトよりAFFINGER6を購入していただいた方には、これらのデザイン済みデータをすべてプレゼントいたします。

購入特典を詳しく見る

稼ぎたいブログ初心者向け!買って損しないWordPress有料テーマはこれ一択

「ブログで真剣に稼ぎたいんすけど、どの有料テーマを選べばいいですか?」 「そもそも稼ぎやすいWordPressテーマなんてあるんですか?」 こんな疑問に答えます。 いきなり結論から言うと、 稼ぐことが目的なら「AFFINGER6」一択! なぜなら、ここまで利用者が稼げるように考えてくれているWordPressテーマが他にないからです。 そこで今回は、2017年からWordPress有料テーマ6種類を使い倒してわかった「稼げるWordPressテーマの要素」について解説していきます。 特に、これからアドセン ...

no image
手順説明に使うスクショ画像をわかりやすく編集する方法

ここでは、手順の説明記事に使うスクショ画像をわかりやすく編集する方法について解説していきます。 まずはじめに、どんな編集をするのかを簡単に説明しておきますね。 完成イメージはこんな感じです↓ この画像の編集ポイントは、 強調したい部分以外を暗くする 強調したい部分を赤の枠線で囲む 説明の順番を示す数字を入れる この3点です。 これを、PhotoScapeX(フォトスケープ)という画像編集ソフトを使って編集します。 PhotoScape X(フォトスケープ)はMicrosoftストアからダウンロードできます ...

AFFINGER6は初心者には難しい?使いこなせないのは本当か?

「AFFINGERって設定が複雑で難しいから初心者は買わないほうがいいよ」 「AFFINGERは中級者~上級者向けだから、初心者には使いこなせないよ」 このような意見を見たことがあると思います。 これを見て僕は正直こう思いました。 「初心者」という言葉の定義もはっきりせずに、「初心者は・・・」という形でAFFINGERをむずかしいと言っている人たち。。。 その言葉を信じて、本来使いこなせるスキルを持っているのに違うテーマを選ばざるを得なくなった人がいるはずです。 そこで今回は、AFFINGER6が初心者に ...

サイドバーの新着記事一覧の見出しを表示させる方法

サイドバーに表示された新着記事一覧に見出しが表示されていないときの対処法をご紹介します。 AFFINGER6をインストールしただけの状態だと、新着記事一覧に見出しが表示されません。 これは、新着記事一覧の表示設定をAFFINGER管理で行っているからです。 AFFINGER管理で新着記事一覧を非表示にし、ウィジェットの最新の投稿一覧を使えば解決します。 それでは具体的な手順について解説していきます。 サイドバーの新着記事一覧の見出しを表示させる手順 サイドバーの見出しは以下の流れで設定します。 AFFIN ...

【CSS不要】スマホヘッダーに影を追加する方法

CSSを追加せずにスマホヘッダーの境界線に影を追加する方法をご紹介します。 簡単にやり方を説明すると、 「適応IDをコピーし、AFFINGER管理のドロップシャドウの項目に貼り付ける」 これだけです。 それでは具体的な手順を解説していきます。 スマホヘッダーに影を追加する方法 手順 1.まずは以下の適応IDをコピーしてください。 #s-navi dt これがスマホのヘッダー部分の適応IDです。 2.次にWordPressのダッシュボードを開き、「AFFINGER管理」→「全体設定」の順にクリック。 3.「 ...

スマホのヘッダーを固定orスクロール追尾する方法

今回は、スマホのヘッダーを「固定」or「スクロール追尾」する方法について書いていきます。 AFFINGER6で設定できるスマホヘッダーの表示パターンは3つあります。 【通常】:ヘッダーは固定されません 【固定】:常にページ上部にヘッダーが固定されます 【スクロール追尾】:下へスクロールするとヘッダーは消え、上へスクロールすると消えたヘッダーが現れます 表示パターンのイメージ 表示パターンの設定は「カスタマイズ」で行います。 この記事では、 スマホヘッダーの表示パターン設定 「ヘッダー背景が透過して見にくい ...

PCのヘッダー境界線に影をつける方法【CSS不要】

この記事では、 「PCのヘッダーとメニューの境目がわかりにくい」 「ヘッダーの境界線に影をつけられないかなぁ」 という悩みを解決します。 PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。 やることは ドロップシャドウの設定に適応IDを追加するだけです。 ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。 スマホのヘッダーにも影をつけた ...

挿入した画像をデフォルトでフルサイズ表示させる方法【WordPress】

そんな悩みを解決します。 結論からいうと、 「すべての設定」の中にある「image_dafault_size」という項目を「full」に変更すれば解決できます。 ただ、「すべての設定」は隠しページみたいなものなので、通常のダッシュボードのメニューには表示されていません。 この記事では、 「すべての設定」を表示させる方法 「image_dafault_size」を「full」に変更する手順 を解説していきます。 この設定を行えば、挿入した画像はすべてフルサイズ表示させることができますよ。 「すべての設定」を ...

スマホヘッダー境界線の影
スマホヘッダーに影をつけてぼかし強度を変更する方法

「アフィンガーはスマホヘッダーの境界線がわかりにくい…」 「SANGOみたいな感じで境界線に影をつけたいな~!」 「影の大きさも変更できないかなぁ…」 という悩みを解決します。 この状態を目指します! 結論からいうと、CSSを追加して数値を変更すれば可能です。 この記事では、 スマホヘッダーの境界線に影をつける手順 影の幅とぼかし強度を変更する方法 この2つを解説していきます。 スマホヘッダーの境界線に影をつける手順 追加するCSSをコピーする まずは以下のCSSをコピーしてください。 /*スマホヘッダー ...

AFFINGER6「マイブロック」の便利な使い方

アフィンガー6をインストールすると、ダッシュボードメニューの1番上に「マイブロック」が表示されます。 「これってどんな機能?」 「再利用ブロックと何が違うの?」 という疑問をもっている方が多いんではないでしょうか。 アフィンガー6を購入してマイブロックを使わないのは、非効率の極みと言っていいほど損しています。 そこで今回は、「マイブロック」の便利な使い方について、詳しく解説していきます。 マイブロックと再利用ブロックの違い まずは、「マイブロック」と「再利用ブロック」の違いについて簡単に説明します。 マイ ...

no image
AFFINGER6の「見出し付きフリーボックス」を使いこなそう(基本編)

今回は、ブロックエディタで「見出し付きフリーボックスを使いこなす方法(初級編)」として解説していきます。 見出し付きフリーボックスとは、AFFINGER6の専用ブロックのひとつです。 ここでは、初心者の方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。 使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。 見出し付きフリーボックスの装飾例 まずはじめに、見出し付きフリーボックスでどんな装飾ができるのかをご紹介します。 ※ダッシュボードメニューの「外観」→ ...

AFFINGER6の「メモボックス」を使いこなそう(基本編)

今回は、ブロックエディタでAFFINGER専用メモボックス(メモブロック)を使いこなす方法(基本編)として解説していきます。 メモボックスとは、AFFINGER6の専用ブロックのひとつ。 メモボックスは2種類に分かれます。 段落スタイルのメモボックス AFFINGER専用ブロックのメモボックス ここでは、AFFINGER専用ブロックのメモボックスの使い方について、詳しく解説していきます。 段落スタイルのメモボックスの使い方については、以下の記事に詳しく書いているので、2種類を使い分けたい方はぜひチェックし ...

no image
AFFINGER6の「マイボックス」を使いこなそう(基本編)

今回は、ブロックエディタでマイボックスを使いこなす方法(初級編)として解説していきます。 マイボックスとは、AFFINGER6の専用ブロックのひとつです。 AFFINGER6で使えるボックスの中でも「マイボックス」は使い勝手がいいのでよく使います。 ここでは、AFFINGERの使い方にまだなれていない方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。 使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。 マイボックスの装飾例 まずはじめに、マイボックスで ...

カスタムボタンに 影&ドロップシャドウ をつける方法

AFFINGER6のカスタムボタンには、「影」または「ドロップシャドウ」をつけることができます。 「影」と「ドロップシャドウ」はまったく別物。 簡単に説明すると、 「影」→ボタンが立体的に見える 「ドロップシャドウ」→ボタンが浮いて見える という違いがあります。 それではそれぞれの設定を解説していきます。 カスタムボタンに「影」をつける手順 カスタムボタンに影を追加するのは、ブロック編集の「レイアウト・デザイン設定」にて行います。 1.新しい段落に「/カスタムボタン」と入力し、カスタムボタンのブロックを挿 ...

簡易会話&会話ふきだしに影を追加する方法

ここでは、「簡易会話」と「会話ふきだし」に影(ドロップシャドウ)を追加する方法について解説します。 「簡易会話」とは、段落のスタイルから挿入できるふきだしのこと。 「会話ふきだし」とは、AFFINGER専用のふきだしブロックです。 この2種類のふきだしの使い分けについては、こちらの記事に詳しく書いています。 会話ふきだしに影を追加するには、ドロップシャドウを追加する必要があります。 簡易会話であれば、ボックスなどと一緒にドロップシャドウを追加することができるんですが、会話ふきだしは個別に設定しないといけま ...

AFFINGER6の会話ふきだし 2種類の設定と使い分け方

この記事では、 AFFINGER6のデフォルトで使える「ふきだし」の 使い分け 設定 使い方 この3つについて解説していきます。 2種類ある「ふきだし」の使い分け AFFINGER6のデフォルトで使えるふきだしは2種類あります。 会話ふきだしブロック 段落スタイルの簡易会話 この2つの違いについては以下の通り。 項目 会話ふきだしブロック 簡易会話 名前の表示 ○ ✕ 向きの変更 ○ ✕ テキストの改行 ○ ✕ アイコンの選択 8種類 2種類 ドロップシャドウ ✕ ○ ふきだしのボーダー ○ ✕ 表を見て ...

AFFINGER6「ブログカード風」内部リンクの作り方【装飾し放題!】

今回ご紹介する方法は、 デフォルトのブログカードではもの足りない…… もっと内部リンクを目立たせたい! という方におすすめの方法です。 ブログカード風内部リンクを使えば、 ボーダーの「色」や「太さ」を変更できる 「背景色」を変更できる 枠内に「まるもじ」や「ふきだし」が挿入できる ということが可能になります。 ここでは、大きく分けて2タイプの作り方を紹介します。 グループ化するタイプ マイボックスを使用するタイプ それでは、ブログカード風内部リンクの作り方を詳しく解説していきます。 グループ化タイプのブロ ...

AFFINGER6で作れるブログカード全部を紹介します!

AFFINGER6のデフォルト機能で作れるブログカードを紹介します。 ブログカードの作り方は大きく分けて2つ。 クラシック版の段落ブロックの中で作る ブロックエディタで作る AFFINGER6で作れるブログカードは4種類。 それにプラスして、ブログカード風の内部リンクがあります。 クラシック版の段落の中で作るブログカード CHECK(ふきだし) 参考 ブロックエディタで作るブログカード 埋め込み ラベルあり 記事IDを使ったブログカード風の内部リンク それぞれ詳しく解説していきます。 AFFINGER6で ...

もっと見る

スマホのヘッダーを固定orスクロール追尾する方法

今回は、スマホのヘッダーを「固定」or「スクロール追尾」する方法について書いていきます。 AFFINGER6で設定できるスマホヘッダーの表示パターンは3つあります。 【通常】:ヘッダーは固定されません 【固定】:常にページ上部にヘッダーが固定されます 【スクロール追尾】:下へスクロールするとヘッダーは消え、上へスクロールすると消えたヘッダーが現れます 表示パターンのイメージ 表示パターンの設定は「カスタマイズ」で行います。 この記事では、 スマホヘッダーの表示パターン設定 「ヘッダー背景が透過して見にくい ...

PCのヘッダー境界線に影をつける方法【CSS不要】

この記事では、 「PCのヘッダーとメニューの境目がわかりにくい」 「ヘッダーの境界線に影をつけられないかなぁ」 という悩みを解決します。 PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。 やることは ドロップシャドウの設定に適応IDを追加するだけです。 ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。 スマホのヘッダーにも影をつけた ...

挿入した画像をデフォルトでフルサイズ表示させる方法【WordPress】

そんな悩みを解決します。 結論からいうと、 「すべての設定」の中にある「image_dafault_size」という項目を「full」に変更すれば解決できます。 ただ、「すべての設定」は隠しページみたいなものなので、通常のダッシュボードのメニューには表示されていません。 この記事では、 「すべての設定」を表示させる方法 「image_dafault_size」を「full」に変更する手順 を解説していきます。 この設定を行えば、挿入した画像はすべてフルサイズ表示させることができますよ。 「すべての設定」を ...

サーチコンソール
サーチコンソールのHTMLタグを再確認する方法

ここでは、サーチコンソールのHTMLタグ(メタタグ)を再確認する手順を解説します。 AFFINGER6では、サーチコンソールのHTMLタグ(メタタグ)の一部を入力するだけで、サーチコンソールが使用できます。 必要なのは、以下に表記した部分だけです。 <meta name="google-site-verification" content="ここの部分のみ" /> HTMLタグ(メタタグ)は、「所有者の確認」から確認できます。 「HTMLタグの確認方法がわからない」 という方は参考にしてくださ ...

サイトのタイトルに影(テキストシャドウ)を追加する方法

という悩みを解決します。 サイトのタイトルに影をつけるには、テキストシャドウにヘッダーを指定する必要があります。 といっても難しいことはありません。30秒で終わります。 それでは、ヘッダーに表示するサイトタイトルに「影」を追加する方法について解説していきます。 ※サイトタイトルを大きくする方法もあります! 参考:サイトタイトルのサイズを大きくする方法|CSSコードを追加する サイトのタイトルに影を追加する方法 サイトタイトルの影の追加は、テーマ管理の全体設定で行います。 具体的には、テキストシャドウを反映 ...

サイトタイトルのサイズを大きくする方法|CSSコードを追加する

という悩みを解決します。 結論から言うと、普通の設定ではなくCSSコードを追加する必要があります。 「CSSをいじるのは怖いなぁ…」 という方でも大丈夫。 アフィンガーにはCSSを追加できる項目があるので、コードのコピペだけで簡単に完了しますよ(約一分)。 ※サイトタイトルに影をつける方法もあります。 参考:サイトのタイトルに影(テキストシャドウ)を追加する方法 サイトタイトルのサイズを大きくする手順 サイトタイトルのサイズを大きくする手順は以下の通り。 追加するCSSコードをコピーする カスタマイズの「 ...

AFFINGER6 サイドバーのサムネイル画像を大きくする方法

という悩みを解決します。 AFFINGER6には、サムネイル画像を大きくする設定があるので、そこを変更するだけでサムネイル画像は大きくなります。 イメージとしては以下のような感じです。 ただし、サムネイル画像を大きくすることによるデメリットもあります。 そこで今回は、サイドバーのサムネイル画像を大きくする設定と、それに伴うデメリットもあわせて解説します。 サイドバーのサムネイル画像を大きくする設定 サイドバーのサムネイル画像を大きくするための設定は「テーマ管理(AFFINGER 管理)」にて行います。 詳 ...

ドロップシャドウの「適応ID及びクラス」を個別に設定する方法

ドロップシャドウとは、文字や画像に対する視覚効果のひとつで、対象の輪郭の脇に影が落ちているような演出を行うことです。 簡単に言うと、影を演出することで浮いているように見せられる効果のことです。 AFFINGER6は、ドロップシャドウを追加したい装飾ブロックを、ピンポイントで設定することができます。 段落スタイルのボックスとAFFINGER専用のボックスにメリハリをつけたい! ドロップシャドウありとなしをうまく使い分けたい! AFFINGER6を使っている他の人と差別化したい! という方はぜひ参考にしてくだ ...

カスタムボタンに 影&ドロップシャドウ をつける方法

AFFINGER6のカスタムボタンには、「影」または「ドロップシャドウ」をつけることができます。 「影」と「ドロップシャドウ」はまったく別物。 簡単に説明すると、 「影」→ボタンが立体的に見える 「ドロップシャドウ」→ボタンが浮いて見える という違いがあります。 それではそれぞれの設定を解説していきます。 カスタムボタンに「影」をつける手順 カスタムボタンに影を追加するのは、ブロック編集の「レイアウト・デザイン設定」にて行います。 1.新しい段落に「/カスタムボタン」と入力し、カスタムボタンのブロックを挿 ...

もっと見る

PCのヘッダー境界線に影をつける方法【CSS不要】

この記事では、 「PCのヘッダーとメニューの境目がわかりにくい」 「ヘッダーの境界線に影をつけられないかなぁ」 という悩みを解決します。 PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。 やることは ドロップシャドウの設定に適応IDを追加するだけです。 ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。 スマホのヘッダーにも影をつけた ...

AFFINGER6で見出しに自動で番号を入れる方法(3パターン)【ブロックエディタ】

AFFINGER6には「自動カウント」という機能があります。 これは、見出しの頭に数字を打ち込まなくても「自動」で連続した番号を表示してくれるという、非常に便利な機能です。 自動カウントと一口に言っても、 見出しスタイル(ステップ・カウント) 連番(CT) この2つは使い方が異なります。 それぞれの使い方について、詳しく解説していきます。 見出しスタイルで自動カウントを使う 見出しスタイルとは、見出しのブロック設定にある12個のスタイルのことです。 この中の「ステップ」と「カウント」を使うことで、自動カウ ...

AFFINGER6の見出し自動カウント(ステップ番号)をリセットする方法

今回は、自動カウントのリセット方法について、詳しく解説します。 見出しに番号を表示させる方法は以下の3つ。 ステップ(見出しスタイル) カウント(見出しスタイル) 連番(CT) 自動カウントをリセットするためには、リセットコードを「追加 CSS クラス」に追加する必要があります。 「追加 CSS クラス」というとむずかしそうに聞こえますが、投稿編集ページで簡単にできるので安心してください。 それでは手順を詳しく解説していきます。 自動カウントの特徴 まずはじめに、自動カウントを知らない方のために、特徴を簡 ...

ドロップシャドウの「適応ID及びクラス」を個別に設定する方法

ドロップシャドウとは、文字や画像に対する視覚効果のひとつで、対象の輪郭の脇に影が落ちているような演出を行うことです。 簡単に言うと、影を演出することで浮いているように見せられる効果のことです。 AFFINGER6は、ドロップシャドウを追加したい装飾ブロックを、ピンポイントで設定することができます。 段落スタイルのボックスとAFFINGER専用のボックスにメリハリをつけたい! ドロップシャドウありとなしをうまく使い分けたい! AFFINGER6を使っている他の人と差別化したい! という方はぜひ参考にしてくだ ...

カスタムボタンに 影&ドロップシャドウ をつける方法

AFFINGER6のカスタムボタンには、「影」または「ドロップシャドウ」をつけることができます。 「影」と「ドロップシャドウ」はまったく別物。 簡単に説明すると、 「影」→ボタンが立体的に見える 「ドロップシャドウ」→ボタンが浮いて見える という違いがあります。 それではそれぞれの設定を解説していきます。 カスタムボタンに「影」をつける手順 カスタムボタンに影を追加するのは、ブロック編集の「レイアウト・デザイン設定」にて行います。 1.新しい段落に「/カスタムボタン」と入力し、カスタムボタンのブロックを挿 ...

ヘッダーカード
ヘッダーカードの設定方法と画像サイズを解説

今回は、ヘッダーカードを表示させるための設定とカスタマイズについて解説していきます。 ヘッダーカードとは、ヘッダーの下にある、画像にテキストが入っているカードタイプのリンクのことです。 ヘッダー下は、ユーザーの目に止まる可能性が高い場所。 ここに見てもらいたいカテゴリのページやタグのページへのリンクを表示させておくことで、回遊率を上げようという作戦です。 これも内部SEO対策のひとつですね。 そこで今回は、 ヘッダーカードを表示させるための設定(AFFINGER管理) ヘッダーカードの画像サイズについて ...

AFFINGER6で見出しのチェックマークを動かす方法

流し読みする読者の目を止める方法として、見出しのアイコンを動かす方法があります。 たとえば、 こんな動きもAFFINGER6なら可能です。 それでは具体的な手順を解説していきます。 見出しのアイコンを動かすには? 見出しのアイコンを動かすには、アニメーションの「CSS クラス」を追加する必要があります。 たとえば、チェックマークを震わせるには「ベル揺れ」のCSSクラス[st-ring-icon]を。 チェックマークを動かす アイコンを点滅させるには、「点滅」 のCSSクラス[st-flash-icon]。 ...

AFFINGER6でボックスの「アイコン」を動かす方法

「ボックスのアイコンを動かせたら目立つのにな~」 「どうしても読者に気づかせたい場所がある!」 という場合、AFFINGER6なら簡単にできます。 「追加CSSクラス」アニメーションコードを追加するだけOKです。 今回紹介する方法で、 メモボックス マイボックス 見出し付きボックス バナー風ボックス この4つのアイコンにアニメーションをかけることができます。 どのような手順を踏めばいいのか、詳しく解説していきます。 アイコンを動かすためのCSSクラス ボックスのアイコンを動かすためには、アニメーションのC ...

「ヘッダーを分割しない」を解除できるようにする方法【アフィンガーJET】

[st-kaiwa-2576]ヘッダーロゴを左に寄せて右側にメニューを表示させたい! なのに「ヘッダーを分割しない」が解除できないからできないよ~~~( ノД`)シクシク…[/st-kaiwa-2576] まずは結論から。 原因は、「ヘッダーを分割しない」を解除できないのは、アフィンガーの子テーマ「JET」の仕様だからです。 なので、「JET」の設定をちょちょいと弄れば、あっさり解除できます。 ちなみに設定変更の方法は 「JET」の管理画面から設定変更 スタイルシート(CSS)を書き換える この2パターン ...

もっと見る