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

ブログカスタマイズ

Cocoonカスタマイズ

Cocoon検索フォーム(検索窓)のデザイン変更|CSSカスタマイズサンプル集(コピペOK)

「検索フォームを少しおしゃれにしたい」「ブログデザインに合わせたい」Cocoonの検索フォームはシンプルですが、CSSを追加するだけでおしゃれなデザインにカスタ...
Cocoonカスタマイズ

Cocoonで自作CTAボックスを作る方法|複数ボタンにも対応(簡単)

Cocoon標準のCTAボックスは手軽ですが、ボタンは1つだけでレイアウトも固定です。商品紹介やアフィリエイト記事では、複数の申込先を並べたい商品画像も一緒に見...
カスタマイズの基本

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

CSSの中央寄せはシンプルそうに見えて、意外と迷いやすいポイントです。テキストなら text-align:center で済みますが、画像やボックスになると急に...
カスタマイズの基本

Cocoonカスタマイズ完全ガイド|HTML・CSS・PHPの編集場所と使い分けを初心者向けに解説

Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの?」「HTMLとCSSとPHPの違いがわからない…」という初心者は...
カスタマイズの基本

CSSが効かない原因はこれ|デベロッパーツールで「当たってない・負けてる」を確認する方法

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

Cocoon FAQブロックを見出し(H3)にする方法|目次に表示させるカスタマイズ

CocoonのFAQブロックは便利ですが、実際に記事を書いていると、FAQが目次に出ない長文記事だと埋もれてしまうせっかくFAQを書いても読まれにくいと感じるこ...
Cocoonカスタマイズ

Cocoonトップページ作成ガイド(サイト型)|HTML・ブロック2つの方法を比較して解説

Cocoonでブログを作っていると、「トップページがなんだか普通…」「もっとサイトっぽくしたい」「おしゃれなトップページに憧れる」と感じることがあるかと思います...
Cocoonカスタマイズ

Cocoonアピールエリアに検索フォーム(検索窓)を置く方法|コピペOK+回遊率アップ

Cocoonのアピールエリアに検索フォームを設置すると、ユーザーが知りたい情報へ最短でアクセスでき、回遊率・滞在時間の改善につながります。しかも設定はシンプル。...
Webカスタマイズ

タブ切り替えをHTMLとCSSで実装(JavaScriptなし)

通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
Cocoonカスタマイズ

Cocoon装飾ブロック完全ガイド|使い方・デザインカスタマイズまとめ

Cocoonには、記事を見やすく整理できる装飾ブロック(ボックス・カード・FAQ・タイムラインなど)が数多く用意されています。ただ、どの装飾ブロックを使えばいい...
カスタマイズの基本

CSSの色を一括管理!CSS変数(カスタムプロパティ)の使い方|var・:rootの基本と実践

「色を変えたいだけなのに、同じコードを何ヶ所も修正…」こんな非効率なCSS管理をしていませんか。CSS変数(カスタムプロパティ)を使えば、一箇所の変更だけでサイ...
Webカスタマイズ

見出しデザインをおしゃれにカスタマイズ【Cocoon対応・CSSサンプル付き】

見出しデザインを変えるだけで、記事の読みやすさや視認性が大きく変わります。この記事では、WordPress(無料ブログ含む)で使える見出しデザインのサンプルを、...
カスタマイズの基本

CSSカスタマイズの基本|WordPress・Cocoonでデザインを変える方法まとめ(初心者向け学習ガイド)

ブログを書いていると、こんな悩みが出てきます。デザインがなんとなく素人っぽい見出しやボタンをもう少しおしゃれにしたいでも、どこを触ればいいのか分からないそこで必...
Webカスタマイズ

CSS・SVGで作る境界線と背景デザイン|波、三角形、斜めラインを使ったおしゃれな装飾テクニック

Webデザインでは、ちょっとした工夫で見た目の印象が変わります。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセントを入れるだけ...
カスタマイズの基本

CSSアニメーションの基本と使い方【初心者向け】@keyframes・実例・軽くするコツ

Webサイトに動きを加えたいなら、まず覚えておきたいのが CSSアニメーション(@keyframes と animation) です。この2つを理解すれば、Ja...
Webカスタマイズ

CSSでulリストマーカー色(箇条書きの点)を変更する方法|::marker・::before・spanの違いと使い分け

CSSでul/liのリストマーカーの色を変えたいけど、「どうやってやるのかわからない…」「HTMLを変更せずに簡単に色だけ変えたい」という方に向けた解説です。実...
Cocoonカスタマイズ

Cocoonテーブル(表)の中にリンクボタンを置く方法|簡単・視認性アップでクリック率も向上

比較表・料金表・アフィリエイト表などを、もっと見やすく・わかりやすくしたい!そんなときに便利なのが「表の中にリンクボタンを設置する方法」です。WordPress...
Webカスタマイズ

ボックスデザイン|ブログをおしゃれに彩るCSS囲み枠集【コピペOK】

ブログで使えるボックスデザイン(囲み枠)を厳選してご紹介します。コードはコピペ対応で簡単!!
Webカスタマイズ

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

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

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

毎回、同じ装飾ボックスやCTAを手作業で作っていませんか?WordPressの「パターン」機能を使えば、よく使うブロックやレイアウトを登録して、他の投稿やページ...
スポンサーリンク