はてなブログの編集画面をWebブラウザの開発者モードで解析すると、要素を選択したときに表示される範囲がずれている。
→ はてなブログで編集画面に入ると、元のブログ画面が下に、その上に編集画面が重なっている（iframe）
要素ツリーで追うと次の構造
html
+ body class="page-entry"
+ div id="hatena-diary-edit-in-place" calss="hatena-iframe-container"
+ iframe
+ html
+ body class="body-iframe page-user-blog-edit blog-edit-in-place"
+ div id="editor" class="l-editor"
+ form id="edit-form" class="editor-container hatena-diarcy-editor-container unedited"
+ div id="editor-main" class="l-editor-main"
+ div class="editor-main-inner"
+ div class="tabs editor-tabs-wrapper"
+ div id="textarea" class="ui-tabs-panel ui-widget-content"
+ div class="body editor-body"
+ div class="editarea"
+ textarea id="body" class="editor-body-textarea"
この textarea 要素のフォントは、Segoe UI、Meiryo が適用されている。ならば、id=bodyのtextarea要素にCSSでフォントを割り当てればと次のCSSを設定してみたがNG。!importantを追記してもダメ。
textarea#body {
font-family: monospace;
}
∵ iframeで表示させるHTMLの要素には、元（親）ページのCSSでは反映できない。
iframe内でスタイルシートを参照させる必要がある。調べた範囲ではjQueryを使いJavaScriptでiframeが読み込まれたときにCSSを適用させる方法が見つかった。
実験1¶
#115 の処置で、jQueryをはてなブログで読み込むようにしていたので、本チケットの実験はページのフッターにJavaScriptを追記する。
<script>
$("iframe").on("load", function() {
$("iframe").contents().find('textarea#body').css("font-faimily", "MyricaM M");
});
</script>
結果：NG¶
設定したJavaScriptが動いているかの確認ができていない。