【カスタマイズ】コピペするだけ！テーマInnocentで（以外でも？）使えるエントリータイトル周りのカスタマイズ

こんにちは、えむしです。

テーマのInnocentはデフォルトだとエントリータイトルが少し寂しかったので
その視認性をあげようとカスタマイズしました。

cssは独学で勉強しただけで、きちんと勉強した事がありませんので、紹介するコードは不要な指定や誤った入力があるかも知れません。

一応二度三度コピーしてきちんと動くか試しましたが、以下のコードを試す前には、必ず現在のコードのバックアップをお願いします。

手順１

まずはコピペ場所を開きます。 場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。 ここをクリックして

以下に紹介するコードを一番下なんかにコピペして下さい。

カレンダー風日付のエントリータイトル完成図

こんな感じに。
汎用性を考えてタイトル周りの左と下に線を入れておきました。必要に応じて「.entry-header」をカスタマイズしてください。

コード

/* entryカスタマイズ */
.entry-header {
  position: relative;
  padding: 0 0 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #5d5d5d; /* 下ボーダーの太さ・種類・色 */
  border-left: 10px solid #5d5d5d; /* 左ボーダーの太さ・種類・色 */
  padding:5px;
}
.entry-header .categories {
  font-size: 0.6em;
  padding-left: 85px;
  display: block;
}

.entry-header .entry-title {
  font-size: 1.5em;
  padding: 0 0 0 70px;
  margin: 0;
  min-height: 60px;
}

/* 日付カスタマイズ */
/* 日付デザインの派生バージョンへのカスタマイズはここから */
.entry-header .date a {
  color: #5d5d5d;
  text-decoration: none;
  font-size: 0.8em;
  margin-left: 4px;
  width: 60px;
  height:55px;
  background: #fff; /* 背景色 */
  text-align: center;
  border-top: 10px solid #5d5d5d; /* 上のボーダーの太さ・種類・色 */
  border-bottom: 1px solid #5d5d5d; /* 下のボーダーの太さ・種類・色 */
  border-right: 1px solid #5d5d5d; /* 右ボーダーの太さ・種類・色 */
  border-left: 1px solid #5d5d5d; /* 左ボーダーの太さ・種類・色 */
  border-radius: 2px; /* ボーダーの丸み */
  line-height: 22px;
  position: absolute;
  background-clip: padding-box;
  display: inline-block;
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
}
/* ここまでの間を書き換え */

.entry-header .date a:hover {
  background-color: #5d5d5d; /* ホバーした時の背景色 */
  color: #fff; /* ホバーした時の文字の色 */
}
.date-mounth
.date-year {
  display: block;
}
.date-day {
  display: block;
  font-size: 2.5em;
}
.date-year:after {
  content: "-";
}
.hyphen {
  display: none;
}

色の見本はこちらを参考にいかがでしょう。 www.colordic.org webdesignrecipes.com

派生バージョン1

日付周りの線を無くすのであれば、.entry-header .date a の部分を以下のものと置き換えてください。

完成図

コード

.entry-header .date a {
  color: #5d5d5d;
  text-decoration: none;
  font-size: 0.8em;
  margin-left: 4px;
  width: 60px;
  height:55px;
  background: #fff; /* 背景色 */
  text-align: center;
  border-top: 10px solid #5d5d5d; /* 上のボーダーの太さ・種類・色 */
  border-radius: 2px; /* ボーダーの丸み */
  line-height: 22px;
  position: absolute;
  background-clip: padding-box;
  display: inline-block;
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
}

派生バージョン2

日付部分を四角く囲う場合は以下のコードへ。
角の丸みを取る場合はborder-raduisの一行を削除してください。

完成図

コード

.entry-header .date a {
  color: #5d5d5d;
  text-decoration: none;
  font-size: 0.8em;
  margin-left: 4px;
  width: 60px;
  height: 60px;
  background: #fff; /* 背景色 */
  text-align: center;
  border: 1px solid #5d5d5d; /* 上のボーダーの太さ・種類・色 */
  border-radius: 2px; /* ボーダーの丸み */
  line-height: 26px;
  position: absolute;
  background-clip: padding-box;
  display: inline-block;
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
}

日付を○で囲ったエントリータイトル完成図

これは上のやつの書き換えじゃないのでベタッとこれだけ貼って下さい。

コード

/* entryカスタマイズ */
.entry-header {
  position: relative;
  padding: 0 0 15px;
  margin-bottom: 20px;
  border-left: 10px solid #5d5d5d;
  border-bottom: 1px solid #5d5d5d;
  padding:5px;
}
.entry-header .categories {
  font-size: 0.6em;
  padding-left: 85px;
  display: block;
}

.entry-header .entry-title {
  font-size: 1.5em;
  padding: 0 0 0 70px;
  margin: 0;
  min-height: 60px;

}
/* 日付カスタマイズ */
.entry-header .date a {
  color: #5d5d5d;
  text-decoration: none;
  font-size: 0.6em;
  margin-left: 4px;
  width: 60px;
  height:60px;
  background: #fff;
  text-align: center;
  border: 2px solid #5d5d5d; /* カレンダーの周りの線の幅・種類・色 */
  border-radius: 50%;
  margin-bottom: 10px;
  line-height: 27px;
  position: absolute;
  background-clip: padding-box;
  display: inline-block;
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
  *display: inline;
  *zoom: 1;
}
.entry-header .date a:hover {
  background-color: #5d5d5d;
  color: #fff;
}
.date-mounth
.date-year {
  display: block;
}
.date-day {
  display: block;
  font-size: 2.5em;
}
.date-year:after {
  content: "-";
}
.hyphen {
  display: none;
}

なお、今回からフォントの大きさの指定をemにしてみました。
16px=1emです。

読んでいたドキュメントでpxよりem指定した方が良いよと書いてあったのでそれに従ってみる事に。TwitterBootstrap4でもそうなるみたいですね。
pxは絶対値、emは相対値です。
ブラウザで文字の拡大縮小なんかをした時に差が出てきます。

他のテーマでも使えなくはないと思いますが、微妙なところでズレたりするかも知れません、ご了承下さい。

おまけ 20160927修正

指定したコードが上で紹介していたコードになっていました、申し訳ありません。正しくは以下のコードです。

ホバーした時に白抜きのリンクにするには、以下のコードもコピペして下さい。

.entry-title a:hover {
  color: #fff;
  text-shadow:
        0 1px 0 #5d5d5d,
        1px 0 0 #5d5d5d,
        0 -1px 0 #5d5d5d,
        -1px 0 0 #5d5d5d,
        -1px -1px 0 #5d5d5d,
        1px -1px 0 #5d5d5d,
        -1px 1px 0 #5d5d5d,
        1px 1px 0 #5d5d5d
        ;
}

もしも間違いなりがあれば指摘していただけたら幸いです。直して行きます。
ではでは、また次の記事で…

この記事の続き blog.mshimfujin.net

CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

posted with ヨメレバ

エビスコム ソシム 2014-10-28

Amazon

Kindle

楽天ブックス

7net