MENU
カテゴリー

AFFINGER6「記事まわり」のカスタマイズ方法

AFFINGER6のトップページカスタマイズ方法も合わせて見ていただく、よりわかりやすいです。

目次

AFFINGER6の「記事」の設定

アイキャッチを記事上部に表示する

記事上部にアイキャッチを表示させる前
記事上部にアイキャッチを表示させた後
アイキャッチ画像を記事に表示させる手順1と2。詳細は吹き出しボックスに記載
アイキャッチ画像を記事に表示させる手順3。詳細は吹き出しボックスに記載
アイキャッチ画像を記事に表示させる手順4。詳細は吹き出しボックスに記載
アイキャッチ画像を記事に表示させる手順5。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「投稿・固定記事」をクリック
  3. 「アイキャッチ設定」をクリック
  4. 「アイキャッチ画像の表示を全ての記事で有効化する(デフォルトは上部)」にチェック
  5. 「Save」をクリック
アイキャッチ画像サイズの決め方

以下のような理由から「横1200px×縦630px」を推奨されていることが多いです。

  • Google Discoverで推奨されている
  • AMPで推奨されている
  • SNSで共有されたとき画像が切れない

上記の理由はさておき、僕もこのサイズが無難だと思うので、アイキャッチ画像サイズは1200×630で作っています。

Google Discover の補足

Google Discover は、Googleアプリを起動したときに、使用者が興味を持つであろうコンテンツを自動的に表示するGoogleの機能の一つになります。これに記事が掲載されると一時的に爆発的なアクセスがくることから「Google砲」と呼ばれていたりもします。

AFFINGER6のアイキャッチ画像を作る上でのポイント

アイキャッチ画像の文字範囲の説明1
アイキャッチ画像の文字範囲の説明2

AFFINGER6はデフォルト設定だとトップページの記事一覧のサムネイル(アイキャッチに設定した画像)が正方形になります。

ですので文字などを入れる場合は、画像の中心の正方形に入るように作ったほうが見栄えは良くなります。

よければ以下のサンプル画像を右クリックで保存して下書きにでも使ってください。

記事タイトルの色を変更する

記事タイトル色を変更する前
記事タイトル色を変更した後
記事タイトル色を変更する手順1。詳細は吹き出しボックスに記載
記事タイトル色を変更する手順2。詳細は吹き出しボックスに記載
記事タイトル色を変更する手順3。詳細は吹き出しボックスに記載
記事タイトル色を変更する手順4と5。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「見出しタグ(hx)テキスト」をクリック
  3. 「記事タイトル」をクリック
  4. 「文字色」を「#606060」に変更
  5. 「公開」をクリック

記事本文の文字色を変更する

記事タイトル色を変更する前
記事タイトル色を変更した後
記事本文の文字色を変更する手順1。詳細は吹き出しボックスに記載
記事タイトル色を変更する手順2。詳細は吹き出しボックスに記載
記事タイトル色を変更する手順3。詳細は吹き出しボックスに記載
記事タイトル色を変更する手順4と5。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「見出しタグ(hx)テキスト」をクリック
  3. 「テキスト色一括変更」をクリック
  4. 一番上の「色選択」をお好きな色に変更
  5. 「公開」をクリック

記事の見出し2~5のデザイン設定

記事中の見出しデザインの変更前
記事中の見出しデザインの変更後
記事の見出し2~5をカスタマイズする手順1。詳細は吹き出しボックスに記載
記事の見出し2~5をカスタマイズする手順2。詳細は吹き出しボックスに記載
記事の見出し2~5をカスタマイズする手順3。詳細は吹き出しボックスに記載
記事の見出し2~5をカスタマイズする手順4から7。詳細は吹き出しボックスに記載
記事の見出し2~5をカスタマイズする手順8と9。詳細は吹き出しボックスに記載
記事の見出し2~5をカスタマイズする手順10。詳細は吹き出しボックスに記載
記事の見出し2~5をカスタマイズする手順11。詳細は吹き出しボックスに記載
記事の見出し2~5をカスタマイズする手順12。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「見出しタグ(hx)/テキスト」をクリック
  3. 「H2タグ」をクリック
  4. 「文字色」を「#817f82」に変更
  5. 「背景色」を「#e0dbe0」に変更
  6. 「ボーダー色」を「#e0dbe0」に変更
  7. 「ボーダーを上下のみにするの」チェックを外す
  8. 「h2タグの基本スタイル」で「なし」を選択
  9. 「デザインを幅一杯に」にチェック
  10. 「公開」をクリック
  11. 一つ前に戻る
  12. h3~h5を同じように設定
