どこかで見た！デザイン練習帳

０. CSSの準備

テーマカスタマイザー 「追加CSS」に下記をあらかじめ記述しています。ご自分の環境で再現される場合は、コピペしてください。

コピペここから↓↓↓

/* ボタンを四角くする */
.square a{
	border-radius:0;
}

/* ボタンを右下に配置する */
.left-bottom-button{
	position:absolute;
	right: 100px;
    bottom: 30px;
}

/* ギャラリーブロックの隙間をなくす */
.tile .blocks-gallery-item{
margin:0!important;
}

コピペここまで↑↑↑

１. 左に画像・右にテキストとボタン

お手本

やってみようスペース

ブロックレシピ

1. （「やってみようスペース」を削除）
2. メディアと文章 ブロックを追加
3. メディアの設定
   1. メディアエリアの位置を変更
   2. メディアを選択
4. コンテンツエリアの設定
   1. 見出し ブロックを追加
   2. 見出しサイズを「特大」に変更
   3. 段落 ブロックを追加・テキストを入力
   4. ボタン ブロックを追加
      1. テキストを入力
      2. 背景色を変更

プラスワン

1. 画像の大きさをスプリッターを操作して変更してみましょう
2. 画像じゃない方のコンテンツの縦位置を変更してみましょう

３つ同じものの繰り返し

お手本

やってみようスペース

ブロックレシピ

1. （「やってみようスペース」を削除）
2. カラムブロックの設定
   1. カラムブロックを追加する
   2. ３分割を選択する
3. 外側のグループブロックの設定
   1. カラムブロックを、グループブロックで囲む（変換）
   2. グループブロックの背景色を変更する
4. 各カラムの設定
   1. 見出しブロックを追加・入力する
   2. 画像ブロックを追加・設定する
   3. 段落ブロックで追加・入力する
   4. ボタンブロックを追加・入力する。
   5. 見出し・画像・段落・ボタンを複数選択し、グループブロックで囲む
   6. カラムのグループブロックの背景色を白に設定
5. 残り２列の設定
   1. 4-7で作成したカラム内のグループをコピー
   2. 次のカラムにまず段落ブロックを入力
   3. ペースト
   4. 画像などの内容を変更する。
   5. 最後の１つも同様にそうする

スプラスワン

• ボタンを四角くする
  • ボタンの外枠を選択して「高度な設定」>「追加CSSクラス」にsquareと入力する
    （ ※ CSSはあらかじめ設定しています。ディター側には反映されません。フロントページでご確認ください）

３. 背景色を左右いっぱいに・互い違いに画像配置

お手本

やってみようスペース

ブロックレシピ

1. （「やってみようスペース」を削除）
2. グループブロックの設定
   1. グループブロックを追加する
   2. 背景に色を設定する
   3. 配置を「全幅」にする
3. カラムブロックの追加
4. 個別カラムの共通設定
   1. 画像ブロックを配置
   2. 画像とキャプションを設定
   3. 残りの全ての個別カラムに、コピー&ペースト
   4. ペーストしたものの画像とキャプションを変更する
5. 偶数列カラムの設定
   1. 画像ブロックの上にスペースブロックを挿入

プラスワン

• レスポンシブに対応する（ → スマホサイズでは、スペースブロックを非表示にする）
  • ボタンの外枠を選択して「高度な設定」>「追加CSSクラス」にu-only-pcと入力する
    （ ※ CSSはあらかじめ設定しています。ディター側には反映されません。フロントページでご確認ください）
  • u-only-pcはテーマArkheが準備しているクラスで、PCサイズでのみ表示されるようになります。詳しくは「ArkheのCSS設計」ページをご参照ください。

４. 画像の上にボタン

お手本

やってみようスペース

ブロックレシピ

1. （「やってみようスペース」を削除）
2. カバーブロックの設定
   1. カバーブロックを追加
   2. メディアライブラリから画像を設定
   3. 設定サイドバーから、オーバーレイの色を選ぶ
   4. 配置を「全幅」に設定する
3. コンテンツの設定
   1. 「タイトルを入力…」と書かれた場所に画像ブロックを入力
   2. ボタンを入力し、スタイルを変更する
      • 画像は、ブロックツールバーから設定できるインライン画像。
      • Shift+Enterキーで改行してボタン用のテキストを入力

プラスワン

• ボタンだけを右下に配置する
  • ボタンの外枠を選択して「高度な設定」>「追加CSSクラス」にleft-bottom-buttonと入力する
    （ ※ CSSはあらかじめ設定しています。ディター側には反映されません。フロントページでご確認ください）
• ボタンの大枠にleft-bottom-buttonクラスを設定します。

例↓

５. ギャラリー

お手本

• 

• 

• 

• 

• 

• 

• 

• 

• 

やってみようスペース

ブロックレシピ

1. （「やってみようスペース」を削除）
2. ギャラリーブロックの設定
   1. ギャラリーブロックを追加
   2. メディアライブラリから画像を９枚設定
   3. 設定サイドバーから、カラムを３に設定する

プラスワン

• 写真と写真の隙間をなくす
  • ギャラリーブロックを選択して「高度な設定」>「追加CSSクラス」にtileと入力する
    （ ※ CSSはあらかじめ設定しています。ディター側には反映されません。フロントページでご確認ください）