このデモページ風のフロントページを作成する方法

3,244 views
B!
kuma

kuma

ども、くまです。
THE SONICの開発メンバーの一人。
CSSが好き。

FOLLOW

SONICを使っている方であれば

誰でもこのサイトと同じようなフロントページを作成することができます。

コード
<!-- wp:group {"backgroundColor":"tsnc_white"} -->
<div class="wp-block-group has-tsnc-white-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:cover {"overlayColor":"tsnc_main_color","minHeight":620,"className":"hidden-mobile","hiddenSwitch":"hidden-mobile"} -->
<div class="wp-block-cover has-tsnc-main-color-background-color has-background-dim hidden-mobile" style="min-height:620px"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":369} -->
<div style="height:369px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"tsnc_white","textColor":"tsnc_main_color","borderRadius":46,"align":"center","className":"btn-icon-after btn-icon-angle-r is-style-fill ticss-5bee25f4","iconPosition":"btn-icon-after","iconSelect":"btn-icon-angle-r"} -->
<div class="wp-block-button aligncenter btn-icon-after btn-icon-angle-r is-style-fill ticss-5bee25f4"><a class="wp-block-button__link has-text-color has-tsnc-main-color-color has-background has-tsnc-white-background-color" style="border-radius:46px">THE SONICのダウンロードページ</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"overlayColor":"tsnc_main_color","minHeight":200,"className":"hidden-pc","hiddenSwitch":"hidden-pc"} -->
<div class="wp-block-cover has-tsnc-main-color-background-color has-background-dim hidden-pc" style="min-height:200px"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":120} -->
<div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"tsnc_white","textColor":"tsnc_main_color","className":"btn-icon-after btn-icon-angle-r is-style-fill","iconPosition":"btn-icon-after","iconSelect":"btn-icon-angle-r"} -->
<div class="wp-block-button btn-icon-after btn-icon-angle-r is-style-fill"><a class="wp-block-button__link has-text-color has-tsnc-main-color-color has-background has-tsnc-white-background-color">THE SONIC</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:spacer {"height":20,"className":"hidden-mobile","hiddenSwitch":"hidden-mobile"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer hidden-mobile"></div>
<!-- /wp:spacer -->

<!-- wp:group {"className":"hb"} -->
<div class="wp-block-group hb"><div class="wp-block-group__inner-container"><!-- wp:group {"className":"main-h2 kiji-list-heading-mark4","blockMarginBottom":"margin-bottom-0"} -->
<div class="wp-block-group main-h2 kiji-list-heading-mark4"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>PICK UP</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

<!-- wp:group {"className":"hb is-style-default hidden-mobile","hiddenSwitch":"hidden-mobile"} -->
<div class="wp-block-group hb is-style-default hidden-mobile"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"mobile-2column","mobileColumns":"mobile-2column"} -->
<div class="wp-block-columns mobile-2column"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

<!-- wp:group {"className":"hidden-pc","hiddenSwitch":"hidden-pc"} -->
<div class="wp-block-group hidden-pc"><div class="wp-block-group__inner-container"><!-- wp:group {"className":"main-in","hiddenSwitch":"hidden-pc"} -->
<div class="wp-block-group main-in"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"mobile-2column","mobileColumns":"mobile-2column"} -->
<div class="wp-block-columns mobile-2column"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"mobile-2column","mobileColumns":"mobile-2column"} -->
<div class="wp-block-columns mobile-2column"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"backgroundColor":"tsnc_body_background_color"} -->
<div class="wp-block-group has-tsnc-body-background-color-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:group {"className":"hb"} -->
<div class="wp-block-group hb"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":40,"className":"hidden-mobile","hiddenSwitch":"hidden-mobile"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer hidden-mobile"></div>
<!-- /wp:spacer -->

