ブログ

  • Windowsで Claude Code を「安全&ラクに」使う方法 ― サンドボックスが使えない問題を WSL2 で解決する

    [st_toc]

    この記事でやること(結論から)

    Claude Code は、AI がターミナル(黒い画面)の中で
    コードを書いたりコマンドを実行したりしてくれるツールです。
    とても便利なのですが、Windows でそのまま使うと
    「安全に自動化する」ことができない、という落とし穴があります。

    その原因が「サンドボックス」という安全機能。これが Windows では使えません。

    この記事では、

    • そもそもサンドボックスとは何で、
    • なぜ必要なのか なぜ Windows だと使えないのか
    • それを WSL2 という仕組みで解決し、
      「危険な操作は自動でブロック/安全な操作は確認なしでサクサク」

    という理想の状態を作る方法を、順番に手を動かしながら実装していきます。

    なぜ「サンドボックス」が必要なのか

    Claude Code の便利さと、裏側にあるリスク

    Claude Code に「テストを実行して、失敗していたら直して」とお願いすると、
    AI が自分でコマンドを打ち、ファイルを書き換えてくれます。まるで優秀なアシスタントです。

    でも、よく考えると少し怖い部分もあります。
    AI は、あなたのパソコンの中でコマンドを実行できるわけです。

    もし AI が勘違いして大事なファイルを消してしまったら? 
    あるいは、開いていたファイルの中に悪意ある指示が紛れ込んでいて、
    AI がそれに従ってしまったら?
    (これは「プロンプトインジェクション」と呼ばれる、実際に警戒されているリスクです。)

    「毎回確認」の煩わしさ

    このリスクへの一番シンプルな対策は、
    「AI が何かするたびに、人間が y/n(はい/いいえ)で許可する」ことです。
    実際、Claude Code は初期状態だとこの動きをします。

    ところがこれ、使っているとかなり煩わしいのです。
    「ファイルを読みます、いいですか?」
    「コマンドを実行します、いいですか?」
    と一つひとつ聞かれるので、自動化どころか、むしろ手間が増えます。

    そこで登場するのが「サンドボックス」

    サンドボックス(sandbox=砂場) とは、
    AI の作業を「決められた砂場の中だけ」に閉じ込める仕組みです。

    砂場の中では自由に遊ばせる代わりに、
    砂場の外(=大事なファイルや、外部への通信)には手を出せないよう、
    OS(基本ソフト)のレベルで境界を強制します。

    この「境界」があると何が嬉しいか。
    境界の外に出られないと保証されているので、いちいち確認しなくても安全なのです。

    つまり、

    • 砂場の中の操作 → 確認なしでサクサク実行(ラク)
    • 砂場の外に出ようとする操作 → ブロック(安全)

    という、「安全」と「ラク」を両立できます。
    これこそが、Claude Code を快適かつ安全に自動化するための鍵になります。

    Windows の壁 ― サンドボックスが使えない

    ここが本題です。
    この便利なサンドボックス、Windows でそのまま Claude Code を使うと利用できません。

    サンドボックスは、OS が持つ「隔離のための機能」を土台にしています。
    この機能は macOS と Linux には備わっているのですが、
    Windows のこの部分は Claude Code のサンドボックスに対応していないのです。

    「じゃあ確認をオフにすればいいのでは?」が危険な理由

    「確認が面倒なら、確認機能を全部オフにすればラクになるのでは?」と思うかもしれません。
    実際、Claude Code には権限確認をすべてスキップするオプションがあります。

    でも、これはとても危険です。
    サンドボックス(砂場の壁)が無い状態で確認までオフにすると、
    AI を止めるものが何も無くなります

    砂場の壁も無い、見張りも居ない。
    もし AI が暴走したり、悪意ある指示に乗ってしまったら、被害を防ぐ手立てがありません。

    整理すると、Windows でそのまま使う場合はこうなります。

    • 確認オン → 安全だが、毎回聞かれて煩わしい
    • 確認オフ → ラクだが、防御ゼロで危険

    「安全」と「ラク」を両立できない。 これが Windows の壁です。

    解決策は「WSL2」― Windows の中に Linux を住まわせる

    WSL2 とは何か

    この壁を越える答えが WSL2(Windows Subsystem for Linux 2) です。

    WSL2 は、ひとことで言うと
    Windows の中で、本物の Linux を動かせる仕組み」です。

    Microsoft が公式に用意しているもので、
    あなたの Windows パソコンの中に、小さな Linux(Ubuntu)の部屋を作るイメージです。

    前の章で「サンドボックスは Linux なら使える」と説明しました。

    つまり、Windows の中に Linux の部屋(WSL2)を作り、
    その中で Claude Code を動かせば、サンドボックスが使えるというわけです。

    Windows の壁を、Linux を持ち込むことで回避するのです。

    よくある不安①:PowerShell が使えなくなる?

    「Linux を入れたら、今まで使っていた PowerShell やコマンドプロンプトが使えなくなるのでは?」という不安があるかもしれません。

    大丈夫です。何も無くなりません。

    WSL2 は、今ある環境を置き換えるものではなく、
    「Linux の部屋を追加で開けるようになる」だけです。

    PowerShell はこれまで通り使えますし、
    むしろ「Linux の部屋を開ける入口」として活躍します。両者は仲良く共存します。

    よくある不安②:難しそう

    コマンドに不慣れだと身構えてしまいますが、
    やることはこの記事に書いてある通りにコピペしていくだけです。

    一つずつ説明しながら進むので、順番に手を動かせば必ず完成します。

    実装しよう(ここから手を動かします)

    ここからは実際の作業です。焦らず、上から一つずつ進めてください。

    【用語ミニ解説】
    ターミナル / シェル:文字でコマンドを打ってパソコンに指示する黒い画面のこと。
    プロンプト:コマンドを入力できる状態を示す、行頭の表示($ など)。
    コマンド:パソコンへの命令文。この記事の「コードブロック」に書かれているものをコピペします。

    前提の確認

    • Windows 10(バージョン21H2以降)または Windows 11。Home エディションでもOKです。
    • パソコンの「仮想化」機能が有効なこと
      (多くのPCは初期状態で有効です。もし後の手順でエラーが出たら、その時に確認します)。

    ステップ1:WSL2(Linuxの部屋)をインストールする

    まず PowerShell を 管理者として 開きます。
    スタートボタンを右クリック →
    「ターミナル(管理者)」または「Windows PowerShell(管理者)」を選びます。

    開いた画面に、次のコマンドをコピペして Enter を押します。

    wsl --install

    これで Ubuntu(Linux の一種)が自動でインストールされます。
    「再起動してください」と言われたら、パソコンを再起動してください。

    ▶ 再起動後に出てくる画面と対応

    再起動後、自動で続きが始まります。以下のような表示が順に出ます。

    • 「Linux 用 Windows サブシステムにようこそ」という案内画面
      → これは説明とリンクを表示しているだけ。何もせず閉じてOKです。
      実際に入力するのは、別のウィンドウで次のように聞いてくる方です。
    • Enter new UNIX username:(ユーザー名を決める)
      → Linux の部屋で使うあなたの名前を決めます。
      すべて半角の小文字で、先頭は英字にします(例:taro)。
      これは Windows のログイン名とは別で、自由に決められます。
    • New password:Retype new password:(パスワードを2回)
      → Linux の部屋用のパスワードを決めて、同じものを2回入力します。
      → 重要:パスワードを打っても画面には何も表示されません(* すら出ません)。
      これは Linux の仕様で、故障ではありません。
      気にせずそのまま入力して Enter を押してください。
      このパスワードは後で使うので必ずメモしておきます。
    • Would you like to opt-in to platform metrics collection (Y/n)?(情報提供のお願い)
      → Ubuntu の開発元への「匿名で使用状況を共有していいですか?」というアンケートです。
      Claude Code とは関係ないので、y でも n でもどちらでもOK。決めて Enter を押します。

    これで、名前@PC名:~$ のような表示が出れば、Linux の部屋の完成です。

    ステップ2:今「どこにいるか」を確認する

    Linux の部屋に入ると、行頭に 名前@PC名:...$ のような表示(プロンプト)が出ます。
    ここで一つ、初心者がつまずきやすい注意点があります。

    PowerShell から Linux の部屋を開くと、
    最初の居場所が /mnt/c/... で始まっていることがあります。

    taro@MyPC:/mnt/c/Users/taro$

    この /mnt/c は「Windows 側の C ドライブ」を指しています。
    実は、この場所で作業すると動作がとても遅くなるという落とし穴があります。
    そこで、次のコマンドで「Linux の部屋の自分の部屋(ホーム)」に移動します。

    cd ~

    行頭が :~$~ はチルダという記号)に変われば、正しい場所にいます。

    taro@MyPC:~$

    念のため、Linux の部屋にちゃんといるか確認しましょう。

    uname -a

    Linux ... WSL2 ... のような表示が返ってくれば、準備OKです。

    【なぜ場所が大事?】
    Windows 側(C:)と Linux の部屋(ホーム)は、実は別々の収納場所です。
    境界をまたいでファイルを触ると遅くなるので、作業は必ず Linux 側のホームで行うのが鉄則です。

    ステップ3:Claude Code を動かすための土台(Node.js)を入れる

    Claude Code は「Node.js」というソフトの上で動きます。まずはそれを入れます。

    最初に、Linux の部屋を最新の状態に整えます。
    次のコマンドを実行してください。
    パスワードを聞かれたら、ステップ1で決めたパスワードを入力します
    (画面に出なくても正常)。

    sudo apt update && sudo apt upgrade -y

    次に Node.js を入れます。
    ここは1行ずつ、順番に実行してください(まとめて貼ると失敗することがあります)。

    1行目:

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

    2行目(設定を反映させます。実行しても特に表示は出ません):

    source ~/.bashrc

    3行目(Node.js 本体を入れます。少し時間がかかります):

    nvm install --lts

    入ったか確認します。

    node -v
    npm -v

    どちらも v22.x.x のような数字が返ってくれば成功です。

    【もし nvm: command not found と出たら】
    2行目の source ~/.bashrc を実行し忘れているか、順番が前後した可能性があります。
    もう一度 1行目 → 2行目 → 3行目 の順で実行してください。

    ステップ4:Claude Code 本体をインストールする

    いよいよ Claude Code を入れます。

    npm install -g @anthropic-ai/claude-code

    インストールが終わったら、ちゃんと入ったか確認します。

    claude --version

    バージョン番号(例:2.x.x)が表示されれば成功です。

    allow-scripts という警告が出たら】
    インストール中に npm warn allow-scripts ... という黄色い警告が出ることがあります。
    まず claude --version を試してください。バージョンが出るなら問題なし、無視でOKです。
    もし command not found になった場合だけ、次のコマンドで入れ直します。

    npm install -g --allow-scripts=@anthropic-ai/claude-code @anthropic-ai/claude-code

    また New major version of npm available!(npmの新版のお知らせ)も
    出ることがありますが、今は無視でOKです。

    ステップ5:Claude Code を起動してログインする

    準備ができたので、起動します。

    cd ~
    claude

    初回はいくつか設定画面が順に出ます。落ち着いて対応しましょう。

    テーマ(見た目)の選択 Choose the text style... と出たら、好みの配色を選んで Enter。
    後で変えられるので、そのまま Dark mode で Enter でOK。

    ② ログイン方法の選択 Select login method: と出たら、選択肢が3つ出ます。
    1. Claude account with subscription(Pro, Max, Team, or Enterprise)を選んでください。
    これは、すでに持っている Claude のアカウント(Pro プランなど)でログインする方法です。
    API キーなどは必要ありません。

    ③ ブラウザでログイン(ここが少し戸惑うポイント)
    Linux の部屋からはブラウザが自動で開かないため、次のような表示が出ます。

    Browser didn't open? Use the url below to sign in (c to copy)
    https://claude.com/...(長いURL)

    対応はこうです。

    1. ターミナルで c キーを押すと、この URL がコピーされます。
    2. Windows のブラウザ(Edge や Chrome)を開き、
      アドレス欄に貼り付けて開きます。
    3. いつもの Claude アカウントでログインし、
      「アクセスを許可しますか」といった画面が出たら承認します。
    4. すると**認証コード(文字列)**が表示されるので、それをコピーします。
    5. ターミナルに戻り、Paste code here if prompted > の部分に貼り付けて Enter

    表示される URL の中に create_api_key という文字が含まれていますが、
    これはログインの標準的な手続きの一部で、勝手に課金される・キーが発行されるという意味ではありません
    安心して進めてください。

    ④ セキュリティの注意
    → Enter Claude can make mistakes...
    (AIは間違えることがある、信頼できるコードだけで使う)という注意が出ます。読んで Enter。

    ⑤ このフォルダを信頼するか
    → Yes Is this a project you created or one you trust? と聞かれます。
    今いるのは自分の部屋(ホーム)なので、1. Yes, I trust this folder を選びます

    これでチャットの入力欄が出れば、起動成功です。
    試しに 今日の日付を教えて と打ってみましょう。
    答えが返ってくれば、Claude Code は無事に動いています。

    この時点では、まだ「安全&ラク」の設定は入っていません。
    コマンドのたびに確認が入る状態です。
    次のステップで、いよいよ本題の設定を入れます。

    ステップ6:危険な操作を自動でブロックする設定を入れる

    Claude Code には、
    「この操作は許可」「この操作は禁止」というルールを書く設定ファイル(settings.json)があります。
    ここに、秘密の情報や危険なコマンドをブロックするルールを入れます。

    まず、今の設定を確認します。Claude Code の入力欄に、そのまま日本語で頼めます。

    ~/.claude/settings.json の中身をそのまま表示して。編集はしないで。

    たいてい、見た目の設定(テーマなど)だけが入っています。
    ここに、下記のルールを追記した完全版に書き換えます。
    あなたの既存の設定(theme など)は残す形にしてください。

    {
      "theme": "dark",
      "agentPushNotifEnabled": true,
      "tui": "fullscreen",
      "permissions": {
        "allow": [
          "Bash(npm run *)",
          "Bash(npm test *)",
          "Bash(git status)",
          "Bash(git diff *)",
          "Bash(git log *)",
          "Bash(git add *)",
          "Bash(git commit *)",
          "Bash(ls *)",
          "Bash(grep *)"
        ],
        "deny": [
          "Bash(rm -rf *)",
          "Bash(rm -fr *)",
          "Bash(sudo *)",
          "Bash(git reset --hard*)",
          "Bash(git push --force*)",
          "Bash(git push *)",
          "Read(~/.ssh/**)",
          "Read(~/.gnupg/**)",
          "Read(~/.aws/**)",
          "Read(~/.npmrc)",
          "Read(~/.git-credentials)",
          "Read(~/.config/gh/**)",
          "Read(~/.claude/.env)",
          "Edit(~/.bashrc)",
          "Bash(curl *)",
          "Bash(wget *)",
          "Bash(ssh *)",
          "Read(*.env)",
          "Read(.env.*)",
          "Bash(cat *env*)",
          "Bash(printenv *)",
          "Bash(env)"
        ]
      },
      "enableAllProjectMcpServers": false
    }
    • allow(許可リスト):テストの実行や git の状態確認など、安全でよく使う操作。
      確認なしで通します。
    • deny(禁止リスト)rm -rf(ファイル大量削除)、sudo(管理者権限)、
      パスワードやキーが入ったファイルの読み取りなど。
      AI に絶対やらせたくない操作を並べています。

    書き換えは、Claude Code に頼むのが簡単です。
    入力欄に「~/.claude/settings.json を次の内容に書き換えて(既存のキーは残して)」と伝え、
    先ほどのコード内容を貼ります。

    途中で Use skill "update-config"? と聞かれたら、1. Yes を選んでください
    (設定ファイルを正しく編集するための専用機能です)。

    書き換えたら、壊れていないか確認します。
    一度 Claude Code を終了(/exit)して、次のコマンドを実行してください。

    python3 -m json.tool ~/.claude/settings.json > /dev/null && echo OK_JSON || echo NG_JSON

    OK_JSON と出れば成功です。

    ステップ7:いよいよサンドボックスを有効にする

    この記事の核心、サンドボックスを有効にします。
    まず、サンドボックスに必要な部品を2つ入れます(Claude Code の外、通常の画面で。1行ずつ実行)。

    sudo apt-get update
    sudo apt-get install -y bubblewrap socat

    次に Claude Code を起動し、入力欄で次のコマンドを打ちます。

    /sandbox

    すると、次のような選択画面が出ます。

    Configure mode
      1. Sandbox BashTool, with auto-allow
      2. Sandbox BashTool, with regular permissions
      3. No Sandbox

    1. Sandbox BashTool, with auto-allow を選んでください。
    これが、この記事でずっと目指してきた「砂場の中なら確認なしで動かす」モードです。

    Sandbox enabled with auto-allow for bash commands と表示されれば、完成です。

    ちゃんと効いているか確かめる

    設定が本当に機能しているか、3つのテストで確認しましょう。
    Claude Code の入力欄で1つずつ試します。

    テスト1:秘密情報を守れているか

    ~/.claude/.env の中身を見せて

    → 「これは認証情報を含むので表示しません」といった趣旨で断られれば成功
    AI が秘密を漏らさないよう、ちゃんとブロックできています。

    テスト2:SSHの鍵を守れているか

    ~/.ssh/id_rsa を読んで

    → こちらも断られれば成功(まだ鍵を作っていなければ「ファイルが無い」でもOK)。

    テスト3:普通の操作はサクサク動くか

    → 確認を挟まず、すぐ答えが返れば成功

    テスト1・2でブロック、テスト3ですんなり動く。
    これで、「危険な操作は自動で止まる/安全な操作は確認なしで快適」という、
    Windows では難しかった状態を実現できました。

    まとめ

    この記事でやったことを振り返ります。

    • Claude Code を安全かつ快適に使う鍵は「サンドボックス」だが、
      Windows ではそのまま使えない
    • 確認オフで無理にラクにすると「防御ゼロ」になり危険。
      「安全」と「ラク」を両立できないのが Windows の壁。
    • 解決策は、Windows の中に Linux の部屋(WSL2)を作り、
      その中で Claude Code を動かすこと。
      これでサンドボックスが使えるようになる。
    • PowerShell は無くならず、共存する。
      むしろ Linux の部屋への「入口」として活きる。
    • 実際に、権限ルール(deny/allow)+サンドボックスを入れることで、
      危険な操作は自動ブロック/安全な操作は確認なしで快適、という理想の環境が作れた。

    コマンドに不慣れでも、上から一つずつコピペしていけば必ずたどり着けます。
    Windows だからと諦めず、ぜひ「安全でラクな Claude Code 環境」を手に入れてください。

    補足:もっと先へ(自動化について)
    ここまでで「快適な対話環境」は完成です。
    さらに一歩進んで、決まった作業を無人で自動実行する(例:毎晩自動でテストを回す)ことも、
    この WSL2 環境の上でなら安全に組めます。
    その場合は、claude -p というコマンドで対話画面を開かずに実行し、
    Windows のタスクスケジューラから呼び出す、といった構成になります。
    ここは対話に慣れてからの発展テーマとして、別途挑戦してみてください。

  • 【SWELLカスタマイズ】スマホ用の固定フッターのカスタマイズ方法

    【SWELLカスタマイズ】スマホ用の固定フッターのカスタマイズ方法

    今回は、WordPressテーマ【SWELL】で、固定フッターのカスタマイズ方法をご紹介いたします。

    [st-kaiwa1 html_class=”wp-block-st-blocks-st-kaiwa”]

    スマホ表示時に画面下に固定で表示されるフッターは、どうやったら実装することができるんだろう

    [/st-kaiwa1] [st-kaiwa2 r html_class=”wp-block-st-blocks-st-kaiwa”]

    SWELLの公式サイトで紹介されているアイコン以外のアイコンを使用したい時は、どうやって実装するんだろう

    [/st-kaiwa2]

    このような実装への悩みを持った方のために、SWELLを使用したサイト制作での実装を行なってみます。

    また今回のサイト制作の題材として、以下の記事を参考にサイト制作を行なっています。
    サイトを最初から制作してみたいという人はそちらから始めてみてください。

    [st_toc]

    実装の完成イメージ

    本記事の内容を最後まで進めると、下記画像の赤枠部分の固定フッターを実装することができます。

    実際のデモサイトは、こちらから確認することができます。

    実装イメージ

    それでは実際に実装していきましょう。

    スマホ用の固定フッターの設定

    固定フッターメニューを作成する

    まずはWordPressの管理画面から「外観」→「メニュー」を選択して、「新しいメニューを作成しましょう」の部分をクリックします。

    次に、メニュー名に「固定フッター」などの名前をつけます。
    またメニュー設定内のメニューの位置は、「固定フッター(SP)」にチェックを入れます。

    メニュー設定ができたので、メニューを追加していきます。

    左側のメニュー項目を追加から「カスタムリンク」を選択して、
    「URL」「リンク文字列」を以下を参考に入力し、メニューに追加をクリックします。

    URLリンク文字列
    https://swell-theme.com/SWELL
    tel:0120000000TEL
    https://line.me/ja/LINE
    https://www.google.co.jp/maps/Google Maps

    メニューをすべて追加することができたら、「メニューを保存」をクリックして
    実装できているか確認してみましょう。

    固定フッターを実装することはできましたが、実装イメージとは違うスタイルになっています。

    【実装イメージと異なる点】
     ・アイコンが表示されていない
     ・テキストが表示されてしまっている

    それでは実装イメージと異なる点を、ひとつずつ解消していきましょう。

    アイコンを表示させる

    アイコンが表示されていなかったので、アイコンを表示していきます。

    SWELLでは、一部のアイコンについてはフォントファイルとして読み込まれています。
    SWELLで使えるアイコンについては、こちらのサイトで確認することができます。

    一覧の中にある、「SWELL」と「TEL」のアイコンについて設定していきます。

    管理画面の「外観」→「メニュー」から、
    先ほど作成した「固定フッター」を編集するメニューとして選択します。

    次に管理画面の右上にある、「表示オプションタブ」を開き「説明」にチェックをいれます。

    メニュー内に作成されている「SWELL」のカスタムリンクを開きます。

    カスタムリンクの設定項目の「説明」の部分に、
    先ほど紹介したサイトの「アイコンとクラス名一覧」に書かれているクラス名(icon-swell)を設定していきます。

    「TEL」についても、同様に設定(icon-phone)をしていきましょう。

    アイコンのクラス名が設定できたら、「メニューを保存」をクリックしてアイコンが実装できているか確認してみましょう。

    アイコンを実装することが確認できました。

    SWELLの標準で使用できないアイコンを表示させる(Font Awesome)

    先ほどSWELL標準のアイコンを設定していきましたが、一覧の中に使いたいアイコンがない場合もあるかと思います。

    その際に利用したいのが「Font Awesome」というサービスです。

    それではSWELLで「Font Awesome」を使うための設定をしていきましょう。

    管理画面から「SWELL設定」→「Font Awesome」のタブを開き、「CSSで読み込む」「v6」を選択し「変更を保存」をクリックします。

    「Font Awesome」を使用する設定ができたら、「Font Awesome」のサイトを開きます。

    今回は、「TEL」のアイコンを別のものに変更していきたいと思います。

    「Font Awesome」サイトのトップにある、虫めがねのアイコンをクリックします。
    検索欄が表示されるかと思いますので、その中に「tel」と入力します。

    「tel」に関連するアイコンが検索欄の下に表示されます。
    【PRO】と書かれているアイコンは有料版のため課金しないと使用できないため、それ以外のものから選びましょう。

    今回は「phone-volume」のアイコンを選択します。

    アイコンの詳細画面が表示されるので、「HTML」のコードが書かれている部分をクリックします。
    コードをクリックするとまるまるコピーされますが、使用するのはクラス名の【fa-solid fa-phone-volume】の部分のみになります。

    コードがコピーできたら、固定ヘッダーのメニューを開きます。
    カスタムリンクの「TEL」を選択して、「説明」の部分に先ほどコピーしたコードをペーストします。

    必要な部分はコード内のクラス名の部分だけなので、不要なものは削除します。

    クラス名の部分の設定ができたら、「メニューを保存」をクリックしてアイコンが実装できているか確認してみましょう。

    アイコンを実装することが確認できました。

    なお「Font Awesome」の特徴として、設定したアイコンに対してアニメーションや回転などのスタイリングをすることができます。
    それでは先ほど設定した、「phone-volume」アイコンにスタイリングを行っていきましょう。

    「phone-volume」アイコンの詳細画面を開き、アイコンの左下にある「Show Styling Tools」をクリックします。

    「Show Styling Tools」をクリックすると、スタイルの設定画面が開きます。
    ここで設定できるのは、「色(Color)」「サイズ(Size)」「回転(Rotate)」「反転(Flip)」になります。

    設定したいスタイルを選択すると、内容に応じてHTMLのコードが変わるのでメニューに設定したクラス名も変更することによりスタイリングすることが可能になります。

    ただ細かい指定はできないため、この後に紹介するCSSで設定する方法で実装していきましょう。

    Font Awesome のアイコンをCSSで設定する(色、サイズ)

    まずは、「色(Color)」「サイズ(Size)」の設定をしてみましょう。

    それでは管理画面から「外観」→「カスタマイズ」→「追加CSS」を開きます。
    固定フッターは、スマホ表示しか表示されないため画面左下のスマホ表示に変更しておきます。

    画面左側にあるコードの入力欄に、以下のコードを入力していきます。

    /* TELアイコンのカスタマイズ */
    .fa-phone-volume {
      color: orange !important;
      font-size: 30px !important;
    }

    クラス名に「.fa-phone-volume」を指定することにより、「phone-volume」アイコンにのみスタイルを指定することができます。

    指定したスタイリングで表示されているのが、確認できるかと思います。
    実装できたのが確認できたら、設定したコードは削除しておきましょう。

    Font Awesome のアイコンをCSSで設定する(反転)

    次に「反転(Flip)」の設定を行っていきます。

    コードの入力欄に、以下のコードを入力していきます。

    /* TELアイコンのカスタマイズ */
    .fa-phone-volume {
      transform: scale(-1, 1);
    }

    左右反転させたい場合は、「scale(-1,1)」とx軸の値に「-1」を設定すれば左右反転することができます。
    また上下反転させたい場合は、「scale(1,-1)」とy軸の値に「-1」を設定すれば上下反転することができます。

    指定したスタイリングで表示されているのが、確認できるかと思います。
    実装できたのが確認できたら、設定したコードは削除しておきましょう。

    Font Awesome のアイコンをCSSで設定する(回転)

    次に「回転(Rotate)」の設定を行っていきます。

    コードの入力欄に、以下のコードを入力していきます。

    /* TELアイコンのカスタマイズ */
    .fa-phone-volume {
      transform: rotate(-45deg);
    }

    「transform: rotate();」を指定することにより対象のものを回転させることができ、
    右回転させたい時はプラスの値を、左回転させたい時はマイナスの値を「単位:deg」と一緒に指定します。

    指定したスタイリングで表示されているのが、確認できるかと思います。

    Font Awesome のアイコンをCSSで設定する(アニメーション)

    Font Awesome のアイコンは、アニメーションを設定することができるので実装していきましょう。

    「phone-volume」アイコンの詳細画面を開き、アイコンの左下にある「Show Animation options」をクリックします。

    「Show Animation options」をクリックすると、アニメーションの設定画面が開きます。

    設定したいアニメーションを選択すると、内容に応じてクラス名が追加されるので
    そのクラス名を「説明」の部分に追加することにより、アニメーションを実装することができます。

    それでは実装したいアニメーションを選択し、出力されたクラス名を「説明」の部分に追加して見ましょう。

    アニメーションの設定と、「回転(Rotate)」「反転(Flip)」の設定は同時に行なうことはできません。

    アニメーションの実装が確認できたら、「説明」のクラス名は元に戻しておきましょう。

    アイコン画像を表示させる(好きなアイコンを表示)

    SWELLの標準のアイコンと、Font Awesome のアイコンを表示させる方法をご紹介しましたが、それ以外のアイコン画像を表示させたい場合もあるかと思います。

    それでは、アイコン画像を表示させる方法をご紹介します。

    アイコン画像をダウンロードする

    まずは、実装するアイコン画像をダウンロードします。

    アイコンのダウンロード

    LINEアイコン ・・・ https://line.me/ja/logo
    GoogleMapsアイコン ・・・ Icons by Icons8

    アイコンをダウンロードできたら、管理画面の「メディア」にアップロードしておきます。

    アイコンを表示させるメニューに、クラス名を付与する

    まずは、先ほどのアイコンはどのように表示されていたのか確認しておきます。

    検証ツールでアイコン部分を調べると、iタグの疑似要素(::before)として表示されているのが分かります。
    同じように実装できるように、メニューのカスタムリンクにクラス名を付与していきましょう。

    「LINE」のカスタムリンクを開いたら、「説明」の部分に【 line-icon 】と入力します。

    「CSS calss(オプション)」の方にクラス名を設定してしまうと、違う箇所にクラス名が付与されるので注意しましょう。

    「Google Maps」の方には、【 maps-icon 】と入力して「メニューを保存」をクリックしておきます。

    次にコードを追加していきます、「外観」→「カスタマイズ」→「追加CSS」と開き
    以下のコードを追加していきます。

    /* オリジナル画像のカスタマイズ */
    #fix_bottom_menu .menu-item i {
      font-size: 36px;
      height: 36px;
      line-height: 36px;
    }
    
    .line-icon::before,
    .maps-icon::before {
      content: "";
      display: inline-block;
      width: 36px;
      height: 36px;
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .line-icon::before {
      background-image: url(ここに、メディアの画像URLをコピペする);
    }
    
    .maps-icon::before {
      background-image: url(ここに、メディアの画像URLをコピペする);
    }

    コードを追加CSSに記述することができたら、【ここに、メディアの画像URLをコピペする】の部分の実装をします。

    「メディア」を開き、先ほどアップロードした画像URLを取得します。
    「URLをクリップボードにコピー」をクリックすると取得できます。

    画像URLを取得できたら、追加CSSの【ここに、メディアの画像URLをコピペする】の部分にペーストします。

    ポイント

    【background-imageに設定した、画像URLについて】

    Localの環境からサーバーへサイトをアップさせた際などの、
    サイトURLに変更が発生する場合に画像が表示されなくなることがあります。

    これは画像URLに、サイトURL部分を含んで記述(絶対パス)されてしまっているためです。
    http://demo.local/wp-content/uploads/2024/08/line-icon.png

    対応としては、サイトURL部分を含まない書き方(ルート相対パス)があります。
    /wp-content/uploads/2024/08/line-icon.png

    これですべてのアイコンを表示することができました!

    テキスト(ナビゲーションラベル)を非表示にする

    それでは、不要となっているテキストを非表示にしていきます。

    現在メニューに表示されているテキストは、
    カスタムリンク内の「ナビゲーションラベル」部分にあたりますが、「ナビゲーションラベル」を削除してしまうとカスタムリンク自体が削除されてしまいます。

    そのためテキストの非表示処理は、追加CSSに以下のコードを記述します。

    /* 固定フッターのラベル非表示処理 */
    #fix_bottom_menu span {
      display: none;
    }

    不要なテキストを非表示にすることができました!

    まとめ

    「スマホ用の固定フッターのカスタマイズ方法」を今回はご紹介しました。

    このようなカスタマイズの実装方法を、これからもご紹介していこうと思っていますので気になる記事がありましたら読んでみてください!

  • 【SnowMonkeyカスタマイズ】お問い合わせフォームの作成方法 -Snow Monkey Forms-

    【SnowMonkeyカスタマイズ】お問い合わせフォームの作成方法 -Snow Monkey Forms-

    今回はホームページ制作で実装する「お問い合わせフォームの作成方法」をご紹介いたします。

    [st-kaiwa1 html_class=”wp-block-st-blocks-st-kaiwa”]

    サイトを作成することはできたけど
    お客様と直接つながることのできる「お問い合わせフォーム」を
    簡単に実装したいんだよな~

    [/st-kaiwa1] [st-kaiwa2 r html_class=”wp-block-st-blocks-st-kaiwa”]

    コードを書くのが苦手だから
    Contact Form 7 だとカスタマイズができないな~

    [/st-kaiwa2]

    このような実装への悩みを持った方のために、SnowMonkeyテーマを使用したサイト制作での実装を行なってみます。
    使用環境としては、以下のものとなります。

    テーマ
     SnowMonkey

    プラグイン
     SnowMonkeyBlocks
     SnowMonkeyEditor
     SnowMonkeyForms

    また今回のサイト制作の題材として、以下の記事を参考にサイト制作を行なっています。
    サイトを最初から制作してみたいという人はそちらから始めてみてください。

    [st_toc]

    Snow Monkey Forms をインストールし、フォームを作成する

    Snow Monkey Formsとは、「SnowMonkey」の開発者であるキタジマさんがSnowMonkey用に開発したお問い合わせフォームを作成することができるプラグインです。

    特徴としては、

    1.ブロックエディタ上でフォームをイメージしながら作成することができる
    2.Contact Form 7 のようなコードでの知識があまり必要とされないため初心者でも作成しやすい
    3.送信前の入力確認画面や、送信完了ページも作成することができる
    4.SnowMonkey以外のテーマでも、問題なく動作することができる

    他にもありますが、上記の特徴だけでも使いやすいプラグインであることが想像できるかと思います。

    Snow Monkey Forms導入

    それでは実際に「Snow Monkey Forms」を導入していきます。

    管理画面の「プラグイン」から「新規プラグインを追加」をクリックし、プラグインの検索に「Snow Monkey Forms」と入力します。

    「Snow Monkey Forms」が表示されたら「今すぐインストール」をクリックし、「有効化」をクリックします。

    フォーム部品の追加をする

    「Snow Monkey Forms」が有効化できたら、管理画面から「Snow Monkey Forms」を選択し「新規投稿を追加」をクリックします。

    フォームの作成画面が表示されるので、今回は以下のサイトを参考にお問い合わせフォームを作成していきます。

    お問い合せフォーム参考サイト、こちらをクリック

    タイトルの入力

    まずは、タイトルを追加の部分に「お問い合わせ」と入力していきます。

    デフォルトで設定されているフォーム部品を削除する

    次にフォーム部品を設定していきます、今回作成していくのは以下のフォーム部品となります。
    カッコ内に書かれているものは、「Snow Monkey Forms」のブロック名になります。

    ・お名前『テキスト』
    ・メールアドレス『email』
    ・電話番号『Tel』
    ・都道府県『セレクトボックス』
    ・住所『テキスト』
    ・お問い合わせの項目『ラジオボタン』
    ・添付ファイル『添付ファイル』
    ・メッセージ入力欄『テキストエリア』
    ・個人情報取り扱い同意『チェックボックス』

    それではフォームを作成していきますが、デフォルトで設定されているものは削除しておきましょう。

    画面上部にあるアイコンをクリックして、リストビューを表示させます。
    リスト内にある、「フォーム」を選択し「項目」をすべて選択して「削除」をします。

    お名前『テキスト』の入力欄を追加する

    フォームの入力画面の中にクリックすると、「項目を追加」が現れるのでクリックします。

    入力欄が表示されるので、ラベルの部分に「お名前」と入力します。
    ラベルが入力できたら、「ブロックを追加」をクリックします。

    追加できるブロックの一部が表示されるので、「テキスト」があればクリックします。
    「テキスト」がなければ「すべて表示」をクリックして、「SNOW MONKEY FORMS」にある「テキスト」をクリックします。

    このような感じになっていればOKです!

    メールアドレス『email』の入力欄を追加する

    次に、メールアドレスの入力欄を追加します。

    フォームの「入力画面」の近くをクリックすると、「項目を追加」が表示されるのでクリックします。
    先ほど入力した「お名前」の近くをクリックすると、「ブロックを追加」が表示されてしまうのでうまく選択できない場合はリストビューからフォームをクリックするようにしましょう。

    ラベルに「メールアドレス」と入力します、入力できたら「ブロックを追加」をクリックします。
    ブロックのリストに「email」があればクリックします、ない場合はブロック一覧から追加します。

    このような感じになっていればOKです!
    見た目は「テキスト」と同じですが、Email形式以外のものが入力されるとエラーになるようになっています。

    電話番号『Tel』の入力欄を追加する

    次に電話番号の入力欄を追加します。
    先ほどと同様にフォームの「入力画面」から「項目を追加」をクリックします。

    ラベルに「電話番号」と入力します、入力できたら「ブロックを追加」をクリックします。
    ブロックのリストに「Tel」があればクリックします、ない場合はブロック一覧から追加します。

    このような感じになっていればOKです!
    「email」と同様に、電話番号形式以外のものが入力されるとエラーになるようになっています。

    都道府県『セレクトボックス』の入力欄を追加する

    次に住所の入力欄を追加します。
    先程と同様にフォームの「入力画面」から「項目を追加」をクリックします。

    ラベルに「都道府県」と入力します、入力できたら「ブロックを追加」をクリックします。
    ブロックのリストに「セレクトボックス」があればクリックします、ない場合はブロック一覧から追加します。

    セレクトボックスとは、いくつかの選択肢から一つを選択する時に使われるフォーム部品です。
    セレクトボックスは縦のリスト(ドロップダウンリスト)として表示され、クリックやタッチによって選択肢が展開されます。

    それでは、セレクトボックスの選択肢を設定していきます。
    セレクトボックスを選択した状態で、右側メニューの「OPTIONS」に値を入力していきます。

    まず「OPTIONS」に、予め入力されている入力例を削除しておきます。
    次に、選択肢として設定したい都道府県を入力していきます。

    都道府県すべてを入力していくのは大変なので、
    こちらのファイル を「OPTIONS」の中にコピペしましょう。
    手入力で行なう場合は、選択肢を入力するごとに改行していってください。

    このような感じになっていればOKです!

    住所『テキスト』の入力欄を追加する

    次に住所の入力欄を追加します。
    お名前の「テキスト」と同じ手順で追加してください。

    このような感じになっていればOKです!

    お問い合わせの項目『ラジオボタン』の入力欄を追加する

    次に、お問い合わせの項目のラジオボタンを追加します。
    先程と同様にフォームの「入力画面」から「項目を追加」をクリックします。

    ラベルに「お問い合わせの項目」と入力します、入力できたら「ブロックを追加」をクリックします。
    ブロックのリストに「ラジオボタン」があればクリックします、ない場合はブロック一覧から追加します。

    ラジオボタンとは、いくつかの選択肢から一つを選択する時に使われるフォーム部品です。
    ラジオボタンは小さな丸い印で表示されるのが一般的で、クリックやタッチによって選択されると内部中央に黒丸が現れます。

    それでは、ラジオボタンの選択肢を設定していきます。
    ラジオボタンを選択した状態で、右側メニューの「OPTIONS」に値を入力していきます。

    まず「OPTIONS」に、予め入力されている入力例を削除しておきます。
    次に、選択肢として設定したい項目を「OPTIONS」に入力していきます。

    「お問い合わせ」「来店予約」「採用受付」と項目ごとに改行して入力します。

    参考サイトに合わせて、ラジオボタンを横並びにしていきます。
    「ブロック設定」の「方向」を、「横」に変更します。

    このような感じになっていればOKです!

    添付ファイル『添付ファイル』の入力欄を追加する

    次に添付ファイルの選択ボタンを追加します。
    先ほどと同様にフォームの「入力画面」から「項目を追加」をクリックします。

    ラベルに「添付ファイル」と入力します、入力できたら「ブロックを追加」をクリックします。
    ブロックのリストに「ファイル」があればクリックします、ない場合はブロック一覧から追加します。

    ちなみに最大容量はサーバーにもよると思いますが、
    添付するファイルが大きすぎるとアップロードができないことがあります。
    その場合を考慮して、データ便ギガファイル便などの利用案内とURL入力欄を設置しておきましょう。

    「ブロックを追加」をクリックし、検索欄に「段落」と入力して表示された「段落ブロック」をクリックします。

    追加した段落ブロックに、以下のような添付ファイルの説明文を設定します。
    「データサイズが3MBを超える場合は、ギガファイル便などのファイル転送サービスをご利用のください。」
    「ギガファイル便」の部分にリンクを付けるのも良いと思います。

    「段落ブロック」の下に、URLの入力欄を追加します。
    「ブロックを追加」をクリックし、「URL」のブロックを追加します。

    追加した「URL」ブロックは、「テキスト」ブロックと見た目が同じためプレースホルダーを設定します。
    右側メニューの「PLACEHOLDER」に、「ファイル転送サービスのURLを、こちらに入力してください」と設定します。

    このような感じになっていればOKです!

    メッセージ入力欄『テキストエリア』の入力欄を追加する

    次に、メッセージ入力欄を追加します。
    先ほどと同様にフォームの「入力画面」から「項目を追加」をクリックします。

    ラベルに「メッセージ入力欄」と入力します、入力できたら「ブロックを追加」をクリックします。
    ブロックのリストに「テキストエリア」があればクリックします、ない場合はブロック一覧から追加します。

    テキストエリアとは、複数行のテキストの自由入力をする時に使われるフォーム部品です。
    テキストとの違いは、1行での入力か複数行での入力かという点でそれ以外に大きな違いはありません。

    このような感じになっていればOKです!

    個人情報取り扱い同意『チェックボックス』を追加する

    次に、個人情報取り扱い同意チェックを追加します。
    先ほどと同様にフォームの「入力画面」から「項目を追加」をクリックします。

    ラベルの入力はせずに、「ブロックを選択するには・・・」の部分に以下の文を入力します。

    「個人情報保護方針」をご確認いただき、同意のうえ送信してください。

    「個人情報保護方針」があるようでしたら、リンクを付与して見れるようにしておきましょう。

    入力ができたら「ブロックを追加」をクリックします。
    ブロックのリストに「チェックボックス」があればクリックします、ない場合はブロック一覧から追加します。

    チェックボックスとは、いくつかの選択肢から回答を選択する時に使われるフォーム部品です。
    チェックボックスではラジオボタンと違い複数の回答を選択できます。

    それでは、チェックボックスの設定をしていきます。
    チェックボックスを選択した状態で、右側メニューに以下の設定を行っていきます。

    ・バリデーション・・・「必須」に変更
    ・OPTIONS・・・「個人情報保護方針に同意する」と入力

    このような感じになっていればOKです!

    フォーム部品の設定をする

    入力画面に各フォーム部品を追加することができたので、それぞれの設定を行っていきます。

    設定していく項目としては、以下のものになります。

    ・必須か、任意か『バリデーション』を設定
    ・各フォーム部品のデータ属性『name』を設定
    ・「必須」項目には明示を付与する

    必須か、任意か『バリデーション』の設定

    それぞれのフォーム部品の入力項目について、入力を「必須」にしたいものがあるかと思います。
    「必須」にしたいものについては設定が必要となりますので、設定していきます。

    必須にしたいフォーム部品を選択して、右側メニューにある「バリデーション」を「必須」に変更します。
    今回は、「お名前」「メールアドレス」「お問い合わせ項目」「個人情報取り扱い同意(設定済み)」に設定していきます。

    これの設定により、必須にした項目については入力されずに送信しようとするとエラーが出るようになります。

    必須の項目に明示をつける

    必須入力項目について、バリデーションで必須の設定をすることができました。
    しかしフォーム上でどの項目が必須の項目か分からないので、明示を付けていきましょう。

    今回は、「お名前」のラベルに必須の明示を付けていきます。
    まず、「お名前」のラベルをクリックしてカーソルを最後に持っていきます。

    ラベルとの間にスペースを追加して、「必須」と入力します。

    入力した「必須」を範囲指定し、「バッジ」を選択して「Vivid red」をクリックします。

    作成した「バッジ」をコピーして、「メールアドレス」と「お問い合わせ項目」にも設定していきます。
    このような感じになっていればOKです!

    各フォーム部品のデータ属性『name』を設定

    各フォーム部品に入力された内容は、データベースに保存されたり自動返信メールなどに出力されます。

    その際にデータをやり取りする際の紐づけとして、各フォーム部品に属性として「名前」を付けます。
    それでは各フォーム部品に、「名前」を付けていきましょう。

    名前を付けたいフォーム部品を選択して、右側メニューにある「属性」の「name」に半角英数で以下の様に設定していきます。

    ・お名前 ・・・ name
    ・メールアドレス ・・・ email
    ・電話番号 ・・・ tel
    ・都道府県 ・・・ address1
    ・住所 ・・・ addres2
    ・お問い合わせの項目 ・・・ inquiry
    ・添付ファイル ・・・ file

    ・添付ファイル(URL) ・・・ url
    ・メッセージ入力欄 ・・・ message
    ・個人情報取り扱い同意 ・・・ agree

    フォーム設定を行なう

    フォーム部品の設置ができましたので、フォーム設定を行っていきます。
    設定していく内容は、以下のものになります。

    ・確認画面の設定
    ・プログレストラッカーの表示設定
    ・フォームのスタイル設定
    ・ボタンテキストの設定

    入力画面の「フォーム設定を開く」をクリックします。

    入力確認画面の設定

    確認画面の設定はONにすると、フォーム送信前に確認ページを表示させることができます。
    「確認画面を使用する」はONに設定しておきます。

    プログレストラッカーの表示設定

    プログレストラッカーは、入力から送信完了までの流れの中でどの段階にいるかを表示することができます。
    「プログレストラッカーを使用する」はONに設定しておきます。

    フォームのスタイル設定

    フォームスタイルの設定は、フォームのデザインを4種類の中から選択することができます。
    今回は、「Simple table」を選択します。

    ボタンテキストの設定

    ボタンの設定では、送信ボタンのラベルを設定することができます。
    「確認画面の設定」をONにすると、「確認ボタン」「戻るボタン」「送信ボタン」のラベルを設定できます。

    今回は、以下の様に設定します。

    ・確認ボタンのラベル ・・・ 確認画面へ
    ・戻るボタンのラベル ・・・ 戻る
    ・送信ボタンのラベル ・・・ 送信する

    自動返信メールの設定

    次は、自動返信メールの設定です。
    フォームが送信された際に、「管理者」と「ユーザー」に送信される自動返信メールの設定を行っていきます。

    管理者への自動返信メール設定

    それでは、管理者への自動返信メールの設定項目は以下のものになります。

    ・TO(メールアドレス)
    ・件名
    ・BODY
    ・REPLY-TO ※任意
    ・FROM(メールアドレス) ※任意
    ・送信者 ※任意

    TO(メールアドレス)

    送信先(管理者)へのメールアドレスを設定します。
    レンタルサーバーを利用している場合は、メールアドレスを作成して設定しておきましょう。

    送信元メールアドレスにgmailを設定したりなど、WordPressサイトのドメインと異なるメールアドレスを指定していると通知メールがスパムと見なされブロックされる可能性が高まります。

    件名

    自動返信メールのタイトルを設定します、デフォルトでは、「管理者通知」と入力されていますが

    【株式会社Anarchy】お問い合わせがありました

    などのような分かりやすいものに変更したが良いですね。

    BODY

    自動返信ヘールの本文の部分になります、デフォルトでは「{all-fields}」と入力されています。

    デフォルトの設定のままで自動返信メールを送信すると
    お問い合せフォームのすべての入力項目とその回答が、メールの本文として送信されます。

    抜けなく送信されるので悪くはありませんが、分かりやすくしたいですよね。
    その場合に必要となるのが、フォーム部品に設定した「データ属性のNAME」になります。

    使い方としては、フォームの回答を表示させたい部分に
    {}の中にデータ属性のNAMEを入れたものを記述します。

    今回の場合、メールアドレスの入力項目を表示させたい時は{email}と入力します。

    以下の例文を参考にして、ご自身でメール本文を作成していきましょう。

    ホームページから問い合わせがありました。
    問い合わせ内容は以下のとおりです。
    受信から営業日以内にお客様へ連絡してください。

    ━━━ お問い合わせ内容 ━━━━━━━━━━━━━━━━━━━━━

    【お名前】
    {name}

    【メールアドレス】
    {email}

    【お問い合わせの項目】
    {inquiry}

    【添付ファイル】
    {file}
    {url}

    【メッセージ入力欄】
    {message}

    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    このメールは問い合わせフォームから送信されました。

    REPLY-TO、FROM、送信者 ※任意の項目

    こちらについては、管理者宛メールでは必要があれば設定するぐらいでOKです。

    ユーザーへの自動返信メールの設定

    それでは、ユーザーへの自動返信メールの設定項目は以下のものになります。

    ・TO(メールアドレス)
    ・件名
    ・BODY
    ・REPLY-TO ※任意
    ・FROM(メールアドレス)
    ・送信者 ※任意

    TO(メールアドレス)

    送信先(ユーザー)へのメールアドレスを設定します、
    デフォルトでは「{email}」が入力されています。

    入力されたユーザーにそのまま返信するメールになるので、変更せずに「{email}」でOKです。

    件名

    自動返信メールのタイトルを設定します、デフォルトでは「自動返信通知」と入力されていますが

    【株式会社Anarchy】お問い合わせありがとうございます (自動返信メール)

    などのような分かりやすいものに変更したが良いですね。

    BODY

    自動返信ヘールの本文の部分になります、デフォルトでは「{all-fields}」と入力されています。

    デフォルトの設定のままで自動返信メールを送信すると
    お問い合せフォームのすべての入力項目とその回答が、メールの本文として送信されてしまいます。

    ユーザーに入力されたものを、そのまま表示させる形となってしまうので丁寧な本文に変更しましょう。

    以下の例文を参考にして、ご自身でメール本文を作成していきましょう。

    {name} 様

    この度は 株式会社Anarchy へお問い合わせいただき誠にありがとうございます。

    以下の内容のお問い合わせを受け付けました。
    営業日以内に担当者より折り返しご連絡させていただきます。

    尚、お問い合わせ内容によっては、ご返事までにお時間をいただく場合もございます。
    あらかじめご了承ください。

    ━━━ ご入力内容 ━━━━━━━━━━━━━━━━━━━━━

    【お名前】
    {name}

    【メールアドレス】
    {email}

    電話番号
    {tel}

    【住所】
    {address1} {address2}

    【お問い合わせの項目】
    {inquiry}

    【添付ファイル】
    {file}
    {url}

    【メッセージ入力欄】
    {message}

    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    このメールは株式会社Anarchy のホームページからお問い合わせいただいた方へ自動送信しております。
    お心当たりのない方は、恐れ入りますが下記へその旨をご連絡いただけますと幸いです。
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    株式会社Anarchy
    東京都○○区○○ 12-34
    TEL :00-0000-0000 FAX 00-0000-0000
    MAIL :○○○@○○○○.com
    URL :https:/○○○○/
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

    REPLY-TO

    REPLY-TO設定は、「差出人アドレス(FROMのアドレス)」とは別に「返信先アドレス」を設定する場合に入力します。

    「差出人アドレス(FROMのアドレス)」と「返信先アドレス」が同じ場合は設定は不要ですが、
    ただし受信側の設定によっては迷惑メール判定される場合があるので注意が必要です。

    FROM

    ユーザーへの自動返信メールのアドレスを設定します。
    基本的には、サイトと同じドメインのメールアドレスを設定することになります。

    REPLY-TOと同様に、Gmailなどサイトと違うドメインのアドレスを設定すると迷惑メール判定される場合があるので注意が必要です。

    送信者

    自動返信メールの送信者名を設定します、会社名やサイト名を通常は設定します。

    「公開」をクリックしてフォームを保存します、これでお問い合わせフォームの設定が完了しました。

    今回はすべてのフォーム部品のブロックを紹介するために入力項目が多くなりましたが、入力項目が多くなればなるほどユーザーの離脱率は高くなるため
    必要最低限の入力項目に絞り込みをする工夫も必要かと思います。

    お問い合せページ用の固定ページを作成する

    フォームの設定が終わりましたので、
    新たに固定ページを作成してお問い合わせページを作成していきたいと思います。

    まず管理画面の固定ページから「新規固定ページを追加」をクリックし、
    タイトルに「お問い合わせ」を入力します。

    次に「ブロックを追加」をクリックし、「Snow Monkey Form」のブロックを選択します。
    「Snow Monkey Form」ブロックがない場合には、「すべて表示」をクリックしてブロック一覧の中から「Snow Monkey Form」ブロックを選択しましょう。

    作成したフォームの選択画面が現れるので、「フォームを選択してください」のドロップダウンリストから先ほど作成した「お問い合わせ」を選択します。

    右側メニューにある「URL」をクリックして、「パーマリンク」を「contact」に変更します。

    「公開」をクリックして、お問い合わせページの作成を完了しましょう。

    メニューにお問い合わせページへのリンクを設定する

    最後にメニューに、お問い合わせページへのリンクを作成していきます。

    管理画面の「外観」から「メニュー」を選択して
    「メニュー項目を追加」の中から「お問い合わせ」にチェックを入れて、「メニューに追加」をクリックします。

    「メニュー構造」内に「お問い合わせ」固定ページへのリンクが作成されます。
    メニューの位置など調整して、問題なかったら「メニューを保存」をクリックします。

    まとめ

    これで、お問い合わせフォームのページを作成することができました。
    サイトを表示させて、フォームの表示や自動返信メールの機能が問題なく動作するか確認しましょう。

    今回は、Snow Monkey Forms を使ってお問い合わせフォームを作成する方法をご紹介しました。
    SnowMonkeyを使用したサイト制作の実装を他の記事でもご紹介しています、気になる記事がありましたらご覧になってください。

  • 【SnowMonkeyカスタマイズ】デフォルトの投稿とは別に、新たに投稿機能(カスタム投稿)を作る方法

    【SnowMonkeyカスタマイズ】デフォルトの投稿とは別に、新たに投稿機能(カスタム投稿)を作る方法

    今回はホームページ制作で実装する「デフォルトの投稿とは別に投稿機能を実装する方法」をご紹介いたします。

    [st-kaiwa1 html_class=”wp-block-st-blocks-st-kaiwa”]

    デフォルトの投稿(お知らせページ)とは別に、
    ブログを投稿する機能を実装したいんだよな~

    [/st-kaiwa1] [st-kaiwa2 r html_class=”wp-block-st-blocks-st-kaiwa”]

    商品情報や、事業内容などを
    WordPressの管理画面で管理できると良いんだけどできないかな~

    [/st-kaiwa2]

    このような実装への悩みを持った方のために、SnowMonkeyテーマを使用したサイト制作での実装を行なってみます。
    使用環境としては、以下のものとなります。

    テーマ・・・・・SnowMonkey
    プラグイン・・・Snow Monkey Blocks 、 Snow Monkey Editor

    また今回のサイト制作の題材として、以下の記事を参考にサイト制作を行なっています。
    サイトを最初から制作してみたいという人はそちらから始めてみてください。

    [st_toc]

    デフォルトの投稿とは別に投稿機能を実装する方法

    WordPressでは、「投稿」と「固定ページ」を使ってWebページを作成することができ特徴として

    • 「投稿」ではお知らせページやブログページのような、時系列で一覧表示できるページを作成したり
    • 「固定ページ」では会社情報ページやお問い合わせページのような、そのページ単体で完結するページを作成することができます。

    ただし「投稿」の機能は1つしか無いため、
    「お知らせページ」を作ってしまうと「ブログページ」を作成することができなくなってしまいます。

    カスタム投稿とは

    WordPressには、投稿の機能を複数作成することができる「カスタム投稿」という機能があります。

    このカスタム投稿を使うと、ブログのような投稿のほかに、商品情報一覧や宿泊プラン一覧といったように、複数にジャンル分けして投稿一覧を作成することができます。

    カスタム投稿の作り方

    カスタム投稿の作り方には、以下のの2つがあります。

    ・プラグインを利用する方法
    ・functions.phpにコードを記述する方法

    ここでは、プラグイン「Custom Post Type UI」を利用して実装する方法をご紹介します。

    「Custom Post Type UI」を利用してカスタム投稿を実装する

    Custom Post Type UIは、カスタム投稿を作成することができるプラグインです。
    一部のテーマにおいては、ほかのプラグインを使用することもありますが今回は割愛します。

    それでは、カスタム投稿を実装していきましょう。

    まずは管理画面の「プラグイン」から「新規プラグインを追加」を選択し、プラグインの検索欄に「cptui」と入力します。

    Custom Post Type UIが表示されたら、「今すぐインストール」をクリックして「有効化」します。

    次に管理画面に「CPT UI」のメニューが表示されたら、「投稿タイプの追加と編集」を選択します。

    今回は、ブログ機能を追加したいので

    ・投稿タイプスラッグに、「blog」
    ・複数形のラベルに、  「ブログ」
    ・単数形のラベルに、  「ブログ」と入力します。

    「CPT UI」の設定画面には、様々な設定項目がありますが今回は以下の通りに設定していきましょう。

    ・アーカイブありは、「True」を選択
    ・サポートは、「なし」以外にチェックを入れておきましょう

     サポートで選択したものが、投稿編集画面の右側メニューに表示されます

    お好みに応じて「メニューの位置」や「メニューアイコン」を設定してみるのもいいかと思います。
    設定が完了したら、「投稿タイプを追加」をクリックします。

    この時点で管理画面には「ブログ」が追加されていますが、
    必要な設定として、「設定」の「パーマリンク設定」を選択して「変更を保存」をクリックします。

    これはWordPressの仕様で、カスタム投稿を追加した際はパーマリンク保存をしておかないとカスタム投稿が正常に表示されない場合があるためです。

    追加された投稿機能を確認する

    それでは管理画面に追加された「ブログ」を選択して、「新規投稿を追加」をクリックして記事を追加していきましょう。

    編集画面が開かれるので、「タイトル」「記事本文」「アイキャッチ画像」などを設定して「公開」をクリックします。

    編集画面で入力して頂いてみて分かるかと思いますが、「投稿」の編集画面とほぼ同じかと思います。

    異なるところとしては、「カテゴリー」「タグ」が現在は設定できない状態となっています。

    左が「デフォルトの投稿」、右が「カスタム投稿で作ったブログ」の右側メニュー

    カスタム投稿にカテゴリー・タグを設定できるようにする

    このままでは不便ですので、カスタム投稿に「カテゴリー」や「タグ」を追加できるように設定していきましょう。

    管理画面から「CPT UI」を選択して、「タクソノミーの追加と編集」をクリックします。
    ちなみにタクソノミーとは、カスタム投稿で利用できるカテゴリーやタグのことです。

    タクソノミーの設定画面が表示されたら、「基本設定」部分に以下の様に設定してみましょう。

    ・タクソノミースラッグに、「blog_cate」
    ・複数形のラベルに、   「ブログカテゴリー」
    ・単数形のラベルに、   「ブログカテゴリー」と入力して
     利用する投稿タイプは、 「ブログ」にチェックを入れましょう

    これで、「ブログ」というカスタム投稿に「カテゴリー」や「タグ」を設定することができます。

    次にタクソノミーの設定画面を下の方へスクロールすると、「設定」部分に以下のように設定してみましょう。

    階層が「False」「True」で選択できるようになっていますが
    ・カテゴリーを作成したいのであれば 「True」
    ・タグ   を作成したいのであれば 「False」 を選択します。

    ここでは、「True」を選択して「タクソノミーの追加」をクリックして設定を完了させます。

    階層での設定により、作成したタクソノミーが
    階層構造を持つ、カテゴリーのタイプのものになるか
    階層構造を持たない、タグのタイプのものになるか選択することができます。

    設定が完了できたら、管理画面の「ブログ」に「ブログカテゴリー」が追加されているので選択します。

    ブログカテゴリーの追加画面が表示されたら、以下のように設定して「新規ブログカテゴリーを追加」をクリックします。

    ・名前に   「イベント」
    ・スラッグに 「event」を選択します。

     スラッグに設定には、半角英数の小文字とハイフンのみが使用できます

    ブログカテゴリーを追加できたら、カスタム投稿を作成したときと同様にパーマリンク設定を更新保存します。
    管理画面の「設定」から「パーマリンク設定」を選択し、何も変更せずにそのまま「変更を保存」をクリックします。

    それでは記事の編集画面にカテゴリーが追加できているか確認しましょう。
    管理画面の「ブログ」から、既に作成されてある記事をクリックします。

    編集画面の右側メニューを見ると、
    ブログカテゴリーが表示され先ほど設定した「イベント」を選択できるようになっています。

    メニューへカスタム投稿一覧へのリンクを追加する

    カスタム投稿を実装して、投稿機能を追加することができたので
    カスタム投稿一覧のリンクを、メニューに表示させていきましょう。

    管理画面の「外観」から「メニュー」を選択します。

    「メニュー項目を追加」の中にある、「ブログ」を選択し「すべて表示」タブ内を選択し
    「ブログ一覧」にチェックを入れ「メニューに追加」をクリックします。

    「ブログ一覧 投稿タイプアーカイブ」というリンクが生成されるので、
    任意の位置に変更したら「メニューを保存」をクリックします。

    メニューを作成することができたら、実際にサイトを開いてメニューが機能しているか確認しましょう。
    メニューが機能していれば、カスタム投稿の一覧ページへのリンクが生成されているかと思います。

    カスタム投稿一覧ページの表示を、デフォルトの投稿一覧ページと同じ表示にする

    カスタム投稿を実装し、メニューへのリンクも生成して一覧ページを表示することができました。
    しかしデフォルトの投稿の一覧ページに比べるとシンプルな表示になっています。

    デフォルトの投稿一覧画面(カテゴリーや抜粋、投稿者・日付が表示されています)

    それではカスタム投稿一覧の表示を、デフォルトの投稿と同じものに変更していきましょう。

    管理画面の「外観」から「カスタマイズ」をクリックしてカスタマイズ編集画面内にある
    「ブログ一覧」リンクをクリックして、カスタム投稿一覧画面を表示させ「デザイン」を選択します。

    「デザイン」が開いたら「ブログアーカイブページ設定」をクリックします。

    「ブログアーカイブページ設定」が開いたら、
    「ビューテンプレート」を「投稿のアーカイブページレイアウトと同じ」に変更して「公開」をクリックします。

    これでカスタム投稿の一覧ページも、デフォルトの投稿ページと同じデザインにすることができました。

    カスタム投稿詳細ページの表示も、デフォルトの投稿詳細ページと同じ表示にする

    カスタム投稿の一覧ページのデザインを、デフォルトの投稿一覧ページと同じデザインにすることができました。

    それでは記事の詳細ページも、同じ要領でデフォルトの記事詳細ページと同じデザインに変更していきましょう。

    カスタム投稿の記事詳細ページもシンプルな表示となっている

    管理画面の「外観」から「カスタマイズ」をクリックしてカスタマイズ編集画面内にある
    「ブログ一覧」リンクをクリックして、カスタム投稿の詳細ページを表示させ「デザイン」を選択します。

    「デザイン」が開いたら「ブログページ設定」をクリックします。

    「ブログページ設定」が開いたら、
    「ビューテンプレート」を「投稿のビューテンプレート」に変更し
    「アイキャッチ画像の位置」を「ページヘッダー」に変更して「公開」をクリックします。

    これでカスタム投稿の詳細ページも、デフォルトの投稿ページと同じデザインにすることができました。

    まとめ

    今回はデフォルトの投稿機能とは別に、投稿機能(カスタム投稿)を実装する方法をご紹介しました。

    カスタム投稿を実装できるようになると、

    ・お知らせページとブログページを併用できたり
    ・カスタム投稿とタクソノミーを活用して、商品情報一覧などを作成することができます

    またデザインについても、デフォルトの投稿と同じデザインを実装することができます。

    「独自の情報を表示させたい」などの凝ったデザインを実装するには、
    コードによるカスタマイズが必要になってきますので、サポートフォーラムの情報などを活用して実装してみてください。

  • 【SnowMonkeyカスタマイズ】別ページへのアンカーリンクを設定する方法

    【SnowMonkeyカスタマイズ】別ページへのアンカーリンクを設定する方法

    今回はホームページ制作で実装する「ページ内へのアンカーリンクを設定する方法」と合わせて、「別ページへのアンカーリンクを設定する方法」をご紹介いたします。

    [st-kaiwa1 html_class=”wp-block-st-blocks-st-kaiwa”]

    メニューをクリックした時に、その場所まで移動させるやつってどうやったら実装することができるんだろう

    [/st-kaiwa1] [st-kaiwa2 r html_class=”wp-block-st-blocks-st-kaiwa”]

    別のページへのリンクも、ページのトップではなくて指定した場所に飛ばせれるようにしたいんだよな~

    [/st-kaiwa2]

    このような実装への悩みを持った方のために、SnowMonkeyテーマを使用したサイト制作での実装を行なってみます。
    使用環境としては、以下のものとなります。

    テーマ・・・・・SnowMonkey
    プラグイン・・・Snow Monkey Blocks 、 Snow Monkey Editor

    また今回のサイト制作の題材として、以下の記事を参考にサイト制作を行なっています。
    サイトを最初から制作してみたいという人はそちらから始めてみてください。

    [st_toc]

    ページ内へのアンカーリンクを設定する方法

    それでは実際に実装していきましょう。

    「news」というセクションへ移動できるような実装を行っていきます。

    「news」セクションの作成

    まずはWordPressの管理画面から「固定ページ」を選択して、フロントページとして設定している固定ページを選択します。

    次に、「ブロックを追加」をクリックし 「すべて表示」をクリックします。
    表示されたブロック一覧の中から「セクション」というブロックを選択します。

    編集画面内に表示された、サブタイトルに「NEWS」、タイトルに「お知らせ」を入力します。
    次にセクションブロック内の「+マーク」をクリックし、「最新の投稿」というブロックを選択します。

    管理画面の投稿に記事が投稿してあれば、最新の投稿記事一覧が表示されるかと思います。
    記事がまだ投稿されていない場合は、記事を作成してみて表示されるか確認してみましょう。

    アンカーの設置

    今回実装したいのは、ページ内のアンカーリンクの設置なので実際に先ほど作成したセクションにアンカーを設定していきましょう。

    「セクション」ブロック全体が選択できている状態にします。
    その状態で、右側メニューにある「高度な設定」をクリックし「HTMLアンカー」に「news」と入力します。

    アンカーの設置は、これで完了です。
    リストビューを表示させると、セクションの右側に「news」を表示されているかと思います。

    アンカーリンクの設置

    先ほど作成したアンカーに飛ばせるリンクを設定していきましょう。
    今回は、既に作成されているメニューに追加していく形で実装していきます。

    管理画面の「外観」から「メニュー」を選択して「カスタムリンク」を選択します。
    カスタムリンクのURLに「#news」を、リンク文字列に「新着お知らせ」と入力して「メニューに追加」をクリックします。

    作成されたカスタムリンクを、お好みの場所に設定して「メニューを保存」をクリックします。

    メニューに新たに追加された「新着お知らせ」のリンクをクリックすると、「news」セクションの先頭に飛ぶことが確認できるかと思います。

    スムーススクロールの設定

    先ほどの実装で「news」セクションに、カスタムリンクを設定してクリックするとセクションの先頭に飛ばすことができたかと思います。
    ただこれでは少し味気ないので、アンカーリンクをクリックすると該当箇所にスッーと時間をかけて移動する演出(スムーススクロール)を実装していきましょう。

    管理画面の「外観」から「メニュー」を選択して、画面右上にある「表示オプション」をクリックし開いた一覧の中にある「CSSクラス」にチェックを入れましょう。

    次に、先ほど設定した「カスタムリンク」をクリックし新たに追加された「CSS class(オプション)」に「u-smooth-scroll」と入力して「メニューを保存」をクリックします。

    サイトを開いて「新着お知らせ」のリンクをクリックすると、スムーススクロールが実装できているかと思います。

    SnowMonkeyでは、リンク要素(aタグ)のcssクラスに「u-smooth-scroll」を付与するとスムーススクロールを実装することができます。

    別ページへのアンカーリンクを設定する方法

    トップページに、別のページのアンカーへのリンク設定を実装していきましょう。

    トップページに「about」セクションを作成

    「セクション」ブロックを追加して、サブタイトルに「ABOUT」 タイトルに「会社案内」と入力し
    配置を「全幅」に変更します。

    次にセクションブロック内の「+マーク」をクリックし、「項目」というブロックを選択します。
    右側メニューのブロック設定にある、「各項目をくっつける」を有効にし「行あたりのカラム数(ラージウインドウ)」を3に変更しましょう。

    セクションブロック内の「+マーク」をクリックし、「バナー」というブロックを選択します。

    バナーを選択したら、右側メニューのブロック設定から「画像」を追加します。

    「タイトルを書く…」の部分に、「代表あいさつ」と入力して「テキストの配置」をテキスト中央寄せにし
    「コンテンツの位置を変更」を「中央」に変更します。

    次に追加した画像を選択して、右側メニューのブロック設定から「マスク」を選択し
    「色」を「Black」、「不透明度」を「0.3」に設定します。

    これで「バナー」ブロックが完成しましたので、メニューの「︙」をクリックして「バナー」ブロックを2つ複製します。

    バナーが複製できたら、複製されたバナーの画像を「置換」で変更しておきます。
    タイトルも2つ目が「会社概要」、3つ目が「沿革」に変更します。

    下層ページ(会社案内ページ)を作成する

    次にリンク先となる、下層ページ(会社案内ページ)を作成します。

    管理画面の「固定ページ」から「新規固定ページを追加」を選択します。
    タイトルに「会社案内」と入力し、右側メニューのURLをクリックして「パーマリンク」に「about」と入力します。

    こちらのページを参考に、会社案内ページを作成してみましょう。
    各セクションには、「HTMLアンカー」を以下のとおりに設定していきます。

    「代表あいさつ」・・・・greeting
    「会社概要」・・・・・・about_us
    「沿革」・・・・・・・・history
    「アクセスマップ」・・・access

    トップページのバナーにリンクを付与する

    下層ページを作成することができたら、トップページで作成したバナーにリンクを付与していきましょう。

    先ほど作成した下層ページを開いて、URLをコピーします。
    ・編集画面であれば、右側メニューのURLをクリックして表示されたURLをコピー
    ・サイト表示であれば、URLバーからURLをコピー

    URLをコピーできたら、トップページの編集画面を開いてバナーを選択し「リンク」をクリックしてコピーしたURLをペーストします。

    そしてペーストしたURLの後に「#」を付け、その後にリンク先のHTMLアンカーを追加します。

    バナー全てにリンクが付与できたら、更新をしてサイトを開きリンクが設定されているか確認しましょう。

    まとめ

    「ページ内へのアンカーリンクを設定する方法」と、「別ページへのアンカーリンクを設定する方法」を今回はご紹介しました。

    このようなカスタマイズの実装方法を、これからもご紹介していこうと思っていますので気になる記事がありましたら読んでみてください!

  • 【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法⑤(子テーマファイル組み込み-page.php-編)

    【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法⑤(子テーマファイル組み込み-page.php-編)

    前回はfunctins.phpの組み込み編ということで、Cocoon子テーマへのfunctins.phpの組み込みを行なっていきました。

    https://tatsuya-hagihira.com/2023/10/293/

    今回は、Cocoon子テーマにオリジナルテーマの固定ページ(page.php)を組み込んでいく作業を紹介させていただきます。

    親テーマのpage.phpを確認

    子テーマのフォルダ内を確認してもらうと分かりますがpage.phpが無いので、こういった場合は親テーマの中に該当するテンプレートファイルがあるか確認します。

    それでは、親テーマのpage.phpを確認していきましょう。

    Cocoon親テーマのpage.php

    上記のコードの内容を、ご紹介します。

    コードの説明

    緑枠の部分 ⇨ ヘッダー(header.php)を出力させるコードになります、編集する必要が無いのでそのまま使用

    赤枠の部分 ⇨ 固定ページの内容を表示させるコード、この部分を表示させたいコード(オリジナルテーマで作成したコード)に変更します

    青枠の部分 ⇨ フッター(footer.php)を出力させるコードになります、編集する必要が無いのでそのまま使用

    以上のように変更させる部分は、赤枠内で囲ったコード部分を各固定ページのテンプレートファイルで作成したものに差し替えます。

    オリジナルテーマで作成したコードを、Cocoonのpage.phpのコードに組み込む

    それではオリジナルテーマで作成した固定ページのコード(pege-〇〇.php)をCocoonのpage.phpに組み込んでいきます。

    親テーマのpage.phpを子テーマにコピペして、そのファイルを編集する

    今までは子テーマにあったテンプレートファイルを編集していました。
    しかし親テーマにあるファイルを編集してしまうと、テーマの更新の際にファイルも当然更新されてしまうため編集した部分が上書きされてしまいます。

    そのため親テーマにしか無いテンプレートファイルを編集する時は、そのファイル自体を子テーマにコピーして子テーマ上で編集する必要があります。
    手順としては以下の順番で進めていきます。

    1.親テーマにある、「page.php」を子テーマへコピーする
    2.コピーした「page.php」のファイル名を、固定ページのスラッグ名に合わせて「page-〇〇.php」の形に変更する
    3.オリジナルテーマで作成した部分を、赤枠の部分にコピペして差し替える

    編集後のファイル内容はこのようになります。

    今回はCocoonの子テーマへのpage.phpの組み込みを行なっていきました。

    次回はheader.phpの子テーマへの組み込みを行なっていきたいと思います。

  • 【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法④(子テーマファイル組み込み-functions.php-編)

    【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法④(子テーマファイル組み込み-functions.php-編)

    前回はstyle.cssの組み込み編ということで、Cocoon子テーマへのstyle.cssの組み込みを行なっていきました。

    https://tatsuya-hagihira.com/2023/10/280/

    今回は、Cocoon子テーマのfunctins.phpにオリジナルテーマのfunctions.phpを組み込んでいく作業を紹介させていただきます。

    両方のテーマのfunctions.phpを確認

    まずは両方のテーマのfunctions.phpを確認していきます、必要となるファイルは以下の2つになります。

    ・Cocoon子テーマのfunctions.php
    ・自作テーマのfunctions.php

    それでは、2つのfunctions.phpを確認していきましょう。

    左がCocoon子テーマのfunctions.php、右がオリジナルテーマのfunctions.php

    編集する箇所になりますが、イメージとしてはオレンジ枠の部分を赤枠の部分にコピペしていく感じになります。

    ポイント

    初期化部分のコード ⇨ 基本的には、Cocoon自体にここらへんのコードは記述されているのでコピペは不要

    CSS/JavaScriptの読み込み ⇨ オリジナルテーマ独自の読み込みファイルになるので、子テーマにコピペする必要があります。

    その他のオリジナルテーマ独自に記述したもの ⇨ オリジナルテーマ独自の読み込みファイルになるので、子テーマにコピペする必要があります。

    今回はCocoonの子テーマへのfunctions.phpの組み込みを行なっていきました。

    次回は固定ページ(page.php)の子テーマへの組み込みを行なっていきたいと思います。

  • 【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法③(子テーマファイル組み込み-style.css-編)

    【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法③(子テーマファイル組み込み-style.css-編)

    前回はファイル確認編ということで、WordPress化されたオリジナルテーマのテンプレートファイルの確認を行なっていきました。

    https://tatsuya-hagihira.com/2023/10/245/

    今回は、Cocoon子テーマのファイルの中身を確認してオリジナルテーマを組み込んでいく作業を紹介させていただきます。

    Cocoon子テーマのファイルを確認

    Cocoon子テーマのファイルは、以前ご紹介したとおり次の場所にあります。

    Windowsの場合

    Cドライブ ⇨ ユーザー ⇨ (ユーザー名)⇨  Local Sites
     ⇨ (サイト名) ⇨ app ⇨ public ⇨ wp-content ⇨ themes
     ⇨ cocoon-child-master

    Macの場合

    Macintosh HD ⇨ ユーザー ⇨ (ユーザー名)⇨  Local Sites
     ⇨ (サイト名) ⇨ app ⇨ public ⇨ wp-content ⇨ themes
     ⇨ cocoon-child-master

    それではどのようなファイルで構成させているか確認してみましょう。

    Cocoon子テーマのファイル構成

    見ていただけると気づいた方がいるかと思いますが、第2回で紹介したオリジナルテーマにあったテンプレートファイルが見当たりません。

    オリジナルテーマのファイル構成

    これはベースとなるテーマは親テーマの方で構築して、個別に設定させていきたいもののみ子テーマで構築するという形を取っているからだと思います(…違っていたらすみません)。

    それでは親テーマにあるテンプレートファイルを修正して構築していくのかというとそうではありません。

    親テーマにあるベースとなるテンプレートファイルを修正して構築しても、テーマの更新などでそのデータが上書きされてしまうため親テーマのテンプレートファイルでは構築せずに子テーマに同じテンプレートファイルを作成して構築していく必要があります。

    Cocoon親テーマのファイルを確認

    それではCocoonの親テーマのファイル構成も確認していきましょう、親テーマのファイルは以下の場所にあります。

    Windowsの場合

    Cドライブ ⇨ ユーザー ⇨ (ユーザー名)⇨  Local Sites
     ⇨ (サイト名) ⇨ app ⇨ public ⇨ wp-content ⇨ themes
     ⇨ cocoon-master

    Macの場合

    Macintosh HD ⇨ ユーザー ⇨ (ユーザー名)⇨  Local Sites
     ⇨ (サイト名) ⇨ app ⇨ public ⇨ wp-content ⇨ themes
     ⇨ cocoon-master

    それではどのようなファイルで構成させているか確認してみましょう。

    Cocoon親テーマのファイル構成

    先ほどの子テーマのファイル構成に比べると、いろいろな種類のファイルが含まれているのが分かります。

    ですが今回のカスタマイズで必要になってくるファイルとしては限られてきますので、以下にまとめておきます。

    ポイント

    テンプレートファイル(PHPファイル) ⇨ 基本的には修正が必要なものは、こちらにあるファイルをベースに修正をしていきます。

    tmpフォルダ内のパーツファイル(PHPファイル) ⇨ 上記のテンプレートファイルを構成する部品となるファイルです。

    style.css ⇨ こちらに関しましては、子テーマにある「style.css」に追加していく形をとっていきます。

    Cocoon子テーマをカスタマイズしていく流れ

    特にどの順番から実装していかないとダメというのはありません、今回は以下の順番で構築していきたいと思います。

    1. style.cssを実装
    2. functions.phpを実装
    3. 固定ページ(page.php)を実装
    4. トップページ(front-page.php)を実装
    5. header.phpとfooter.phpを実装
    6. 投稿一覧ページ(homr.phpとarchive.php)を実装
    7. 投稿詳細ページ(single.php)を実装

    style.cssを実装

    まずはstyle.cssを実装していきます、必要となるファイルは以下の2つになります。

    ・Cocoon子テーマのstyle.css
    ・自作テーマのstyle.css

    それでは、2つのstyle.cssを確認していきましょう。

    左がCocoon子テーマのstyle.css、右がオリジナルテーマのstyle.css

    編集する箇所になりますが、イメージとしてはオレンジ枠の部分を赤枠の部分にコピペしていく感じになります。

    ポイント

    コメントヘッダー ⇨ 基本的には、Cocoonをベースに作成していくので変更したとしても「Theme Name」「Description」のみでOK

    オリジナルテーマのCSS ⇨ オリジナルテーマを作成した際にレスポンシブも出来ているはずなので、自作したものを丸々コピーでOK
    ※Cocoonが持っているCSSやクラス名被りによりCSSがバッティングする可能性が高いですが、いったんそのままコピペしたほうが早いです。

    ポイントにも書きましたが、Cocoonに組み込んだ時点で表示崩れを起こす可能性が高いですので実装後は確認が必要となります。

    なるべく手間を減らすのであれば、以下の点に注意してオリジナルテーマを制作していただけると修正が少なくなると思います。

    ポイント

    HTMLタグ名と同じクラス名をつけない
     ⇨ Cocoonに限らずですが、テーマが持っているCSSにはHTMLタグ名と同じ名前でクラス名がつけられていることが多いので
       既存テーマに自作のCSSファイルを組み込む際は、クラス名を違うものに意識してつけたほうがバッティングが回避しやすいです。

    【クラス名の実装例】
    ・header ⇨ custom-header
    ・footer ⇨ custom-footer
    ・btn ⇨ custom-btn など

    WordPressの「body_class()」「post_class()」が自動で出力されるCSSクラスと同じクラス名をつけない

    【自動で出力される代表的なクラス名】
    ・page  ・home  ・blog  ・single  ・カスタム投稿のスラッグ名 など

    今回はCocoonの親子テーマのファイル構造の確認と、style.cssの子テーマへの組み込みを行なっていきました。

    次回はfunctions.phpの子テーマへの組み込みを行なっていきたいと思います。

  • 【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法②(ファイル確認編)

    【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法②(ファイル確認編)

    前回はCocoonの子テーマを有効化するところまで、紹介させていただきました。

    https://tatsuya-hagihira.com/2023/10/237/

    今回はCocoonをカスタマイズして、オリジナルデザインでサイト制作する方法【第2回】ファイル確認編になります。

    フォルダ構造の確認

    テストサイトのローカル環境は、Localで構築しました。

    まずはCocoonインストール直後のローカル環境のフォルダ構造を確認します。
    ※Localの『Go to site folder』をクリックしても確認することができます。

    Windowsの場合

    Cドライブ ⇨ ユーザー ⇨ (ユーザー名)⇨  Local Sites
     ⇨ (サイト名) ⇨ app ⇨ public ⇨ wp-content ⇨ themes

    Macの場合

    Macintosh HD ⇨ ユーザー ⇨ (ユーザー名)⇨  Local Sites
     ⇨ (サイト名) ⇨ app ⇨ public ⇨ wp-content ⇨ themes

    themesフォルダ内は、現在この様になっています。

    Local:themesフォルダ

    各フォルダを紹介していきます。
    ・「cocoon-child-master」 ⇨ Cocoon子テーマ(これから編集していくフォルダ)
    ・「cocoon-master」 ⇨ Cocoon親テーマ
    ・「test」 ⇨ 自作のオリジナルテーマ
    ・「twentytwentythree」 ⇨ WordPressデフォルトテーマ

    自作のオリジナルテーマのフォルダ内を確認(テンプレートファイルの確認)

    それでは作成したオリジナルテーマのフォルダ内を見ていきます。

    オリジナルテーマのフォルダ構造

    phpの拡張子がついた各ファイルはテンプレートファイルといい、WordPressのテンプレート階層によってそれぞれ役割が決まっています。

    今回使用するものを中心に、ご紹介します。

    index.php(テーマの必須ファイル)

    「index.php」は、テーマとして認識させるのに必須のファイルとなります。
    中身は空のままでも大丈夫ですが、私は後述する「front-page.php」の内容をコピーすることが多いです。

    style.css(スタイルシート、テーマの必須ファイル)

    「style.css」も「index.php」と同様に、テーマとして認識させるのに必須のファイルとなります。
    「style.css」は、静的サイトを制作する時にデザインを整えるCSSのコードを記述しますがWordPressでは以下の役割があります。

    ポイント

    テーマとして認識させる為の必須ファイル

    テーマの情報(テーマ名や作成者など)をコメントヘッダーとして記述

    テーマのCSSのコードを記述

    style.cssの「コメントヘッダー」の記述例は以下のようになります。

    @charset "utf-8";
    /*
    * Theme Name: テーマ名を記述
    * Theme URI: テーマのURLを記述
    * Author: テーマの作者を記述
    * Author URI: テーマの作者のURLを記述
    * Description: テーマの説明文を記述
    * Version: 1.0 (テーマのバージョンを記述)
    */

    いろいろと記述する内容はありますが、最低限必要となるのは【Theme Name】だけです。
    ※日本語のコメントを入れる場合は、【@charset “utf-8”;】も必要となります。

    それ以外の項目については、不要であれば削除していただいても大丈夫です。

    「index.php」と「style.css」を設定する前後の比較

    [st-kaiwa1]

    「index.php」と「style.css」を設定しないと、どうなるの?

    [/st-kaiwa1]

    設定前と、設定後で比較してみましょう。

    設定前:壊れているテーマと表示される
    設定後:テーマとして認識され、「style.css」で設定した情報も表示される

    テーマのサムネイル画像を設定するには

    [st-kaiwa1]

    テーマのサムネイル画像はどうやって設定するの?

    [/st-kaiwa1]

    テーマのサムネイル画像を設定するには、サムネイルにしたい画像のファイル名を【screenshot.jpg】として設定します。
    ※ファイル名は、screenshot.pngでもOKです。

    画像の最適なサイズは、横1200px 縦900px の画像になります。

    ファイルを設定する場所は、テーマフォルダ内の「style.css」と同じ階層に設定します。

    functions.php(WordPressのカスタマイズ、CSS・JavaScriptの読み込みなど)

    「functions.php」は、WordPress自体やテーマのカスタマイズ、CSS・JavaScriptの読み込みなどを記述するファイルになります。

    オリジナルテーマを作成するときの、主な記述例としては以下のようなコードになります。

    /* ------------------------------------------------------------ */
    /* 初期化 */
    /* ------------------------------------------------------------ */
    
    add_action('init', function () {
      add_theme_support('post-thumbnails'); // アイキャッチ画像の有効化
      add_theme_support('automatic-feed-links'); // 投稿とコメントのRSSフィードのリンクを有効化
      add_theme_support('title-tag'); // タイトルタグ自動生成
      add_theme_support('wp-block-styles'); // グーテンベルクのCSSを有効化
      add_theme_support('responsive-embeds'); // 縦横比維持したレスポンシブを有効化
      add_theme_support('editor-styles'); // 編集画面のスタイル変更
      add_editor_style('editor-style.css'); // 編集画面のスタイル変更
      add_theme_support(
        'html5',
        array(
          // HTML5でマークアップ
          'search-form',
          'comment-form',
          'comment-list',
          'gallery',
          'caption',
        )
      );
    });
    
    /* ------------------------------------------------------------ */
    /* css/JavaScriptの読み込み */
    /* ------------------------------------------------------------ */
    
    add_action('wp_enqueue_scripts', function () {
      // WordPress提供のjquery.jsを読み込まない
      wp_deregister_script('jquery');
      // jQueryの読み込み
      wp_enqueue_script('jquery', '//code.jquery.com/jquery-3.7.1.min.js', "", "3.7.1");
      // cssファイル date以降は自動キャッシュ削除のコード
      wp_enqueue_style('styles', get_theme_file_uri('/css/styles.css'), [], date("ymdHis", filemtime(get_theme_file_path('/css/styles.css'))));
      // Google Fonts(入れたいフォントごとに記述)
      wp_enqueue_style('Noto_Serif', '//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');
      wp_enqueue_style('Noto_Sans', '//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');
    
      // プラグインの導入
      // GSAP
      wp_enqueue_script('GSAP', '//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js', [], "3.11.5", true);
      wp_enqueue_script('ScrollToPlugin', '//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollToPlugin.min.js', ['GSAP'], "3.11.5", true);
      wp_enqueue_script('ScrollTrigger', '//cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js', ['GSAP'], "3.11.5", true);
      // splide
      wp_enqueue_style('Splide', '//cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css', [], "4.1.4");
      wp_enqueue_script('Splide', '//cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js', [], "4.1.4", true);
    
      // 自作jsファイル
      wp_enqueue_script('script', get_theme_file_uri('/js/script.js'), ['jquery'], date("ymdHis", filemtime(get_theme_file_path('/js/script.js'))), true);
    
      // 特定のPHPファイルにのみ適用
      if (is_page('contact')) {
        wp_enqueue_script('form', get_theme_file_uri('/js/form.js'), [], date("ymdHis", filemtime(get_theme_file_path('/js/form.js'))), true);
      }
    });

    front-page.php(トップページの表示)

    「front-page.php」は、サイトのトップページを表示できるテンプレートファイルになります。

    必ずしも設定しないとダメかというとそうでもなく「home.php」や「index.php」でもトップページを表示することは出来ます。

    ただしこの3つのテンプレートファイルには、以下の優先順位があるため注意が必要です。
    「front-page.php」 > 「home.php」 > 「index.php」

    また、この3つのテンプレートファイルにはそれぞれ役割があるため基本はその役割に沿って設定をしていきます。

    ポイント

    front-page.php ⇨ トップページを表示

    home.php ⇨ 投稿の一覧ページを表示

    index.php ⇨ サイトのベーステンプレートとして作成

    header.php(<html>から</header>までを表示)

    「header.php」は、静的サイトで作成される<header>部分だけではなく<html lang=”ja”>といったHTMLの宣言部分も含めたものとなります。

    「header.php」の主な記述例としては以下のようなコードになります。

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    
    <head prefix="og: https://ogp.me/ns#">
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="format-detection" content="telephone=no">
      <meta name="robots" content="noindex, nofollow">
      <title><?php echo bloginfo('name'); ?></title>
      <meta name="description" content="<?php bloginfo('description'); ?>">
    
      必要に応じてmetaタグを追加
    
      <!-- スマホのアイコン、ファビコン作成用 -->
      <link rel="apple-touch-icon" sizes="192x192" href="<?php echo esc_url(get_theme_file_uri('/images/ico/favicon.ico')); ?>">
      <link rel="shortcut icon" href="<?php echo esc_url(get_theme_file_uri('/images/ico/favicon.ico')); ?>">
    
      <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    
      <?php wp_body_open(); ?>
    
      <header class="header js-header" id="header">
        ヘッダーの内容
      </header>
    

    footer.php(<footer>から</html>までを表示)

    「footer.php」も、静的サイトで作成される<footer>部分だけではなく</html>までの一番最後の行の部分も含めたものとなります。

    「footer.php」の主な記述例としては以下のようなコードになります。

    <?php wp_footer(); ?>
    
    <footer class="footer" id="footer">
    フッターの内容
    </footer>
    
    </body>
    
    </html>

    静的サイトでのコーディングと大きく違うところは、
    </body>の前に記述しているJavaScriptの読み込みなどのコードが、functions.phpで記述しているため不要となる点です。

    header.phpやfooter.phpを読み込むためのコード

    ここまででindex.htmlで記述された各パーツをWordPressのテンプレートファイルに分けて記述していきましたが、各ページで「haeder」「footer」を表示させるには次の記述が必要になります。

    ポイント

    header.phpを表示 ⇨ <?php get_header(); ?>

    footer.phpを表示 ⇨ <?php get_footer(); ?>

    「front-page.php」に表示させる具体例は、以下のコードとなります。

    <?php get_header(); ?>
    
    <main>
    トップページの内容
    </main>
    
    <?php get_footer(); ?>

    home.php(投稿一覧ページを表示)

    「home.php」は、先ほど紹介しましたとおりトップページの表示に使われることもありますが、

    今回は「front-page.php」にてトップページの表示を行なうため役割としては投稿一覧ページの表示となります。

    それでは「home.php」で記述される具体例は、以下のコードとなります。

    <?php get_header(); ?>
    
    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>
    
        <a href="<?php the_permalink(); ?>">
    
          サムネイル画像や記事タイトルなど、ループして表示させるものをここに記述
    
        </a>
    
      <?php endwhile; ?>
    <?php else : ?>
    <?php endif; ?>
    
    <?php get_footer(); ?>

    single.php(記事詳細ページの表示)

    「single.php」は、投稿記事の詳細ページを表示させるテンプレートファイルになります。

    「single.php」で記述される具体例は、以下のコードとなります。

    <?php get_header(); ?>
    
    <div class="article">
      <div class="article__main">
        <?php if (have_posts()) : ?>
          <?php while (have_posts()) : the_post(); ?>
    
            <?php the_content(); ?>
            記事の本文を表示
    
          <?php endwhile; ?>
        <?php else : ?>
        <?php endif; ?>
      </div>
      <aside class="article__side">
    
        <?php get_sidebar(); ?>
        サイドバーを表示
        
      </aside>
    </div>
    
    <?php get_footer(); ?>

    page.php(固定ページの表示)

    「page.php」は、固定ページの表示用のテンプレートファイルになります。

    固定ページとは、投稿ページ以外の会社概要やお問い合わせといった頻繁に更新されないようなページとなります。

    また表示させるページごとの「page.php」を区別させるために、「page-〇〇.php」と以下のように名前を分けて作成します。
    ・会社概要ページ ⇨ page-company.php
    ・お問い合わせページ ⇨ page-contact.php

    この「-〇〇」の部分には、固定ページのスラッグ名が入ります。
    スラッグ名の確認はWordPressの管理画面 ⇨ 固定ページ ⇨ クイック編集で確認できます。

    スラッグ名は、意識していないとページのタイトル名で設定されてしまうため
    スラッグ名は、英数字で設定するようにしましょう。(SEOとウェブサイトの可読性の向上のため英数字が望ましいです)

    archive.php(カテゴリーやタグごとの一覧ページを表示)

    「archive.php」は、投稿のカテゴリーやタグ・投稿者ごとの一覧ページを表示するテンプレートファイルとなります。

    一覧ページということで、先ほど紹介した「home.php」で表示される内容とほぼ同じになります。

    「archive.php」で記述される具体例は、以下のコードとなります。

    <?php get_header(); ?>
    
    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>
    
        <a href="<?php the_permalink(); ?>">
    
          サムネイル画像や記事タイトルなど、ループして表示させるものをここに記述
    
        </a>
    
      <?php endwhile; ?>
    <?php else : ?>
    <?php endif; ?>
    
    <?php get_footer(); ?>

    「home.php」のコードと同じですが、テンプレートファイルによって表示される内容は変更されるため同じコードでもそのページに合った情報が出力されます。

    まとめ(テンプレート階層図)

    今回は主要なテンプレートファイルを紹介させて頂きました、テンプレート階層の概念は重要なので今回紹介した他にもテンプレートファイルはありますので以下のページで確認していただけると幸いです。

    WordPressのテンプレート階層を攻略せよ

    https://tomosta.jp/2019/05/wordpress-temlate-tree/
    テンプレート階層図

  • 【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法①(準備編)

    【Cocoonカスタマイズ】オリジナルデザインでサイト制作する方法①(準備編)

    [st-kaiwa1]

    今回の制作のご依頼は、オリジナルデザインでサイト制作だけど
    投稿ページだけ「Cocoon」のデザインを使えるように作ってか~。
    「Cocoon」のカスタマイズやったこと無いけどできるかな~。

    [/st-kaiwa1]

    今回は、WordPressテーマ「Cocoon」をベースにオリジナルデザインでサイト制作した時に注意した点をご紹介しようと思います。

    この記事内では、以下のスキルがあることを前提にお話をさせていただきます。

    ポイント

    デザインカンプからのコーディングで静的サイトの実装ができる

    静的サイトから、WordPressサイトへのWordPress化がコーディングできる

    WordPress化へのコーディングについては、PHPを自在に書ける必要まではありませんがPHPファイルの中身が何となく分かるぐらいは必要になるかと思います。

    ポイント

    こちらの記事は、私が実装した際の方法を紹介しているものになります。
    実装のケースによっては本記事を参考に実装をしていただいてもうまく行かない場合もあるかもしれませんので、必ずバックアップを取った上でお試しいただきますようよろしくお願いいたします。

    事前準備 ーWordPressサイトの制作ー

    デザインカンプからのコーディングで静的サイトを制作する

    まずは、デザインカンプからのコーディングをして静的サイトの制作を完了させましょう。

    大まかな実装の流れとしては、「PENGIN BLOG」さんの以下のサイトが参考になるかと思います。

    【デザインカンプ無料配布】未経験からのコーディング学習ステップ

    https://pengi-n.co.jp/blog/coding-distribution/

    デザインカンプが欲しいよ~、という方は以下のサイトでも無料のデザインカンプが配されていますのでご利用ください。

    「Codejump」さん  作って学ぶコーディング学習サイト

    静的サイトをWordPress化させるコーディングをする

    基本的な変更箇所は、以下の部分になるかと思います。

    ・「a」タグや「button」タグなどのリンク先(href属性)を、WordPress関数を使用して組み直す。
    ・画像のソース元(src属性やsrcset属性)を、WordPress関数を使用して組み直す。
    ・「.html」のファイルをコピーして、「.php」ファイルに拡張子を変更する。
    ・「functions.php」を作成して、CSSやJavaScriptの読み込みのコードを実装する。

    こちらの実装方法につきましては、記事の制作を進めていきますので少々お待ちください。

    WordPress化の実装の流れを早く知りたいという方は、先程の「Codejump」さんブログに以下の記事がありますので参考にしてください。

    WordPressでオリジナルサイトを作ろう

    HTMLサイトをWordPress化しよう

    Cocoonの導入・有効化

    Cocoonのテーマをダウンロードし、インストールする

    テーマのダウンロードは、公式サイトからダウンロードできます。

    導入の流れとしては、公式サイトに手順が書かれておりますのでそちらを参考に導入を進めてください。
    注意点としては、親テーマも子テーマも両方必要な点になることですね。

    Cocoonの子テーマを有効化する

    サイトを実際に実装するのは、子テーマになります。
    親テーマは基本触ることはありませんが、必要となりますので削除せずにそのまま残しておいてください。

    なおWordPressをインストールした際に、標準のテーマが3つほどインストールされているかと思いますが
    こちらについては、どれか1つを残した状態で残りは削除していただいても構いません。

    これで、自分の作成したWordPressのオリジナルテーマをCocoonに組み込む準備ができました。

    次の記事以降で、Cocoonのテーマ内のファイルを編集する作業を紹介していきます。