今回は、iPhoneのdraftPadで下書きしているときに、できるだけBloggerで表示されたときの見た目に近づけるためのTipsです。
実際にiPhoneから更新されたサイトを見たらこんな感じ。
で、draftPadでプレビューした時の表示がこんな感じ。
微妙にずれていますが、なんとか参考にはなるレベル。
Bloggerの場合、特殊なのは、
改行が勝手に入る
ということではないでしょうか。
わざわざ、１行以上改行する箇所に
<br /><br />
などを入れなくても自動で改行してくれてしまうため、プレビューにもその設定を反映させます。
どうやってやるかというと、以下のコードをコピーして、draftPadのアシスト機能に貼り付けてます。
CSSの部分はご自身のブログのCSSにしてください。
draftpad://self/web?source=<meta name="viewport" content="width=320px"><link href='https://ご自身のCSS' rel='stylesheet' type='text/css'><title>Preview</title><body><div id="date-outer"><div class="date-posts"><div class="post-outer"><pre style="word-wrap: break-word;font-family:text-align: left;width=320px;"><@@></pre></div></div></div></body>
何をやっているかというと、 preのstyleでword-wrapをやっているだけなのですが、これで改行が入ります。
とても便利。
アシスト機能を呼び出して、
Editをクリック
プレビュー用のアシストのコードに上記のコードを貼り付け
以上です。
