MENU
カテゴリー

AFFINGER6のカスタマイズ2

目次

「記事」の設定

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

記事上部にアイキャッチを表示させる前
記事上部にアイキャッチを表示させた後
アイキャッチ画像を記事に表示させる手順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. 「公開」をクリック

「目次」の設定

目次の設定と解説

目次設定の説明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。詳細は吹き出しボックスに記載
  1. 外観」にカーソルをのせ「ウィジット」をクリック
  2. 「00_STINGERカスタムHTML」を「サイドバーウィジット」に挿入
    表示させたい場所が決まっていればそこに挿入してください
  3. 以下の「ショートコード(ボックスメニュータグ)」をコピーして貼り付け
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューA" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューB" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューC" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[st-box-btn-list icon_image="" webicon="st-svg-wordpress" icon_size="" text="メニューD" subtext="" url="" target="" rel="" bgcolor="" color="" fontsize="90" fontweight="bold"]
[/st-box-btn]
  1. 「保存」をクリック

ボックスメニューに画像を表示

ボックスメニューに画像を表示の変更前
ボックスメニューに画像を表示の変更後

ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。

ボックスメニューに画像を表示1。詳細は吹き出しボックスに記載
ボックスメニューに画像を表示2。詳細は吹き出しボックスに記載
ボックスメニューに画像を表示3。詳細は吹き出しボックスに記載
ボックスメニューに画像を表示4。詳細は吹き出しボックスに記載
ボックスメニューに画像を表示5。詳細は吹き出しボックスに記載
ボックスメニューに画像を表示6。詳細は吹き出しボックスに記載
ボックスメニューに画像を表示7。詳細は吹き出しボックスに記載
  1. 「メディア」をクリック
  2. メニューに設定する「画像」をクリック
  3. 「URLをクリップボードにコピー」をクリック
  4. 「メモ帳」などにURLを貼り付けておく
  5. 同じように他のメニューに使う画像のURLも貼り付けておく
  6. 「コピーしたURL」を「ボックスメニュータグ」内にある「icon_image=””」の「””」の間に貼り付け
    4箇所あるので同じようにURLを貼りつけてください
  7. 「保存」をクリック
メニュー画像について補足

ボックスメニューに使う画像は背景を透過をしていないと綺麗に表示されないことがあります。

なのでメニューに画像を設定するさいは、透過処理した画像を使うようにしたほうがいいです。

よくわからないときは「背景透過 画像」などで検索してみてください。

なお、メニュー画像サイズは「64×64」だと綺麗に表示されます。

ボックスメニューにアイコンを表示

ボックスメニューにアイコンを表示する前
ボックスメニューにアイコンを表示した後

ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。

ボックスメニューにアイコンを表示する手順1。詳細は吹き出しボックスに記載
ボックスメニューにアイコンを表示する手順2。詳細は吹き出しボックスに記載
ボックスメニューにアイコンを表示する手順3。詳細は吹き出しボックスに記載
  1. 以下のページでメニューに表示させたいアイコンをクリック
  1. 「コード」をコピー
  2. 「コピーしたコード」を「ボックスメニュータグ」内にある「webicon=”st-svg-wordpress”」の「st-svg-wordpress」と入れ替える
    4箇所あるので同じように入れ替える
  3. 「保存」をクリック

ボックスメニューのメニュー数を増やす

ボックスメニューのメニュー数を増やす前
ボックスメニューのメニュー数を増やした後

ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。

次のタグはさきほど使ったボックスメニュータグになりますが、水色で囲った部分が1つのメニューをあらわしています。

ボックスメニューのメニュー数を増やす手順1。詳細は吹き出しボックスに記載

つまりメニューを6つにしたいときは以下のようにコピペするだけで増やせます。

ボックスメニューのメニュー数を増やす手順2。詳細は吹き出しボックスに記載

ボックスメニューの色設定

