アフィンガーのデザインを追求するサイト

サイトの見た目を格好よくしたいけど、どうやっていいかわからない… AFFINGER6のデザイン済みデータを使えば、誰でも簡単にプロ級のデザインを自分のサイトに取り入れることができます。 この記事では、初心者の方でも迷わずにできるデザイン済みデータの作成方法を解説していきます。 まずはここからスタートして、あなたのサイトをもっと魅力的に変身させましょう！ AFFINGER6のデザイン済みデータとは デザイン済みデータとは、AFFINGERユーザーが簡単にサイトの見た目を整えることができるよう設計された「完成 ...

この記事では「AFFINGER6（アフィンガー６）」に、デザイン済みデータを反映させるための手順を詳しく解説しています。 デザイン済みデータは、初心者でも容易に美しいデザインを反映できるアフィンガー専用データです。 このデータ設定は慣れれば簡単ですが、初回は操作に戸惑うことがあります。 そこで今回は、初心者向けにデザイン済みデータの適用手順を詳しく解説していきます。 AFFINGER6 のデザイン済みデータは全部で11種類 通常のAFFINGER6用 SIMPLE START Tidy2 MUKU clo ...

AFFINGER6には、「自動カウント」という機能があります。 これは、見出しの頭に数字を入力しなくても、自動で連続した番号を表示してくれるという、非常に便利な機能です。 自動カウントには大きく、 「見出しスタイル（ステップ・カウント）」を使った方法 「連番（CT）」を使った方法 の2種類があり、それぞれ使い方も見た目も異なります。 それぞれ詳しく解説していきます。 自動カウントの特徴 はじめに、自動カウントを知らない方のために、自動カウントの特徴を簡単に説明しておきます。 自動カウントには、以下の2つの ...

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

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

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

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

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

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

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

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

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

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

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

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

今回は、ブロックエディタで「見出し付きフリーボックスを使いこなす方法（初級編）」として解説していきます。 見出し付きフリーボックスとは、AFFINGER6の専用ブロックのひとつです。 ここでは、初心者の方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。 使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。 AFFINGER6専用「Gutebergプラグイン2」を必ず有効化してください。 見出し付きフリーボックスの装飾例 まずはじめに、見出し付きフリーボッ ...

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

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

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

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

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

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

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

AFFINGER6には「アニメーション」機能があります。 アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。 たとえば、 注意 ふきだしをバウンドさせたり・・・ 注目 まるもじのアイコンを横揺れさせたり・・・ ポイント ふきだしをふわふわさせつつアイコンをブルブルさせたり・・・ といったことが簡単にできます。 ブロックスタイルにアニメーションを追加する方法 今回アニメーションクラスを追加するのは、段落スタイルの「ふきだし」と「まるもじ」です。 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サイトの見た目を格好よくしたいけど、どうやっていいかわからない… AFFINGER6のデザイン済みデータを使えば、誰でも簡単にプロ級のデザインを自分のサイトに取り入れることができます。 この記事では、初心者の方でも迷わずにできるデザイン済みデータの作成方法を解説していきます。 まずはここからスタートして、あなたのサイトをもっと魅力的に変身させましょう！ AFFINGER6のデザイン済みデータとは デザイン済みデータとは、AFFINGERユーザーが簡単にサイトの見た目を整えることができるよう設計された「完成 ...

この記事では「AFFINGER6（アフィンガー６）」に、デザイン済みデータを反映させるための手順を詳しく解説しています。 デザイン済みデータは、初心者でも容易に美しいデザインを反映できるアフィンガー専用データです。 このデータ設定は慣れれば簡単ですが、初回は操作に戸惑うことがあります。 そこで今回は、初心者向けにデザイン済みデータの適用手順を詳しく解説していきます。 AFFINGER6 のデザイン済みデータは全部で11種類 通常のAFFINGER6用 SIMPLE START Tidy2 MUKU clo ...

AFFINGER6には、「自動カウント」という機能があります。 これは、見出しの頭に数字を入力しなくても、自動で連続した番号を表示してくれるという、非常に便利な機能です。 自動カウントには大きく、 「見出しスタイル（ステップ・カウント）」を使った方法 「連番（CT）」を使った方法 の2種類があり、それぞれ使い方も見た目も異なります。 それぞれ詳しく解説していきます。 自動カウントの特徴 はじめに、自動カウントを知らない方のために、自動カウントの特徴を簡単に説明しておきます。 自動カウントには、以下の2つの ...

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

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

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

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

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

「ボックスのアイコンを動かせたら目立つのにな～」 「どうしても読者に気づかせたい場所がある！」 という場合、AFFINGER6なら簡単にできます。 「追加CSSクラス」アニメーションコードを追加するだけOKです。 ここがポイント こんな感じで、目立たせたいところのアイコンを動かすことができます。 今回紹介する方法で、 メモボックスマイボックス見出し付きボックスバナー風ボックス この4つのアイコンにアニメーションをかけることができます。 これは「メモボックス」です ポイント これは「マイボックス」です 詳細 ...

という悩みを解決します。 まずは結論から。 原因は、「ヘッダーを分割しない」を解除できないのは、アフィンガーの子テーマ「JET」の仕様だからです。 なので、「JET」の設定をちょちょいと弄れば、あっさり解除できます。 ちなみに設定変更の方法は 「JET」の管理画面から設定変更 スタイルシート（CSS）を書き換える この２パターンあります。 今回は、２パターンとも試して影響が出るのか出ないのかも見てみたので、同じように悩んでいる人はぜひ参考にしてみてください。 「ヘッダーを分割しない」を解除する手順（通常） ...