大人気の「コピペでブログをカスタマイズ」できるシリーズです。今回は「タイトル」です。

ブログにおいてもっとも重要とされるタイトルを、おしゃれにして目立たせてしまいましょう！

• 前提として
  • ソースコードを貼り付ける場所
  • 記事タイトルの場所
  • バックアップ
• シンプルなタイトル
• おしゃれなタイトル
• うまくいかない場合
  • !importantを使用する
  • 例：背景色が変わらない
  • 例：文字色が変わらない
• 参考サイト
• さいごに

前提として

ソースコードを貼り付ける場所

1. デザイン
2. カスタマイズ
3. デザインCSS

上記の順番で「デザインCSS」を開きます。

記事タイトルの場所

記事タイトルとは、トップページの記事タイトルと、記事ページを開いた画像の場所になります。ちなみに僕のブログの場合は、シンプルなデザインにカスタマイズしていますので、ボーダーを上下に2つ引いたデザインにしています。

今回作成したコピペは、「.entry-title」のCSSを変更することでデザインが変わるように設定しております。

バックアップ

元に戻せるように、バックアップは必ず取るようにしてください。ブログをカスタマイズする際は基本ですね。

シンプルなタイトル

背景色＋下ボーター

.entry-title {
font-weight: bold;
  font-size: 20px;
  padding: 15px 10px;
  background-color: #eee;
  border-bottom: 4px solid #ccc;
}

背景色＋下ボーター

.entry-title {

font-weight: bold;
  font-size: 20px;
  padding: 15px 10px;
  color: #fff;
  background-color: #f7594d;
  border-bottom: 4px solid #aaa;
}
.entry-title a{
  color: #fff;
}

背景と文字色を変えた場合の例になります。

背景色

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: 15px 10px;
  background-color: #eee;
}

角丸＋背景色

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: 15px 10px;
  background-color: #ddd;
  border-radius: 15px;
}

背景色＋影

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: 15px 10px;
  background-color: #eee;
  border-bottom: 4px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

下線を２色

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: 10px 10px;
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}
.entry-title::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #3498db;
}

おしゃれなタイトル

上下２重線

.entry-title {
  font-weight: bold;
  font-size: 20px;
  position: relative;
  padding: 1em 0;
}
.entry-title::before,
.entry-title::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 6px;
  box-sizing: border-box;
}
.entry-title::before {
  top: 0;
  border-top: 2px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.entry-title::after {
  bottom: 0;
  border-top: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
}

手書き風枠線

最近よく見るデザインの手書き風です。

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: 1em;
  border: 3px solid #ccc;
  border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

吹き出し

.entry-title {
  font-weight: bold;
  font-size: 20px;
  position: relative;
  padding: .5em .75em;
  background-color: #ddd;
  border-radius: 6px;
}
.entry-title::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #ddd;
}

リボン風

.entry-title {
  font-weight: bold;
  font-size: 20px;
  position: relative;
  padding: .75em 1em;
  background-color: #f0f0f0;
}
.entry-title::before,
.entry-title::after {
  content: '';
  position: absolute;
  top: 100%;
  border-style: solid;
  border-color: transparent;
}
.entry-title::before {
  left: 0;
  border-width: 0 15px 15px 0;
  border-right-color: #ccc;
}
.entry-title::after {
  right: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-top-color: #ccc;
}

ステッチ入り

.entry-title{
  background: #274a78;
  font-weight: bold;
  font-size: 20px;
  width: 95%;
  border: 2px dashed #f8fbf8;
  box-shadow: 0 0 3px 3px #274a78;
  border-radius: 5px;
  padding: 10px;
}
.entry-title a{
  color: #f8fbf8!important;
}

上下ステッチ

.entry-title{
  font-weight: bold;
  font-size: 20px;
  padding: .5em .75em;
  background: #f4f4f4;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}

斜めストライプ

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: .5em .75em;
  background: -webkit-repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
  background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
.entry-title a{
  color: #fff!important;
}

上ボーダー＋背景グラデーション

.entry-title {
  font-weight: bold;
  font-size: 20px;
  padding: .75em 1em;
  border: 1px solid #ccc;
  border-top: 3px solid #3498db;
  background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}

サークル＋下線ボーダー

.entry-title {
  font-weight: bold;
  font-size: 20px;
  position: relative;
  padding: 0 .5em .5em 2em;
  border-bottom: 1px solid #ccc;
}
.entry-title::before,
.entry-title::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
.entry-title::before {
  top: .2em;
  left: .2em;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: rgba(150, 150, 150, .5);
}
.entry-title::after {
  top: .7em;
  left: .7em;
  width: 13px;
  height: 13px;
  background: rgba(210, 210, 210, .5);
}

うまくいかない場合

上手くいかない場合は、既存のテーマに適用されているCSSが原因の場合がほとんどです。対応方法をいくつか紹介します。

!importantを使用する

.entry-title{
  font-weight: bold!important; //フォントの太さを優先にする
  font-size: 20px!important;//フォントサイズを優先にする
  background: #f4f4f4!important;//背景色を優先にする
  border-top: 1px dashed #ccc!important;//ボーダー色を優先にする;
  border-bottom: 1px dashed #ccc!important;//ボーダー色を優先にする;
}

CSSのプロパティの最後に「!important」を使用することで、既にあたっているCSSより優先度を強くすることが出来ます。

例：背景色が変わらない

.entry-title{
  background-color: #ddd!important;
}

#ddd（グレー）で背景色の値を変更することで色を指定でき、「!important」をつけることによって既存のCSSより優先順位が上になります。

例：文字色が変わらない

.entry-title a{
  color: #fff!important;
}

#fff（白）で文字色の値を変更することで色を指定することができ、「!important」をつけることによって既存のCSSより優先順位が上になります。

参考サイト

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
CSS見出し-ジェネレーター | WEB道

さいごに

いかがでしたでしょうか。CSSを知らなくてもコピペでOKです。これでいつでも簡単にタイトルを変更することが出来ます。また今回のCSSのを流用することでタイトルだけではなく、見出しなどにも使用することが出来ます。