WordPress.com のテーマ「Origin」の記事タイトルを装飾するためのCSS

origin07

rect3015

origine01

WordPress.com のテーマ「Origin 」に以下のCSSを追加すると、記事のタイトルがいい感じで装飾されます。

.hentry h1.entry-title {
background: #DD5424;
margin:0 0 30px 0;
padding:12px 10px;
color:#FFF;
text-shadow:1px 1px 2px #333;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-left:1px solid #036;
border-top:1px solid #036;
box-shadow:inset 1px 1px 4px #036;
}

.hentry h1.entry-title:before {
content: ' ';
position: absolute;
z-index: 2;
width: 0;
height: 0;
left: 14px;
bottom: -27px;
background: transparent;
border-color: #DD5424 transparent transparent transparent ;
border-style:solid;
border-width:15px;
}

.hentry h2.entry-title a {
background: #DD5424;
margin:0 0 30px 0;
padding:12px 10px;
color:#FFF;
text-shadow:1px 1px 2px #333;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-left:1px solid #036;
border-top:1px solid #036;
box-shadow:inset 1px 1px 4px #036;
}

.hentry h2.entry-title a:hover {
color: #000000;
text-shadow: 1px 1px 2px white;
}


.hentry h2.entry-title a:before {
content: ' ';
position: absolute;
z-index: 2;
width: 0;
height: 0;
left: 14px;
bottom: -27px;
background: transparent;
border-color: #DD5424 transparent transparent transparent ;
border-style:solid;
border-width:15px;
}

.page .hentry h2.entry-title {
background: #DD5424;
margin:0 0 30px 0;
padding:12px 10px;
color:#FFF;
text-shadow:1px 1px 2px #333;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-left:1px solid #036;
border-top:1px solid #036;
box-shadow:inset 1px 1px 4px #036;
}

.page .hentry h2.entry-title:before {
content: ' ';
position: absolute;
z-index: 2;
width: 0;
height: 0;
left: 14px;
bottom: -27px;
background: transparent;
border-color: #DD5424 transparent transparent transparent ;
border-style:solid;
border-width:15px;
}


.hentry .entry-title {
margin: 0 0 1.6em 0;
}

.hBookmark-widget-counter {
display: none !important;
}

参考にした記事:コピペで出来るCSS3で見出しスタイリング | 3streamer blog

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。