設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AFFINGER5でデザイン済みデータを反映させる手順を解説

この記事では、ワードプレスのテーマ「AFFINGER5（アフィンガー５）」に、デザイン済みデータを反映させるための手順を詳しく解説しています。デザイン済みデータとは、完成された素敵なデザインを初心者でも簡単に反映できる「アフィンガー専用のデータ」のこと。デザイン済みデータの設定は慣れれば簡単なんですけど、はじめてだとつまづくこともあると思います。そこで今回は、はじめてでもわかるように、デザイン済みデータを反映させるための手順を詳しく解説していきます。 AFFINGER5 のデザイン済みデータは全部で ...

« Prev 1 2