CocoonのPCグローバルナビにSWELLライクな検索アイコンを追加
WordPressテーマ「Cocoon」のPC時グローバルナビに検索アイコンを追加し、「SWELL」と同じようにモーダルウインドウで検索フォームを表示する機能を追加する方法を紹介します。
WordPressテーマ「Cocoon」のPC時グローバルナビに検索アイコンを追加し、「SWELL」と同じようにモーダルウインドウで検索フォームを表示する機能を追加する方法を紹介します。
WordPress無料テーマ「Cocoon」から有料テーマ「SWELL」に乗り換えるとページはどのように表示されるのか。どんな対応が必要となるのかをまとめて紹介します。
WordPressテーマCocoonのデザインをカスタマイズするために必要なテスト環境の構築方法を紹介します。サーバーを使う方法とPCのローカル環境を使う方法があります。
高機能テーマ「Cocoon」の弱点を克服することで多くのWordPressノウハウを吸収できるでしょう。ここではCocoonのサイト型デザインや独自ブロックのカスタマイズも紹介します。
Cocoonのモバイル表示デザインを改善するために5つの各種CSSを紹介しています。「ヘッドロゴの余白調整」「モバイルボタンのカラー」等をサイトに馴染むように設定します。
Cocoonのモバイルメニューを固定表示する場合、テーマの仕様のままだと、ヘッダーメニューでサイドバーが隠れてしまいます。javascript.jsで制御すれば問題ありません。
Cocoonのおすすめカードはとてもシンプルです。全体のデザインをシンプルに変更すると、ただの四角い画像が並んだように見えるので改善した方が良いでしょう。
無料WordPressテーマ「Cocoon」のサイト回遊性を高めるため、フッターのデザインを変更します。単なる設定では実現出来ないマスタマイズ方法を紹介しています。
無料WordPressテーマ「Cocoon」のページナビゲーションのデザインをCSSで変更します。CSSの設定を細かく解説しましたので、初心者にも見て欲しいページです。
無料WordPressテーマ「Cocoon」のデザイン性をを考慮してコンテンツ幅を変更する方法とプラグイン「Regenerate Thumbnails」の使い方を紹介します。
WordPressテーマ「Cocoon」のエントリーカードから、カテゴリーを削除し、シンプルな表示に変更します。「entry-card.php」を子テーマに配置し修正します。
WordPressテーマCocoonのエントリーカードはマウスオーバーの際、背景色が変わる仕様です。そのため、無駄な余白が多く、デザイン性の障害になっていると感じます。
Cocoonのパンくずリストまわりをデザイン的に改善します。改善点はパンくずリストを1行で表示すること。不要なアイコンを消すこと。タイトルや公開日・更新日の配置を変更することです。
無料WordPressテーマCocoonの通知を有料テーマSTORK19やSANGOのような見た目にカスタマイズします。これでヘッドエリアのカスタマイズは完成です。
無料WordPressテーマCocoonのヘッダーまわりをカスタマイズし、デザインを改善するノウハウ・CSSを公開します。タイトルロゴを目立たせたり、グローバルナビゲーションを変更します。
ヘルプフル コンテンツを作成する際、プロフィールは重要です。デザイン的にもこだわって作りましょう。Cocoonのデザインカスタマイズでプロフィールブロックの作成を解説します。
無料のブログテーマ「Cocoon」のデザインを改善するカスタマイズを行う前に、どのようなデザイン的欠点があるのかを「STORK19」や「SWELL」と比較しながら指摘します。
WordPressテーマ「Cocoon」は無料なのですが、豊富な機能があり、ブロックエディターにも対応しています。エックスサーバーとの提携でインストールもしやすくなりました。