サンプルブログのh3の設定
  • 「文字色」→「#828596」に変更
  • 「ボーダー色」→「#a8aec0」に変更
  • 「ボーダー色(サブ)」→「#e0dbe0」に変更
  • 「h3タグの基本スタイル」→「グラデーションアンダーラインに変更(※要ボーダー色)」を選択
  • 「背景や吹き出しの角を丸くする」のチェックを外す
サンプルブログのh4の設定
  • 「文字色」→「#828596」に変更
  • 「ボーダー色」→「#a8aec0」に変更
  • 「左ボーダーを付ける」にチェック
  • 「ボーダーの太さ(px)」を「3」に変更
サンプルブログのh5の設定
  • 「文字色」→「#717282」に変更
  • 「背景色」→「#ffffff」に変更

記事上部にライター紹介を掲載する

記事上部にライター紹介を表示させる前
記事上部にライター紹介を表示させた後
記事上部にライター紹介を表示する手順1と2。詳細は吹き出しボックスに記載
記事上部にライター紹介を表示する手順3。詳細は吹き出しボックスに記載
記事上部にライター紹介を表示する手順4。詳細は吹き出しボックスに記載
記事上部にライター紹介を表示する手順5。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「投稿・固定記事」をクリック
  3. 「この記事を書いた人」をクリック
  4. 「記事上にライター情報を表示する」にチェック
  5. 「Save」をクリック

なおここで表示するライターは、記事投稿画面の投稿者で切り替えることができます。

切り替える場合はあらかじめユーザーメニューにて別ユーザーを作っておく必要があります。

記事の背景に影をつける

記事コンテンツに影をつけた後
記事コンテンツに影をつける前
記事コンテンツに影をつける手順1。詳細は吹き出しボックスに記載
記事コンテンツに影をつける手順2。詳細は吹き出しボックスに記載
記事コンテンツに影をつける手順3。詳細は吹き出しボックスに記載
記事コンテンツに影をつける手順4と5。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「基本エリア設定」をクリック
  3. 「mainエリア(記事)」をクリック
  4. 「シャドウを適応する(959px以上のみLPワイドを除く)」にチェック
  5. 「公開」をクリック

AFFINGER6の「目次」の設定

目次の設定と解説

目次設定の説明1。詳細は吹き出しボックスに記載
  1. 「目次」をクリック

目次がメニューに表示されていない場合、「SUGOI MOKUJI(すごいもくじ)LITE」プラグインが有効になっているか確認してください。

目次には以下の項目が用意されているので、上から順にしゅしゅっと説明していきます。

  • 位置
  • 表示条件
  • 以下の投稿タイプに自動挿入
  • 見出しテキスト
  • 階層表示
  • スムーズ・スクロール
  • フォントサイズ
  • JS
  • 見出しレベル

なお、フォントサイズは説明しなくてもわかるのと、JSは説明してもよくわからない部分だと思うので省いてます。

位置

目次設定の説明3。詳細は吹き出しボックスに記載

目次設定の説明4。詳細は吹き出しボックスに記載

目次設定の説明2。詳細は吹き出しボックスに記載

目次設定の説明5。詳細は吹き出しボックスに記載

目次を表示する位置です。

  1. 最初の見出しの前
  2. 最初の見出しの後
  3. 上(記事の冒頭)
    「記事上にライター情報を表示する」設定をしていた場合、ライター情報の下に表示
  4. 下(記事の末尾)

表示条件

目次設定の説明6。詳細は吹き出しボックスに記載
目次設定の説明7。詳細は吹き出しボックスに記載
  1. 「2つ」以上の見出しがあるときにした場合
  2. 「4つ」以上の見出しがあるときにした場合

