はてなブログ記事へのCSS直書きを試してみる
いちいち設定行って直すとかめんどくさいし、特定の書類でしか使わない設定って多いでしょ？
たとえばTABLEのデザインなんて使用目的で毎回変わるんだし、そんなもの共用の一般設定に入れたら重くなるばかりだし。
一時<style scoped>があったんだけど仕様書から削除された話読んだり
なんでかって言えばそれはShadow DOMのCSSがscoped相当になるため「重複機能」と判断されたって話を読んだり
そりゃそうだよ。
本当なら個別にスタイル設定使いたい場面は多いんだから。
毎回必要性の変わる<TABLE>のデザインをCSSでやれとか、いろいろな機能をCSSに無茶振りしてるんだし、こんな動きが出てくるのは当然。
でまあ、こんなの読んだり
それで思ったわけですよ。
これ、<STYLE>直書きしちゃえばいいんじゃね？
不安はあるんですよ。
今後どういう風に実装されるかがわからないし、今現在でもいろいろなブラウザでどう動作するか保証がない。
しかし既にトレンドとして、<BODY>の中で個別に<STYLE>を使用することを禁止するような大義名分が立っていない。
むしろこれは時代が求める、必要とされる機能であり、禁止する意味がない。
実は<style scoped>だって単なる言い訳みたいなものだったんだし。
実際にやってみましょう。
はてなのデザインCSSを使用しない、ブログ記事へのCSS直書き。
実はもうやってるんですけどね。
とりあえず簡単に、太字にした文字を大きくする設定を<strong>に仕込んでみました。
みなさんのところではどう動作してますか？
次はもうちょっと複雑なことを試してみましょう。
やっぱり使うたびに要求の違うTABLEで、背景色と文字の揃えをnth-childで変えてみました。
| 1 | サンプル | 111 |
| 2 | 文字と | 1 |
| 3 | 数字で | 111111 |
| 40 | どうなるか | 0.11 |
| 500 | ？ | 1111.111 |
どうなるか？
あ、このページに直接書いたstyleの中身はこんなのです。（表示する中身にstyle定義入ってると、はてなエディタにpreもcodeもなかったことにされちゃった）
strong.big {font-size: 1.5em}
table.sample {width: 400px;border: 1px solid #666; }
table.sample td:nth-child(2n+1) {text-align:right;}
table.sample td:nth-child(2n+0) {text-align:left;}
table.sample tr:nth-child(2n+1) {background-color:#FCC;}
table.sample tr:nth-child(2n+0) {background-color:#CCF;}
注意事項
今の段階では適応範囲が同時に表示されてる記事全体に拡がっちゃうんで、ちゃんとクラス名とかは設定しなきゃダメですよ。
はてなキーワードって
はてなキーワード、説明の必要そうな言葉が異常にたくさんあるんで、手抜きできたり、脱線してまで説明する必要が無くなるのは都合いいんです。
珍しいキーワード使えばわたしん所にしっかりリンクしてくれたりして。
しかし、説明が浅いとか違う場合が問題か。
意外と付いてくれない言葉も多い。
期待した「ＤＮＡ」「遺伝子」「染色体」とかに付いてくれないのはなぜだ？
自分の文章にどこまで説明やリンクを付ければいいのか、様子を探りながら書くしかないんだろうか……
というわけでググってみたわけです。
[[リンクしたいキーワード]]
か。
しかし、（まだ市民じゃないから要求されないけど）指定していちいちキーワード書けってせっつかれるのもめんどくさいだろう。類似キーワードがある場合もあるし。
明示したリンクが通常のリンクと同じになるというのも困る。
ぼちぼちやねえ。
