サイト型トップページの作り方を公開しています!Check

ブログカスタマイズ

テーマ共通

動きで魅せる!ホバーアニメーションボタン・おしゃれな矢印リンク&下線スライド(CSS付き)

他のサイトで見かける「このリンクデザインおしゃれ!」や「ボタンの動きがいいな」といった演出。どうやって作られているの?実は、CSSだけで簡単に再現できるデザイン...
CSSの基礎

【初心者向け】CSSカスタマイズの基本|WEBデザインを自由に変える方法

ブログデザインをもっと自分らしく作りたいと感じたことはありませんか?自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS(Casca...
CSSの基礎

サイトに「動き」をつけるCSSアニメーション|基本的な使い方と実例

Webサイトにアニメーションを取り入れると、ちょっとした強調や演出効果を加えられデザイン全体がぐっと引き締まります。CSSの @keyframes と anim...
CSSの基礎

CSSのカスタムプロパティを使いこなそう!繰り返し使える変数の設定方法

この記事ではCSSカスタムプロパティ(CSS変数)の使い方と、よく使われる値を解説します。CSSカスタムプロパティ(CSS変数)は「設定した値を何度も使えるよう...
CSSの基礎

【CSS】transition(トランジション)の使い方|hoverなどでゆっくり、なめらかに変化するアニメーション

サイトにちょっとした動きを加えるだけで見た目の印象は大きく変わります。その中でも CSSの「transitionトランジション」 は、要素の状態変化をなめらかに...
CSSの基礎

CSSが反映されない原因は?デベロッパーツールを使った確認方法と対処法まとめ

CSSが反映されない原因を詳しく解説!デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
テーマ共通

WordPressパターン機能でラクラク時短!再利用ブロックの使い方と同期・非同期の違い

WordPressの「パターン」機能、使ったことはありますか?これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能...
CSSの基礎

CSSで中央寄せする方法まとめ|テキスト・画像・バナー・ボックスを真ん中に配置

中央に揃えるというレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。ただし、要素の種類(テキスト・画像・ブロック要素)や揃え方(横だけ・縦横両方...
Cocoon

【Cocoon】WordPressのカラーパレットを自由に変更・追加する方法

WordPressのブロックエディタ(Gutenberg)では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色...
Cocoon

【Cocoon】ボタンやキャプションの文字を変更|『新着記事』『もっと見る』『次ページ』のカスタマイズ

WordPressの人気無料テーマ「Cocoon」を使っていると、「新着記事」「もっと見る」「次のページ」などのボタンやキャプションのテキストを自分好みに変更し...
スポンサーリンク