はてなブログ スマートフォン表示のカスタマイズのコツ

そのうち書きます。と思いながら、しばらく経ってしまったので何だか申し訳ない感があるのですが、

【はてなブログデザイン】JUDEのテーマでスマートフォンのカスタマイズが出来なかった話 - Season

スマートフォン向けのCSSはヘッダに挿入すると良いでしょう(コツがあります)

2016/04/09 18:21

では、そのコツは何ですか？と聞かれると、設定によって若干違うので、どう説明しましょうか。と頭の片隅に置いてあったやつです。

レスポンシブデザインに対応しているテーマ

基本的にPC版と同じHTMLが出力されるため、デザイン設定の記述が利用できるようです。
PCを利用して、必要な要素と画面幅に対する設定を確認して設定を追加していきます。

デベロッパーツールを利用すると、要素の確認がしやすくなります。

レスポンシブデザインに非対応のテーマ

同じくデベロッパーツールを利用して、スマートフォンとして表示させます。

追記：スマートフォン表示モードや、ユーザーエージェントを切り替える機能を利用すると表示できます。

PC版と構成が違うため、目的の要素を確認してから、ヘッダにstyleタグを入力するなどで対応します。(レスポンシブデザインに非対応のテーマでは、デザイン設定の「デザインCSS」は無視されます。)

ちなみに、アレコレ弄ってヘッダにSVGを埋め込んであります。

画像に見えますが、最大に拡大してもキリッとした描画ができます。

この画像では、埋め込まれたSVGと上部のはてなブログのロゴが、滲むことがなく表示されています。
それに対して、右上のアイコンは拡大による滲みが発生しています。

上手い事やると良いと思います。

困った時は、人力検索で質問しよう！
※匿名質問の場合はブログの現状が確認できず、的確な回答が得られない場合があります。

追記：

SVGに関するお話を書きました。

psn.hatenablog.jp