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

ブログカスタマイズ

Cocoonカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSセレクタの調べ方|Chromeデベロッパーツール(検証)でクラス・IDを確認する方法【初心者向け】

CSSでカスタマイズしてみたいけれど、「どの要素を指定すればいいのかわからない…」「書いたCSSが思った通りに反映されない…」そんな経験はあると思います。見た目...
Cocoonカスタマイズ

Cocoon『もっと見る』『次のページ』『新着記事』のテキスト変更カスタマイズ

Cocoonを使っていると、「もっと見る」「次のページ」「新着記事」などの表記が、サイトの雰囲気に合わないと感じることがあります。英語表記にしたいクリックを促し...
Cocoonカスタマイズ

Cocoon目次が見切れる原因と解決方法|サイドバー追従目次をスクロール対応にするCSS

Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
カスタマイズの基本

CSSで疑似要素に影をつける方法|box-shadowとfilter: drop-shadowの違いと使い分け

CSSで疑似要素に影をつける方法を解説します。吹き出しの三角形に影をつけたいのに、box-shadow では四角い影になってしまうことがあります。この問題は、b...
Cocoonカスタマイズ

Cocoonで投稿日・更新日を表示する方法|ウィジェットで新着・人気記事に日付を追加

Cocoonで新着記事・人気記事に「投稿日・更新日」を表示したい方へ。この記事では、表示方法ごとの違い(CSSが必要かどうか)コピペで使える基本CSS表示位置や...
スポンサーリンク