こんにちは。
今回ははてなブログのCSSについてです。タイトルにJavaScriptって書いてますけどメインはCSSです。
一部固定ページのサイドバーを非表示にしてみたかったので方法を調べてみました。
レイアウトを変えるならやっぱりCSSっていうのを書かないといけないんですよね。
CSSっていうのはwebページのデザインをいじるためのコードで過去にグローバルメニューを設置する記事で触れました。
これがなかなかの曲者でWEB検索で調べてもなかなかうまいこといかなかったりするんです。
はてなブログに於いて特定ページのサイドバーを非表示にするなら下記のコードを記事に記述します。
<style type="text/css">
#box2 {
display: none;
}</style>
非表示にするだけならこれだけ。
ただ、これだけだとこうなります↓
サイドバーは消えましたがメイン部分の大きさがそのままなのでアンバランス。メイン部分の幅を調節するための記述を書き加えます↓
<style type="text/css">
#main {
max-width: 1060px;
width:90vw;
margin-top:2rem;
}
#box2 {
display: none;
}</style>
#main{}の中に書いた内容がメイン部分のレイアウトに影響を及ぼすというのがポイントで中身については自分がこう書いた、というものなので人によっていろいろな書き方があると思います。
最大幅、1060pxっていうのはタイトル部分に合わせてます。width:90vwのvwっていうのはブラウザの幅に対しての割合の単位のようです。しかし自分の場合はブラウザ画面の大きさを変えたとき、タイトル部分と微妙に大きさの変化が異なりました(;´Д｀)
そのへんはもっと研究が必要ですがとりあえずこうなりました↓
で、すごく大事なことがあってそれが今回一番伝えたいことなのですが
編集モードが見たままモードじゃダメなんです！
(見たままモードのHTML編集じゃダメ)
今までJavaScriptさわってみる回では はてなでJavaScript使うならMarkdownモードですよ！って言ってきたのでまぁこれもそうかもなーとは思ってました。でもですね、
Markdownモードでもダメなんです！
これでパニックになりました。じゃあJavaScript使えないじゃんって。いちおう前に外部からJavaScriptを呼び出すってやつはやりましたけど↓
なんとかMarkdownモードでCSSいじれないか調べたり試したりしたのですがダメでした。なんか<style></style>が無視されるっぽいです。
さらに調べて答えに辿り着きました。
はてな記法モードならできます。
ならばJavaScriptを諦めるのか？ということになりそうですが、JavaScriptも使えましたｗ
Markdownでしかできないと思っていたのですが見たままモードでなければ使えるようです。
それで今更知ったのですが新しい記事を書くときに左上のタブからモードが選べるんですね！(ﾟДﾟ)
ならもう設定としてはどれでもいいかな。
とりあえずはてな記法にしておきました。
まとめ
各編集モードでのCSSデザイン編集/JavaScript可否。
・見たままモード CSS × JS×
・はてな記法モード CSS〇 JS〇
・Markdownモード CSS× JS〇
・HTMLモード CSS〇 JS〇
間違ってたらすみませんが試してみた限りはこんな感じでした。(・∀・)
次回↓
