読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

コピぺでOK!CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】

blog-はてなブログ Webデザイン blog blog-カスタマイズ Web-css Web

f:id:northgeek:20160320161143p:plain

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

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




前提として

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

f:id:northgeek:20160215211628j:plain

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

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

記事タイトルの場所

f:id:northgeek:20160320142811j:plain

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

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


バックアップ

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


シンプルなタイトル


背景色+下ボーター

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


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は「background-color: #eee;」、#eeeの値を変更します。


背景色+下ボーター

.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;
}

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


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は「background-color: #f7594d;」、#f7594dの値を変更します。
  • 文字色を変更したい場合は「color: #fff;」、#fffを変更します。



背景色

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


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は「background-color: #eee;」、#f7594dの値を変更します。


角丸+背景色

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


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は「background-color: #ddd;」、#dddの値を変更します。
  • 角丸の丸みを変更したい場合は「border-radius: 15px;」、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);
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は「background-color: #eee;」、#dddの値を変更します。



下線を2色

.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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 下線の青色を変更したい場合は「background-color: #3498db;」、#3498dbの値を変更します。


おしゃれなタイトル


上下2重線

.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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 上下線の色を変更したい場合は、boforeとafterの「border-top: 2px solid #ccc;」「border-bottom: 1px solid #ccc;」、#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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 枠線の色を変更したい場合は、「border: 3px solid #ccc;」、#cccの値を変更します。

吹き出し

.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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は、「background-color: #ddd;」、#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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は、「background-color: #f0f0f0;」、#f0f0f0の値を変更します。


ステッチ入り

.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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は、「background-color: #274a78;」、#274a78の値を変更します。
  • ステッチの色を変更したい場合は、「background-color: #f8fbf8;」、#f8fbf8の値を変更します。

上下ステッチ

.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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 背景色を変更したい場合は、「background: #274a78;」、#274a78の値を変更します。
  • ステッチの色を変更したい場合は、「border-top: 1px dashed #ccc;」「border-bottom: 1px dashed #ccc;」、#cccの値を変更します。

斜めストライプ

.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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。

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

.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;
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 上ボーダーを変更したい場合は、「border-top: 3px solid #3498db;」、#3498dbの値を変更します。


サークル+下線ボーダー

.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);
}


  • フォントサイズを変更したい場合は「font-size: 20px;」、20pxの値を変更します。
  • 下線ボーダーを変更したい場合は、「border-bottom: 1px solid #ccc;」、#cccの値を変更します。

うまくいかない場合

上手くいかない場合は、既存のテーマに適用されている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のを流用することでタイトルだけではなく、見出しなどにも使用することが出来ます。

Copyright© North-Geek All Rights Reserved.