見出し2つで目次を表示してもしゃーないので、4つ以上を条件にすると良きでしょう。

ちなみに記事中に、見出し2・見出し3・見出し4を記入した場合、3つの見出しとしてカウントされます。

以下の投稿タイプに自動挿入

目次設定の説明8。詳細は吹き出しボックスに記載
目次設定の説明9。詳細は吹き出しボックスに記載
目次設定の説明10。詳細は吹き出しボックスに記載
  • post=固定ページ
  • page=投稿記事

pageのみにチェックをいれれば、投稿だけに自動で目次が挿入されます。

見出しテキストの目次の上にタイトルを表示

目次設定の説明11。詳細は吹き出しボックスに記載

「目次の上にタイトルを表示」は、目次に「目次」というテキストを表示させるかしないかの設定です。

見出しテキストのタイトル

目次設定の説明13。詳細は吹き出しボックスに記載

見出しテキストのタイトルは、目次という文字を別の文字にしたいとき使う項目です。

見出しタイトルのユーザーによる目次の表示・非表示を切り替えを許可

目次設定の説明12。詳細は吹き出しボックスに記載

「ユーザーによる目次の表示・非表示を切り替えを許可」は、読者が目次の開閉を選択できるように「する・しない」を選べるようにする設定になります。

ですが、AFFINGER6では読者が目次を開いたさい「閉じる」ボタンが表示されないようになっています。もし表示させたい場合は、こちらのCSSを追加してください。

見出しタイトルの最初は目次を非表示

目次設定の説明15。詳細は吹き出しボックスに記載
目次設定の説明14。詳細は吹き出しボックスに記載

「最初は目次を非表示」は、目次が表示されたさい目次を開いておくか、閉じておくかということです。

含めるか

という設定

非表示にしたからといって、目次が表示されなくなるわけではありません。

目次を非表示にするには「以下の投稿タイプに自動挿入」の「post」と「page」のチェックを外します。

階層表示

目次設定の説明16。詳細は吹き出しボックスに記載
目次設定の説明17。詳細は吹き出しボックスに記載

目次を入れ子構造で表示するかしないかの設定になります。

スムーズ・スクロール

スムーズ・スクロールにチェックなし
スムーズ・スクロールにチェックあり

目次の見出しをクリックしたさいに、滑るように見出しの先にとんでいくようにする設定になります。チェックをいれないと画面が切り替わるようにリンク先に移動します。

見出しレベル

目次設定の説明22。詳細は吹き出しボックスに記載
目次設定の説明23。詳細は吹き出しボックスに記載
目次設定の説明24。詳細は吹き出しボックスに記載

どの見出しを目次に含めるかの設定です。

例えば記事中に見出し2~5を使っていた場合に、以下のように設定したとすると、画像のように表示がされます。

  • 見出し2,3にチェック
  • 見出し2,3,4にチェック
  • 見出し2,3,4,5にチェック

なおサンプルブログでは「h2」と「h3」にチェックを入れています。

目次のデザインを設定

すごい目次のデザイン変更前
すごい目次のデザイン変更後
すごいもくじのカスタマイズ手順1。詳細は吹き出しボックスに記載
すごいもくじのカスタマイズ手順2。詳細は吹き出しボックスに記載
すごいもくじのカスタマイズ手順3。詳細は吹き出しボックスに記載
すごいもくじのカスタマイズ手順4から11。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「目次プラグイン(すごいもくじ)」をクリック
  4. 「目次色」を「#787a84」に変更
  5. 「目次タイトル下の下線」を「#ededed」に変更
  6. 「第1リンク文字色」を「#787a84」に変更
  7. 「第2リンク以降の文字色」を「#6e6e72」に変更
  8. 「ボーダー色」を「#f4f4f4」に変更
  9. 「ボーダーの太さ」を「8」に変更
  10. 「背景色」を「#fcfcfc」に変更
  11. 「公開」をクリック

目次を記事の途中に挿入する

  1. 投稿画面で「/目次」と入力
  2. 「STINGER:目次」を選択
  3. 目次が挿入される
挿入した目次が表示されない場合

