WordPress無料テーマ「Cocoon（コクーン）」を使って、ブログデザインを作ってみました。
今回はホームページではなくブログのデザインです。
完成物
パソコン画面↓
トップページ（記事一覧）は2列カード型になっています。
グローバルナビは、スクロールしても上部に固定表示されます↓
スマホ画面↓
スマホ画面ではスクロールしても下部にナビゲーションが固定表示されます↓
実際の作り方はYouTubeで解説する予定です。
ブログ向けWordPress無料テーマは、「Cocoon」がおすすめな理由。
ブログ向けWordPress無料テーマは「Cocoon」がおすすめな理由は、主に以下です。
- 多機能：無料なのに多機能なので、有料テーマのようなブログにできます。
- 使っている人が多い：”無料テーマといったらCocoon”みたいなところがあり、無料テーマでWordPressブログをやる人は、多くがCocoonを使っています。なのでカスタマイズ方法の情報が多いです。づまづいたりわからないことがあったら、ネットで検索すればだいたい出てきます。
- 着せ替え機能がある：Cocoonには「スキン」といって、着せ替え機能のようなものがあります。スキンはたくさんの種類が用意されていて、自分好みのデザインに簡単に変えられます。
注意点としては、多機能ゆえに設定項目が多く、逆に迷ってしまうということ。
「どこをどう設定すればいいのかわからない」となってしまう方も多いと思います。
そんな時はとりあえず好みのスキンを選ぶだけでもいいでしょう。それだけでもある程度の見た目になります。
こまかなカスタマイズは、あとから調べながら行っていけばいいだけです。
ちなみにこのブログも「Cocoon（コクーン）」を使ってます。
Cocoonテーマのダウンロード。
Cocoonテーマのダウンロードは、こちらの公式サイトからできます↓
親テーマと子テーマをダウンロード→インストールして、子テーマを有効化しましょう。
今回書いたCSS。
なるべくCSSは書かずにカスタマイズしましたが、一部だけCSSを書いたので載せておきます。
グローバルナビを上部に固定表示させたときに、ロゴを非表示にするCSSです。
/*グローバルナビを上部に固定表示させた場合、ロゴ非表示*/
.fixed-header .logo{
display:none;
}
これを、外観→カスタマイズ→追加CSS、にコピペしてください。
以上です。今回のカスタマイズ方法はYouTubeで解説する予定です。
