2023年買ってよかったもの

【STORK19】固定ページを使ってトップページをサイト型っぽくカスタマイズしてみた【備忘録】

STORK19でサイト型トップページ

サイト型のトップページに憧れて、分からないながらもやってみたのでザックリ記録します。

固定ページで作成し、最終的にはそれを「外観 > カスタマイズ > ホームページ設定」からトップページになるように設定変更しましょう。

STORK19 固定ページをフロントページへ設定

初心者でも簡単

ブロックパターンから使えそうなモノを選択しよう

ブロックのパターンから選択して、それをパズルのように組み合わせてました。

STORK19ブロックのパターンから選択

たとえばパターン>STORK:セクション>カバー1を選択すると…

STORK19サイト型 カバー1を選択

↓バーーン!と全幅で挿入されます。

STORK19カバー 全幅で挿入される

背景画像を変更

画像をメディアファイルから別の物に置き換えてもOK。

↓背景画像をいちごとブルーベリーに変えてみました。

STORK19画像の置換

これだといちごとブルーベリーがよく見えないので、不透明度を下げます。

STORK19オーバーレイの不透明度を変更1

不透明度を30まで下げてみました。

フルーツの色味が綺麗に出ていますね。

STORK19オーバーレイの不透明度を変更2

タイトルや文言を編集しよう

ブログ記事を書くようにH1にもH2にもできるし、ボタンリンクも置けるし、アニメーション表示することもできます。

STORK19いろいろ編集できるよ

他のブロックとも組み合わせてみよう

セクションの中にある「3カラム 画像つき」を入れてみました。

STORK19 3カラムを挿入

自分次第で多様にカスタマイズできます。

STORK19 3カラムを編集

ブロックからカバーを選択して作成してみよう

ブロックからカバーを選択し、背景色や背景画像を選んでください。

今回は画像なしでグレーに。

STORK19 カバーから自作もできる
STORK19 カバーの色を選択

配置から「全幅」を選択すると、横幅いっぱいに広がってくれます。

STORK19 配置で全幅を選択

↓↓↓↓↓

STORK19 カバーが横幅いっぱいに広がりました

3カラムを2段追加して、スタッフ紹介風にしてみました。

STORK19 カバーに3カラムを追加しスタッフ紹介

アドセンスもショートコード登録したものをそのまま置ける

ブログ記事の投稿と同じように、ショートコード登録したアドセンスもそのまま置けます。

STORK19 サイト型にもアドセンスを置ける

表示させたくない固定ページの除外を忘れずに

このブログで言うと、フッター部分やスマートフォン版で左上ハンバーガーメニューの中に固定ページが表示されるようになっています。

固定ページで作成しているもの
  • トップページ
  • お問い合わせ
  • プライバシーポリシー
  • サイトマップ
  • プロフィール
  • Show Article Map

などなど

この中で、フッターの中やハンバーガーメニューにそれぞれ表示させる必要のないページは、除外ページ欄にページIDを入れて非公開にするのを忘れないようにしましょう。

PC版フッターの例

STORK19 除外する固定ページの設定を忘れずに

筆者はPC版フッターは除外ページ設定したのに、つい先日までスマートフォン版のハンバーガーメニューに今のトップページのページIDが謎に表示されたままにしていました。

オパール

慣れないコトするからやらかした…

一つ一つが勉強です。

STORK19を提供しているOPENCAGEさんでは、STORK19のデモページを用意しています。

こんな雰囲気のページ作ってみたいなー!というのが見つかるかも!

見てみて!

初心者でも簡単

スポンサーリンク


Blog Design Lab.

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ABOUT US
オパールのプロフィールイラスト
オパール
熱しやすく冷めやすい。習い事など決まった日時に目的地に向かうことが苦痛。通信教育続かない。社交的に見える人見知り。約束直前に気が重くなる。人と楽しい時間を過ごしても帰宅後疲労困憊で動けない。そんなタイプの人間です。