[phoe-icon name="fa-home fa-lg"]　CSSでブログをおしゃれに飾る

ブログの命はコンテンツにあることはいうまでもありませんが、見出し、ボックス、引用文などをCSSを使っておしゃれに飾ることは、単に読者のためというよりは、書き手にとっても楽しいものです。かといって、やたらに見出しデザインを変えたり、あまりにも多様なデザインを配置するのも、統一感を欠いた印象を与えてしまいます。

ここにきてようやく、使いたい見出し、ボックス、引用文のデザインが定まってきましのたで、ここでご披露しておきたいと思います。いずれも、さまざまなサイトからCSSを借用させていただき、このサイトに合うように修正を加えたものです。この場を借りてお礼申し上げます。

[phoe-icon name="fa-snowflake-o fa-lg"]　見出しのデザイン

まずは、投稿でいちばん目立つのは、やはりタイトルなどの見出しでしょう。このブログで採用しているSimplicityテーマでは、h1からh6まで6種類の見出しを設定することができます。ただし、h1だけは、なぜかCSSでh1を指定しなくても、複数のデザインの見出しをつくることができるようです。そこで、h1に関しては6種類のデザインを用意しました。以下は、本サイト用につくった見出しデザインの一覧です。参考までにCSSもつけておきました。

見出し h1 その1

[phoe-icon name="fa-wordpress fa-lg"]　全体のタイトルに使う見出しです

CSS

/*  タイトル見出しの装飾  */
.h1_title {
    position: relative;
    color: #ffffff ;
    background: mediumseagreen ;
    font-size: 15pt ;
    text-shadow: 1px 1px 1px #000;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #666666 ;
    border-top:3px solid mediumseagreen ;
}
.h1_title:after, midashi1:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.h1_title:after {
    left: 0;
    border-right: 5px solid #333;
}
.h1_title:before {
    right: 0;
    border-left: 5px solid #333;
}

fontawesomeのアイコンを先頭につけると、いっそうおしゃれなアクセントになりますね。アイコン挿入にはCSSはいりません。fontawesomeのコードを入れるだけです。コードの取得には、Awesome Fontawesome Collectionというプラグインを使っています。

Awesome Fontawesome Collection

ja.wordpress.org

見出し h1 その2

左側に飾りのアクセント模様を入れています

CSS

/*  左に飾りつきの見出し  */
.h1_accent {
    position: relative;
    color: #111;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 1.7em;
    border-bottom: 3px solid #228b22;
}
 .h1_accent:before{
    content: "";
    position: absolute;
    background: #98fb98;
    top: 0;
    left: 0.4em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
 .h1_accent:after{
    content: "";
    position: absolute;
    background:#228b22;
    top: 1.0em;
    left: 0;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}

これは、少し目立つ見出しです。おしゃれなデザインなので、とりあえず設定しておきました。いつ出番が来るかわかりません。

見出し h1 その3

下に少し吹出しのついた見出し

CSS

/*  吹出しの見出し  */

.h1_arrow {
  position: relative;
  color: #fff;
  background:mediumseagreen ;
  font-size: 20px;
  line-height: 1;
  text-shadow: 1px 1px 1px #000;
  border :1px solid mediumseagreen ;
  margin: 30px -10px 10px -10px;
  padding: 15px 5px 12px 10px;
  border-radius: 3px;
}
.h1_arrow:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-top: 10px solid mediumseagreen;
}

これは、ブログでよく見かける見出しです。見る人を次に来る文章に引きつける効果があると思われます。本ブログでも、しばしば大きな見出しとして使っています。

見出し h1 その4

四角い枠にシャドウをつけた見出し

CSS

/*  h1 影つき枠見出し  */
.h1_shadow1 {
    margin: 0 0 1.5em;
    padding: 0.4em;
    font-size: 1.143em;
    font-weight: bold ;
    border: 2px solid #3cb371;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

これは、見出しに立体的な印象を与えたものです。見出しを強調したいときに使うことになるでしょう。

見出し h1　その5

透明感のある見出し

CSS

/*  見出し　シャドウつき　*/
.h1_shadow2 {
    font-size: 18px !important;
    color: #333333 !important;
    margin: 15px 0px !important;
    padding: 10px 15px !important;
    line-height: 1.5;
    background-color: #cccccc !important;
    border: 1px solid #cccccc !important;
    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3) !important;
    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3) !important;
    text-shadow: 1px 1px 0.5px rgba(0,0,0,0.5) !important;
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF)) !important;
 }