上記画像のように、「表示条件を2つ以上見出しがあるとき」に設定していた場合、見出しが4つあれば表示がされます。

ですが、目次ブロックで挿入した場合、挿入位置より下の見出ししかカウントされないため、表示位置によっては目次が表示されません。

文字だとわかりづらいので次の画像をごらんください。

目次ブロックを挿入した位置より下に見出しが1つだけしかない状態

上記画像だと目次を挿入した位置の下に、見出しが1つしかありません。これだと見出しが1とカウントがされてしまうため、目次は表示されません。

次の画像は目次を挿入した位置の下に見出しが2つあるため、2とカウントされ目次が表示されます。

目次ブロックを挿入した位置より下に見出しが2つ以上ある状態

目次が表示されないときは、こういった状況になっていないか確認してみてください。

背景色・文字色の設定

関連記事の背景色と文字色を変更する前
関連記事の背景色と文字色を変更した後
関連記事の背景色と文字色を変更する手順1。詳細は吹き出しボックスに記載
関連記事の背景色と文字色を変更する手順2。詳細は吹き出しボックスに記載
関連記事の背景色と文字色を変更する手順3。詳細は吹き出しボックスに記載
関連記事の背景色と文字色を変更する手順4から6。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「見出しタグ(hx)/ テキスト」をクリック
  3. 「NEW ENTRY & 関連記事」をクリック
  4. 「背景色」を「#F6F2F4」に変更
  5. 「文字色」を「#8B8F9F」に変更
  6. 「公開」をクリック

テキスト・表示数・非表示の設定

関連記事の表示数を変更する前
関連記事の表示数を変更した後
関連記事の表示設定を変更する手順1と2。詳細は吹き出しボックスに記載
関連記事の表示設定を変更する手順3。詳細は吹き出しボックスに記載
関連記事の表示設定を変更する手順4と5。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「投稿・固定記事」をクリック
  3. 「関連記事一覧」をクリック
  4. 希望する設定に変更する
  5. 「Save」をクリック

人気記事を作成する

人気記事を作成する前
人気記事を作成した後
人気記事を作成する手順1。詳細は吹き出しボックスに記載
人気記事を作成する手順2。詳細は吹き出しボックスに記載
人気記事を作成する手順3。詳細は吹き出しボックスに記載
人気記事を作成する手順4。詳細は吹き出しボックスに記載
人気記事を作成する手順5。詳細は吹き出しボックスに記載
  1. 「投稿」をクリック
  2. 人気記事に表示したい記事の「ID」を確認
  3. 「AFFINGER管理」をクリック
  4. 「ヘッダー下/おすすめ」をクリック
  5. 「おすすめ記事一覧」をクリック
  6. 「タイトル」を記入
  7. 「記事ID」を記入
  8. 「表示させたい位置」にチェック
  9. 「Save」をクリック
人気記事を好きな位置に表示する前
人気記事を好きな位置に表示した後
人気記事を好きな位置に表示する手順1。詳細は吹き出しボックスに記載
人気記事を好きな位置に表示する手順2。詳細は吹き出しボックスに記載
人気記事を好きな位置に表示する手順3。詳細は吹き出しボックスに記載

以下のショートコードを表示したい位置に挿入するだけでオッケーです。

[st-osusume]

例えばウィジェットでサイドバーに表示するなら以下のような手順になります。

  1. 「外観」にカーソルをのせ「ウィジェット」を選択
  2. 「00_STINGERカスタムHTML」を「サイドバーウィジェット」に挿入
    ここではプロフィールの下に人気記事を表示するよう設定
  3. 「内容」に [st-osusume] を入力
  4. 「保存」をクリック
人気記事のカラー設定をする前
人気記事のカラー設定をした後
人気記事のカラー設定手順1。詳細は吹き出しボックスに記載
人気記事のカラー設定手順2。詳細は吹き出しボックスに記載
人気記事のカラー設定手順3。詳細は吹き出しボックスに記載
人気記事のカラー設定手順4。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「おすすめ記事」をクリック
  4. 「お好みのデザイン」に設定する
  5. 「公開」をクリック
サンプルブログでは以下のように設定

見出し背景色→#9dc6be
コンテンツ背景色→#ffffff
ナンバー(view)背景色→#9dc6be