ボックスメニューの色設定する前
ボックスメニューの色設定した後

ボックスメニューを作成している前提で進めています。まだ作成していない方は「ボックスメニューを作成する」にて作成してください。

ボックスメニューの色設定は「カスタマイザー」と「ショートコード」の2つの方法があります。

大まかな違いは次の通りです。

カスタマイザーショートコード
全体の色を一括で設定メニュー毎に色を設定

ちなみに、カスタマイザーとショートコードには次のような力関係があります。

「カスタマイザーの設定 < ショートコードの設定」

なので、ショートコードで色を設定した後に、カスタマイザーで色を調整しようと思っても反映されません。

ただし、ショートコードでは未対応、カスタマイザーでは対応している箇所などがあり、そういった箇所についてはこのルールは当てはまりません。

例えば、メニューボックスの線の色は、カスタマイザーでのみ対応しているので、ショートコードでカラー設定をした後にカスタマイザーで設定しても反映がされます。

ややこしいと思いますが、僕も書いててややこしいと思ってます。

文章で読むより実際にやってみたほうがわかりやすいので、気になる方は試してみてください。

ショートコードで設定する方法

設定する箇所は次のタグの水色の箇所になります。

ボックスメニューのタグ画像

この一行の中にも個別のタグが複数あるのですが、それの意味は次のようになります。

icon_image=””画像URLを貼り付ける
webicon=””WEBアイコンコードを貼り付ける
icon_size=””アイコン画像のサイズを設定
text=””メニュータイトルを記入
subtext=””メニューの補足を記入
url=””メニュークリック先のURLを記入
rel=””nofollow属性を指定
bgcolor=””メニューの背景色を記入
color=””文字色を記入
fontsize=””文字サイズを指定
fontweight=””文字の太さを指定

