記事作成中のプレビューを別枠にすると色々と捗る【はてなブログ】

語彙の無さがこういったアイキャッチを生むわけですが、しかし単純にそのままの意味ではあります。
はてなブログの記事作成中に当然？プレビューを使うと思います。

ですが、記事内であれやこれやをしたい方はプレビューを別枠に出した方がより楽しみながら記事を作成できるのではないか…と勝手ながら思うのです。

あれやこれや、そんなアナタにデベロッパーツール。

記事作成中にデベロッパーツールを正常に使いたい

開いたブラウザの右クリックからの検証モード、デベロッパーツール。Firefoxでは要素を調査、なんて言葉になってます。
記事作成中、僕は記事の中にCSSを盛り込んだりするのですが、記事作成中にデベロッパーツールを使いたいとき…ありませんか？

使ったことありますよね？
ない？ないです？ちょっと使ってみてください。

記事作成中のプレビュー画面でデベロッパーツールを使ってしまうと、なーーーんかおかしくなる。と、思う。

これを回避できるのがプレビューを新しいウィンドウで表示なのです。

プレビューを新しいウィンドウで表示

プレビューを新しいウィンドウで表示した時の画面は、まるで記事を公開した時と同じように見えます。
そう、ここでデベロッパーツールを使うと表示崩れの無い画面を見る事ができる！

ね？
同意が欲しいときの『ね』です。

ちょっとその記事だけシャレ込みたいとき、プレビュー画面であれこれ試した確認が出来てしまう。

たとえば、本当に例えばの話。下のもしもアフィリエイトの広告。普通にそのまま持ってきて貼りつけただけです。

リンク

しかし、この広告をたまにはちょっと変化させたいなぁ～なんて思ったときに、プレビューを新しいウィンドウで表示を使うとデベロッパーツールが使いやすくなるので、記事作成中に記事の作成と同時にカスタマイズのプレビューが出来てしまうわけです。

プレビューを新しいウィンドウで表示にしないとカスタマイズのプレビューが出来ないわけではない。使いやすいですよ？って話。個人差は多々ある。

この様に、変化させたい部分をデベロッパーツールで探してカスタマイズされたプレビューを楽しむことが出来ます。

記事作成中にプレビューを新しいウィンドウで表示にするとデベロッパーツールが色々と捗る。
記事公開後に「あ～あそこのデザインいじっておけば良かったかな～」という思いからのリライトが減る（場合があるかもしれない）

くらいのことなのだけど、これも小技と言えば小ワザだと思う。
ちなみに、上のもしもアフィリエイトの広告で、一部の色を変えたコードは下記にあります。
そのまま記事の中の一番下にでも貼ると変化します。PC・スマホ、レスポンシブ用です。

<style>
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
   background: linear-gradient(45deg, #f70f0f, #f79821);
   }
</style>