KAZU

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

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

「ヘッダーエリア全体に画像を表示させたいのに、うまくいかない……」 「ヘッダー画像エリアにしか画像が表示されない……」 そんな悩みを解決します。 ヘッダーエリア全体に画像が表示されないのは、設定場所が間違っているからです。 一つひとつクリアしていき、ヘッダーエリア全体に画像が表示できるようにしていきましょう。 それでは詳しく解説していきます。 ヘッダー画像が表示されない原因設定場所が間違っている AFFINGERの設定項目がたくさんありすぎて、どこに画像を挿入すればいいのかわからない……という気持ちもわか ...

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

GIFアニメを作って記事に挿入したのはいいけど・・・なぜか動かない… アップロード中は動いているけど、アップロードが完了すると・・・動かない… プレビューで確認しても・・・動いていない… ・・・というGIF動かない問題に困っていませんか？ ぼくもこの問題に直面しました。 他に所有しているサイトでは普通に動いているのに、なぜこのサイトでは動かないんだ・・・と。 AFFINGERがおかしいのか？・・・とまで思いました。 結論からいうと、GIFアニメが動かないのは、ただの「画像サイズ」の問題です。 それでは詳し ...

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

【追記】PS Auto Sitemapは、WordPress公式ディレクトリでの配布が終了しており、現在はプラグイン検索から新規インストールできません。これからHTMLサイトマップを作る場合は、公式ディレクトリで配布中の「WP Sitemap Page」などの代替プラグインを検討してください。以下の手順は、すでにPS Auto Sitemapを導入済みの方向けの参考として残しています。 この記事では、WordPressのプラグイン「PS Auto Sitemap」を使ってサイトマップを作成する方法について ...

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

ここでは、ヘッダー横メニュー「正式名称は、ヘッダーメニュー（横列）」にサブタイトルを表示させる方法について解説していきます。 「サブタイトル」＝ AFFINGERでは「タイトル属性」と呼びます。 イメージはこんな感じ。 サブタイトルなし ▼ サブタイトルあり 必要なのは、 タイトル属性の項目を表示させるタイトル属性にサブタイトルを入力する この2つだけ。 それでは手順を解説していきます。 タイトル属性の項目を表示させる メニューの右にある▼をクリックし「追加設定オプション」を表示させたときに「タイトル属性 ...

ここでは、ヘッダーエリア全体を画像にする方法を解説していきます。 ヘッダーエリア全体に画像を反映させると、トップページのヘッダーはこんな感じになります。 完成イメージ ヘッダーエリア各メニュー ヘッダー全体を画像にするためには、「カスタマイズ」にて以下メニューの設定が必要です。 ロゴ画像 / サイトのタイトル ヘッダー画像 基本エリア設定 PCヘッダーメニュー それでは一つひとつ手順を解説していきます。 ロゴ画像/サイトのタイトル メニュー ここでは、ロゴ（サイトタイトル）とキャッチフレーズの色を変更しま ...