【AFFINGER6 デメリットまとめ】ダメなところ全部正直に答えます!

「AFFINGER(アフィンガー)が気になってるんだけど、デメリットを知った上で購入するかどうかを決めたい」 という方のために、AFFINGERのデメリットをまとめました。 今回は、一般的にデメリットと言われているところと、AFFINGERを5年以上使っているからこそわかる「ダメポイント」を正直に書いていきます。 ちなみにAFFINGER6を含めて6つの有料テーマを持っているので、他テーマとの比較も少し入れています。 はじめて有料テーマを買おうと思っている方の参考になれば嬉しいです。 この記事を書いた専門 ...

WordPress
【初心者向け】デザインがおしゃれで使いやすいWordPress有料テーマ3選

「ブログ初心者でも使いやすい、デザインがおしゃれなテーマってどれですか?」 「WEBデザインが苦手な私でもおしゃれなブログが作れるテーマを教えてください」 こんな質問に答えます。 今回は、「もし俺が、自分の親しい人に薦めるならこれや!」というテーマを3つピックアップしました。 あえて3つにした理由は、5個も10個も紹介すると、結局迷って決めきれなくなってしまうからです。 ブログに最適なテーマであること 初心者でも扱いやすい操作性 信頼できる開発者であること これらを軸に、デザインがおしゃれで使いやすいWo ...

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

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

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

この投稿はパスワードで保護されているため抜粋文はありません。

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をコピーしてください。 /*スマホヘッダー ...

スマホ検索メニュー
スマホ検索メニューの設定|広告やタグを表示させる方法

今回は、スマホ検索メニューの設定について解説していきます。 スマホ検索メニューとは、スマホサイトのヘッダーに表示させた虫眼鏡アイコンをクリックすると出現するメニューのことです。 スマホ検索メニューは、 オーバーレイ スライド この2種類が選択できます 検索メニューの中には、 検索フォーム タグ(キーワード) メニュー(カテゴリー) 広告 などなど、自由にコンテンツを挿入できます。 それでは、スマホ検索メニューの設定方法から、スマホ検索メニューに広告やタグを表示させる方法までの手順を解説していきます。 スラ ...

【Font Awesome 6】WebアイコンをAFFINGER6で使うためのコード取得方法

今回は、Font Awesome(Version6)のWebアイコンをAFFINGER6で使うためのコード取得方法について解説します。 「Font Awesome 6」のWebアイコンを使う方法は3つあります。 CDNコードを使う Kitコードを使う サーバーにアイコンデータをアップロードする 3の「サーバーにアイコンデータをアップロードする方法」は現実的ではないので除外します。 FontAwesomeに新しいアイコンが追加されるたびにダウンロードし直す必要があるし、自分のサーバーへの負荷もかかるからです ...

【最新】FontAwesomeの登録方法|アカウント作成の手順を解説

ここでは、FontAwesomeの登録方法として「アカウント作成の手順」を紹介します。 FontAwesomeの「Kit'sコード」を使用するには、アカウント登録が必須です。 アカウント登録に必要なのは、登録用のメールアドレスとパスワードだけ。 個人情報などを登録する必要はないので安心してください。 それでは詳しく解説していきます。 FontAwesomeのアカウント作成手順 メールアドレスを登録する 1.まずは FontAwesome のトップページを開きます。 → https://fontawesom ...

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で ...

100%目立つ!WEBアイコンやふきだしを動かす方法

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.新しい段落に「/カスタムボタン」と入力し、カスタムボタンのブロックを挿 ...

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

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

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

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

ヘッダー画像エリアにYouTube動画を流す方法~AFFINGER6

「トップページのヘッダーエリアにYouTube動画を流すにはどうやればいいの?」 という疑問に答えます。 AFFINGER6のヘッダー画像エリアとは、この部分のことです。 もしくは、ヘッダーエリア~ヘッダー画像エリアまでの範囲に動画を流すこともできます。 こんな感じで! やることは、大きく以下の3つです。 ヘッダーに流すYouTubeのURLを用意する AFFINGER管理での設定 カスタマイズでの設定 今回は、ヘッダー画像エリアのみにYouTube動画を流すための手順を詳しく解説していきます。 ヘッダー ...

AFFINGER6でヘッダーメニュー(横列)を表示させる方法

ここでは、ヘッダーの右上にある「ヘッダーメニュー(横列)」を表示させるための手順を解説します。 「ヘッダーメニュー(横列)」とは、ヘッダーの右サイドにあるメニューのことです。 ここにメニューを表示させるには、 ヘッダー横に表示するメニューを作成する AFFINGER管理設定でヘッダーメニュー(横列)を有効化する カスタマイズにて色を設定する この3つが必要です。 それぞれの手順を詳しく解説していきます。 ヘッダー横に表示するメニューを作成する まずはじめに、ヘッダー横に表示するメニューを作成します。 1. ...

ヘッダー 横メニューにWEBアイコンを表示させる方法

ここでは、ヘッダー 横メニュー「ヘッダーメニュー(横列)」にWEBアイコンを表示させる方法を解説します。 WEBアイコンを表示させためた例 ヘッダー横メニューにWEBアイコンを表示させるには、「Font Awesome」のWEBアイコンを使用します。 そのための準備として、 「FontAwesome」のアカウント登録 使用するためのコードをheadに貼り付ける この2つを終えていないと「Font Awesome」を使用することができません。 ※WEBアイコンを使えるようにする手順は、以下の記事を参考にして ...

もっと見る

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パターン ...

もっと見る