これは、透明感のある背景に、わずかなシャドウを加えた文字からなる見出しです。モダンでクールな印象を与えます。どんな場面で使うか、難しいところです。

見出し h1 その6

チェックマークの入った見出し

CSS

/*  h1 チェックマークの見出し  */

.h1_checkmark {
position: relative;
background: #f4f4f4 ;
padding: 5px 5px 2px 20px;
font-size: 18px;
color:  #474747;

border-radius: 0 10px 10px 0;
 box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4); 
}

.h1_checkmark:before {
font-family: FontAwesome;
content: "\f00c";
display: inline-block;
line-height: 25px;
position: absolute;
padding: 0em;
color: white;
background:#3cb371 ;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

これも、けっこうおしゃれなデザインの見出しです。チェックマークのfontawesomeアイコンを使っています。チェックすべき項目を列挙するときに使います。

見出し　h2

もっともオーソドックスな中間見出し

CSS

/*  h2 左線下点線見出し   */

.article h2 {
    margin: 0 0 1.5em;
    padding: 0.5em;
    border-left: 5px solid  #3cb371 ;
    border-bottom: 1px dashed #3cb371 ;
    font-size: 18px;
    font-weight: bold;
}

これは、ブログなどでもっともよく使われる見出しの一つです。とても自然な感じがするので、安心して使えます。タイトルの次に来る見出しとして使うといいかなと思っています。

見出し h3

左側にアクセントをつけた小見出し

CSS

/* h3 見出し　左アクセント  */

.article h3 {
  padding: .25em 0 .25em .75em;
  border-left: 6px solid #3cb371;
  border-bottom: 0px ;
}

CSSはいちばん単純です。左側にアクセントの線を入れただけの見出しですが、h2の次に来る小見出しとして、出番はたくさんあります。

見出し h4

左側に色違いの丸い模様を配したおしゃれな見出し

CSS

/*  h4 円を重ねたアクセントの見出し  */

.article h4{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 17px;
	line-height: 18px;
}
 
.article h4:before{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:14px; 
	left:7px; 
	background-color:#6B0CE8;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	-khtml-opacity: 0.50;
	opacity:0.50;
	z-index: 1;
}
 
.article h4:after{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:15px; 
	width:15px; 
	display:block; 
	position:absolute; 
	top:7px; 
	left:2px; 
	background-color:#00A8FF;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

これは、文章に彩りとアクセントを与えたいときに使う見出しです。

見出し　h5

端正な印象を与える見出し

CSS

/*  h5 左四角アクセントの枠見出し   */

.article h5 {
	font-size: 17px;
	line-height: 20px;
	padding: .5em 0 .5em 1.5em;
	position: relative;
	background: #ffffff;
	border: 1px solid #3cb371;
}
.article h5:after {
	content: " ";
	position: absolute;
	top: .5em;
	left: .5em;
	width: 6px;
	height: calc(100% - 1em);
	background: #3cb371;
}

四角い線やパターンが入っているので、端正で引き締まった印象を与えると思います。

見出し h6

アンダーラインの入った見出し

CSS

/*  h6 見出し　下線  */


.article h6 {
  font-size:15px;
  border-bottom: 2px solid #3cb371;
  padding: 4px 0px;

}

もっとも単純なデザインの見出しですが、小見出しとして、大いに活躍してくれると思います。

以上、このブログの見出し用に準備した見出しの一覧です。ページのコンテンツに応じて、これらの見出しを適宜使い分けていきたいと思っています。

なお、これらの見出しを作るに当たっては、多くのWeサイトのお世話になりました。ありがとうございます。最後に、とくに参考にさせていただいたサイトをご紹介しておきたいと思います。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

saruwakakun.com

https://tech.jastin.net/css-heading-style/

次回は、「ボックス編」です。

ブログをおしゃれにカスタマイズ（1）見出し編

[phoe-icon name="fa-home fa-lg"] CSSでブログをおしゃれに飾る

[phoe-icon name="fa-snowflake-o fa-lg"] 見出しのデザイン

[phoe-icon name="fa-wordpress fa-lg"] 全体のタイトルに使う見出しです