えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレ

スポンサーリンク

【カスタマイズ】コピペするだけ!アーカイブのページをカスタマイズする

\フォロー!/
\シェア!/

f:id:mshimfujin:20160925214303j:plain

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

昨日の続きでカテゴリーを選んだ時に出てくるアーカイブのページもカスタマイズしてみます。

昨日のエントリー。 blog.mshimfujin.net

完成図

f:id:mshimfujin:20160926154419p:plain

こんな仕上がりになります。

手順1

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

https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20160925/20160925202616.png


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

コード

以下のコードを開いたcssの欄へコピペするだけです。 適当な場所、例えば一番下の方なんかにペーストして下さい。

/* archiveカスタマイズ */
.archive-entry-header .date a {
  color: #5d5d5d; /* 文字色 */
  font-size: .85em; /* 文字の大きさ */
  font-weight: bold; /* 文字の太さ 標準の太さにするには削除して下さい */
  padding: .4em; /* 余白 */
  border-top: 4px solid #5d5d5d; /* 上枠の太さ・種類・色 */
  border-bottom: 1px solid #5d5d5d; /* 下枠の太さ・種類・色 */
  border-left: 1px solid #5d5d5d; /* 左枠の太さ・種類・色 */
  border-right: 1px solid #5d5d5d; /* 右枠の太さ・種類・色 */
  border-radius: 2px; /* 角の丸み シャープな角にするには削除して下さい */
}
.archive-entry-header .date a:hover {
  background-color: #5d5d5d;  /* ホバーした時の背景色 */
  color: #fff; /* ホバーした時の文字色 */
}
.archive-entry-header .entry-title a {
  text-decoration: none;
}
.archive-entry .categories {  /* カテゴリーの設定 */
  font-size: .6em; /* 文字の色 */
  padding-bottom: .4em; /* 余白 */
  border-bottom: 4px solid #5d5d5d; /* カテゴリ下に描いている線の太さ・種類・色 */
}

以上です。

なお、フォントの指定はしていませんので、テーマによっては文字の見え方が変わってきます。

カテゴリー関連の設定をいじりたく無い方は、カテゴリーの設定をまるごと削除して使用して下さいね。

色の見本はこちらを参考にされてはいかがでしょう。

www.colordic.org webdesignrecipes.com

あとがたりっぽいもの

本当は昨日の日付のデザイン↓みたいな感じにしたかったんですが
f:id:mshimfujin:20160926154009j:plain
そうは出来ない仕様になっていまして、これが限界でした。エントリーと同じ仕様で日付のデータ吐き出してくれれば変えられるんですがねえ、残念。

ではでは、また次の記事で…

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

スポンサーリンク

その他