<!-- wp:spacer {"height":20,"className":"hidden-pc","hiddenSwitch":"hidden-pc"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer hidden-pc"></div>
<!-- /wp:spacer -->

<!-- wp:group {"backgroundColor":"tsnc_body_background_color","className":"main-h2 kiji-list-heading-mark4","blockMarginBottom":"margin-bottom-0"} -->
<div class="wp-block-group has-tsnc-body-background-color-background-color has-background main-h2 kiji-list-heading-mark4"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>このサイトについて</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">デモ</p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"align":"center"} -->
<ul class="wp-block-social-links aligncenter"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->

<!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"service":"linkedin"} /-->

<!-- wp:social-link {"url":"#","service":"youtube"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

<!-- wp:columns {"className":"hb"} -->
<div class="wp-block-columns hb"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"backgroundColor":"tsnc_white","className":"is-style-group-mark2 margin-bottom-0","blockMarginBottom":"margin-bottom-0"} -->
<div class="wp-block-group has-tsnc-white-background-color has-background is-style-group-mark2 margin-bottom-0"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"is-style-list-simple-main margin-bottom-0","blockMarginBottom":"margin-bottom-0"} -->
<ul class="is-style-list-simple-main margin-bottom-0"><li>デザイン</li><li>デザイン</li><li>デザイン</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">→ <a href="#">more</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"backgroundColor":"tsnc_white","className":"is-style-group-mark2 margin-bottom-0","blockMarginBottom":"margin-bottom-0"} -->
<div class="wp-block-group has-tsnc-white-background-color has-background is-style-group-mark2 margin-bottom-0"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"is-style-list-simple-main margin-bottom-0","blockMarginBottom":"margin-bottom-0"} -->
<ul class="is-style-list-simple-main margin-bottom-0"><li>デザイン</li><li>デザイン</li><li>デザイン</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">→ <a href="#">more</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"backgroundColor":"tsnc_white","className":"is-style-group-mark2 margin-bottom-0","blockMarginBottom":"margin-bottom-0"} -->
<div class="wp-block-group has-tsnc-white-background-color has-background is-style-group-mark2 margin-bottom-0"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"is-style-list-simple-main margin-bottom-0","blockMarginBottom":"margin-bottom-0"} -->
<ul class="is-style-list-simple-main margin-bottom-0"><li>デザイン</li><li>デザイン</li><li>デザイン</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">→ <a href="#">more</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":40,"className":"hidden-mobile","hiddenSwitch":"hidden-mobile"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer hidden-mobile"></div>
<!-- /wp:spacer -->

<!-- wp:group {"backgroundColor":"tsnc_body_background_color"} -->
<div class="wp-block-group has-tsnc-body-background-color-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:group {"className":"hb"} -->
<div class="wp-block-group hb"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":40,"className":"hidden-mobile","hiddenSwitch":"hidden-mobile"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer hidden-mobile"></div>
<!-- /wp:spacer -->

<!-- wp:spacer {"height":20,"className":"hidden-pc","hiddenSwitch":"hidden-pc"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer hidden-pc"></div>
<!-- /wp:spacer -->

<!-- wp:group {"backgroundColor":"tsnc_body_background_color","className":"main-h2 kiji-list-heading-mark4","blockMarginBottom":"margin-bottom-0"} -->
<div class="wp-block-group has-tsnc-body-background-color-background-color has-background main-h2 kiji-list-heading-mark4"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>テキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"center","className":"margin-bottom-0","blockMarginBottom":"margin-bottom-0"} -->
<p class="has-text-align-center margin-bottom-0">テキスト</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"className":"hb"} -->
<div class="wp-block-columns hb"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"is-style-default is-style-group"} -->
<div class="wp-block-group is-style-default is-style-group"><div class="wp-block-group__inner-container"><!-- wp:tsnc-gutenberg-blocks/title-box {"type":"is-style-titlebox-mark4","backgroundColor":"#ffffff","className":"is-style-titlebox-mark4"} -->
<div class="sonic-box is-style-titlebox-mark4" style="background-color:#ffffff"><div class="ob-title"><span class="ob-title-before"></span><span class="ob-title-inner">STEP 1</span><span class="ob-title-after"></span></div><div class="ob-contents"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">テキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:tsnc-gutenberg-blocks/title-box --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"is-style-default is-style-group"} -->
<div class="wp-block-group is-style-default is-style-group"><div class="wp-block-group__inner-container"><!-- wp:tsnc-gutenberg-blocks/title-box {"type":"is-style-titlebox-mark4","backgroundColor":"#ffffff","className":"is-style-titlebox-mark4"} -->
<div class="sonic-box is-style-titlebox-mark4" style="background-color:#ffffff"><div class="ob-title"><span class="ob-title-before"></span><span class="ob-title-inner">STEP 2</span><span class="ob-title-after"></span></div><div class="ob-contents"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">テキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:tsnc-gutenberg-blocks/title-box --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"is-style-default is-style-group"} -->
<div class="wp-block-group is-style-default is-style-group"><div class="wp-block-group__inner-container"><!-- wp:tsnc-gutenberg-blocks/title-box {"type":"is-style-titlebox-mark4","backgroundColor":"#ffffff","className":"is-style-titlebox-mark4"} -->
<div class="sonic-box is-style-titlebox-mark4" style="background-color:#ffffff"><div class="ob-title"><span class="ob-title-before"></span><span class="ob-title-inner">STEP 3</span><span class="ob-title-after"></span></div><div class="ob-contents"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">テキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:tsnc-gutenberg-blocks/title-box --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

