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

ブログカスタマイズ

Cocoonカスタマイズ

【Cocoon】CSSコピペで作るサイト型トップページ(カスタマイズ向け)

「Cocoonって無料テーマだから、トップページはシンプルなブログ型しか無理…」そう思っていませんか?実はCocoonでも、サイト型トップページおしゃれなカード...
Cocoonカスタマイズ

Cocoonブログカードをカスタマイズ|12種類のデザイン切替と組み合わせで回遊率を上げる方法

Cocoonブログカードがクリックされない原因を解決。CSSで12種類のデザインに切り替え、関連記事・おすすめ記事・まとめ枠を最適化することで回遊率アップにつなげるカスタマイズ方法です。
Cocoonカスタマイズ

Cocoonラベルボックスのカスタマイズ方法|CSSコピペでおしゃれにするデザイン例

Cocoonのラベルボックスは便利ですが、ラベルの後ろに線が見えて少し野暮ったい長いラベルだとスマホで崩れやすいデザインのバリエーションが少なく使い分けしづらい...
Cocoonカスタマイズ

Cocoonアイコンボックスのカスタマイズ方法|デザイン切替・色変更も完全対応

Cocoonのアイコンボックスは便利ですが、使っているうちに補足も注意点も同じ見た目になる記事が少し単調に見える他のサイトと差別化したいと感じることがありました...
Cocoonカスタマイズ

Cocoon見出しボックスをおしゃれにカスタマイズ|選べるデザイン&リストマーカー色も自動調整

Cocoonの「見出しボックス」をおしゃれにカスタマイズしたい方へ。今回紹介するカスタマイズでは、Cocoon標準の「見出しボックス」をベースに、シンプル・影付...
Cocoonカスタマイズ

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

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

WordPressスクロールアニメーションでふわっと表示(動きをつける)|CSS+IntersectionObserverで簡単実装【コピペOK】

Webサイトでよく見かける、スクロールに合わせて「ふわっ」と表示されるアニメーション。あの動きが入るだけで、サイトが少しおしゃれに見えたりコンテンツが読みやすく...
カスタマイズの基本

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

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

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

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

Cocoonタブブロックを使いやすくカスタマイズ|均等配置・折り返し・横スクロールをワンクリック化

Cocoonのタブブロックはとても便利なのですが、タブを均等幅にしたいスクロールではなく自動で折り返したいデザインを選びたいなどと感じたときに標準機能では設定で...
Cocoonカスタマイズ

【Cocoon】サイト型トップページの作り方|ブロックだけで簡単作成(初心者OK・CSSほぼ不要)

Cocoonでブログを始めたものの、「トップページがなんだか普通…」「おしゃれなサイトみたいにしたい」「でもHTMLやCSSは難しそう」そんなふうに感じたことが...
Cocoonカスタマイズ

Cocoonアピールエリア|画面いっぱいのフルスクリーン+スクロール矢印・ズーム演出するカスタマイズ

Cocoonで「アピールエリアをフルスクリーン表示にしたい」「トップページをおしゃれにしたい」と悩んでいる方へ。この記事では、インパクトのあるフルスクリーン化の...
カスタマイズの基本

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

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

【Cocoon】白抜きボックスのカスタマイズ|おしゃれデザインを追加+ワンクリックで切り替え

Cocoonで記事を装飾する方法として「段落ブロック」がありますが、「リストやボタンも入れたい…」と思ったとき、中にブロックを組み込む用途には向いていません。装...
Cocoonカスタマイズ

Cocoon記事カードを横並びにする方法|新着記事・人気記事・ナビカード2〜4カラム切替・PCスマホ対応カスタマイズ

Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
Webカスタマイズ

CSSだけで複数画像切り替えスライダーを作る方法|JS不要・軽量・コピペOK【WordPress対応】

トップページを開いた瞬間、ふわっと画像が切り替わる。そんなサイトっぽい雰囲気に少し憧れたことはありませんか?でも実際に調べ始めると、プラグインが重いかもJava...
Cocoonカスタマイズ

Cocoon通知エリアのカスタマイズ|スライド表示(流れる文字)+CTAボタン追加+ヘッダーより上に表示【コピペOK】

「Cocoonの通知エリア、なんとなく地味かも…」「もう少し自然に目を引く感じにしたい」「お知らせやCTAをもっと見てもらいたい」そんな時におすすめなのが、通知...
Cocoonカスタマイズ

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

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

Cocoonタイムライン(ステップブロック)をおしゃれにカスタマイズ|選べる5種類のデザイン

「タイムライン便利だけど、ちょっと地味かも…」今回紹介するのは、Cocoonタイムラインを実用レベルでおしゃれにするカスタマイズ集です。実は少し見せ方を整えるだ...
Cocoonカスタマイズ

Cocoon「タブ見出しボックス」をおしゃれにデザイン|コピペで使えるカスタムスタイル

Cocoonのタブ見出しボックスは、情報整理に便利です。ただ複数記事を書いていると、「便利だけど少し単調に見える」と感じることがあります。そこで、タブ見出しボッ...
スポンサーリンク