AFFINGER6の「ランキング」の設定

ランキングを複数作成する

ランキングの表示サンプル2
ランキングの表示サンプル1

AFFINGER6ではランキング管理からランキングが作れるようになっています。

ただその方法だと1つしか作れないので、ここでは複数作れる方法を紹介します。

アフィリエイトの「画像広告タグ」と「テキスト広告タグ」を入力する箇所があるので、タグがあれば事前に準備しておいてください。

まだ広告タグなどの意味がわからなければ、代用URLを準備しておいたので、このまま進んでいただいて大丈夫です。

ランキングを複数作成する手順1。詳細は吹き出しボックスに記載
ランキングを複数作成する手順2。詳細は吹き出しボックスに記載
ランキングを複数作成する手順3。詳細は吹き出しボックスに記載
ランキングを複数作成する手順4。詳細は吹き出しボックスに記載
ランキングを複数作成する手順5。詳細は吹き出しボックスに記載
  1. 「マイブロック」にカーソルをのせ「新規追加」をクリック
  2. 「/」を入力
  3. 「カスタムHTML」を選択
  4. 「カスタムHTML」に以下の「HTML」を貼り付け
<div class="rankst-wrap">
    <h3 class="rankh3"><span class="rankh3-in">■ここにタイトルを書く</span></h3>
    <div class="rank-guide">
        <p>■ここにタイトル下の説明を書く(なければ削除)</p>
        <p>?</p>
    </div>
    <div class="rankid1">
        <div class="rankid1">
            <div class="rankst-box post">
                <h4 class="rankh4">■1位のタイトルをここに記入<br />
                [star5]<!-- ■←[star5]の数値を変更 -->
                </h4>
                <div class="clearfix rankst">
                    <div class="rankst-l"> 
			■ここにランキング1位の「画像広告タグ」を貼る
                    </div>
                    <div class="rankst-r">
                        <div class="rankst-cont">
                            <p>■ここにランキング1位の画像「右側」の説明文章を書く</p>
                        </div>
                    </div>
                </div>
                <div class="rankst-contb">
                    <p>■ここにランキング1の画像「下側」の説明文を書く(なければ削除)</p>
                    <p>?</p>
                </div>
                <div class="clearfix rankst">
                    <div class="rankstlink-l">
                        <p><a href="■ここに詳細ページのURLを貼る">詳細ページへ</a></p>
                    </div>
                    <div class="rankstlink-r">
                        <p>■ここに「テキスト広告タグ」を貼る</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="rankid2">
        <div class="rankid2">
            <div class="rankst-box post">
                <h4 class="rankh4">■2位のタイトルをここに記入<br />
                [star5]<!-- ■←[star5]の数値を変更 -->
                </h4>
                <div class="clearfix rankst">
                    <div class="rankst-l"> 
			■ここにランキング2位の「画像広告タグ」を貼る
                    </div>
                    <div class="rankst-r">
                        <div class="rankst-cont">
                            <p>■ここにランキング2位の画像「右側」の説明文章を書く</p>
                        </div>
                    </div>
                </div>
                <div class="rankst-contb">
                    <p>■ここにランキング2の画像「下側」の説明文を書く(なければ削除)</p>
                    <p>?</p>
                </div>
                <div class="clearfix rankst">
                    <div class="rankstlink-l">
                        <p><a href="■ここに詳細ページのURLを貼る">詳細ページへ</a></p>
                    </div>
                    <div class="rankstlink-r">
                        <p>■ここに「テキスト広告タグ」を貼る</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="rankid3">
        <div class="rankid3">
            <div class="rankst-box post">
                <h4 class="rankh4">■3位のタイトルをここに記入<br />
                [star5]<!-- ■←[star5]の数値を変更 -->
                </h4>
                <div class="clearfix rankst">
                    <div class="rankst-l"> 
			■ここにランキング3位の「画像広告タグ」を貼る
                    </div>
                    <div class="rankst-r">
                        <div class="rankst-cont">
                            <p>■ここにランキング3位の画像「右側」の説明文章を書く</p>
                        </div>
                    </div>
                </div>
                <div class="rankst-contb">
                    <p>■ここにランキング3の画像「下側」の説明文を書く(なければ削除)</p>
                    <p>?</p>
                </div>
                <div class="clearfix rankst">
                    <div class="rankstlink-l">
                        <p><a href="■ここに詳細ページのURLを貼る">詳細ページへ</a></p>
                    </div>
                    <div class="rankstlink-r">
                        <p>■ここに「テキスト広告タグ」を貼る</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  1. 「タイトル」にランキング名を入力
  2. 「公開」をクリック

