ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑯記事下のフッターメニューを整えるCSS】

ブログ

こんにちわ
ニワトリです

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

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

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

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

私もそのひとりです!!

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

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

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

今回はサイトの下のフッターメニューを
整える方法を紹介していきます!

当ブログのフッターメニューは
このようになっています。

今回のカスタマイズ
  • フッターメニューの設定
  • フッターメニューの編集

フッターメニューを設定する方法

cocoonのスキンでは
フッターメニューが未設定のため
表示されません。

設定方法
  • フッターメニューを
    ウィジェットから設定
  • フッターメニューの編集

フッターメニューをウィジェットから設定する

やり方
  • wordpressメニュー
  • 外観
  • ウィジェット

  • [C]プロフィール横の▼
  • フッター左
  • ウィジェットを追加

  • [C]プロフィール横の▼
  • 画像を円形にするに✓
  • 保存

  • カテゴリー横の▼
  • フッター
  • ウィジェットを追加

タグクラウドも同様に
フッター中へ配置します。

  • カテゴリー横の▼
  • 投稿数を表示に✓
  • 保存

  • タグクラウド横の▼
  • タイトルを入力
  • 保存

モバイル用フッターも
同様に配置し編集します。

ウィジェットの設定はこれで終わりだよ!

【コピペでOK!】フッターメニューのデザインをCSSで調整する

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

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

スタイルシート用追加CSS

/************************************
**** フッター
************************************/
.footer-title{
color:#7b7b7b;
border-bottom:3px dotted;
border-color:#90C31F;
margin-bottom:1em;
}
#footer, #footer a{
color:#7b7b7b;
}
.widget-entry-cards .widget-entry-card-content {
color:#7b7b7b;
font-size:13px;
padding-left:.5em;
}
@media (max-width:1023px){
.footer {
margin-top: 0;
padding-top: 0;
}}
@media (max-width:880px){
.footer-title{
margin-top:2em;
}}
@media screen and (max-width: 480px){
h2, h3 {
font-size: 1.17em;
}
.widget-entry-cards .widget-entry-card-content {
line-height:1.3;
}
}
.footer-widgets, .footer-widgets-mobile {
margin: 0 auto;
}
.footer-left, .footer-center, .footer-right, .footer-mobile {
padding: 0 10px;
}
.widget.widget-footer-mobile{
padding:0;
}
aside#popular_entries-3.widget.widget-footer-mobile.widget_popular_entries div.popular-entry-cards.widget-entry-cards.no-icon.cf{
padding:0 .4em 0;
}
.widget-footer-mobile div.tagcloud,.widget-footer-mobile ul li a{
margin-right:.2em;
margin-left:.2em;
}
.source-org.copyright{/*Copyright文字色*/
color: #7b7b7b;
}

線の色を変える場合は

border-color:#90C31F;

上の色番号を変更してください。

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

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

スマホとPCで変更したデザインが反映しているか確認する

変更したフッターメニューが
スマホとPC画面の両方で
反映しているか確認をします。

フッターメニューが上の画像のように
表示されていれば設定は完了です。

まとめ

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

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

今回はフッターメニューについて
紹介してきました。

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

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

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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