かんた🌊SWELLマニア

IT業界歴22年 / WordPressでWebサイト制作する仕事しています 。 noteではWordPressのカスタマイズを紹介しています。XでもWeb制作者のリアルな情報発信をしております。ぜひフォローよろしくお願いします。 https://webrent.xsrv.jp/

かんた🌊SWELLマニア

IT業界歴22年 / WordPressでWebサイト制作する仕事しています 。 noteではWordPressのカスタマイズを紹介しています。XでもWeb制作者のリアルな情報発信をしております。ぜひフォローよろしくお願いします。 https://webrent.xsrv.jp/

マガジン

最近の記事

  • 固定された記事

【SWELL】ヘッダーの右上に電話番号・問い合わせボタンを追加表示するカスタマイズ方法

※2023年11月24日追記 SWELL最新バージョン(2.8.1)でも有効です。 WordPress有料テーマの「SWELL」のカスタマイズについてです。 企業サイトを作っていると、ヘッダーの右上部分に電話番号や営業時間を入れて欲しいといった要望を受けることがあります。 クライアントにヒアリングしてみると、以下の画像のような要望が多いなと感じます。 【企業サイト制作でよくある要望】 ・電話番号 ・営業時間 ・問い合わせフォーム SWELLの機能だけでこのレイアウト

