操作
サポート #114
完了はてなブログの編集領域を等幅フォントにしたい
開始日:
2020/05/06
期日:
2020/05/10
進捗率:
100%
予定工数:
説明
はてなブログの編集領域はプロポーショナルフォントとなっているので、ソースコード断片の記述、表組の記述などに甚だ不適である。
そこで、編集領域を等幅フォントとする。
結論¶
- 対処方法を見つけること能わず
- 編集領域（HTMLのTEXTAREA要素）は、ブログページのiframe内にあるため、通常のCSSセレクタでは設定ができない。
→ iframe内のHTML要素の中からスタイルシートを指定するかスタイルを記述する必要がある。 - stylusプラグインを使う方法も、iframeに阻まれて設定が見出せず
→ はてなブログの編集用iframeにはsrc属性が未定義
高橋 徹 さんがほぼ4年前に更新
- 説明 を更新 (差分)
- ステータス を 新規 から 進行中 に変更
- 進捗率 を 0 から 50 に変更
はてなブログの編集画面を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が動いているかの確認ができていない。
操作