ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑮記事下の各種ボタンを整えるCSS】

ブログ

こんにちわ
ニワトリです

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

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

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

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

私もそのひとりです!!

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

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

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

今回はサイトの下にある
・ページ上部へ戻るボタン
・コメントを入力するボタン
・次のページへボタン
を整える方法を紹介していきます!

当ブログの下のボタンは
このようになっています。

今回のカスタマイズ
  • 戻るボタンの設定
  • コメントボタンの設定
  • 次のページボタンの設定
  • 各種ボタンの編集

ページ上部へ戻るボタンを設定する方法

やり方
  • wordpressメニュー
  • cocoon設定
  • ボタン

  • アイコンフォント
  • ボタン色
  • 文字色

自身のサイト合わせて調整をします。

設定が完了したら
左上・下の「変更をまとめて保存」を押します。

ファイルを保存を押さないと
変更内容が反映されないため気をつけてください!

上部へ戻るボタンの設定はこれで終わりだよ!

【コピペでOK!】コメント書き込むボタンのデザインをCSSで調整する

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

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

スタイルシート用追加CSS

.comment-btn{/*コメント欄*/
background-color:#f7f7f7;
transition:0.4s;
}
.comment-btn:hover {
background-color:#90C31F;/*マウスオーバー時にグリーンに変化*/
color:#fffff4;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}

コメントボタンの色を変更する場合は

background-color:#90C31F;/
上部分の色番号を変更します。

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

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

【コピペでOK!】次のページボタンのデザインをCSSで調整する

先ほどのスタイルシートに次のページボタンの
CSSを追加していきます。

スタイルシート用追加CSS

/************************************
**** 次のページボタン
************************************/
.pagination-next-link{
transition:0.4s;
}
@media (max-width:1023px){
.pagination-next-link{
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media (max-width:600px){
.pagination-next-link{
width:92%;
margin-right:auto;
margin-left:auto;
}
}
.pagination-next-link:hover{
background-color:#f7f7f7;
transition:0.4s;
}
.pagination-next-link:hover{
background-color:#90C31F;
color:#fffff4;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
.pagination .current {
background-color: #90C31F;
}
.page-numbers.current{
color:#f9fff4;
box-shadow: 0 1px 2px slategrey;
}
.pagination a:hover {
background-color: #90C31F;
transition: all 0.5s;
color: #f9fff4;
}

ボタンの色を変更する場合は
上の3か所の#90C31F
変更する色番号を入れなおします。

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

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

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

変更した3つのボタンが
スマホとPC画面の両方で
反映しているか確認をします。

各ボタンが上の画像のように
表示されていれば設定は完了です。

まとめ

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

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

今回は3つのボタンについて
紹介してきました。

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

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

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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