はてちょび

　はてなブログで私が試したカスタマイズや役に立つかもしれないヒントなどをちょびっと、略して はてちょび

（最終更新 2022/5/15）

コメント宣言等の記号

・ 通常のHTMLのコメントは：　<!--　～　-->
・ JavaScript部分を囲むのは：　<!--　～　// -->
・ JavaScriptのコメントは：　/*　～　*/　、あるいは文頭に //
・ CSS部分を囲むのは：　<!--　～　-->
・ CSSのコメントは：　/*　～　*/

 

特殊記号

タグとして記述する記号を文字そのものとして表示する場合
　　< ： &lt;　　　　> ： &gt;　　　　" ： &quot;　　　　& ： &amp;
　　空白文字（半角スペース） ： &nbsp;

ルビ
<ruby>巴波川<rp>（</rp><rt>うずまがわ</rt><rp>）</rp></ruby>
　ruby：ルビを振る文字の範囲
　rt：ルビ（ふりがな）
　rp：未対応ブラウザで表示する括弧
ブラウザでの表示：巴波川（うずまがわ）、　未対応ブラウザでは　巴波川（うずまがわ）

投稿日の表示を曜日付きにする（デザイン／カスタマイズ／フッタ） 

<script>
var dateTime = document.querySelectorAll('[datetime]');
for (var i = 0; i < dateTime.length; i++){
    dateTime[i].appendChild(DateToWeek(dateTime[i].getAttribute("datetime")));
}
function DateToWeek(day){
    if(typeof day === "undefined"){return ""}
//  day = day.substr(0,10);
    var d = new Date(day);
//  var w = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
    var w = ["(日)","(月)","(火)","(水)","(木)","(金)","(土)"];
    var el = document.createElement("span");
    var str = document.createTextNode(w[d.getDay()]);
    el.setAttribute("class", "date-week");
    el.appendChild(str);
    return el;
}
</script>

ヘッダー画像をランダムに・月ごとに替える（デザイン／カスタマイズ／ヘッダ／タイトル下）
　（「爺の時悠帖」https://ji-jiku.hatenadiary.jp/） 

<script>
today  = new Date();
MM = today.getMonth();
bg_img = new Array();
  bg_img[0] = "url(https://….jpg)"; /* 月ごと画像設定なしのときのデフォルト画像 */
switch (MM) {
case 0:  /* 1月の画像 */
  bg_img[0] = "url(https://….jpg)";
  bg_img[1] = "url(https://….jpg)";
  bg_img[2] = "url(https://….jpg)";
  break;
case 1:  /* 2月の画像 */
  bg_img[0] = "url(https://….jpg)";
  bg_img[1] = "url(https://….jpg)";
  bg_img[2] = "url(https://….jpg)";
  break;
case 2:  /* 3月の画像 */
  bg_img[0] = "url(https://….jpg)";
  bg_img[1] = "url(https://….jpg)";
  bg_img[2] = "url(https://….jpg)";
  break;
　　・
　　・
case 11:  /* 12月の画像 */
  bg_img[0] = "url(https://….jpg)";
  bg_img[1] = "url(https://….jpg)";
  bg_img[2] = "url(https://….jpg)";
  break;
}
n = Math.floor(Math.random()*bg_img.length);
document.getElementById('blog-title-inner').style.backgroundImage = bg_img[n];
</script>

ブログテーマ カスタマイズ（デザイン／カスタマイズ／デザインCSS）

背景画像を2枚重ね（通常の写真画像 JPG の上に 背景透過で文字だけの画像 PNG を重ねる）

（ブログ名/文字だけの画像を替えずに背景画像を替えられる）

 

（Ten Days「写真帖 あの日あの時」https://ji-photo-1.hatenablog.jp/ の場合）

body.customized-background-image::before {
    background-image: url(' 背景が透過で文字だけの画像.png の URL '), url(' 通常の画像.jpg の URL ');
}

 

（Simple one「爺の時悠帖」https://ji-jiku.hatenadiary.jp/ の場合）

デザイン／カスタマイズ／背景画像／画像をアップロードせずに（このため、トップページ全画面表示は機能しないが）、全ページの最後（フッタの下部）を全画面表示とする
body::before {
    background-image: url(' 背景が透過で文字だけの画像.png の URL '), url(' 通常の画像.jpg の URL ');
}
#footer {
    margin-bottom: 100vh;
}

 

 

ブログテーマ 解説ページ

Ten Days：https://ji-jiku.hatenadiary.jp/entry/2021/03/16/120000

Simple one：https://ji-jiku.hatenadiary.jp/entry/2021/03/14/161029

Picture Story：https://ji-jiku.hatenadiary.jp/entry/2021/03/19/191954