ブログ運営

【AFFINGER6】トップページデザイン。バナー風ボックスの設定の仕方

ACTION AFFINGER6

AFFINGER6でのトップページデザインで、バナー風BOXの設定の仕方を解説していきます。

Contents

バナー風ボックス

AFFINGER6では、トップページの設定機能が備わっているので簡単に作ることができます。

赤枠の部分の作り方です。

ちなみにマウスを置くと、背景画像が鮮明になります。

ちなみにこんな感じになります

これかっこいいですよね。

バナーをクリックするとカテゴリーページに移動するようになってます。

さっそく解説していきます。

バナー風ボックスの作り方

【AFFINGER管理】⇒【トップページ】⇒【挿入コンテンツ】

ツールバー切り替えを押すと、表示が変わります。

この画面にしておきましょう。

挿入コンテンツを作る

挿入コンテンツとは、トップページのデザインのことです。

やること

  • 見出しを作る
  • トップページのレイアウトを決める
  • バナー風ボックスの設置

見出しを作る

まずは見出しを作ります。

トップページの「カテゴリー別・新着記事」の部分になります。

見出しはお好みで考えてください。【新着記事】でも【おすすめ記事】でもOKです。

見出しは「h3」で作成します。

「見出し3」を選択して文字を入力しましょう。

トップページのレイアウトを決める

次にレイアウトを設定していきます。

先ほど設定した見出しの下に作成します。

今回は、2列でカテゴリーを分けたレイアウトにするので、

【タグ】⇒【レイアウト】⇒【PCとTab(959px以上)】⇒【左右50%】を選択します。

選択したらこのようなレイアウトの枠ができます。

この黄色と水色の枠の中にバナー風ボックスを設定していきます。

「PCとTab(959px以上)」で設置しないと、スマホで見た時にレイアウトが崩れます。

バナー風ボックスの設置

いよいよ本題のバナー風ボックスの設置の仕方です。

【タグ】⇒【ボックスデザイン】⇒【バナー風ボックス】⇒【基本】を選択します。

そうすると、このようなコードが入力されます。

このコードの中で変更しなければいけない箇所は3つ

変更箇所

  • st-flexbox url="カテゴリーリンク先のURL"
  • title="カテゴリーのタイトル"
  • backgroud_image="タイトルの背景画像"

編集する際(URLをコピペする際)は、ビジュアルモードからテキストモードに切り替えて入力してください。

ビジュアルモードのままだと、画像のURLをコピペした時実際のトップページに画像が反映されません。

①st-flexbox url="カテゴリーリンク先のURL"

リンク先のURLを入力してください。

バナー風ボックスをクリックしたときに移動するページになります。

②title="カテゴリーのタイトル"

バナー風ボックスに表示したいタイトルを入力します。

③backgroud_image="タイトルの背景画像"

バナー風ボックスに表示したい画像のURLを入力してください。

自分の「メディア」にアップロードした画像のURLをコピーして貼り付けしてください。

テキストモードでコピペしてください。

最後に「このテキストは最後に消して下さい(50%)」を消しましょう。

以上の入力が終わったら一旦Saveしましょう。

これで片方は完了です。

もう片方も同様に設定を行いましょう。

このように、表示ができていたら設定は完了です。

お疲れさまでした。

-ブログ運営
-