
Lightningのモバイルメニューとページトップボタンをカスタマイズ!背景透過&マークを変更する方法【コピペでOK!】
Lightningはデフォルトのテーマでも十分シンプルに綺麗なサイトが作れますが、モバイルメニューとページトップボタンがなんだか地味でカッコ悪い…と思ったことは ...

背景画像のデザインで使える!透けるボックスのレスポンシブルデザインCSS【コピペ用コード】
透ける色を使って、背景画像の上でも綺麗に文字が見えるボックスができます。 パララックスで使える透けるボックスのサンプルサイト 透けるボックスの基本のデザインCS ...

CSSのみでパララックスするサイトデザインの作り方&スマホ対応させる方法【コピペ用HTML&CSS】
パララックスデザインとは、背景と中身のコンテンツのスクロール動作をずらして視覚的な効果をつけるデザインのことです。 パララックス部分とパララックスしない部分を組 ...

1カラム全幅デザインを作る方法!画面幅いっぱいに見出しやブロックを広げるCSS【コピペでOK】
LightningなどのWordPressテーマでは、1カラムのサイドバーのないテンプレートを使ったとしても、ページの画面幅いっぱいにデザインすることができませ ...

ブロックエディタやHTMLで会社概要・運営者情報や人物紹介・スタッフ紹介を作る~CSSデザイン付き~
コーポレートサイトや店舗のサイトに必須な基本情報を入力するページ。 最近ではスマホで地図を見ながら場所を探す人が多いため、アクセスページにはGoogleマップの ...

CSSを小さくするための書き方と不必要なCSSを増やさない&読み込まないための整理の仕方-CSSカスタマイズを管理-
初めてCSSカスタマイズを覚えると、まずデベロッパーツールでデフォルトのCSSを確認してそれをコピペするか、どこかで拾ってきたコードをコピペしてカスタマイズして ...

LightningでLGT全幅見出しを使って全幅パララックスのデザインを実装するCSS-1カラムトップページがオシャレに-【コピペ&カスタマイズ】
Lightningにはデザインが簡単になるウィジェットが沢山あります。 全幅のトップページスライドショーとLTG全幅見出しを使うだけで、全幅のパララックス風ペー ...

Lightningのスライダーをオシャレ&レスポンシブルにカスタマイズする方法!レイアウトやカルーセルの色変更
Lightningにはデフォルトでトップページにスライダーを設置する機能があります。 そのまま使用するとPCではスライダーが大きく、スマホだと随分と小さく表示さ ...

回答に応じてフォーム項目の表示を変える&ボタンクリックで説明を表示する!ContactForm7で条件分岐させる方法
「メールを選択したらメールアドレスの入力」「LINEを選択したらLINE IDの入力」というように、回答によって違うフォーム項目に入力してほしいときがありますよ ...

ContactForm7でお問合せ・予約・アンケートに使えるCSSデザインカスタマイズ【初心者向け】
フォームは見やすさ&わかりやすさが大切です。 どこに何を入力するのかがわかりにくいと、ユーザーが面倒な入力をせずにページを離れてしまいます。 見やすくわかりやす ...

WordPressテーマLuxeritasで関連記事・前後記事のサムネイルを正方形→任意のサイズに変える方法
さやっと。ではWordPressのテーマLuxeritasを使っています。 非常に高速&高機能&カスタマイズ豊富で知られるLuxeritasですが、設定項目が多 ...

完全初心者がサイトデザインのCSSカスタマイズをするための基礎知識と手順!つまづきやすいポイントも解説
WordPressサイトはCSSの知識がなくてもテーマの基本的なデザインで作ることができます。 ロゴや色などの調整はテーマの設定で出来ることも多いですが、少し慣 ...