アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

はてなブログのヘッダーにグッバイ

君の運命の人はアゴではなかった。

真顔

さて、このブログもはてなブログさんで書かせてもらっておりますが、 アゴはIT芸人でもあるのでできればサイトのデザインなんかも自分でやっていきたいところです。

徐々に変えていこう。

まず今日はヘッダーにグッバイ!

CSS

管理画面 > デザイン > カスタマイズ > デザインCSS に以下を追記すればいけそう。

#globalheader-container {
 display: none;
}
#container {
 display: flow-root;
 padding-top: 0px;
}

デザインCSSで編集するのしんどいな

調べたら Hatena-Blog-Theme-Boilerplate なるものがありました。

CSSをgit管理できるのでアゴからしたらこっちのが楽だ。

テーマ作成用でもあるみたい。

さっそく使う

README.mdにも書いてある手順で進める

$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
$ cd Hatena-Blog-Theme-Boilerplate
$ npm install

はてなブログ側の設定も必要

  1. デザイン確認用のブログを作ったほうが良いみたいなので、自分のみ公開で作成した。
  2. 管理画面 > デザイン > カスタマイズ > デザインCSS に以下を追記する。
@import url("http://localhost:3000/boilerplate.css");

編集スタート

npm run start

これでソースに変更加えたらほぼリアルタイムで反映される状態になった。

scss/lib/_core.scssを編集する。

/* ヘッダ(グローバルヘッダ)
  グローバルヘッダの中はiframeですが、
  #globalheader-container に背景色や文字色を指定することでiframeの中にも色が反映されます。
*/
#globalheader-container {
    background-color: $text;
    color: $background;

    /* 追記 */
    display: none;
}

/* 追記 */
#container { 
    display: flow-root;
    padding-top: 0px;
}

保存すると、デザイン画面で確認できるので確認。 問題なければ build/boilerplate.css にcssファイルが作成されているので、build/boilerplate.css の中身を公開用ブログのデザイン > カスタマイズ > デザインCSS に貼り付ければOK

デザインCSS貼り付け

貼り付け後、ヘッダーが見えなくなりました。

デザインCSS貼り付け後




グッバイ!!


グッバイしたものの

実はこのブログ pro契約してたので 設定>詳細設定 で非表示にできたわ。 詳細設定




なんて日だ!!


今日は以上!!

スポンサーリンク