概要
日記向けのレスポンシブデザインです。
・スマホ（１カラム）、PC（２カラム）
履歴
ver 0.0.1 (2019.02.27) 新規作成
ver 0.0.2 (2019.03.16) 微調整
ver 0.0.3 (2019.08.27) 90日未更新時の広告枠の表示調整
ver 0.0.4 (2024.06.12) 小見出しH5が複数行の時に重なる不具合を修正
レスポンシブの設定
レスポンシブデザイン 「詳細設定」の「レスポンシブデザイン」をチェックすると、スマートフォンでもPCと同一のデザイン設定を使用します。 http://help.hatenablog.com/entry/design/smartphone
カスタマイズ
デザイン＝＞カスタマイズ＝＞デザインCSSに追記するとカスタマイズできます。
ベースの色を変更する
.page-archive .archive-date,
.entry-header .entry-date.first{
background-color: #9699A2;
}
#title,
.hatena-module-title,
.entry-content blockquote:not([class]),
.page-archive .archive-entry,
.entry-header,
.entry-content,
.entry-content h2,
.entry-content h3,
.entry-content h4:before,
footer#footer{
border-color: #9699A2;
}
@media (max-width: 899px){
.hatena-module-title{
background-color: #9699A2;
}
}
.entry-title a::before{
color: #9699A2;
}ベースカラーをグレー（#9699A2）に変更。
#9699A2を好きな色に置き換えれば、ベースカラーを変更できます。
■ #5279e7（テーマの初期値）
■ #9699A2
■ #47a89c
■ #ff7fa1
■ #38b5d7
免責事項
本テーマの利用に関するいかなる被害・損害について、製作者は一切の責任を負わないものとします。
------------------------------------------------------------------------
おまけ（カスタマイズ例）
サイドバーの幅を変更する
@media (min-width: 900px){
#main {
width: calc(100% - 220px);
}
#box2 {
width: 220px;
}
}
- -220px、220pxの数字を変更して、デザインCSSに追記
全幅（横幅）いっぱいに隙間なく表示したい
@media (min-width: 769px){
#container,
footer#footer{
margin-left:5%;
margin-right:5%;
}
}5％を1％とかに変更して、デザインCSSに追記
ソース表示のバックカラーの指定
.entry-content pre {
background-color: #e7ebff;
}上記の色を変更で・・
■ #e7ebff（テーマの初期値）
■ #EEEEEE
■ #CFEFD8
■ #FFEDEA
■ #EFF9FF
