Hatenaブログで、よく見るシャレたサイトをつくれる？ ～スタイルシート～
スタイルシートはHatenaブログで使えるのか？
今回はHatenaブログの「HTML編集」機能でスタイルシート（CSS）を使ってシャレたサイトを作ることができるかやってみます。
まずは、よく見る目次の装飾。最近目次の付いたサイトが結構ありますよね。そして目次をクリックすると該当箇所にジャンプしたりします。「目次」が付いていると、サイトの評価が上がるのかも知れませんね。噂で聞いたのは、タイトルに「見出しタグ」を使うとサイト評価があがる、と聞いています。サイトの評価があがると、検索されるときの順位があがると聞いています。
この目次のスタイルシートは以下のサイトから使わせていただいたのですが、この方のサイトはすごい、、、スタイルシートの神だ。
【コピペで完成】HTML・CSSのみでつくるおしゃれな目次のデザイン3選
スタイルシートの書き方やテクニックについては、「スタイルシート ＋（やりたいこと）」で検索すると色々でてきます。スタイルシートってこんなことができるのか！と、結構驚きます。
１．スタイルシートをHatenaブログに書く！
では、どうやってHatenaブログにスタイルシートを書くか、その方法についてご説明します。まずHatenaブログの「記事を書く」でエディタを開きます。開いた画面上の 「HTML編集」タブをクリックし、この切り替わった画面でスタイルシートのコードを書きます。
下が切り替わった画面です。こんな風に<style> </style>のスタイルタグで囲んで書き始めます。
ネットで検索すると、コピペするだけでスタイルシートを有効にできるサイトがあったりします。最初は何が何だか分からなくても、文字の大きさを変えるとか、好きな位置に画像を配置する、表を作成するなど、簡単なものから始め、そこを切り口にスタイルシートを学ぶのもありだと思います。（スタイルシート＝CSS）
２．よく見る目次、そして該当箇所にジャンプ
シャレたブログには、よく先頭に目次がついています。Hatenaブログの「編集 見たまま」エディタでも数字付きのリストはできるのですが、枠を付けたり、クリックしてページの概要箇所にジャンプすることは簡単に設定できないと思います。スタイルシートと「HTML編集」機能を使えば、枠がついて、ページ内の該当先にジャンプできるリストが思い通りにできるようになります。
リストを目次にする方法などは、以下のサイトが勉強になりました。
【HTML】ページ内リンクの作り方：記事の途中に飛ばすには？
”id”って例えばタクシーをイメージしていただくと、タクシーの運転手さんに行き先（idで設定している名称）を伝えればいいのです。
※って、よくみたらHatenaブログに「目次」機能ありました(笑)
３．かわいらしいボタン
すごくよくできてるなーってボタンを見かけることがあります。例えばこんなかわいらしいボタンですが、これもスタイルシートでできているんです。
これ、めちゃくちゃかわいいですよね、以下のサイトのコードをお借りしました！
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！ | JAJAAAN
このように多くがコピペで利用できてしまうんです。
コピペしたスタイルシートのコーディングの意味が最初は分からなくても、あれ？なんで動かないんだろうって調べながらやっているうちに、段々理解できるようになると思います。
４．背景色を透かしてみる
何が透けているの？と思いますよね。文字が書いてある背景色を透かしているんです。
CSSは結構楽しい
👈の画像の上に、白地の背景に黒文字で「CSSは結構楽しい」と書いた絵をのせ、白地の背景を透かして下の草原の画像が透けて見えるようにしています。透ける度合いも０～１００％の範囲で指定できます。これが便利なのは、何回も同じ背景を使用できることでしょうかね。テキスト文字を書き換えることで何回でも背景の絵が使えます。サイトのタイトルとかに使えますかね。
５．表を装飾してみる
Hatenaブログで表を書きたいことありますよね、たまに。そんなときスタイルシートは必須ではありませんが、「HTML編集」で下のような表（テーブル table）を描くことができます。
| ねぎ | ￥160 |
| 白菜（1/4カット） | ￥99 |
| 椎茸 | ￥99 |
これだけだと味気ないので、項目に色を付けたりスタイルシートで装飾してみます。
| ねぎ | ￥160 |
| 白菜（1/4カット） | ￥99 |
| 椎茸 | ￥99 |
だいぶ印象が変わりますよね。デザインの力ってすごいっていつも思います。単なる表もデザインを加えることで、印象ががらっと変わります。デザインの力ってすごい。
６．引用の見せ方を変えてみる
Hatenaブログのエディタで「引用」は以下のようになります。
デザインセンス・マイナスな私は、他の方が作ってくださるスタイルシートの恩恵を受けまくっています。
これはこれでシンプルでオシャレなんですが、これもスタイルシートで装飾してみます。
デザインセンス・マイナスな私は、他の方が作ってくださるスタイルシートの恩恵を受けまくっています。
最後に
今回はHatenaブログでもスタイルシートが使えるのか？そしてもっと綺麗に文章を魅せることができるか？を試してみました。
<i>タグが<em>タグに強制的に変更されたりしましたが、結果としては、Hatenaブログでもスタイルシートが使える！プロが作っているデザインページを真似することができる！ということが分かりました。
Hatenaブログの編集画面でスタイルシートを使っていて、以下の手順で使うのが効率的だなと思いました。
お時間のあるときに、試してみてください。
本日は以上です。
