サバのトランク

本やコンピュータやことなど *当ブログではアフィリエイト広告を利用しています*

【はてなブログ】スマホの記事にもマーカーを反映しよう!

マーカー片手にスマホを見る女性

Bing(https://www.bing.com/

昨日、たくさんのはてなブログの先輩方の記事を参考にさせて頂いて、なんとか記事の中にマーカーを引くことができました。

記事をアップした後に、ふと気になってスマホで確認してみると・・・
おっと、マーカーが引かれていない!

マーカーを引く方法は、HTML編集をしてこまめに付けていくのではなく、CSSをいじって「見たまま編集」の、イタリックの機能をマーカーの機能に切り替えて使う方法で試していました。


私は、ブログの作業は100%パソコンで行っており、スマホは確認に使っているだけですが、いまどきブログは、7割以上の人がスマホで読んでいると言われています。
(8割以上というデータもあるようですね)
私などは、ついついPCの広い画面でのデザインが主に気になってしまうのですが、実はスマホの見栄えの方が大事だということですね。

なんとかスマホにも対応しなければ!


昨日のうちには、原因がわからず(意外とネットにも情報が無いです)、スマホ用にはまた別にHTML編集が必要なのかなと思っていました。

今朝方、寝起きにボーッとしている時ふと、以前に画面のデザインテーマを選んでいる時に「このテーマはレスポンシブルデザインに対応しています」または「対応していません」という説明が必ずあったな~、と思い出しました。

(レスポンシブデザインとは、デバイス(PC、スマホタブレット)に合わせて、表示が最適化されるデザイン、ということのようです)

 

もしかして、これで解決できるかも!
私が昨日まで使っていた、はてなブログ公式テーマの "Bordeaux" は「レスポンシブルデザイン」に対応していませんでした。
じゃあ、対応しているテーマだとどうなるかと、公式テーマで「レスポンシブルデザイン」に対応している "Smooth" に変えてみたんですが、やはりスマホはNG

ダメかと思いつつ、ちょっと「レスポンシブルデザイン」について調べていると、デザインテーマを変えるだけではダメで、設定が必要だと・・・

なんだ、そうだったか!


はてなブログダッシュボードから、

デザイン>スマートフォンスマホのアイコン)>高度な設定:詳細設定 を開くと、
「レスポンシブルデザイン」のチェックボックスがありました。(画面の一番下)

これをチェックして(「変更を保存する」を忘れずに)スマホを確認してみると、
おぉ、めでたくマーカーが引かれていました。


その後 "Smooth" からテーマを変えようと思い、テーマストアに行って、
「グリスタブルー~CrystalBlue~」 というテーマをインストールさせて頂きました。


CSSをいじってマーカーを実現する方法は、たくさんの記事が見つかるのですが、CSSコードはまあまあ違います。
色々調べたり試したりしているうちに、ついついはまって時間を使ってしまいました。

その辺については、そのうちまとめて、別の記事にしてアップしようと思っています。

*この記事のイラストは、Bing Image Creator の AI によって作成されました