ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【④アピールエリアを整えるCSS】

ブログ

こんにちは
ニワトリです

『ヘッダーのメニュー
 を見やすくオシャレにしたい・・・』

『ヘッダーに一押し記事を
 入れてアピールしたい・・・』

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

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

私もそのひとりです!!

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

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

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

今回はアピールエリアについて
紹介をしていきますね!

当ブログのアピールエリアは
このようになっています。

これは失敗バージョンです…

グローバルメニューの下にあるのが
アピールエリアです!

アピールエリアでは訪問者の方の
目に留まりやすい位置に

リンクを貼ることができます!

今回のカスタマイズ
  • アピールエリアの編集
  • アピールエリアの調整

アピールエリアを設定する

前回までで

 ①全体のバランスを整える
 ②ヘッダー画像・ロゴを整える
 ③グローバルメニューを整える

この3つのカスタマイズを行いましたね!

カスタマイズ後のデフォルトでは
上の画像のようになっています。

今回はグローバルメニューの下に
アピールエリアを設定していきます。

アピールエリア用のヘッダーを設定する

やり方
  • wordpressメニュー
  • cocoon設定
  • アピールエリア

  • アピールエリアの表示
    ・全ページで表示
    ・フロントページのみで表示
    (トップ画面のみ表示されます)
    ご自身のブログに合わせてお好きな方を選択
  • 高さ
    ・200
  • エリア画像
    ・なし
  • テキストエリア表示
    ・テキストメッセージエリアを表示するに✓
  • タイトル
    ・なし
  • メッセージ
    ・なし

  • ボタンメッセージ
    ・ブログに表示させたい文字を入力
  • ボタンリンク先
    ・リンク先のURLを入力
    ※アフィリエイトリンクはうまく貼り付きません
  • ボタンリンクの開き方
    ・同じタブで開く(_self)
  • エリア背景・ボタン色
    ・自身のブログに合わせて
     色を設定してください

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

保存せずにページを変えると
変更が反映されないため
忘れずに保存をしておきましょう!

【コピペでOK!】アピールエリアのデザインをCSSで調整する

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

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

スタイルシート用追加CSS

/************************************
**    アピールエリア
************************************/
.appeal{
padding:.1em 0 .2em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
div.appeal-content{
padding:0;
}
.appeal-content{
background-color:#b5b5b5; /*背景色をここで変更します*/
margin:auto;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}

背景色を変更したい場合は
CSSの下部分↓

#b5b5b5; /*背景色をここで変更します*/」

#のあとに変更したい色のコードを入れます。

  • エリア背景
  • ボタン色
  • CSSの背景色

この3つは同じ色を設定します。

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

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

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

パソコン
スマホ

変更したアピールエリアが
スマホ・PC両方に反映しているか
確認をします。

記事初めのアピールエリアは
3つの色が揃っていない場合で
3つの色を揃えると帯のリンクボタンが完成です!

まとめ

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

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

今回はアピールエリアについて
紹介してきました。

次回もその他のヘッダー部分について
記事をまとめていきますね!

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

ニワトリでした。

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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