ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【①全体のバランスを整えるCSS】

ブログ

こんにちは
ニワトリです

『初心者でもブログってできるの・・・』

『自分のブログをオシャレにしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私でも
CSSを追加することでいくらかマシになったので

今回はカスタマイズした箇所と
使った追加CSSを紹介していきます!

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

無料でこれだけキレイに簡単に作れるなら
最初のうちはcocoonで全然問題なしです!

このように全体のイメージが整っていると
見に来てくれた方の印象が大幅に改善します!

私のような筋トレに特化したブログでは
見に来ていただける方も筋トレ関係者になります。

そんななかで少しでも私のブログに興味を持って
貰うためには全体のイメージは非常に大切です。

筋トレ=ガチムキのマッチョイメージ

なので少し柔らかい感じの色とデザインにしました。

それではcocoonのカスタマイズをしていきましょう!

まずは最初の準備をしよう!

今回のカスタマイズ
  • cocoonの全体的な初期設定
    ①cocoon childを有効化する
    ②スキンを設定する
    ③SEO対策とその他の設定
  • 全体のバランスを整える

その他のカスタマイズは随時更新を
していきますので少し待っててね!

wordpress無料テーマcocoonの事前準備

全体の調整
  • 文字の大きさ
  • 文字のスタイル

cocoonの全体的な初期設定です。

cocoon childを有効化する

やり方
  • wordpressメニュー
  • 外観
  • テーマ
  • cocoon childを有効化

そうすると。。。

cocoon childのデフォルトデザインに
なっているはずです。

さすがにこれでは寂しいですよね!

スキンを設定する

やり方
  • wordpressメニュー
  • cocoon設定
  • スキン

cocoonの素晴らしいところは、
スキンの設定だけで様々なデザインに
変更が可能なところです!

スキン
  • Bizarre‐Foodのブルーカレー
    を選択しています
  • カメラマークにカーソル当てると
    デザインの確認が可能です
  • 自身のブログに合わせて
    好きなデザインを選んでください

スキンを選択したら画面最下部の
【変更をまとめて保存】を押します。

保存しないと変更が反映されないので
必ず保存をしてくださいね!

全体のバランスを整える

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター

テーマエディター
  • スタイルCSS(style CSS)
    選択してください
    (画面右側にあります)

コピペでOK!追加CSSをテーマエディターに貼り付ける

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
  • スキン変更後のCSSは上の画像
  • 12の列にカーソルを合わせ
    12列から追加CSSを貼り付けていきます

スタイルシート用追加CSS

/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}

CSSを貼り付け終わったら
【ファイルを更新】を押してください。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回は全体のバランス調整について
紹介してきました。

次回はヘッダーメニューについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした。

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

タイトルとURLをコピーしました