これでランキングができましたが、中身がまだないので次で設定していきます。

ランキングの内容を設定する

ランキングの内容変更はHTMLを編集しますが、HTMLがわからなくても特定の項目を変更するだけなので大丈夫です。

貼り付けたHTMLをランキングに当てはめると次の画像のように対応しています。

ランキングの内容を設定する手順1
ランキングの内容を設定する手順2

試しに以下のような内容に変更してみると画像のようになります。

スクロールできます
■ここにタイトルを書くガス一括見積もりランキング
■ここにタイトル下の説明を書く(なければ削除)タイトル下の説明文タイトル下の説明文タイトル下の説明文。タイトル下の説明文タイトル下の説明文タイトル下の説明文タイトル下の説明文タイトル下の説明文。
■1位のタイトルをここに記入エネピ
■←[star5]の数値を変更[star5]
■ここにランキング1位の「画像広告タグ」を貼るASPで作っ画像広告タグ
■ここにランキング1位の画像「右側」の説明文章を書く画像右側の紹介文画像右側の紹介文画像右側の紹介文。画像右側の紹介文画像右側の紹介文画像右側の紹介文画像右側の紹介文。
■ここにランキング1の画像「下側」の説明文を書く(なければ削除)画像下側の紹介文画像下側の紹介文画像下側の紹介文画像下側の紹介文。画像下側の紹介文画像下側の紹介文画像下側の紹介文画像下側の紹介文画像下側の紹介文。画像下側の紹介文画像下側の紹介文。
■ここに詳細ページのURLを貼る#
■ここに「テキスト広告タグ」を貼るASPで作ったテキスト広告タグ

これでランキングの完成です。

いまは1位の内容しか変更しませんでしたが、2位3位も同じようにテキストを置き換えるだけになります。

文字だらけでプチパニックになる方もいるかもしれませんが、作ってみると理解できると思います。

改行したいときはHTML内で、改行したい箇所に<br>を追加してください。

ランキングの内容を設定する手順3

まだ広告タグがなければ代用として以下のURLを貼り付けて試してください。

貼り付ける位置は画像をご確認ください。

<img src="https://zippverse.com/action_sample4/images/2022/03/dsc20040724_152504_532-ukidaira-1.jpg">
<a href="#">公式サイト</a>

ランキングを記事中に表示する

ランキングを記事中に表示する手順1。詳細は吹き出しボックスに記載
ランキングを記事中に表示する手順2。詳細は吹き出しボックスに記載
ランキングを記事中に表示する手順3。詳細は吹き出しボックスに記載
ランキングを記事中に表示する手順4。詳細は吹き出しボックスに記載
ランキングを記事中に表示する手順5。詳細は吹き出しボックスに記載
  1. 「マイブロック」をクリック
  2. 「ショートコード」をコピー
  3. 「投稿」にカーソルをのせ「新規追加」をクリック
  4. 「/」と入力
  5. 「ショートコード」をクリック
  6. 「コピーしたショートコード」を貼り付け

あとは記事を公開すればランキングが表示されます。

なぜショートコードで挿入するのかについては「マイブロックを使う上での注意点」を見てもらうとわかるので興味があればご覧ください。

1記事にランキングを複数設置する

ランキングの応用的な使い方の説明1
ランキングの応用的な使い方の説明2
ランキングの応用的な使い方の説明3
  1. マイブロックで複数ランキングを作成
  2. 記事に複数ランキングを設置
  3. 「目次」に表示される

このように1記事で複数のランキングを紹介することで読者のニーズを満たしやすくなります。

作る作らないは置いといて、昔もいまもこういうランキングは成約率が高くなる傾向があるので覚えておいて損はないでしょう。

