KAZU

2017年からAFFINGERを使い続け、複数の有料テーマも試してきたサイト運営者。

THE AFFINGERでは、AFFINGERのデザイン、表示設定、カスタマイズを中心に、実際の運営で使える情報を発信。

裏側ではAIと融合した運営にも取り組み、AIエージェントを使った検証・改善・サイト制作の自動化も進めている。

WordPressでアップロードしたGIFアニメが動かない時の解決法

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

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

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

PS Auto Sitemapの使い方|サイトマップ作成手順(ブロックエディタ)

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

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

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

ヘッダー横メニューに「サブタイトル」を表示させる方法

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

ヘッダーエリア全体に画像を設定する方法

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

WEBアイコン

【AFFINGER6】ヘッダーメニューにWEBアイコンを使うための方法を2つ解説

「あれ? アフィンガー6に変えてから、ヘッダーメニューに表示させていたWEBアイコンが消えてる……」 「え、なんで? どうすればいいの?」 という悩みに答えます。 実際に僕もこの問題に直面してけっこう悩みました。 一応「ACTION(AFFINGER6)」のマニュアルにはFont Awesomeについて書いてあるんですが、それでも「え、どういうこと?」ってなったからです。 そこで解決策を調べまくりました。 ヘッダーメニューにWEBアイコンを表示させる方法は2つあります。 アフィンガー管理メニューの設定を変 ...

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

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

AFFINGER6で重大なエラー(ログイン不可)の直し方|Xserverでテーマ削除して復旧

先日、ワードプレスの人気テーマ「AFFINGER6」を有効化したときに、重大なエラーが発生しました。 ワードプレスのダッシュボードにもログインできない状態。 そもそもログイン画面すら表示されない。。。 ・・・これはヤバイ! ということでいろいろ調べた結果、テーマのファイルに問題がある可能性が高いことが判明。 さっそくAFFINGER6本体と子テーマJET のテーマファイルを削除しました。 結論からいうと、ファイルを削除の手順さえわかれば簡単に元通りにできます。 今回は、「エックスサーバー」のファイルマネー ...

アフィンガーをアップデートしたら重大なエラーが発生!?消えたサイトを元に戻す方法

アフィンガー6をさっそくアップデートしたら、こんな表示が出てきました。 状態としては、 サイトが表示されない WPのダッシュボードにログインできない(そもそもログイン画面にすらならない) という絶望的な状態です。 で、「WordPress でのデバックをさらに詳しく見る。」を見てみるも、意味が解らない。。。 結論からいうと、 アップデートしたテーマのファイルを削除することで、サイトは復活しました。 今回やってみて思ったことは、問題を起こしているファイルを削除できるようになることは、サイトを運営するうえで大 ...