この中で、色に関するものは赤枠の箇所になるので、そこにカラーコード(#333333 のようなもの)を記入することで、色を設定することができます。

記入例

bgcolor=”ffffff”

color=”333333″

複雑に見えるかもしれませんが、コピペでできることなので試してみれば余裕だぜとなると思います。

カスタマイザーで設定する方法

ボックスメニューの色設定の手順1。詳細は吹き出しボックスに記載
ボックスメニューの色設定の手順2。詳細は吹き出しボックスに記載
ボックスメニューの色設定の手順3。詳細は吹き出しボックスに記載
ボックスメニューの色設定の手順4。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「-各メニュー設定」をクリック
  3. 「ボックスメニュー」をクリック
  4. 「お好きな色」に設定
  5. 「公開」をクリック

設定項目を見てもらえばわかるとおり、ざっくりとしたカラー設定しかできません。

ただボーダー色はショートコードでは設定できないので、ここで設定することになります。

人気記事を作成する

人気記事を作成する前
人気記事を作成した後
人気記事を作成する手順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

「ランキング」の設定

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

ランキングの表示サンプル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/wp-content/uploads/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」をクリック

「ファビコン」の設定

ファビコンを設定する前
ファビコンを設定した後

ファビコンはブラウザのサイトタイトルの横に表示するアイコンのことです。簡単に登録できますし、設置することでのメリットのほうが多いので設定をオススメします。

ファビコンの設定手順1。詳細は吹き出しボックスに記載
ファビコンの設定手順2。詳細は吹き出しボックスに記載
ファビコンの設定手順3。詳細は吹き出しボックスに記載
ファビコンの設定手順4。詳細は吹き出しボックスに記載
ファビコンの設定手順5。詳細は吹き出しボックスに記載
ファビコンの設定手順6。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「サイト基本情報」をクリック
  3. 「サイトアイコンを選択」をクリック
  4. 「画像」を選んで「選択」をクリック
  5. 「切り抜き」をクリック
  6. 「公開」をクリック

「コメント」の設定

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

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

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

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

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

お問い合わせページを作成する手順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. 「公開」をクリック

「スマホ用」の設定

ハンバーガーメニューの色変更の方法

ハンバーガーメニューの色変更前
ハンバーガーメニューの色変更後
スライドメニューの色変更前
スライドメニューの色変更後
ハンバーガーメニューの色とスライドメニューの色を変更する手順1。詳細は吹き出しボックスに記載
ハンバーガーメニューの色とスライドメニューの色を変更する手順2。詳細は吹き出しボックスに記載
ハンバーガーメニューの色とスライドメニューの色を変更する手順3。詳細は吹き出しボックスに記載
ハンバーガーメニューの色とスライドメニューの色を変更する手順4から8。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「ー各メニュー設定」クリック
  3. 「スマホメニュー(スマホヘッダー)」クリック
  4. 「スライドメニューアイコン色」を「#a5a5a5」に変更
  5. 「スライドメニュー内のテキストリンク色」を「#a8afc9」に変更
  6. 「スライドメニュー内リンクのボーダー色」を「#cecacc」に変更
  7. 「スライドメニュー内背景色」を「#f6f2f4」に変更
  8. 「公開」をクリック

ハンバーガーメニューの位置の変更&検索ボタン設置

ハンバーガーメニューの位置の変更と検索ボタン設置する前
ハンバーガーメニューの位置の変更と検索ボタン設置した後
ハンバーガーメニューの位置の変更と検索ボタン設置する手順1と2。詳細は吹き出しボックスに記載
ハンバーガーメニューの位置の変更と検索ボタン設置する手順3。詳細は吹き出しボックスに記載
ハンバーガーメニューの位置の変更と検索ボタン設置する手順4と5。詳細は吹き出しボックスに記載
ハンバーガーメニューの位置の変更と検索ボタン設置する手順6。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「メニュー 」をクリック
  3. 「スマホスライドメニュー 」をクリック
  4. 「メニューの位置 」で表示したい位置を選択
  5. 「スマホヘッダーに検索アイコンを追加」にチェック
  6. 「 Save 」をクリック
フッターメニューを作成する前
フッターメニューを作成した後
フッターメニューを作成する手順1。詳細は吹き出しボックスに記載
フッターメニューを作成する手順2。詳細は吹き出しボックスに記載
フッターメニューを作成する手順3から5。詳細は吹き出しボックスに記載
フッターメニューを作成する手順6から9。詳細は吹き出しボックスに記載
フッターメニューを作成する手順10と11。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「メニュー 」をクリック
  2. 「新しいメニューを作成しましょう」をクリック
  3. 「メニュー名」に「スマホフッターメニュー」と入力
  4. 「スマホフッターメニュー」にチェック
  5. 「メニューを作成」をクリック
  6. 「カスタムリンク」をクリック
  7. 「URL」に「#」を入力
  8. リンク文字列に「ホーム」と入力
  9. 「メニューに追加」をクリック
  10. おなじ手順で「お問い合わせ」メニューを作成
  11. 「メニューを保存」をクリック
フッターメニューを作成する手順12と13。詳細は吹き出しボックスに記載
フッターメニューを作成する手順14。詳細は吹き出しボックスに記載
フッターメニューを作成する手順15と16。詳細は吹き出しボックスに記載
  1. 「AFFINGER設定」をクリック
  2. 「メニュー」をクリック
  3. 「その他のスマホメニュー」をクリック
  4. 「スマホフッターメニューを表示する」にチェック
  5. 「Save」をクリック
フッタメニューにアイコンを表示させる前
フッタメニューにアイコンを表示させた後

ここでは「ホーム」と「お問い合わせ」メニューにアイコンを表示する方法を紹介しています。

フッターメニューのテキストにアイコンを表示させる手順1。詳細は吹き出しボックスに記載
フッターメニューのテキストにアイコンを表示させる手順2。詳細は吹き出しボックスに記載
フッターメニューのテキストにアイコンを表示させる手順3。詳細は吹き出しボックスに記載
フッターメニューのテキストにアイコンを表示させる手順4。詳細は吹き出しボックスに記載
フッターメニューのテキストにアイコンを表示させる手順5。詳細は吹き出しボックスに記載
フッターメニューのテキストにアイコンを表示させる手順6。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「メニューをクリック
  2. 「編集するメニューを選択」でフッターメニューを選択
  3. 「ホーム」をクリック
  4. 「ナビゲーションラベル」に以下のタグを貼り付け
<i class="fa fa-home" aria-hidden="true"></i> ホーム
  1. 「お問い合わせを」の「ナビゲーションラベル」に以下のタグを貼り付け
<i class="fa fa-envelope" aria-hidden="true"></i> お問い合わせ
  1. 「メニューを保存」をクリック
フッターメニューのテキストにアイコンを表示させる手順7と8。詳細は吹き出しボックスに記載
フッターメニューのテキストにアイコンを表示させる手順9と10。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「その他」をクリック
  3. 「FontAwesomeIcons4.7.0の読み込み」にチェック
  4. 「Save」をクリック

他のアイコンを使う方法

使いたいアイコンを追加する手順1から3。詳細は吹き出しボックスに記載
使いたいアイコンを追加する手順4。詳細は吹き出しボックスに記載
使いたいアイコンを追加する手順5。詳細は吹き出しボックスに記載

他のアイコンを使いたいときは、以下のサイトから希望するアイコンを選択します。

  1. 希望するアイコンを英単語で検索
    ホームならhome、電話ならphone
  2. アイコンが一覧で表示される
  3. 使いたいアイコンをクリック
  4. タグをコピー
  5. ナビゲーションラベルに貼り付け
    ※タグの後にテキストを入れるのを忘れないにする

なお、紹介した方法はFont Awesome4.7(少し古いバーション)を使ったものになります。

新しいバージョンのFont Awesomeは会員登録が必要だったりと少し手間がかかるので、ここでの紹介は省略してます。

興味があれば詳しく解説してくれてるナイガイ、ナイスガール達がいるので調べてみてください。

フッターメニューの背景色を変更する前
フッターメニューの背景色を変更した後
フッターメニューの背景色を変更する手順1。詳細は吹き出しボックスに記載
フッターメニューの背景色を変更する手順2。詳細は吹き出しボックスに記載
フッターメニューの背景色を変更する手順3。詳細は吹き出しボックスに記載
フッターメニューの背景色を変更する手順4から6。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「カスタマイズ」をクリック
  2. 「-各メニュー設定」をクリック
  3. 「スマホフッターメニュー」をクリック
  4. 「文字色」を「#898b9e」に変更
  5. 「背景色」を「#e6e8f4」に変更
  6. 「公開」をクリック

スマホの文字サイズを調整

スマホの文字サイズを変更する前
スマホの文字サイズを変更した後
スマホの文字サイズを変更する手順1と2。詳細は吹き出しボックスに記載
スマホの文字サイズを変更する手順3。詳細は吹き出しボックスに記載
スマホの文字サイズを変更する手順4。詳細は吹き出しボックスに記載
スマホの文字サイズを変更する手順5。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「全体設定」をクリック
  3. 「フォントサイズ」をクリック
  4. 「スマホ(~599px)閲覧時」の「基本(Pタグ 他)」を「16」に変更
  5. 「Save」をクリック

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

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

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

テストコンテンツの削除

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

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

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

テスト記事の削除

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

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

テストカテゴリーの削除

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

テストタグの削除

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

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

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

テストユーザーを削除

テストコンテンツのユーザーを削除[icon class=
テストコンテンツのユーザーを削除[icon class=
テストコンテンツのユーザーを削除[icon class=
  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をコピーしました!
  • URLをコピーしました!

この記事を書いた人

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

コメント

コメントする

目次
閉じる