画像サイズ・光る演出の設定

ここでの設定はマイブロックで作成したランキング(カスタムHTMLで作成したランキング)にも反映されます。

画像サイズ・光る演出の設定手順1
画像サイズ・光る演出の設定手順2
標準バナーサイズ
大きめバナーサイズ
  1. 「ランキング管理」をクリック
  2. 「基本設定」をクリック
  3. 「バナーサイズ」と「演出」にチェック
  4. 「Save」をクリック

設定項目は一番下にあります。

ランキングの色を設定

ここでの設定はマイブロックに登録したランキングにも反映されます。

ランキングの色を設定する手順1
ランキングの色を設定する手順2
  1. 「ランキング管理」をクリック
  2. 「CSS」をクリック
  3. 「お好きな色」に設定
  4. 「Save」をクリック

AFFINGER6の「コメント」の設定

コメント欄を非表示にする方法

コメント欄を非表示にする前
コメント欄を非表示にした後
コメント欄を非表示にする手順1と2。詳細は吹き出しボックスに記載
コメント欄を非表示にする手順3。詳細は吹き出しボックスに記載
コメント欄を非表示にする手順4と5。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「投稿・固定記事」をクリック
  3. 「コメント」をクリック
  4. 「コメント欄・コメントフォームを非表示」にチェック
  5. 「Save」をクリック

コメントを入力するさい標準ではウェブサイトの入力、メールアドレスの入力が必須となっていますが、それを非表示にする設定もここでできるようになっています。

AFFINGER6の「お問い合わせフォーム」の設定

お問い合わせフォームの作り方

お問い合わせページを作成する手順1。詳細は吹き出し欄に記載
お問い合わせページを作成する手順1。詳細は吹き出し欄に記載
お問い合わせページを作成する手順2と3。詳細は吹き出し欄に記載
お問い合わせページを作成する手順4。詳細は吹き出し欄に記載
お問い合わせページを作成する手順5。詳細は吹き出し欄に記載
お問い合わせページを作成する手順6から8。詳細は吹き出し欄に記載
お問い合わせページ完成のイメージ画像
  1. 「お問い合わせ」にカーソルをあわせ「新規追加」をクリック
    ※お問い合わせが表示されていな場合、プラグインのContactForm7が有効になっているか確認
  2. タイトルに「お問い合わせ用フォーム」と入力
    ※管理しやすい名前ならなんでもOK
  3. 「保存」をクリック
  4. 上部に表示される【 contact-form-7 id=” ” title=”~~” 】をコピー
  5. 「固定ページ」にカーソルをのせ「新規追加」をクリック
  6. 「タイトル」に「お問い合わせ」と記入
  7. 本文に先ほどコピーしたものを貼り付け
  8. 「公開」をクリック
  9. 「固定ページを表示」をクリック


これでお問い合わせページができました。

送信ボタンの背景色を変更

お問い合わせの送信ボタンの色を変更する前
お問い合わせの送信ボタンの色を変更した後
お問い合わせの送信ボタンの色を変更する手順1。詳細は吹き出しボックスに記載
お問い合わせの送信ボタンの色を変更する手順2。詳細は吹き出しボックスに記載
お問い合わせの送信ボタンの色を変更する手順3。詳細は吹き出しボックスに記載
お問い合わせの送信ボタンの色を変更する手順4と5。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「オプション(その他)」をクリック
  3. 「コンタクトフォーム7送信ボタン」をクリック
  4. 「背景色」を「#8b96b5」に変更
  5. 「公開」をクリック

ここまでで、AFFINGER6でできるカスタマイズはひととおりやったことになります。

これ以上のカスタマイズはAFFINGER6をCSSでカスタマイズにて解説をしていますが、CSSのカスタマイズは少し複雑になるので、とりあえずここまででいいや!って方は、次の「本格運用前にやる設定」を済ませて、ブログ運営をスタートさせてください。

本格運用前に必ずやる設定

テストコンテンツの削除

テストコンテンツのインストールで追加した「記事×15、カテゴリ×8、タグ×20、画像ファイル×15、音楽ファイル×1、コメント×12、ユーザー×1」を削除していきます。

