アフィリエイト Wordpress SINGER PLUS+

STINGER PLUS+のちょっとだけ簡単5つのCSSカスタマイズ

更新日:

どうもみなさんこんにちは

STINGER PLUS+はデザインも素晴らしく、オリジナルテーマカスタマイザーを使えば、ほとんどの色の設定ができてしまいます。

でもちょっとだけ独自色だしたいなぁ
とか
ちょっとだけカッコよくしたいなぁ
などの欲望を満たす簡単な5つのCSSカスタマイズをご紹介します。

スポンサーリンク

Contact Form 7のカスタマイズ

シンプルで使いやすいのですが少し味気ないコンタクトフォーム7のフォームを少しカッコよくしてみます。
stingerplus-contactform7-1

STINGER PLUS+のPC用左右ボックスなぞも使ってスマホでもカッコよく表示してみます。

まず、style.cssの一番下(もしくは子テーマ)に下記を追加します。

.required-contactform7{
  padding: 3px;
  background: #ff6766;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
  font-size:12px;
}

.unrequired-contactform7{
  padding: 3px;
  background: #BDBDBD;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
  font-size:12px;
}

そして、コンタクトフォームのフォームは、下のような部品を並べるだけです。

responbox30を使って、PCの場合は横並びでスマホでは縦並びにするようにして、項目に色付けをするために、先ほどCSSに書いたクラスを書いていきます。
また、watermarkなんぞを使うとユーザビリティが上がりますね。

<div class="clearfix responbox30">
<div class="lbox">
<p><span class="required-contactform7">必須</span>お名前</p></div>
<div class="rbox">
<p>[text* your-name watermark "例:上善如水"]</p>
</div>
</div>

たったこれだけで見違えるようになります。
stingerplus-contactform7-2

上へ戻る(Page Topへ)のカスタマイズ

画面の右下に出てくる上へ戻るボタンですが、Stingerシリーズは総じて小さいような気がしています。私の指が太いだけかも知れませんが。。。

page-top1

そこで、大きくしてあげようと思うのですが、大きければ大きいだけ邪魔になってしまうので、少し透けた感じでカッコよくしてみました。

page-top2

style.cssの一番下(もしくは子テーマ)に下記を追加するだけです。
すでに定義されているスタイルを上書きするイメージにしてあります。

backgroundやcolorを変えるだけでも随分印象が変わります。

#page-top {
	position: fixed;
	z-index: 9999;
	bottom: 40px;
	right: 10px;
	font-size: 30px;
}

#page-top a {
        width: 30px;
        height: 30px;
	background: #665e53;
	text-decoration: none;
	color: #FFF;
	padding: 10px;
	text-align: center;
	display: block;
        border-radius: 50%;
        -moz-box-shadow: 0 0 5px #ccc;
        -webkit-box-shadow: 0 0 5px #ccc;
        -moz-opacity: 0.6;
	opacity: 0.6;
}

#page-top a:hover {
	text-decoration: none;
	background: #AAAAAA;
	color: #FFF;
}

右サイドバー Google検索窓幅のカスタマイズ

以外に良い売り上げになるGoogleAdsenseの検索ウィジェットですが、右サイドバーに配置すると
sidebar-googlewindow1
残念なことに検索ボタンだけ下に行ってしまいます。

できれば、横に並んで欲しいのでスタイルを指定して並んで頂きました。

style.cssの一番下(もしくは子テーマ)に下記を追加するだけです。

この幅にしたのはiPhone5sでもきっちり横にならんでくれるからです。

#cse-search-box input[type="text"] {
    width:75%;
}

sidebar-googlewindow2

右サイドバー カテゴリーを字下げするカスタマイズ

右サイドバーにカテゴリーウィジェットを置く方は多いと思いますが、残念なことにカテゴリの階層を余り反映されずにダラダラとカテゴリが並ぶんですよね。

sidebar-category

せっかくカテゴリに階層を持たせているので、上のようにサブカテゴリは1文字分右にずらしたい!と思い、またまたスタイルを指定してみました。

style.cssの一番下(もしくは子テーマ)に下記を追加するだけです。

これをするとサブのサブカテゴリはさらに字下げしてくれるので一目瞭然です。

ul.children {
padding-left:20px; 
}

ヨメレバ、カエレバのカスタマイズ

アフィリエイトをする上で欠かせないヨメレバ、カエレバのブログパーツですが、せっかく良い商品をお薦めしているのですから、お客さんがお店まで行きやすくしたいですよね。

詳しくは以前の記事をご覧いただくとして、ここではCSSのコードのみ記載します。

style.cssの一番下(もしくは子テーマ)に下記を追加するだけです。

ヨメレバ用

.booklink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.booklink-image{float:left;
margin:0 15px 10px 0;
}
.booklink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.booklink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.booklink-powered-date{font-size:11px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-detail{margin-bottom:5px;
}
.booklink-link2{margin-top:10px;
}
.shoplinkamazon{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#000;
}
.shoplinkkindle{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#ff8000;
}
.shoplinkrakuten{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#CC0000;
}
.shoplinkamazon a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.shoplinkkindle a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 3.0em;
}
.shoplinkamazon img,
.shoplinkkindle img,
.shoplinkrakuten img,
.shoplinkyahoo img
 {
       display: inline !important;
}
.shoplinkrakuten a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 1.6em;
}
.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;}
.shoplinkkindle a:hover{color:#FFFFFF; background:#ffd5aa;}
.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;}
.booklink-footer{clear:left;}

カエレバ用

.kaerebalink-box{text-align:left;
padding-bottom:20px;
font-size:small;
zoom: 1;
overflow: hidden;
}
.kaerebalink-image{float:left;
margin:0 15px 10px 0;
}
.kaerebalink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.kaerebalink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.kaerebalink-powered-date{font-size:11px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.kaerebalink-detail{margin-bottom:5px;}
.kaerebalink-link1{margin-top:10px;}
.kaerebalink-box div.shoplinkamazon{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#000;
}
.kaerebalink-box div.shoplinkrakuten{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#CC0000;
}
.kaerebalink-box div.shoplinkyahoo{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
background:#0000cc;
}
.kaerebalink-box div.shoplinkamazon a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-box div.shoplinkrakuten a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-box div.shoplinkyahoo a{color:#FFFFFF;
text-decoration:none;
display:inline-block;
padding: 0.9em 0.3em;
}
.kaerebalink-box div.shoplinkamazon a:hover{color:#FFFFFF; background:#b4b4b4;}
.kaerebalink-box div.shoplinkrakuten a:hover{color:#FFFFFF; background:#ccaaaa;}
.kaerebalink-box div.shoplinkyahoo a:hover{color:#FFFFFF; background:#aaaacc;}
.booklink-footer{clear: left;}

まとめ

いかがだったでしょうか?
スタイルシートstyle.cssの一番下(もしくは子テーマ)に全て書くだけでちょっとアクセントをつけれたのでは無いでしょうか?

少しでも楽しいブログ運営のお役に立てば幸いでございます。

-アフィリエイト, Wordpress, SINGER PLUS+

Copyright© 上善如水 , 2019 All Rights Reserved.