ブログの記事には何が書かれているのか、見出しがわかりやすいと記事全体が明確になり伝わりやすくなります。CSS（スタイルシート）をコピペするだけで作れるタイトル（見出し）の例をいくつか紹介します。

シンプルデザイン

下線デザイン

下線を引くだけのシンプルなタイトル（見出し）もよく使われています。
ただ、下線だと余白をうまく使わないとわかりにくいものになってしまいます。ここから工夫することで、よりタイトル（見出し）に作成することができます。

▼ デザイン例：サンプル1

タイトル（h1,h2など）{
 	border-bottom: solid 2px #888;  /* 点線 */
	margin:30px 0; /* 上下の余白 */
	font-size:20px; /* 文字サイズ */
	font-weight:bold; /* 文字太さ */
	padding:0 3px 0 15px; /* 左と線の間に余白 */
}

点線デザイン

下線から点線にして、背景を追加するだけでタイトル（見出し）としてわかりやすくなったと思います。

▼ デザイン例：サンプル2

タイトル（h1,h2など）{
	border-bottom: dotted 2px #888;  /* 点線 */
	margin:30px 0; /* 上下の余白 */
	font-size:20px; /* 文字サイズ */
	font-weight:bold; /* 文字太さ */
	padding:0 3px 0 15px; /* 左と線の間に余白 */
}

二重線デザイン

下線、点線、二重線で見え方が変わってきますが、大きくイメージが変わるものではありません。好みで選んでもいいと思います。

▼ デザイン例：サンプル3

タイトル（h1,h2など）{
	border-bottom: double 6px #888;
	margin:30px 0; /* 上下の余白 */
	font-size:20px; /* 文字サイズ */
	padding:0 3px 0 15px; /* 左と線の間に余白 */
	background:#eee; /* 文字の背景 */
}

上下線デザイン

タイトルの上下に線を追加して背景を追加しました。
タイトルデザインでは、よく使われるデザインではないでしょうか。

▼ デザイン例：サンプル4

タイトル（h1,h2など）{
	border-top: solid 2px #888;  /* 上の線 */
	border-bottom: solid 2px #888;  /* 下の線 */
	margin:30px 0; /* 上下の余白 */
	font-size:20px; /* 文字サイズ */
	font-weight:bold; /* 文字太さ */
	padding:14px 15px; /* 左と線の間に余白 */
	background:#eee; /* 文字の背景 */
}

左線と下線のデザイン

▼ デザイン例：サンプル5

タイトル（h1,h2など）{
	border-left: solid 6px #23738e; /* 左の線 */
	border-bottom: solid 1px #23738e; /* 下の線 */
	font-size: 20px; /* 文字サイズ */
	font-weight:bold; /* 文字太さ */
	padding: 0 0 2px 15px; /* 左と線の間に余白 */
	line-height:1.9em; /*文字の高さ*/
	margin:30px 0; /* 上下の余白 */
}

左線のデザイン

▼ デザイン例：サンプル6

タイトル（h1,h2など）{
	border-left: solid 6px #91e2fd; /* 左の線 */
	font-size: 20px; /* 文字サイズ */
	font-weight:bold; /* 文字太さ */
	padding: 0 0 2px 15px; /* 左と線の間に余白 */
	line-height:2.8em; /*文字の高さ*/
	margin:30px 0; /* 上下の余白 */
	background:#d8f5ff; /* 文字の背景 */
}

組み合わせデザイン

影を追加した見出しデザイン

▼ デザイン例：サンプル1

タイトル（h1,h2など）{
	border-left: solid 6px #91e2fd; /* 左の線 */
	font-size: 20px; /* 文字サイズ */
	font-weight:bold; /* 文字太さ */
	padding: 0 0 2px 15px; /* 左と線の間に余白 */
	line-height:2.8em; /*文字の高さ*/
	margin:30px 0; /* 上下の余白 */
	background:#d8f5ff; /* 文字の背景 */
	box-shadow:2px 2px 5px 0 rgba(0, 0, 0, .15); /* 影 */
}

beforeを使った見出しデザイン

▼ デザイン例：サンプル2

タイトル（h1,h2など）{
    color: #fff;
    font-size: 20px;
    position: relative;
    padding: 8px 16px;
    background: #b0d416;
	margin:30px 0; /* 上下の余白 */
}
タイトル（h1,h2など）:before{
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	border: 8px solid #fff;
	border-top: 8px solid rgba(0,0,0,0.7);
	border-left: 8px solid rgba(0,0,0,0.7);
}

before・afterを使った見出しデザイン

▼ デザイン例：サンプル3

タイトル（h1,h2など）{
    color: #fff;
    font-size: 20px;
    position: relative;
    padding: 15px 25px;
    background: #d4c386;
	margin:30px 0; /* 上下の余白 */
}
タイトル（h1,h2など）:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border: 8px solid #fff;
	border-bottom: 8px solid rgba(0,0,0,0.5);
	border-right: 8px solid rgba(0,0,0,0.5);
}
タイトル（h1,h2など）:before{
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	border: 8px solid #fff;
	border-top: 8px solid rgba(0,0,0,0.5);
	border-left: 8px solid rgba(0,0,0,0.5);
}

まとめ

いくつかのタイトル（見出し）デザインを紹介しました。
<h1>、<h2>、<h3>、<h4>に分けて使用するとデザインもまとまります。