WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーと記事下のプロフィールボックスを人気のWordPressテーマ「SANGO」風にカスタマイズしてみました。 サイドバーではこんな感じになります↓ 記事下のメインカラムに表示する場合↓ 記事下のメインカラムでのスマホ表示↓ 上の画像ではSNSボタンを全種類表示していますが、もちろん好きなものだけ使うことも可能です。 今回はCSSのコードが多いので、 サイドバーに表示する場合記事下メインカラムに表示する場合プロフィール詳細のボタンを表示する場合と3段階に分けて紹介していきます。 不要なコードはなるべく増やさないほうがファイルサイズの節約になり、サイトの高速化にも繋がりますもんね。 それでは早速やっていきましょう。 【追記】JIN風のカスタマイズ記事も書きました↓ プロフィール欄を表示するための準備カスタマイズの前

高機能なWordPressテーマのCocoonですが、非常に便利です。 細かい事を気にしなければデフォルトの状態でも不自由なく使えます。 しかしやはりブログを運営しているからには、多少はデザインを自分好みにカスタマイズしたいと思う気持ちがあるはずです。 今回は細かすぎて伝わりにくいカスタマイズです！ Cocoonで「検索ボックス」をカスタマイズしていきます！ コピペで簡単にできるので、ぜひ試してみて下さい。 Cocoonのカスタマイズ記事はこちらでまとめています。

インデックス（カードタイプ：縦型カード2列） WordPressテーマ Cocoonで使われている「インデックス（カードタイプ：縦型カード2列）」のカスタマイズについてまとめてみました。 テーマCocoonのインデックス（カードタイプ：縦型カード2列） WordPressテーマ Cocoonで使われている「インデックス（カードタイプ：縦型カード2列）」は、次の様になっています。 マウスカーソルをインデックスにホバーすると、インデックスのバックカラーが変わるのみの非常にシンプルなものとなっています。 この「インデックス（カードタイプ：縦型カード2列）」を自分好みにカスタマイズしていきます。 インデックス（カードタイプ：縦型カード2列）のカスタマイズ この手のカスタマイズとして良く有るパターンは、マウスカーソルをホバーするとアイキャッチ画像が移動する（浮き上がる）処理が多いように感じます。 自

ドロップダウンのカスタマイズCSSあとはCSSを追加するだけです。コードはこちら↓ #sidebar select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; outline: none; border: 1px solid #333; /* ボーダーの指定 */ border-radius: 40px; /* 角丸の指定 */ padding: 6px 14px; /* 余白の指定 */ font-size: 14px; /* 文字サイズ */ color: #333; /* 文字色 */ } #sidebar select::-ms-expand { display: none; } #sidebar .widget_archive { pos