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

ブログカスタマイズ

テーマ共通

CSSで見出しデザインをカスタマイズする方法【簡単おしゃれ・コピペOK】

見出しデザインを工夫するだけで、記事の読みやすさや視認性がぐっと向上しサイト全体の印象も大きく変わります。この記事では、WordPress(一部無料ブログ)全般...
テーマ「Cocoon」

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

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

【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる?OGP設定方法

SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは?イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
テーマ「Cocoon」

Cocoonカスタマイズの基本|HTML・CSS・PHP・JavaScript編集方法

ブログのデザインや機能をもっと自由にカスタマイズしたいとき、Cocoonでは HTML・CSS・PHP・JavaScript を使って編集できます。ほんの少し手...
テーマ「Cocoon」

Cocoonで全幅(フルワイド)デザイン!幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説

Cocoonでも、有料テーマSWELL風のフルワイドデザインは作れます。この記事では、Cocoonでトップページをおしゃれに見せる 「全幅(フルワイド)セクショ...
配色・デザイン

ブログのアイキャッチや図解がプロっぽくなる!おすすめデザイン本4冊レビュー(おしゃれな配色・余白・フォント・デザイン)

ブログのアイキャッチや図解を作るとき、「なぜか素人っぽく見える…」と悩むことはありませんか?そんなときに役立つのが、デザインの基礎をわかりやすく解説している本で...
CSSの基礎

CSS Transitionの使い方|簡単にスムーズなアニメーションを実現

「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。 詳しくは「CSSア...
CSSの基礎

CSSセレクタを調べる方法|Chromeデベロッパーツール活用で初心者でも簡単!Webデザインに役立つ実践ガイド

Webデザインやサイトのカスタマイズに挑戦するとき、避けて通れないのが「CSSセレクタを調べる」作業です。実際、「デベロッパーツールを使えないとCSSは書けない...
CSSの基礎

WordPressの「追加CSSクラス」が便利!特定のブロックにだけスタイルを適用する方法

WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか?実は「追加CSSクラス」機能を使えばとても簡単に実現できます...
CSSの基礎

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

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

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

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

CSS・PHP・JavaScriptのバックアップ方法まとめ|WordPressカスタマイズ前に必須!

WordPressを使っていると、デザインを整えるために CSS、機能を追加するために PHP や JavaScript を編集する場面があります。ただし、直接...
CSSの基礎

もう迷わない!バナーなどの要素を上下左右中央寄せにする方法|CSS使用

「なんだか見た目がしっくりこない…」その解決のカギは中央寄せにあるかもしれません。ウェブデザインでは、バナーや見出しといった要素をどこに配置するかで全体の印象が...
CSSの基礎

サイトに「動き」をつけるCSSアニメーション|基本的な指定方法を覚えよう

この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要?なイメージがある...
CSSの基礎

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

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

Cocoonで作るサイト型トップページ|オシャレなSWELL風(HTML、CSS使用)

2025.9.5 実例集にmomlog(まむろぐ)を掲載しました。トップページが平凡で、他のサイトと差がつかない…そんなお悩みありませんか?この記事では、Wor...
テーマ共通

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

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

WordPressでテキストリンクをおしゃれに装飾する方法|ブロックエディタ&CSSで簡単カスタマイズ

この記事では、WordPressのブロックエディタとCSSを使って、普通のテキストリンクをおしゃれに装飾する方法をわかりやすく解説します。「ボタンブロックは使い...
テーマ「Cocoon」

Cocoonタブブロックの使い方&おしゃれカスタマイズ|ワンクリックで12デザイン切替

2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマCocoon(2.7.3~)に標準搭載された、待望...
テーマ「Cocoon」

ワンクリックで差がつく!Cocoonラベルボックスをおしゃれにカスタマイズする方法

Cocoonの「ラベルボックス」は補足情報やポイントをシンプルに伝えるのに便利な機能ですが、余白が狭く窮屈だったり、見出しの後ろに薄い線が見えたりと、デザインに...
スポンサーリンク