はてなブログテーマ『Release All Yourself』のトリセツ
一昨日、1月16日から3月14日まで開催された『はてなブログデザインテーマコンテスト』の参加期間が無事終了しましたね。
平成最後？！2019年「はてなブログ デザインテーマコンテスト」開催 - 週刊はてなブログ
僕も1人のCSS・はてな・ブロガーとして、参加させていただきました。
・・・
えぇ。参加させていただきました。
イヤァ〜直前まで整形していたので間に合わないかと思って焦りましたヨ〜〜＾＾
・・・
あ、4インストールありがとうございます＾＾
（内一人自分）
・・・
え〜・・・、それではですね、一昨日、3月14日にリリースさせていただきましたですね、はてなブログのテーマを、ご紹介していきます。
昨晩テーマを投稿しようとしたところ、何者かに鈍器のようなもので後頭部を強打され、気を失っていたのです。 #はてなブログ
— せやな (@FabyMssgOazer) 2019年3月14日
何者か（睡魔）
— せやな (@FabyMssgOazer) 2019年3月15日
・・・
3月14日に。
『Release All Yourself』の特徴
▼テーマストアはこちら
▶︎ デモブログ
スクロールするとトップ画像が固定ヘッダー化。
このデモではトップ画像にハンモックの写真を設定していますが、スクロールでの固定ヘッダー化に対応しています。
固定ヘッダー化する方法は、下記固定ヘッダー化・カラーを正しく反映させるコピペをご覧ください。
トップに画像を設定するにはデザイン > ヘッダから。
カラーカスタマイズの幅が無限大。簡単。
デザイン > 背景色やデザイン > 背景画像から選べる、はてなブログ標準のテーマカラー・画像変更に対応しています。
それに加え、コピペで使えるボックスデザインや、見出し等のカラーも簡単に変更することができます。
1カラム←→2カラムの切り替えが可能。
デモブログ は2カラムになっていますが、デフォルト（テーマインストール時）は1カラムです。
2カラムの設定方法は2カラムに切り替えるを参照。
これだけやれば大丈夫！コピペでOKな3つのカスタマイズ
Release All Yourselfを使用するにあたって、最低限これは見て欲しいというカスタマイズを紹介していきます。
何もしなくても概ね問題なく使用できますが、何事にも基本設定をしとかなきゃね。言うてすぐ終わるけど。
レスポンシブ対応させる
＞＞デザイン > スマートフォン > 詳細設定のレスポンシブデザインにチェックを入れる
これで、デザインをPCと統一させることができます。
逆にチェックを入れない場合、スマホのデザインを一から作らなくちゃならない。ヤバイ。めんどい。
固定ヘッダー化・カラーを正しく反映させるコピペ
一番大事。
- provided courtesy of iTunes
スクロールされた時にトップ画像を画面上部に固定する・色を美しく反映させるカスタマイズになります。
大事なのは、「色を美しく反映させる」部分。これがないと、たまに色が……おかしくなったり……（小声）
まあつまり、これさえコピペしておけば以降のカスタマイズはお好みでOK。
＞＞以下をデザイン > カスタマイズ > ヘッダ > タイトル下にコピペ
<script type="text/javascript"> var target = document.body; var style = window.getComputedStyle(target); var prop = style.background; document.write('<style>body:after, #blog-title-inner:before, #bottom-editarea, #wrapper:after, .header-image-enable .blog-title--scrll, .header-image-only .blog-title--scrll, .page-entry #blog-title, #footer {background:' + prop + ' !important}</style>'); window.addEventListener('scroll', () => { var value = $(this).scrollTop(); function add(idName,className) { document.getElementById(idName).classList.add(className); } function remove(idName,className) { document.getElementById(idName).classList.remove(className); } if ( value > 0 ) { add('container-inner','container-inner--scrll'); add('blog-title','blog-title--scrll'); add('blog-title-inner','blog-title-inner--scrll'); add('content','content--scrll'); } else { remove('container-inner','container-inner--scrll'); remove('blog-title','blog-title--scrll'); remove('blog-title-inner','blog-title-inner--scrll'); remove('content','content--scrll'); } }, false); </script>
固定ヘッダー化したくない人は、
window.addEventListener('scroll', () => {
〜
}, false);
を削除してください。
もう無い
もう無い。
すみません、3つもありませんでした（は？）
エェ！！？？！たったこれだけでいいノォ！？？！？！？！
イインデス！！！！（川平慈英）
あとは好きなテーマカラーを選んだりサイドバーを変更したりして、ガンガン記事を書いていこうな！！！！
+αのカスタマイズ・デザイン紹介
今書いてる！！！！今書いてるから！！！！！！
書き終わりましたので、よろしくお願いします。
ボックスデザインの使い方
html編集・Markdown・はてな記法では、ボックスデザインを使うことができます。
シンプルなボックス
<div class="box"> <p>ただのボックス。</p> <p>私はただのボックスです。何の装飾もなく、ゆえに汎用的。私はただのボックス。使いどころを選ばない、シンプルな、ボックス───</p> </div>
<p>タグ（※1つの文のまとまりのことだよ！）を<div class="box"></div>タグで囲むだけ。
「合わせて読みたい」系ボックス
<div class="box awasete"> <p>合わせて読みたい記事的なものをここに書く</p> </div>
ベースはシンプルなボックスと同じです。<div class="box"></div>のclassの中にawaseteを追加してください。
「合わせて読みたい」の文言は「オススメ記事」「外部サイト」に変更することもできます。以下参照。
| 合わせて読みたい | オススメ記事 | 外部サイト |
|---|---|---|
| awasete | osusume | gaibu |
あ〜〜〜〜〜〜＾わかりやすいナァ〜〜〜〜〜〜！！！！！！！！
テーマカラーの変更
テーマカラーは、はてな標準の背景色や、背景画像から変更することができます。
＞＞以下をデザイン > カスタマイズ > 背景色
＞＞以下をデザイン > カスタマイズ > 背景画像
また下記コードをデザインCSSにコピペすることで、好きな色にも変更することができます。#FFFFFの部分を好きな色に設定してください。
※#FFFFFは白色です。
＞＞以下をデザイン > カスタマイズ > デザインCSSにコピペ
/*単色の場合*/ body{ background: #FFFFF;} /*#FFFFFを変更*/ /*グラデーションの場合*/ body{ background: linear-gradient(to right,#FFFFF,#FFFFF);}
好きな色を設定する場合は、背景色と背景画像を「初期設定」にしてください。
引用・見出し・ボックスデザインのカラー変更
＞＞以下をデザイン > カスタマイズ > デザインCSSにコピペ
blockquote:before, .entry-content h3:before, .entry-content h4:before, .entry-content h5::after, .entry-content h5::before, .box { background: #FFFFF; /*#FFFFFを変更*/ }
ヘッダーメニューを追加する
ヘッダーに検索フォームとハンバーガーメニューを追加します。
これです。
＞＞以下をデザイン > ヘッダ > タイトル下にコピペ
<ul id="new-grobal-menu"> <li id="ham-menu"> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content"> <!--ここからが中身です--> <!--ここまで--> </div > </div> </li> <li id="header-search"> <form method="get" class="search-form" action="https://www.release-all.com/search"> <input type="search" placeholder="記事を検索" value="" name="q" class="search-field"> <input type="submit" value="Search"> </form> </li> </ul>
nav-contentの中身が、右上のヘッダーメニューをタップした時に出現するエリアの中身です。
id="header-searchの、/searchより前の部分を自分のブログのURLに変更します。
最初に本ブログに導入したのがだいぶ前なので忘れていたのですが、サルワカさんの記事を参考に作っていた。一昨日偶然発見しました。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
2カラムに切り替える
デフォルトでは1カラムですが、2カラムにも変更できます。1カラムのままでOKな方は読み飛ばしてください。
画面サイズが1024px以上で2カラムになります。
＞＞以下をデザイン > デザインCSSにコピペ
@media (min-width: 1024px) { #content-inner { width: 1024px; display: block } #wrapper { width: 680px; float: left } #box2, #box2 .hatena-module, #box2-inner:before, #box2 .hatena-module:after, #box2-inner:after, .profile-description { color: #454545; background: unset } #box2 { width: 320px; float: left; margin: 0 auto 0 0; background: rgba(255,255,255,.2); } #box2-inner { display: block; padding-top: 0 } .sns-area { width: 100%; left: 0; margin-left: 0; margin-right: 0 } .sns-area:before { height: 60px } .sns-img { background-attachment: unset } #wrapper:before, #wrapper:after { content: none } .pager { margin-bottom: 40px } .hatena-module { padding: 0; margin-bottom: 40px } .page-entry .hatena-module:nth-child(1){padding-top:40px} .hatena-module-title { text-shadow: 0 0 8px #fff; font-weight: 900; background: rgba(255,255,255,.2); margin: 0 auto 20px; padding: 4px .5rem 0; } .hatena-module a, .hatena-module-category li a { color: #454545 } .hatena-module .urllist-date-link a { color: #fff } .hatena-id-link { text-shadow: 0 0 8px #fff; } #box2 .entries-access-ranking:before, #box2 .recent-entries:before { content: '\f006'; font-family: blogicon; position: absolute; right: -1rem; top: calc(50% - 12px); font-size: 20px; animation: scrllRight 1.5s infinite } }
