概要
tonesをベースにした、３カラム、レスポンシブデザインです。
・スマホ（１カラム）、PC（２カラム/3カラム）
・グリッド表示（アーカイブ、Pro版のトップページ）
・右サイドバーに、300ｘ250の広告設置が可能
・サイドバーで空白ができる場合は微調整必要
履歴
ver 0.0.1 (2019.02.22) 新規作成
ver 0.0.2 (2019.03.09) 微調整
ver 0.0.3 (2019.08.27) 90日未更新時の広告枠の表示調整
導入方法
<script>
document.addEventListener('DOMContentLoaded', function(){
var mobile = /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
if(mobile){
}else{
document.body.classList.add("pc");
}
});
</script>「設定」＝＞「詳細設定」＝＞「headに要素を追加」に上記を追加してください。
そうすると、bodyタグに、PCの時だけ、「pc」クラスが付加されます
レスポンシブの設定
レスポンシブデザイン 「詳細設定」の「レスポンシブデザイン」をチェックすると、スマートフォンでもPCと同一のデザイン設定を使用します。 http://help.hatenablog.com/entry/design/smartphone
サイドバーの配置
1. デザイン＝＞カスタマイズ＝＞サイドバーで配置
| 左 | 真ん中 | 右 |
|---|---|---|
| 2番目 | 1番目 | |
| 4番目 | 3番目 | |
| 6番目 | 5番目 | |
| 8番目 | 7番目 |
こんな感じで配置されます。
2. 空白が空く場合の微調整の仕方
デザイン＝＞カスタマイズ＝＞デザインCSSに以下のようなものを追加する
@media screen and (min-width: 1180px){
#box2 .hatena-module:nth-child(3) {
margin-top: -200px;
}
}3番目 200px上につめる
複数ある場合は、上記を複数分作成して追記すればOKです。
3. モジュールの順番調整の仕方
モジュールの「HTML」を選んで、空で作成する
4. ３カラム時のフッタ部分の注意
サイドバーに重ならないようにCSSを設定しています。横幅いっぱいに広がらないのは、そのためです。
・デザインのフッター部の設定で指定するもの
・フッター部分（有料版は非表示可能）
横幅いっぱいにしたい場合（全幅表示）
「おまけ」参考。動作確認をあまりしてないので、よく確認してください。
はてなブログ３カラム化の技術情報（利用テクニック）
はてなブログでサイドバーを2つ（3カラム）にして、さらにモジュールを使えるようにした - アニテマ
http://anitema.hateblo.jp/entry/2014/04/10/230127
position:absoluteした要素に可変の高さを与える - Qiita
https://qiita.com/nknkt/items/065b30bbdc1f6508a6f7
上記を使って実現しています。
tones
http://blog.hatena.ne.jp/-/store/theme/17680117126967059287
ベースにしたテーマです。骨格だけ欲しい人向けに作成しました。
グローバルメニューを追加する方法
https://blog.z0i.net/2019/02/tones-gnav.html
カスタマイズも共通です。また多くのはてなブログ用の装飾もそのまま使える可能性はあります。
免責事項
本テーマの利用に関するいかなる被害・損害について、製作者は一切の責任を負わないものとします。
------------------------------------------------------------------------
おまけ（カスタマイズ例）
ブログタイトルの文字色と背景色を変更する
#blog-title{
background: #38b5d7;
}
#blog-title #title a{
color: #fff;
}■ #5279e7
■ #9699A2
■ #47a89c
■ #ff7fa1
■ #38b5d7（テーマの初期値）
CSSをデザイン＝＞カスタマイズ＝＞デザインCSSに上記の色の部分を変更して追記
記事内の見出しの装飾
.entry-content h3 {
border-left: 5px solid #38b5d7;
padding: 5px 5px 5px 10px;
}
.entry-content h4{
border-left: 0px solid #38b5d7;
border-bottom: 0px solid #38b5d7;
padding: 0px;
}
.entry-content h4:before {
content: "■";
font-size: 1.5em;
padding-right: 8px;
color: #38b5d7;
}
背景画像の調整
背景画像の横幅が1600pxの場合
@media (min-width: 1601px){
body {
background-size:cover;
}
}1601以上に横幅を広げると、背景画像を拡大表示して空白ができないように埋めます。
続きを読むボタンの設定
.entry-content a.entry-see-more{
color: #0000ff; /*文字色*/
background: #eee; /*背景色*/
border: solid 1px #e0e1e1; /*囲い枠*/
}上記当たりの色を変更すればカスタマイズできます
横幅いっぱいにしたい場合（暫定）
@media screen and (min-width: 1180px){
#gnav .gnav-inner, #blog-title-inner, #blog-title-content, #top-editarea, #top-box, #content, #bottom-editarea, #footer-inner, footer#footer {
max-width: none;
}
}
@media screen and (min-width: 1180px){
#content-inner {
max-width: none;
}
}
@media screen and (min-width: 1180px){
.page-archive .archive-entry{
max-width: 180px;
}
}上記を追加すれば可能だと思います。
2カラムの時のサイドバーの順番を変更する
２カラムの時の表示順をどうしても変更したい場合は、以下のようなCSSで可能です
@media screen and (min-width: 900px) and (max-width: 1179px){
#box2-inner{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
-webkit-flex-wrap : nowrap
flex-wrap:wrap;
}
#box2 .hatena-module:nth-child(1) {
-webkit-order:1;
-ms-flex-order:1;
order:1;
}
#box2 .hatena-module:nth-child(2) {
-webkit-order:4;
-ms-flex-order:4;
order:4;
}
#box2 .hatena-module:nth-child(3) {
-webkit-order:2;
-ms-flex-order:2;
order:2;
}
#box2 .hatena-module:nth-child(4) {
-webkit-order:5;
-ms-flex-order:5;
order:5;
}
#box2 .hatena-module:nth-child(5) {
-webkit-order:3;
-ms-flex-order:3;
order:3;
}
#box2 .hatena-module:nth-child(6) {
-webkit-order:6;
-ms-flex-order:6;
order:6;
}
}上記のようなCSSをデザイン＝＞カスタマイズ＝＞デザインCSSに以下のようなものを追加すると以下のように表示されます。
| 真ん中 | 右 |
|---|---|
| 1番目 | |
| 3番目 | |
| 5番目 | |
| 2番目 | |
| 4番目 | |
| 6番目 |
#box2 .hatena-module:nth-childd(3) =>サイドバーの3番目のモジュール
order:2; ＝＞実際の表示の順番を指定
