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

コピペでOK CSS装飾 デザイン
この記事は 約5 分で読めます。

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

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

PR

ブロックレベルボタン

ブロックレベルボタン

ブロックレベルボタン

はい こんな奴です。

こう言うボタンって意外と重宝するんですよね。
例えばアフィリエイトで広告先に飛ばしたい時とか、ここに行って来てくださーい!みたいな時に・・・
アンカーリンクのボタンを作るたびに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』の所にでも貼り付けておけば動きます。

見出しボックス(青)

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

見出しボックスBlue

/* 見出しボックス */
.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コード

<div class="fukidashi"></div>

 

そしてAddQuickTagsの設定で下記の様に登録して完了です。

AddQuickTag

AddQuickTag

AddQuickTagって本当に便利ですね!

こんな風に登録しておくだけで、WPのビジュアルエディタから、Quicktagsを選択するだけでいつでも好きな装飾が使えるようになります。

是非是非お試しあれ!

コメント

トップへ戻る