はてなブログスマホでのデザインをカスタマイズ方法と注意点

スマホでデザインの項目にCSSやHTMLをコピペなどで記入し、はてなブログのカスタマイズの方法です。

使用したスマホはiPhone6plusです。

設定方法

通常のスマホ画面ではデザインの項目がありません。
デスクトップ(PC)やスマホをカスタマイズするためのCSSやHTMLを入力する画面がありません。

コードを使ったカスタマイズをしたい場合は下の方にあるPC版をクリックします。

PC版をタップすると通常のデスクトップ画面になります。左のサイドメニューのデザインをタップします。

デスクトップ版のデザインカスタマイズ画面に移動します。むちゃくちゃ使いづらいです。

親指と人差し指で広げて拡大するピンアウト、縮めて縮小するピンインチで使いやすい大きさに調整します。

デザインCSSの枠の中をタップするとコードを入力する事ができます。

デザインCSSの枠の中をタップすると強制的に拡大され、画面上部に移動してしまいます。
これが面倒というか、使いづらいです。

ピンインチ、ピンアウトで調整して入力する場所に移動します。
デザインCSSの枠の下にコードを入力する枠があるので気をつけてください。

挿入したい場所にカーソルを合わせるのが難しいです。

スマホ版のカスタマイズはデスクトップカスタマイズアイコンの横、スマホアイコンをタップします。

ヘッダやフッターなどコードを挿入したい項目の枠内をタップします。
デスクトップ版と同じで強制的に上に移動、拡大されてしまいます。

タップした枠ではなく、その下の枠ににコードを入力します。

タップしてカーソルを表示させたあとでカーソルのあたりを長押しするとコピーやペーストができます。

一度カーソルを表示させたらそこに入力します。

間違っ場所にカーソルを入れてしまい、入れたい場所にカーソルを合わし直したあとではペーストや文字の入力が出来ませんでした。

使用したのはiPhoneです。

アフィリエイトと違い、スマホでのはてなブログCSSなどコードを使用したカスタマイズはものすごくやりづらいです。

デザイン変更設定はPCでの変更をお勧めします。