削除するだけなので5分もかからないと思います。

テストコンテンツをインストールしていない方は、次の「no-indexのチェックを外す」に進んでください。

テスト記事の削除

テストコンテンツの記事を削除
テストコンテンツの記事を削除
テストコンテンツの記事を削除
テストコンテンツの記事を削除
テストコンテンツの記事を削除
  1. 「投稿」をクリック
  2. 「投稿を検索」に「うきだいら」と入力
  3. 「投稿を検索」をクリック
  4. 「タイトル横のチェックボックス」にチェック
  5. 一括操作で「ゴミ箱へ移動」を選択
  6. 「適応」をクリック
  7. 「ゴミ箱」をクリック
  8. 「タイトル横のチェックボックス」にチェック
  9. 「完全に削除する」を選択
  10. 「適応」をクリック

記事を削除するとコメントも同時に削除されます。
※削除されるコメントはテストコンテンツで挿入されたコメントだけで、もともとあるコメントは削除されません

テストカテゴリーの削除

テストコンテンツのカテゴリーを削除
テストコンテンツのカテゴリーを削除
テストコンテンツのカテゴリーを削除
  1. 「カテゴリー」をクリック
  2. 「カテゴリーを検索」に「ukidaira」と入力
  3. 「カテゴリーを検索」をクリック
  4. 「名前の横のチェックボックス」にチェック
  5. 一括操作で「削除」を選択
  6. 「適応」をクリック

テストタグの削除

テストコンテンツのタグを削除
テストコンテンツのタグを削除
テストコンテンツのタグを削除
  1. 「タグ」をクリック
  2. 「タグの検索」に「ukidaira」と入力
  3. 「タグを検索」をクリック
  4. 「名前の横のチェックボックス」にチェック
  5. 一括操作で「削除」を選択
  6. 「適応」をクリック

テストメディア(画像)の削除

テストコンテンツの画像を削除
テストコンテンツの画像を削除
テストコンテンツの画像を削除
テストコンテンツの画像を削除
  1. 「メディア」をクリック
  2. 「リスト表示ボタン」をクリック
  3. 「検索」に「ukidaira」と入力してキーボードの「Enter」を押す
  4. 「ファイルの横のチェックボックス」にチェック
  5. 一括操作で「完全に削除する」を選択
  6. 「適応」をクリック

テストユーザーを削除

テストコンテンツのユーザーを削除
テストコンテンツのユーザーを削除
テストコンテンツのユーザーを削除
  1. 「ユーザー」にカーソルをのせ「ユーザー一覧」をクリック
  2. 「example」の「削除」をクリック
  3. 「すべてのコンテンツ」を消去を選択
  4. 「削除を実行」をクリック

テストコンテンツの削除はこれにて完了です。

no-indexのチェックを外す

no-indexの設定をした覚えがない場合でも、チェックが外れているか必ず確認してください。チェックが外れていないとどんなに頑張ってもアクセス0という悲しいことになります。

no-indexを解除する手順1。詳細は吹き出しボックスに記載
no-indexを解除する手順2と3。詳細は吹き出しボックスに記載
  1. 「設定」にカーソルをのせ「表示設定」をクリック
  2. 「検索エンジンでの表示」のチェックを外す
  3. 「変更を保存」をクリック

以上でAFFINGER6のカスタマイズの説明は終了になります。

CSSを使ったカスタマイズをする場合は、引き続き「AFFINGER6をCSSでカスタマイズ」へと進んでください。

AFFINGER6の使い方まとめ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

アフィリエイト切っ掛けでWEB業界にどっぷり浸かり、10年以上WEB関連のお仕事で食べてる人。個人から法人成りし新規で始めたサービスがうけて誰しもが知るビックネーム企業数社と契約することに成功。勝ち確定や!と思われたやさきコロナ化に突入。フルマラソンで調子良く走ってたら空から隕石が降ってきたぐらいの衝撃を受ける。ビックネーム企業との契約が見事に全部打ち切り。「わいにBtoBは向いてなかったんや・・」と現在は猫3匹と自由気ままに生きる毎日。

コメント

コメントする

目次