はてなブログ内でPC表示・スマートフォン表示で別内容を表示する方法を、はてなブログ公式が機能か何かで準備してくれているだろうと散々色々調べましたが、多分はてなブログは機能もそれらしい変数も持ち合わせてなかったんで、一日苦悩して私なりのやり方を見つけました。
やり方
PC表示のレイアウトではヘッダーが表示できます。（ヘッダーは「デザイン→カスタマイズ→ヘッダ→タイトル下」で編集可能）スマートフォン表示のレイアウトではヘッダーは基本表示されません。（※）
なので、ヘッダーにJavaScriptで変数を作ってそれをフラグにすれば、今見ている画面がPC表示かスマートフォン表示かが区別できて、ひいては出力を分けることができます。
ヘッダーに仕込む内容
ヘッダーの場所は「デザイン→カスタマイズ→ヘッダ→タイトル下」です。そこに下記の内容を入れてください。
<script>var pc=true;</script>
PC表示・スマートフォン表示で別内容を表示
記事内では下記のように表示の切り分けをします。
<script> if(typeof pc!=='undefined'){ document.write("PC表示です"); } if(typeof pc==='undefined'){ document.write("スマートフォン表示です"); } </script>
ヘッダーの中で宣言した変数pcが存在するかどうかで出力内容を切り分けています。
PC表示ではヘッダーがあるので変数pcが存在しており、if(typeof pc!=='undefined')を通って「PC表示です」と出力されます。
スマートフォン表示ではヘッダーがないので変数pcが存在してないので、if(typeof pc==='undefined')を通って「スマートフォン表示です」と出力されます。
感想
苦心して閃いた割にはソースコードが酷く小ざっぱりして分かりやすすぎる内容になりました。いえ、本当に苦心してたんですよ。人生って案外こういうものかもしれませんね。簡単なことを知っているかどうか、気づけるかどうかみたいな。私の方法だとJavaScriptの中でHTMLを書くことになって手間が増えます。想像ですけれど、PC表示とスマートフォン表示で出力を分けたいと思う大体の理由はレイアウトを変えたいからだと思います。レイアウトを組んだHTML・CSSをJavaScriptに落とし込むのって地味に手間なんですよね。
私の提案するこの苦行的方法以外の楽な方法をご存じな方がございましたらぜひともご一報いただきたいです。
この記事にたどり着いた方、お気持ちお察しいたします。頑張ってください。
