AFFINGERカスタマイズ

Contact Form 7をおしゃれにカスタマイズするCSS集

WordPressでお問い合わせフォームを作るなら、定番プラグインの Contact Form 7 を使う人が多いと思います。ただ、そのまま設置すると「なんだか味気ない…」という印象になりがち。。。私自身も最初はデフォルトのまま使っていましたが、少しCSSを追加するだけで見た目が一気に変わることを実感しました。この記事では、Contact Form 7をシンプルでおしゃれに見せるカスタマイズ方法をまとめて紹介します。 AFFINGERを使っている方も、そうでない方もすぐに試せる内容になっていますの ...

PCヘッダー横列メニューの文字色が変わらない時の解決方法｜AFFINGER6

AFFINGER6はカスタマイズ項目が豊富ですが、その分「設定しても反映されない」というケースも少なくありません。特にPCヘッダーの横列メニュー文字色は、設定場所を間違えると全く変わらず、「あれ？反映されない…」と悩む人が多いポイントです。この記事では、実際に検証して分かった正しい設定箇所と、CSSで強制変更する方法を紹介します。よくある勘違い PCヘッダーの横列メニュー文字色は、次のような設定では反映されません。「スマホミドル/横列」で色を変えてもPC表示には反映されない「PCヘッダーメニュ ...

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

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

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

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

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

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

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

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

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

今回は、Font Awesome（Version6）のWebアイコンをAFFINGER6で使うためのコード取得方法について解説します。「Font Awesome 6」のWebアイコンを使う方法は3つあります。 CDNコードを使うKitコードを使うサーバーにアイコンデータをアップロードする CDNとは CDNは「Content Delivery Network」の略で、同じコンテンツをユーザーの端末に効率的に配布するために使われる仕組みです。つまり、専用のサーバー上にある画像やフォントなどのデータを読み ...

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

ここでは、FontAwesomeの登録方法として「アカウント作成の手順」を紹介します。 FontAwesomeの「Kit'sコード」を使用するには、アカウント登録が必須です。 Kit'sコードとは自サイトのサーバーにアップロードすることなく、JavaScript配信でWebアイコンを表示させるためのコードです。アカウント登録に必要なのは、登録用のメールアドレスとパスワードだけ。個人情報などを登録する必要はないので安心してください。それでは詳しく解説していきます。 FontAwesomeのアカウント ...

Font AwesomeのWebアイコンが表示されない時の対処法

という疑問に答えます。結論からいうと、Font Awesomeのバージョンが古いことが原因です。対策としては、「Kit'sコード」を使用している場合「CDNコード」を使用している場合それぞれやり方が異なります。それぞれ詳しく解説していきます。「Kit'sコード」を使用している場合まずは、「Kit'sコード」を使用していて、特定のWebアイコンが表示されないときの対策を解説します。「Kit'sコード」は、「script」で挟む以下のようなコードです。 Kit'sコード冒頭でも書いたように、 ...

Webアイコンを文章中に表示させる方法｜色やサイズ変更も簡単！

という方のために、簡単な方法をご紹介します。やり方としては、 HTMLとして編集するショートコードを使用するこの2パターンあるんですが、今回は「ショートコードを使用する方法」をおすすめします。なぜなら、HTMLとして編集するよりもショートコードを使用するほうが簡単だからです。コードエディタで記事を執筆している方は例外です。それではショートコードを使ったWebアイコンの表示方法について詳しく解説していきます。 Webアイコンを好きな場所に表示させる方法冒頭でも書いたように、AFFINGER6では ...

1 2 Next »