【コピペでOK!】WPテーマCocoonに追加したいCSS装飾まとめ【私的】

この記事は 約5 分で読めます。

WPブログやWPでアフィリエイトブログを運営していると、文字の装飾が少なく感じたり既存で用意されている装飾では満足できなくなる時がありますよね。
CSSで見出しやタイトルの装飾が出来るまとめ記事みたいなのもあるのですが、私的になかなか気に入ったデザインの装飾が無いぞ！と言うのが本音です。

そこで、もう無いなら作っちまえ！と言う感じで私がカスタマイズして普段使いにしている装飾を公開してみたいと思います。

ブロックレベルボタン
見出しボックス(青)
吹き出し型見出し

ブロックレベルボタン

はいこんな奴です。

こう言うボタンって意外と重宝するんですよね。
例えばアフィリエイトで広告先に飛ばしたい時とか、ここに行って来てくださーい！みたいな時に・・・
アンカーリンクのボタンを作るたびにCSS書くの面倒ですからね。

.blockbtn{
	padding: 20px;
	font-size: 20px;
	border-radius: 8px;
	position: relative;
	top: 0;
	color: #fff;
	background: #ec3434;
	box-shadow: 0 3px 0 #9a1d1b;
	font-weight: bold;
	line-height: 1;
	border-color: #CC1D32;
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none!important;
}

はい、これがそのボタンのCSSとなります。
子テーマのstyle.cssに登録するか、面倒臭いって人はカスタマイズのボタンから『追加CSS』の所にでも貼り付けておけば動きます。

見出しボックス(青)

お次は見出しボックスです。

/* 見出しボックス */
.midashi-box.blue {
background-color: #f9f9f9;
border: 1px solid #043d78;
}
.midashi-box {
border-radius: 2px;
margin-bottom: 40px;
position: relative;
top: 0;
left: 0;
padding: 50px 18px 20px 18px;
letter-spacing: .3px;
color: #000;
}
.midashi-box.blue pre {
color: #fff;
background: #043d78;
}
.midashi-box pre {
position: absolute;
top: 0;
left: 0;
z-index: 1;
font-weight: 700;
padding: 4px 10px;
font-size: 14px;
letter-spacing: .1px;
margin: 0px;
font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif !important;
border: 0px !important;
border-radius: 0 !important;
}

AddQuickTagsに登録するコードは

<div class="midashi-box blue">
<pre>ラベル</pre>

で入力して下さい。閉じるdivタグを忘れないようにして下さい。

吹き出し型見出し

非常に目立つお気に入りの吹き出し型の見出しです。

こんな風になります

.fukidashi {
    position: relative;
    color: #111;
    background: #fff;
    font-size: 140%;
    line-height: 140%;
    border: 2px solid #111;
    margin: 30px 0px 40px 0px;
    padding: 15px 30px 12px 30px;
    border-radius: 3px;
    font-weight: bold;
    display: table;
}
.fukidashi:before {
    left: 30px;
    border: 14px solid transparent;
    border-top: 14px solid #111;
}
.fukidashi:after{
    left: 33px;
    border: 11px solid transparent;
    border-top: 11px solid #fff;
}
.fukidashi:after, .fukidashi:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}

AddQuickTagsコード