Mayu

WordPress歴11年で普段はSwellテーマでサイト制作を代行している人です。noteへの投稿は個人的な好奇心ゆえなので、こちらからのお仕事は受け付けておりませんm(__)m

Mayu

WordPress歴11年で普段はSwellテーマでサイト制作を代行している人です。noteへの投稿は個人的な好奇心ゆえなので、こちらからのお仕事は受け付けておりませんm(__)m

【Swellカスタマイズ】グローバルナビを中央に配置し、各メニューの背景色を個別に変える

企業サイト等におすすめのヘッダーメニューカスタマイズ例です。 基本的にカスタマイズからの設定とCSSコピペで実装可能です。 なお今回はメニュー背景を全幅のカラー表示にするため、専用の画像を作成しました。 画像はこちらで作成したものをダウンロードしていただけます。 また、トップページの見出しセクションのアクセントとして、ヘッダーのメニューカラーと合わせたライン装飾を施しましたので、おまけでお伝えいたします。 カスタマイズの設定カスタマイズ > 基本デザイン > サイト全

¥1,000
Mayu

    • 【Swellカスタマイズ】PC・スマホの長いスクショ画像を横並びにし、フレーム内でスクロール表示する

      制作したデモサイトのスクショ画像を、美しく分かりやすく表示させるカスタマイズ方法です。 PCやスマホのデザイン枠を使用した例もあると思いますが、高さと幅をだいたい合わせてスクロールさえできればいいんでは？という境地に至り、シンプルにしました。(私も自身のサイトで採用しています) ページ全体をスクショする方法はブラウザによって異なります。 私の場合はGoogleChromeで「GoFullPage」という拡張機能を利用しています。 またスマホはiPhoneを使用していますが

      ¥1,000
      Mayu

      • 【Swellカスタマイズ】WPFormsプラグインで横並び表示、フォームとボタンをおしゃれに

        CSSのコピペのみで実装できます。 WPFormsプラグイン側の設定は必要ありません。 カスタマイズした点 ・項目と入力フォームを横並びに (スマホでは縦に並べる) ・フォームに背景色と影をつけてちょっと立体的に ・送信ボタンはメインカラー、中央寄せに Swell用の改変なので、テーマのメインカラーやホバーエフェクトをそのまま引き継ぎます。 Swellでなくても活用いただけるコードです。 CSSは下記をご参照ください。

        ¥1,000
        Mayu

        • 【Swellカスタマイズ】グローバルナビを左側に固定し、2カラムで表示する

          Swellでヘッダーメニューを左側に設置するカスタマイズです。 画面をスクロールしてもメニューエリアは固定されたままです。 一応サブメニューにも対応させました。 メニューをマウスオーバーした時のエフェクトは細線の方が綺麗な気がするので、その変更方法もおまけ。 カスタマイズからの設定とCSSのコピペのみで実装できます。 カスタマイズの設定カスタマイズ > ヘッダー ■カラー設定 ヘッダー背景色：指定しない (CSSでメインカラーを指定) ヘッダー文字色：#fff

          ¥1,500
          Mayu

        • 【Swellカスタマイズ】グローバルナビを中央に配置し、各メニューの背景色を個別に変える

          ¥1,000
          Mayu

        • 【Swellカスタマイズ】PC・スマホの長いスクショ画像を横並びにし、フレーム内でスクロール表示する

          ¥1,000
          Mayu

        • 【Swellカスタマイズ】WPFormsプラグインで横並び表示、フォームとボタンをおしゃれに

          ¥1,000
          Mayu

        • 【Swellカスタマイズ】グローバルナビを左側に固定し、2カラムで表示する

          ¥1,500
          Mayu