ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑳おすすめカードをオシャレに動かすCSS】 

ブログ

こんにちわ
ニワトリです

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

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

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

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

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

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

今回はおすすめカードをオシャレに
カスタイマイズする方法を紹介していきます。

当ブログのおすすめカードは
このようになっています。

今回のカスタマイズ
  • おすすめカードの編集

【コピペでOK!】おすすめカードをオシャレにするCSS

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

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

スタイルシート用追加CSS
/************************/
/*お勧めカード*/
/************************/
#recommended .navi-entry-card-thumb img{
border-radius:10px; /*角丸め*/
}
#recommended .card-content {
color: #fff; /*タイトル文字色*/
background-color: #000; /*タイトル背景色*/
}
/*オンマウスで傾ける*/
#recommended .navi-entry-card-thumb {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#recommended .navi-entry-card-thumb:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

color: #fff; /タイトル文字色/
background-color: #000; /タイトル背景色/

文字色と背景色を変更する場合は
上記2か所の色番号を変更します。

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

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

変更したデザインが反映しているか確認する

おすすめカードにマウスを当てた際に
画像が傾くか確認をします。

おすすめカードが上の画像のように
傾けば設定は完了です。

まとめ

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

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

今回はおすすめカードのカスタマイズ
について紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

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

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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