概要
日記向けのレスポンシブデザインです。
・スマホ(1カラム)、PC(2カラム)
履歴
ver 0.0.1 (2019.02.27) 新規作成
ver 0.0.2 (2019.03.16) 微調整
ver 0.0.3 (2019.08.27) 90日未更新時の広告枠の表示調整
レスポンシブの設定
レスポンシブデザイン 「詳細設定」の「レスポンシブデザイン」をチェックすると、スマートフォンでも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