# ストレッチチョコレート > SWELLを使用したサイト構築（HTML、CSS、JavaScript、PHP、ツール）に関するメモ帳 --- ## 投稿 - [SWELLがスクロールに合わせて動く！ScrollTriggerで実現するアニメーションと実装手順](https://stretch-chocolate.com/3500/): 「SWELLでスクロールに合わせてサイト... - [Meme Index（MEMEX）のClaimとMetaMaskへのトークン追加方法【仮想通貨】](https://stretch-chocolate.com/2821/): 話題の仮想通貨インデックス「Meme I... - [WordPressでPDFやエクセルファイルをダウンロード可能にする方法](https://stretch-chocolate.com/3096/): WordPressの記事内にPDFやエク... - [Gmailの迷惑メールを回避！WP Mail SMTPの設定方法](https://stretch-chocolate.com/2006/): 「Contact Form 7にGmai... - [ヘッダーメニューのサイズ・色をカスタマイズ【SWELL】](https://stretch-chocolate.com/3086/): SWELLは自由度の高い記事執筆が可能で... - [【SWELL】記事詳細のアイキャッチ画像の縦横比を変更【CSS4行】](https://stretch-chocolate.com/1876/): SWELLを使用していて「記事詳細ページ... - [【SWELL】エディターでもCSSを反映させる方法【効率UP】](https://stretch-chocolate.com/1930/): SWELLブロックに独自のCSSを使用し... - [【SWELL】記事タイトルに「新着!」を付けるカスタマイズ](https://stretch-chocolate.com/3496/): ○○日以内の新着記事のみに「新着! 」を... - [【SWELL】記事タイトルの一部分の色を変更するカスタマイズ](https://stretch-chocolate.com/1990/): 記事タイトルの「【】」や「！」など特定の... - [SWELLで解決！ブロックエディターで半角スペースが空かない時の対処法](https://stretch-chocolate.com/1227/): 記事執筆時に半角スペースを使って、テキス... - [【AForms】条件分岐機能を使用した無料見積もりフォーム例4選](https://stretch-chocolate.com/879/): 前回は簡単にAFormsを触ってみました... - [【AForms】フックとCSSで自動見積もりフォームのデザインをカスタマイズ](https://stretch-chocolate.com/1138/): AFormsは簡単・無料プログラミング不... - [【AForms】無料で条件分岐もできる自動見積もりフォームの使い方](https://stretch-chocolate.com/762/): WordPressに見積もりフォームを作... - [WP-Membersの使い方！WordPressで会員サイト&マイページを簡単作成](https://stretch-chocolate.com/2676/): そう思う方もいるかもしれません。 WP-... - [【VSCode】Live Serverで「Open a folder or workspace」が出たときの対処法](https://stretch-chocolate.com/2798/): VSCodeの便利な拡張機能に「Live... - [【WP File Manager】WordPressの管理画面からファイルの作成・削除ができる](https://stretch-chocolate.com/1986/): サイトをカスタマイズする際、テーマ内に独... - [【SWELL】CSSでボタンブロックの色数を増やす方法](https://stretch-chocolate.com/1927/): SWELLボタンを使用していて、もっと色... - [【SWELL】アコーディオンブロックとCSSで簡単カスタマイズ18選](https://stretch-chocolate.com/1928/): SWELLはコーポレートサイトやブログな... - [QTTabBarのアンインストールに失敗した時の解決策](https://stretch-chocolate.com/2564/): QTTabBarをアンインストール時、 ... - [【SWELL】CSSとクラス名はどこに記述する？デザインをカスタマイズする方法](https://stretch-chocolate.com/1532/): WordPressテーマSWELLを使用... - [【SWELL】アコーディオンブロックをFAQ風にカスタマイズ（CSSのみ）](https://stretch-chocolate.com/1757/): SWELLアコーディオンブロックをFAQ... --- ## 固定ページ - [当サイトと管理人について](https://stretch-chocolate.com/profile/): 当サイト（ストレッチチョコレート）に訪問... - [記事一覧](https://stretch-chocolate.com/archive/) - [フロント](https://stretch-chocolate.com/): SWELL プラグイン その他 - [プライバシーポリシー](https://stretch-chocolate.com/privacy-policy/): 基本方針 当サイトは、個人情報の重要性を... - [お問い合わせ](https://stretch-chocolate.com/contact/) --- # # Detailed Content ## 投稿 - Published: 2025-10-04 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/3500/ - カテゴリー: SWELL - タグ: アニメーション 「SWELLでスクロールに合わせてサイトを動かしたい」 「もっと動きのあるページを作りたい」 そんなときに役立つのがScrollTriggerです。GSAPのプラグインとして提供されるこの機能を使えば、ページのスクロール位置に応じてアニメーションを自在に制御でき、SWELLテーマのサイトをより魅力的に演出できます。 本記事では、ScrollTriggerの基本から実装手順、活用事例までを初心者にもわかりやすく解説します。 ScrollTriggerとは？ ScrollTriggerは、Green... --- - Published: 2025-10-03 - Modified: 2025-10-03 - URL: https://stretch-chocolate.com/2821/ - カテゴリー: その他 話題の仮想通貨インデックス「Meme Index」を購入・保有したものの、 「Claim（請求）方法が分からない」 「MetaMaskにトークンが表示されない」 といったお悩みはありませんか？ 本記事では、 Meme IndexのClaim（請求）手順 MetaMaskへのトークンの追加方法 など具体的な方法まで、わかりやすく解説します。 これからMeme Indexを本格的に運用したい方、DeFi運用を始めたい方は必見です。 下記の記事でMeme Indexについて詳しく解説しています。 Me... --- - Published: 2025-10-03 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/3096/ - カテゴリー: その他 - タグ: ブロックエディター WordPressの記事内にPDFやエクセルファイルをダウンロードする、リンクやボタンを設置したいと考えたことはありませんか？ 今回の記事ではHTMLとブロックエディターを使用した2つの方法をご紹介します。 HTMLでダウンロード可能にする方法 ダウンロード可能なリンクの設置 HTMLでファイルをダウンロード可能にするコードは下記になります。 ダウンロード ダウンロード時のファイル名を変更 下記はアップロード時のファイル名とは別のファイル名でダウンロードしたい場合のコードです。 ダウンロード ダ... --- - Published: 2025-10-03 - Modified: 2025-10-03 - URL: https://stretch-chocolate.com/2006/ - カテゴリー: プラグイン - タグ: Contact Form 7, フォーム 「Contact Form 7にGmailを設定しているけど、迷惑メール扱いになってしまう」という方に必見の記事です。 WordPressプラグイン「WP Mail SMTP」を活用すれば、Gmailを使用した迷惑メールの回避ができます。 この記事では、WP Mail SMTPプラグインの導入手順やGmailとの連携、Google Cloud Platformを使用したAPIの設定、そしてメール送信テストの方法まで網羅しています。 記事を読み終えることで、スムーズなメール配信環境を構築でき、メー... --- - Published: 2025-10-02 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/3086/ - カテゴリー: SWELL - タグ: ヘッダー SWELLは自由度の高い記事執筆が可能です。 しかし、ヘッダー周りのデザインはCSSを使用しないと変更しづらくなっています。 ヘッダーは見られる頻度が高いので、サイト管理者としては少しでも理想的なデザインにしたいですよね？ そのような悩みを解決できるよう、今回はCSSを使った簡単なカスタマイズ方法をご紹介します。 あわせて読みたい  【SWELL】CSSとクラス名はどこに記述する？デザインをカスタマイズする方法 この記事でのCSSは優先度高めの指定をしています。 理由はSWELLのCSSより優先... --- - Published: 2025-10-02 - Modified: 2025-10-02 - URL: https://stretch-chocolate.com/1876/ - カテゴリー: SWELL SWELLを使用していて「記事詳細ページのアイキャッチ画像の縦横比を変更したい！」「記事一覧ページと同じ比率にしたい！」と思ったことはありませんか？ この記事ではCSS4行で実装する方法をご紹介しています。 SWELLでのCSSの記述方法はこちら 記事詳細ページのアイキャッチ画像の縦横比を指定する方法 コード . p-articleThumb__img { aspect-ratio: 4 / 1; object-fit: cover; } SWELLのカスタマイザーで設定可能な縦横比 下記は記事... --- - Published: 2025-10-02 - Modified: 2025-10-02 - URL: https://stretch-chocolate.com/1930/ - カテゴリー: SWELL - タグ: ブロックエディター SWELLブロックに独自のCSSを使用したは良いけど、エディター（記事執筆画面）にもCSSが反映されたら作業効率＆視認性が上がるのに！なんて考えたことはありませんか？ デザインはこだわるとキリありませんが、少しでも時短したいもの。 ですので自分がこだわってデザインしたブロックがエディターでも反映されていると確認の手間を減らせると思います。 この記事ではSWELLを使用してエディターでもCSSを反映させる方法をご紹介します。 クラス名とCSSを追加する 今回はSWELLボタンを例に説明していきます... --- - Published: 2025-10-02 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/3496/ - カテゴリー: SWELL - タグ: PHP, 記事タイトル ○○日以内の新着記事のみに「新着! 」を付けるカスタマイズ方法をご紹介します。 「新着! 」があれば、視覚的にも分かりやすくなり、ユーザーにとってもメリットになります。 今回のコードでは「表示する日数」や「テキスト」の変更、またCSSでデザインの変更も可能です。 またWordPressテーマ「SWELL」に対応したCSSと変数を使用しているので、サイトに馴染むデザインになると思います。 記事タイトルに「新着! 」を付けるコード 実例 上図は当記事で作成した新着ラベルのデザインになります。 fun... --- - Published: 2025-10-02 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/1990/ - カテゴリー: SWELL - タグ: PHP, 記事タイトル 記事タイトルの「【】」や「！」など特定のテキストの色のみを変更するカスタマイズになります。 このカスタマイズにより、サイトの独自性や、目立たせたい記事を意図的に主張する事ができます。 またWordPressテーマ「SWELL」に対応したCSSと変数を使用しているので、サイトに馴染むデザインになると思います。 「【～】」で囲まれた部分の色を変更 【SWELL】記事タイトルのカスタマイズというタイトルの場合、 【SWELL】記事タイトルのカスタマイズになります。 コード // 「【～】」で囲まれた部... --- - Published: 2025-10-02 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/1227/ - カテゴリー: SWELL - タグ: ブロックエディター 記事執筆時に半角スペースを使って、テキストの位置を揃える事があります。 しかし、半角スペースを2回連続で使用した場合、半角1回分しか反映されません。 上記の悩をSWELLを使用して解決する方法を紹介します。 半角スペースを使用した実際の表示 下記は「実際の表示とスペースの空け方」になります。 実際の表示スペースの空け方スペースを 空ける半角＋全角＋半角スペースを　空ける全角スペースを 空ける半角＋半角＋半角＋半角＋半角スペースを 空ける全角＋全角 「半角＋半角」みたいに半角スペースを続けてもスペ... --- - Published: 2025-05-17 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/879/ - カテゴリー: プラグイン - タグ: AForms, フォーム 前回は簡単にAFormsを触ってみましたので、今回は少し癖のある使い方をしていこうと思います。 具体的にはAFormsの条件分岐（ラベル機能）を使用した見積もりフォームを紹介します。 下記は今回紹介する見積もりフォームです。 入力があるまで自動項目を明細行に表示しない 一定金額で割引 セット購入を可能にする 明細行でのみ表示を変える どのような見積りフォームか想像がつきずらいと思いますので、下記ではデモ画像と一緒に説明しています。 説明には前回の記事で作成したフォームを使用します。 AForms... --- - Published: 2025-05-16 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/1138/ - カテゴリー: プラグイン - タグ: AForms, フォーム AFormsは簡単・無料プログラミング不要で見積もりフォームを作成可能な優秀なプラグインです。 また、AFormsは、少しのCSSを追加する事で独自性の高いデザインを作成可能な事もメリットになります。 今回はCSSを使用したカスタマイズ例とプラグインのアップデートでもCSSが消えない方法を解説していきます。 コードはコピペ可能にしています。 AFormsについて順番に知りたい 【AForms】無料で条件分岐もできる自動見積もりフォームの使い方 | ストレッチチョコレート 【AForms】条件分岐... --- - Published: 2025-05-15 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/762/ - カテゴリー: プラグイン - タグ: AForms, フォーム WordPressに見積もりフォームを作成したいと思ったことはありませんか？ 今回紹介するWordPressプラグイン「AForms」は、 WordPressプラグイン 無料 簡単 プログラミング不要 条件分岐が可能 計算式や変数の使用が可能 なので、とりあえず使用してみるのに最適だと思います。 AForms公式サイトはこちら AFormsについて順番に知りたい 【AForms】無料で条件分岐もできる自動見積もりフォームの使い方 | ストレッチチョコレート 【AForms】条件分岐機能を使用した... --- - Published: 2025-05-12 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/2676/ - カテゴリー: プラグイン - タグ: WP-Members, 会員サイト WordPressで会員サイトを作成したいけど方法は？ WP-Membersがオススメって聞いたけど使い方は？ 会員用のマイページが欲しい！ そう思う方もいるかもしれません。 WP-Membersは初心者でも扱いやすい会員制サイト構築プラグインですが、適切な設定やカスタマイズをしないと「思った通りに動かない」と悩んでしまうことがあります。 この記事では、WP-Membersの使い方を初心者向けに解説し、 基本的な設定方法、 ログイン画面やユーザー登録のカスタマイズ、 ショートコードの活用法、 メ... --- - Published: 2025-04-17 - Modified: 2025-05-14 - URL: https://stretch-chocolate.com/2798/ - カテゴリー: その他 VSCodeの便利な拡張機能に「Live Server」が存在します。 その「Live Server」を使用した時に「Open a folder or workspace」というエラーが表示されたので、解決方法を残しておきます。 Open a folder or workspaceの解決方法 HTMLファイルをフォルダーに入れて 「Live Server」を使用すると、 「Open a folder or workspace」は表示されずに、 リアルタイムでコーディングができます。 HTMLファ... --- - Published: 2025-03-27 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/1986/ - カテゴリー: プラグイン - タグ: サーバー サイトをカスタマイズする際、テーマ内に独自のファイルを作成することがよくあります。 その際、FTPソフトを操作したり、レンタルサーバーのファイルマネージャーを操作するのは、手間がかかり面倒に感じることが多いです。 「WP File Manager」を使用すれば、WordPressの管理画面内だけでファイル操作を完結させることが可能です。 WP File Managerとは 使用するメリット 「WP File Manager」はFTPソフトやレンタルサーバーを介すことなく、ファイルの操作が可能なW... --- - Published: 2025-03-18 - Modified: 2025-10-03 - URL: https://stretch-chocolate.com/1927/ - カテゴリー: SWELL - タグ: ブロックエディター SWELLボタンを使用していて、もっと色を増やしたいと思ったことはありませんか？ この記事ではCSSとパターン化の機能を使用して記事執筆スピードをUPさせる方法をお伝えします。 下記はメインカラーのボタンをオレンジ色に変更したボタンブロックです。 色を変える前 　→　 色を変えたよ SWELLボタンにクラス名を付与する まずはSWELLボタンを設置します。 画面左上の「＋」を選択して、ブロック一覧から「SWELLボタン」を選びます。 「SWELLボタンを選択」＞「ブロック」＞「高度な設定」＞「C... --- - Published: 2025-03-01 - Modified: 2025-10-03 - URL: https://stretch-chocolate.com/1928/ - カテゴリー: SWELL - タグ: ブロックエディター SWELLはコーポレートサイトやブログなどあらゆるサイト構築に向いています。 CSSを使用しなくても簡単にデザインの変更は可能ですが、少しだけ微調整したい！という時に 「わざわざ調べるのは面倒くさい」「そもそもCSSやプログラミングを学ぶ時間が無い」といった問題があります。 この記事ではSWELLのアコーディオンブロックとCSSを使用した簡単なカスタマイズ方法をご紹介します。 SWELLでCSSやクラス名の記述方法の詳細はこちら。 テキストの配置変更 ラベル＆ボディ共に変更 アコーディオン01-... --- - Published: 2025-02-24 - Modified: 2025-10-04 - URL: https://stretch-chocolate.com/2564/ - カテゴリー: その他 QTTabBarをアンインストール時、 「このWindowsインストーラーパッケージには問題があります」 と表示され、削除できずに困っていませんか？ この記事では、 通常の削除手順 Microsoftのトラブルシューティングツール を使った方法を解説します。 QTTabBarとは？ エクスプローラーにタブ切り替え機能を追加できるツール このソフトを使用すると、エクスプローラーのツールバーにタブ切り替え機能が追加され、1つのウィンドウ内で複数のフォルダーを開くことが可能になります。 タブの切り替え... --- - Published: 2024-09-25 - Modified: 2025-10-02 - URL: https://stretch-chocolate.com/1532/ - カテゴリー: SWELL WordPressテーマSWELLを使用しているけど、 「あと少し、ここの色を変更したい！」、「もう少し余白を減らしたい！」 といった場面があると思います。 そんな時に発生する「CSSの記述場所は？」、「CSSのクラス名ってどこに記述するの？」といった問題を解決していきたいと思います。 CSSの追加のみならサイトが白くなったり、エラーでログインできなくなる事はありません。CSSの追加によってサイトのデザインが崩れた場合は、追加したコードを削除して下さい。 SWELLブロックにクラス名を追加する ... --- - Published: 2024-09-22 - Modified: 2025-10-02 - URL: https://stretch-chocolate.com/1757/ - カテゴリー: SWELL - タグ: ブロックエディター SWELLアコーディオンブロックをFAQ風（よくある質問）にカスタマイズしてみました。 実際に触れるようにアコーディオンブロックを配置しています。またコピペで実装できるようにHTMLとCSSのコードも配置していますので活用して下さい。 SWELLでCSSとクラス名をどこに記述するか分からない場合は下記の記事を参考にしてください。 【SWELL】CSSとクラス名はどこに記述する？デザインをカスタマイズする方法 丸形アイコンのアコーディオンブロック 質問には「Q」、回答には「A」を表示した丸形アイコ... --- --- ## 固定ページ - Published: 2025-04-17 - Modified: 2025-09-22 - URL: https://stretch-chocolate.com/profile/ 当サイト（ストレッチチョコレート）に訪問いただき、ありがとうございます。 このページではサイトと管理人について紹介していきます。 サイトについて 当サイトは、WordPressテーマ「SWELL」を活用したWeb制作や、便利なプラグイン、WEBサービス、日々の業務で役立った技術的なノウハウを発信する情報サイトです。 「Web制作って難しそう... 」という方にもわかりやすく伝えられるよう、専門用語はなるべくかみ砕いて解説しています。 Web初心者から中級者まで、何か一つでも「これ役に立った！」と... --- - Published: 2024-11-16 - Modified: 2025-10-02 - URL: https://stretch-chocolate.com/ SWELL もっと記事を見る プラグイン もっと記事を見る その他 もっと記事を見る --- - Published: 2024-11-16 - Modified: 2024-11-16 - URL: https://stretch-chocolate.com/privacy-policy/ 基本方針 当サイトは、個人情報の重要性を認識し、個人情報を保護することが社会的責務であると考え、個人情報に関する法令を遵守し、当サイトで取扱う個人情報の取得、利用、管理を適正に行います。 適用範囲 本プライバシーポリシーは、お客様の個人情報もしくはそれに準ずる情報を取り扱う際に、当サイトが遵守する方針を示したものです。 個人情報の利用目的 当サイトは、お客様からご提供いただく情報を以下の目的の範囲内において利用します。 ご本人確認のため お問い合わせ、コメント等の確認・回答のため メールマガジン... --- - Published: 2024-11-16 - Modified: 2024-11-16 - URL: https://stretch-chocolate.com/contact/ お名前※ メールアドレス※ （半角英数字） このフィールドは空のままにしてください。 備考※ プライバシーポリシーをご確認の上、下記の「同意する」にチェックを入れた後送信してください。 プライバシーポリシーに同意する --- ---