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

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

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

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

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に詳しいブロガーさんがよく紹介されているオススメ解説本。

スポンサーリンク


2週間無料です!
まずはお試しあれ〜!

ベネッセコーポレーション 進研ゼミ・こどもちゃれんじ

その他
PVアクセスランキング にほんブログ村