​​岡山 WordPress Meetup 2023/04/22  「そのデザイン、どうやってWordPressに落とし込んでる？」ハンズオン手順書
​​（2023/04/24追記：こちらはOkayama WordPress Meetup #7 WordPress6.2をみんなで見てみよう！＋ブロックエディタワークショップ（https://www.meetup.com/ja-JP/okayama-wordpress-meetup/events/291655129/）で使用した資料の一部です）

​​レッツ、ハンズオン！

​​百聞は一見に如かず。ともかく手を動かして体験してみましょう。
​​上級者の方、手順書を見ながらご自身で進められる方はどんどん先へ進んでいただいて全く構いません。
​​
 
Instant Wordpress Sites - InstaWP
Create new WordPress sites within seconds with WP version, PHP version of your choice.
instawp.com
Instant Wordpress Sites - InstaWP • instawp.com
​​
​​個別の環境の違いでフォローアップが大変になることがあるので出来たらサラのWordPressをご用意ください。

​​1. Insta WPの用意

  1. ​​Insta WP（https://instawp.com/）からサイトを新規作成
  1. ​​右上の「Try For Free」ボタンをクリック
  1. ​​ 「Launch your site instantly」ボタン（サーモンピンク色）をクリック
  1. ​​「One click login to your site」ボタン（サーモンピンク色）をクリック
  • ​​※ 48時間持たせたい人はアカウント登録すると無料のままでも48時間まで延ばせます
  1. ​​日本語化
  1. ​​Settings > Site Language > 日本語　「Save Changes」
  1. ​​日付形式 も見慣れた形式にしておくと良いでしょう
  1. ​​翻訳ファイルの更新
  1. ​​トップページ確認（TT3）　まずは最新のデフォルトのブロックテーマで作っていきます
  1. ​​新規固定ページ作成

​​2. ベースのコンテンツを入れ込む

  1. ​​コンテンツ入れて組む
  1. ​​Figma（https://www.figma.com/file/CX5dzRBaP7DcUfVIdunKKL/%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=333-118&t=M9eIDlC84qf3JgjC-4）から
  • ​​必要なテキストを
  • ​​まず段落ブロックとしてコピー＆ペースト
  • ​​（Figmaのアカウントが必要です。無い人は無料なので作成してね）
​​<!-- コピペがうまく行かない人用 -->
​​コース一覧
​​基本コースA
​​お申込み状況:
​​受付中
​​日程：2023/5/9(火)、5/10(水)
​​時間：計12時間 6h x 2日
​​定員：20名
​​料金（一般）：25,000円
​​料金（会員）：21,000円
​​お問合せはこちらから
  1. ​​段落ブロックから見出しブロック、ボタンブロック等にブロックを変換し、配置を調整
  1. ​​カード部分のコンテンツにあたるブロック群をグループブロック化
  1. ​​2カラムブロック作成し、カードの見出しブロックとcで作ったグループブロックを、片方に入れる
  1. ​​ここまでのコード
​​
 
​​

​​3. カラーパレットの設定

  1. ​​エディターでカラーパレットを設定
  1. ​​カスタムカラーを使って、背景の色やテキストの色を自由に変更することもできます（実演）
  • ​​が、ブロックテーマの場合、同じ色を何度も使う場合はパレットに登録したほうが使い勝手が良いのでやってみましょう→左上のアイコンから管理画面に戻る（別タブで開く）
  1. ​​外観 > エディター
  1. ​​プレビュー部分をクリックしてサイトの編集モードに移動
  1. ​​右上のスタイルボタン（丸の半分が塗りつぶされているアイコン）からスタイル編集モードに移動
  1. ​​色 > パレット > カスタム の右の＋ボタンをクリック