きゅうりの王様

塞翁が馬な日々

Life is a box of chocolates ブログ

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

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

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

設定方法

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

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

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

PC画面の設定方法

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

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

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

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

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

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

スマホ画面のデザイン変更設定

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

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

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

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

注意点

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

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

まとめ

www.cucumberking.com

使用したのはiPhoneです。

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

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