吹き出しCSSの解説 - オカンハック

こんにちは。カーチャンです。
まんたんから吹き出しを表示するしくみについて「どーやったの？！」と問い合わせがあったので解説記事を書きますね。

そもそもWEBページが見えるしくみとは
- 内容とデザインの分離
CSSを設定する場所によって、反映される範囲が違う！
そこでメタラーまとん様の技！
まとめ
関連商品

そもそもWEBページが見えるしくみとは

詳しくは解説書を読もう！

……手抜きすぎますね。

その道のプロに刺されかねないほど、もン〜のすごくざっくり解説すると、

WEBページとは、HTML言語の形式に従って書かれたデータです。
それをIEやSafariなどの「ブラウザ・ソフト」が読み取って、文字や画像、色や表示位置の指定などを解析することで、「人間が理解できる画面」を表示してくれます。

PCをお持ちの方は、「ファイル > 保存」でページを保存して、「メモ帳」などのテキストエディタで開いてみてください。
なんだかよく分からない呪文がびっしり書いてあると思います。

メモ帳はブラウザのようなHTML言語の解析機能がないので、素のデータを表示しているんです。
（Wordならちょっとはがんばろうとしてくれます。）

カーチャンが若かりし時代は、この呪文をほぼ全て人力で書いていたんですわ…

内容とデザインの分離

HTMLデータの中にも表示色や大きさの指定を含めることができるのですが、
昨今は通信端末が多様化し、下手にHTML上でサイズ指定すると、スマホなどの小さい画面では見切れたり表示が崩れたりします。

そのため、「内容を表すデータ（HTML）とデザインを表すデータ（CSS）を分けて、デバイス（使ってる機器）によってデザインを切り替えよう」という考え方が主流になっています。

その考え方を実現するウェブデザイン手法をレスポンシブウェブデザインと呼びます。

例えるなら、自分の体にペイントをするのではなく、模様のついた服を着替えることで見た目（デザイン）を変えよう、という試みです。

ちなみに、こういう画面周りを担当する技術者さんたちを「フロントエンド・エンジニア」と呼ぶ場合があります。

広告業界など、デザイン方面から転職してくる方が多いため、オシャレな人が多い印象！

この吹き出しも、CSSで表示の指示をしています。
CSSの中身については、前述のSHIROMAさんの記事を参照してください。枠線の色や太さなどを指示しています。

CSSを設定する場所によって、反映される範囲が違う！

はてなブログには4種類の画面がある

閲覧者から見ると、はてなブログはそれぞれのコンテンツである「記事ページ」のほかに、記事の一覧が並ぶ「一覧ページ」があります。（正しい名前があると思いますが、便宜上。）
そして、それぞれに「PC版（大きめ画面用）」と「スマホ版（小さい画面用）」があります。

書いている記事は一つでも、4種類の画面で使いまわしていると思ってね。

もう一つ押さえておきたいのが、画面内の構成。
はてなブログは、1つの画面を4つの部分で構成しています。
タイトルを表示するヘッダ、記事（ボディ）、サイドバー（記事横のメニュー）、そして1番下のフッタです。
それぞれにカスタマイズできる内容が異なります。

無料版のはてなブログでCSSを設定できる箇所はPC用デザインのみ

以下はPC版の管理画面からしかできません。
スマホの場合はブラウザでログインし、最下部の「PC版で表示」をクリックしてください。

まずは、ブログの管理画面から
デザイン（パレットのマーク） > カスタマイズ（レンチのマーク）を選びます。
これがPC版デザインのカスタマイズ画面です。

カスタマイズできる位置がメニュー項目になっていて、クリックすると詳細が開きます。
このうち、下記の5つにCSSが設定できます。

ヘッダ > タイトル下
記事 > 記事上
記事 > 記事下
フッタ
デザインCSS

本来、CSSを書くべきなのは、「デザインCSS」だけ。
他のものは、本来はメニューやアドセンスなど、「ページ共通で表示しておきたい内容」を設定するものです。

定型文を自動でコピペしてくれる感じですね！

ただし、デザインCSSはPC用の記事画面と一覧画面でしか適用されません。
（追記前の段階）

スマホ用カスタマイズはPROしかできない

スマホ用カスタマイズ画面は、レンチマークの横のスマホマークで開きます。
テーマカラーなど、一部の機能は使えますが、ほぼPRO会員用機能です。

さぁ、どうする？

1つの解決策は、詳細設定の「レスポンシブデザイン」設定をオンにすることです。

設定中の「テーマ」がレスポンシブデザインに対応している場合は、PC画面とお揃いの雰囲気で表示できます。
しかし、背景画像とかヘッダ画像とか、重たいデータまで引っ張ってくることがあり、あまり通信量に優しくなかったり、デザインが派手すぎてせっかくの記事が目立たないこともあります。

そこでメタラーまとん様の技！

スマホ用カスタマイズ画面の「記事」に「PC版と同じHTMLを設定」という設定があります。
ここで、PC版の「記事」設定の「記事上に挿入するHTML」「記事下に挿入するHTML」をスマホ版の画面にも挿入することができるようになるんです！

前述の「HTMLデータでも色やサイズ指定ができる」と言いましたが、CSSをHTMLデータの一部として組み込む事が可能です！
HTMLでCSSを指定する際には、スタイルシートの内容を<style>タグで囲めばOK。
詳しくは元記事を参照してください。

ただ、「記事上」または「記事下」だけにスタイル設定すると、
記事ではない、一覧画面で表示した時にスタイルが適用されません。
なので、

デザインCSS にCSSを設定してPCから確認
<style>タグでくくって「記事上」にコピペ
（スマホ用設定で「PC版と同じHTMLを設定」をオンにする ※初回のみ）
スマホで確認

という手順で設定してください。

まとめ

でも、これやっちゃうと、アドセンスとか他のカスタマイズまでスマホ版に適用されちゃう可能性があるんですよね。
今の所、自力アドセンスやる気がないので問題なしですが。

もっとガシガシ弄ろうとすると、やはりどこかでPRO会員の壁が見えてくるようになってます。
どこを儲けのタネとするか、その塩梅が商売ってもんですよね。
無料でここまでできりゃ御の字です。

はてなブログは自由度が高いサービスなので、極めるなら他のサービスより弄れると思います。
自分でレンタルサーバー借りるところから始めるよりは簡単に、
でも、デザインに拘りがあるなど、ある程度ディープなところまでは入りたい、
そんな人にはおススメです。

もうすぐ4月です。
これからブログを始めたい人は、ぜひ一緒にはてなブログでブログ開設しませんか？