メッセージ

CSS

Cocoonカスタマイズ集

カードタイプ「タイル」をCSSだけでMasonryレイアウトにする方法

「CocoonのタイルカードをCSSだけでMasonryレイアウトにする方法」を解説。Masonry.jsの読み込みを停止し、CSSのcolumn-countで配置する具体的な手順や、カードの表示順が変わる注意点を分かりやすく紹介します。
Cocoonカスタマイズ集

「ギャラリー」ウィジェットを綺麗なMasonryレイウトにする方法

「WordPressのギャラリーウィジェットを綺麗なMasonryレイレイアウトにする方法」を解説。縦横の画像が混在して無駄な余白ができるウィジェットのギャラリーを、CSSのマルチカラムレイアウトを用いて綺麗で自然なMasonry(石積み)風に整列させる法を分かりやすく紹介します。
Cocoonカスタマイズ集

「ボックスメニュー」でFont Awesomeにないアイコンを設定する方法

「ボックスメニューでFont Awesomeにないアイコンを設定する方法」を解説。アイコン未設定時に表示される星アイコンを、CSSのmask-imageで任意の画像に置き換え、サイズや色、表示位置を調整する手順を分かりやすく紹介します。
Cocoonカスタマイズ集

「タグクラウド」ウィジェットに現在のカレント表示する方法

「タグクラウドにカレント表示を追加する方法」を解説。現在表示中のタグを判定し、一致するリンクにaria-current属性を追加する方法や、CSSでカレント項目を強調表示する仕組みを分かりやすく紹介します。
Cocoonカスタマイズ集

「新着記事」「人気記事」「ナビカード」に現在のカレント表示する方法

「新着記事や人気記事にカレント表示を追加する方法」を解説。現在の投稿とメニューのリンク先を判定し、一致するカードにcurrentクラスを追加する方法や、CSSでカレント項目を強調表示する仕組みを分かりやすく紹介します。
Cocoonカスタマイズ集

WordPress 7.0で追加されたブロックごとの追加CSSで「タイムライン」ブロックのアイテムのポイント色を変更する方法

「タイムラインブロックのアイテム個別でポイント色を変更する方法」を解説。WordPress 7.0で追加されたブロックごとの追加CSS機能を使い、Cocoonのタイムラインアイテムのポイント色を特定のステップだけ個別で赤色などに装飾するCSS実装手順を分かりやすく紹介します。