導入のイメージ

まずは、どのようにフロントページを作成していくのか、そのイメージを説明しますね。

作成していくざっくりしたイメージを掴んでもらうと、自分なりのアレンジも簡単にできるようになります

今回使うのは

  • JSONファイル
  • 再利用ブロック
  • フロントCTA

の３つです。

JSONファイルは、再利用ブロックのデータになります。再利用ブロックに登録されたブロックは全てJSONファイルで出力でき、他のブログでインポートすることができます。

再利用ブロックは、使い回しできるブロックのことです。

再利用ブロックへ登録することで、よく使うブロックを登録しておくことができます。

フロントCTAはSONICの「カスタマイズ」＞「SONICオリジナル機能」＞「フロントページCTA設定」から使用することができます。

この3つを使って、フロントページを作っていきます。

あなたがすることー

  1. STEP

    JSONファイルをダウンロードする（5秒）

  2. STEP

    JSONファイルを再利用ブロックに登録する（10秒）

  3. STEP

    登録した再利用ブロックを好みの写真や文字、レイアウトに修正（人それぞれ）

  4. STEP

    フロントCTAに再利用ブロックのショートコードを貼り付けて完了（10秒）

いままでのカスタマイズでは考えられないくらい簡単に導入できます

再利用ブロック（ぼくの）→JSON→再利用ブロック（あなたの）

イメージ１ここが再利用ブロックでできています

イメージ２再利用ブロックはJSONファイルとして出力できます

イメージ３JSONファイルはあなたのブログに再利用ブロックとしてインポートできます

ぼくが作った再利用ブロックをJSONファイルにすることで

あなたはJSONファイルをインポートするだけで、同じ再利用ブロックを使うことができます。

つまり

よくあるコードをコピペしてカスタマイズするものとは、次元が違います。

こちらで作成したものをインポートするだけで、そのまま使えるようになります。

JSONファイルは、ぼくの再利用ブロックとあなたの再利用ブロックを繋ぐ役割をになっています

このフロントページの構造

今回、ぼくが再利用ブロックで作成したフロントページは

大きく分けて4つのブロックに分かれています。

  1. カバー画像
  2. PICK UP画像
  3. このサイトについて
  4. 3カラム

この4つが組み合わさって、1つの再利用ブロックとして登録してあります。

一つ一つがどんなふうに作られているかを優しく解説していきますので、

アレンジして使いたい方は、ゆっくり見ていってください。

① カバー画像

ここはカバーブロックを使っています。

ブロックエディタ画面ではこの様になっています。

② PICK UP画像

③ このサイトについて

④ 3カラム×2

19
<PREV
SONICは初心者でも使えるWordPressテーマ？
my sonic

© my sonic All rights reserved.