¥10,000
    • 【Arkhe】投稿リストブロックにACFのカスタムフィールドとタームを表示するカスタマイズ

      無料WordPressテーマ「Arkhe」のカスタマイズメモです。 先日Arkheで賃貸物件を取り扱うデモサイトを制作しました。 →デモサイトを開く トップページは固定ページで作成し、トップページ上の物件情報をArkhe Blocks Proの投稿リストブロックで出力しています↓ 物件の詳細情報の定番、家賃や部屋の広さといった情報をカスタムフィールドで入力する運用を想定。フロント側ではカスタムフィールドで入力した値を投稿リストブロックに含めて表示しました(上記画像の赤

      ¥10,000
      • 【SWELL】検索キーワード履歴を表示するカスタマイズ

        SWELLマニアのかんた(@swell_mania)です。 WordPressテーマSWELLのカスタマイズメモ。検索したキーワード履歴を画面に表示する機能を実装してみました。 まずはサンプルサイトです。 検索履歴がない状態だと、「検索履歴がありません。」と表示↓ 「あああ いいい」と検索すると、履歴が表示されます。 履歴として残るキーワードはユーザーのセッション単位です。 自分が検索したキーワードは、他のユーザーには見えない仕様です。 サンプルサイトの環境 →

        ¥4,980
        • VK Filter Search Proの検索キーワード履歴を表示する方法 | WordPress無料テーマLightning対応

          SWELLマニアのかんた(@swell_mania)です。 本記事はWordPress絞り込み検索プラグイン「VK Filter Search Pro」のカスタマイズメモです。絞り込み検索フォームのキーワード検索機能を少しアレンジしてみました。 今回はユーザーが入力したキーワード履歴を記録し、画面に表示するというカスタマイズです↓ キーワード履歴はセッションごとです。 例えばAさんが検索したキーワードはAさんのセッション中にAさんだけに表示されます。他のユーザーには表

          ¥7,980
        • 固定された記事

        【SWELL】ヘッダーの右上に電話番号・問い合わせボタンを追加表示するカスタマイズ方法

        ¥10,000

        マガジン

        • Arkhe
          10本
        • SWELL
          78本
        • Lightning
          5本
        • JIN
          14本
        • Cocoon
          5本
        • GOLD BLOG
          2本

        記事

          【SWELL】メインビジュアル動画の音声有効化する切り替えボタンの設置方法

          SWELLマニアのかんた(@swell_mania)です。 メインビジュアルの動画に音声を有効化する再生ボタンを付けてみました↓ 「BGMをオンにする」のボタンをクリックすると、動画のBGMが再生するというシンプルな作りです。 音声を再生中に再びボタンをクリックすると音声は停止します。 標準機能だとメインビジュアル動画のBGMは再生されない SWELLのメインビジュアルはカスタマイザーから動画を指定できます。 ただし動画ファイルに音声が付いていても音声は再生されま

          ¥5,980

          【SWELL】メインビジュアル動画の音声有効化する切り替えボタンの設置方法

          ¥5,980

          【SWELL】目次のタイトルを特定の記事や固定ページだけ変更するカスタマイズ方法

          SWELLマニアのかんた(@swell_mania)です。 WordPressテーマ「SWELL」のカスタマイズ備忘録をシェアします。今回は、コンテンツエリアに表示される「目次のタイトル」を特定のページだけ変更する方法です。 カスタマイザー上からは設定できない? 目次のタイトルはカスタマイザー上で任意の文字列に指定可能ですが、サイト内で共通です。個別の記事や固定ページごとに変更するオプションはカスタマイザー上にはありません。 本記事では「特定の記事だけ」「固定ページだけ

          【SWELL】目次のタイトルを特定の記事や固定ページだけ変更するカスタマイズ方法

          【SWELL】LPにコメント欄を表示するカスタマイズ

          SWELLマニアの かんた(@swell_mania)です。 今回はWordPressテーマSWELLのLPページにコメント欄を表示する作業メモです。 標準だとSWELLのLP機能で作成したページにコメント欄は表示されません。カスタマイズでLPにコメント欄を付けてみたので備忘録を残します。 サンプルサイト →サンプルサイトを開く サンプルサイトの環境 LPにコメント欄を表示したサンプルサイト構成についてです。 【環境】 WordPress:6.5.4 SWE

          ¥4,980

          【SWELL】LPにコメント欄を表示するカスタマイズ

          ¥4,980

          【JIN:R】コピーライトを編集する方法

          WordPressテーマJIN:Rのフッターカスタマイズメモです。 JIN:Rのフッターにはデフォルトでコピーライトが表示される仕様になっています↓ コピーライト部分は「(C)+西暦 + サイトのタイトル」というフォーマットなんですが、この部分はカスタマイザーから表示内容を変更できません。 (C)と西暦を外し、かつサイトのタイトルではない任意の文字列を表示させるカスタマイズを実装してみました。 本来だと 「(C)2024 サイトのタイトル」となる部分を、 「JIN:R

          ¥4,980

          【JIN:R】コピーライトを編集する方法

          ¥4,980

          CocoonのPVをSWELLに移設した作業メモ

          WordPressテーマをCocoonからSWELLに移行した工程の作業メモです。 こんにちは、SWELLマニアのかんた(@swell_mania)です。 仕事がらWordPressのテーマ乗り換え作業をする機会が多々あります。 その中で、切り替え前のテーマで使用していた一部データをテーマ切り替え後に再利用したいという要望を受けることがあります。 今回はCocoonで作成した記事のPVをSWELLのPVにコピーした作業備忘録をシェアします。 コピペで5秒で終わる

          ¥5,980

          CocoonのPVをSWELLに移設した作業メモ

          ¥5,980

          【SWELL】リッチカラムで画像を上にはみ出すカスタマイズ方法

          WordPressテーマSWELLのリッチカラムブロックのアレンジについてす。 ちょっとだけ独自のカスタマイズを加えて、オシャレなサイトに仕上げたい人向けです。 【パターン①】番号ちょいズレ →デモサイトを開く リッチカラムの上部に、罫線の上に重なるように番号を表示させるカスタマイズです。 【パターン②】画像ちょいズレ →デモサイトを開く リッチカラムから上部に画像をはみ出すカスタマイズです。ちょっと遊び心のあるデザインです。 【パターン①】背景+画像ちょいズ

          ¥5,980

          【SWELL】リッチカラムで画像を上にはみ出すカスタマイズ方法

          ¥5,980

          【GOLD BLOG】ヘッダー右上に電話番号+問い合わせボタンを表示するカスタマイズ

          WordPressテーマGOLD BLOGを使い、コーポレートのデモサイトを作成してみました。 →デモサイトを開く ヘッダーに電話番号と営業時間、問い合わせ系のボタンリンクを設置する独自カスタマイズをしてみました。 ファーストビューに電話番号や問い合わせボタンを設置することで、サイト訪問者がスムーズに問い合わせができるコーポレート系定番のレイアウト構成です。 本記事ではGOLD BLOGのヘッダー右上に、問い合わせ関連の情報を表示させるカスタマイズ方法をシェアします。

          ¥9,890

          【GOLD BLOG】ヘッダー右上に電話番号+問い合わせボタンを表示するカスタマイズ

          ¥9,890

          【GOLD BLOG】背景に固定動画を設定する方法

          最近リリースされたWordPressテーマ「GOLD BLOG」のカスタマイズメモです。 GOLD BLOGは絞り込み検索機能が付いている珍しいテーマ。 色々調べながらデモサイトを作りつつ勉強しています。 最近制作したデモサイトで背景に固定動画を設置するカスタマイズをしてみました↓ →デモサイトを開く サンプルサイトの構成 よりシンプルな構成にしたサンプルサイトを用意しました。GOLD BLOGを有効化した時点からのカスタマイズ方法をシェアします。 →サンプルサイト

          ¥6,980

          【GOLD BLOG】背景に固定動画を設定する方法

          ¥6,980

          【WordPress】埋め込み動画から「ダウンロード」を無くすカスタマイズ

          SWELLマニアのかんた(@swell_mania)です。 今回は、特定のテーマではなくWordPressコアブロックの1つ「動画ブロック」のカスタマイズについての記事になります。 動画ブロックで埋め込んだ動画は、標準の仕様だと「ダウンロード」というオプションが表示されます↓ このボタンだけでなく、動画上で右クリックを押しても、ダウンロードできてしまう仕様です↓ 名前の通りなんですがダウンロードをクリックすると、ユーザーが動画を自身の環境に保存できる仕組みになっていま

          【WordPress】埋め込み動画から「ダウンロード」を無くすカスタマイズ

          【SWELL】カスタム投稿のアーカイブページにブログパーツを設置しエディターで編集可能にする

          SWELLのカスタム投稿のアーカイブページのタイトル下に、ブログパーツを設置した作業メモです。 下記の画像の「対象スペース」部分です↓ →サンプルサイトを開く アーカイブページにブログパーツを配置することで、クライアントが自由に編集できるようにするのが目的です。 SWELLのカテゴリーのアーカイブにはブログパーツを設置できる機能があるんですが、カスタム投稿でもそれっぽいカスタマイズができないか調べた結果、テンプレートを編集しないでも実装できることが分かりました。 サ

          ¥5,980

          【SWELL】カスタム投稿のアーカイブページにブログパーツを設置しエディターで編集可能にする

          ¥5,980

          【SWELL】VK Filter Searchのフォームをモーダルで開くカスタマイズ

          SWELLマニアのかんた(@swell_mania)です。 SWELLとVK Filter Search Proを使ったカスタマイズの備忘録です。 VK Filter Search Proの絞り込み項目が多いと、当然ながらページが縦長になります。 デザインをスッキリさせたいと思い、絞り込み検索フォームをモーダルに格納しました。以下、サンプルサイトです↓ →サンプルサイトを開く トリガーとなるボタンをクリックすると、モーダルが表示される仕組みです。 開いたモーダルの「

          ¥10,000

          【SWELL】VK Filter Searchのフォームをモーダルで開くカスタマイズ

          ¥10,000

          【SWELL】2カラム化 | 左側に固定サイドバーを設置するカスタマイズ方法

          ※2024年4月7日更新しました。 WordPressテーマSWELLで「2カラムデザインにしつつ、左側に固定メニュー」を表示するカスタマイズを実装してみました。 →「和風なサイト」を開く ブレイクポイントは1,100px。 PCなどで閲覧時には、上記画像の通り左側に固定メニューが表示される仕様です。 サンプルサイト 解説用にシンプルなサンプルサイトを用意しました↓ →サンプルサイトを開く サンプルサイトの構成 【バージョン】 WordPress:6.5.2

          ¥6,980

          【SWELL】2カラム化 | 左側に固定サイドバーを設置するカスタマイズ方法

          ¥6,980