WordPress無料テーマ「Cocoon（コクーン）」を使って、ブログデザインを作ってみました。
今回はホームページではなくブログのデザインです。
完成物
パソコン画面↓
トップページ（記事一覧）は2列カード型になっています。
グローバルナビは、スクロールしても上部に固定表示されます↓
スマホ画面↓
スマホ画面ではスクロールしても下部にナビゲーションが固定表示されます↓
実際の作り方はYouTubeで解説しています↓
ブログ向けWordPress無料テーマは、「Cocoon」がおすすめな理由。
ブログ向けWordPress無料テーマは「Cocoon」がおすすめな理由は、主に以下です。
- 多機能：無料なのに多機能なので、有料テーマのようなブログにできます。
- 使っている人が多い：”無料テーマといったらCocoon”みたいなところがあり、無料テーマでWordPressブログをやる人は、多くがCocoonを使っています。なのでカスタマイズ方法の情報が多いです。づまづいたりわからないことがあったら、ネットで検索すればだいたい出てきます。
- 着せ替え機能がある：Cocoonには「スキン」といって、着せ替え機能のようなものがあります。スキンはたくさんの種類が用意されていて、自分好みのデザインに簡単に変えられます。
注意点としては、多機能ゆえに設定項目が多く、逆に迷ってしまうということ。
「どこをどう設定すればいいのかわからない」となってしまう方も多いと思います。
そんな時はとりあえず好みのスキンを選ぶだけでもいいでしょう。それだけでもある程度の見た目になります。
こまかなカスタマイズは、あとから調べながら行っていけばいいだけです。
ちなみにこのブログも「Cocoon（コクーン）」を使ってます。
今回書いたCSS。
なるべくCSSは書かずにカスタマイズしましたが、一部だけCSSを書いたので載せておきます。
グローバルナビを上部に固定表示させたときに、ロゴを非表示にするCSSです。
/*グローバルナビを上部に固定表示させた場合、ロゴ非表示*/
.fixed-header .logo{
display:none;
}
このコードを、外観→カスタマイズ→追加CSS、にコピペしてください。
YouTube解説動画の補足。
YouTubeで解説し忘れましたが、スマホ画面でも下の方にサイドバーを表示させたい時は↓
Cocoon設定の「モバイル」↓
「モバイルボタン時コンテンツ下のサイドバーを表示する」にチェックを入れて、保存してください↓
うまくいかない場合の原因・解決法。
動画の通りにやってもうまくいなかい場合もあるでしょう。
考えられる原因と解決法を書いていきます。
Cocoonのバージョンが違う。
動画の時点でCocoonのバージョンは、親テーマが2.8.8、子テーマが1.1.3です。
バージョンが古いとCocoon設定の画面が微妙に違っていたり、固定ヘッダーの挙動が違っていたりします。
外観→テーマ→（Cocoonの）テーマの詳細、からバージョンを確認してください。古い場合はCocoonテーマを更新してください。
プラグインが邪魔をしている。
プラグインをごちゃごちゃとたくさん入れてませんか？
プラグインが干渉して表示がおかしくなっている可能性があります。
特にElementorプラグインを入れていると表示がおかしくなります。ヘッダーが反映されなかったり、サイドバーやフッターがなかったり。
プラグインを一つずつ無効化して、その都度表示を確認してみてください。
表示が直ったら、今無効化したプラグインが原因です。
余計なCSSが書かれている。
外観→カスタマイズ→追加CSSに、余計なCSSが書かれてないでしょうか？
ココナラで「WordPressブログのカスタマイズ」をやっています。
私、ココナラで「ワードプレステーマCocoonのカスタマイズをします」というサービスを行っています↓
ワードプレステーマCocoonをカスタマイズします ブログをお好みのデザインにします。
Cocoonと書いてありますが、他のテーマでも対応可能です。（Cocoon利用者が多いためCocoonと書いてあるだけです）
WordPressブログをお好みのデザインにいたします。
デザインをお任せしたい。
自分でカスタマイズしてみたけれど、思い通りのデザインにならなかった。
という方は、ぜひご利用ください。
以上です。
