亀夫のブログ

人は誰でも悩んでいるということを前提としたブログです。

快適すぎる!「見たまま」モードでもスタイルを反映させる方法とは?「はてなブログ」で執筆捗ルぅぅぅぅ!

「はてな」村の皆さまこんにちは!亀夫777です。html編集やMarkdown記法に疎い私にとって「はてなブログ」の「見たまま」編集モードは命ですが、なんせ不便すぎます。大見出し<h3>や中見出し<h4>を入れても、見分けが付きにくいです。でも「見たまま編集」モードでもテーマで利用されている見出しスタイルを反映させることができたので、その喜びを村民の皆さまとお分かちあえればと思います。おかげでプレビューによるスタイル確認の手間が減りました。

f:id:Kame777:20170131145538p:plain

 

Chrome拡張「Stylish」を利用するだけ

WordPressのビジュアルエディタにテーマのスタイルを反映させる方法はググれば沢山見当たりますが、「はてなブログ」のビジュアルエディタつまり「見たまま」編集モードにスタイル反映させる方法について書いているブログ記事は全くありませんでした。

「仕方ない!Chromeのスタイルシート」つまり「ユーザー・エージェント・スタイルシートを変更できればいいじゃないの?」と思いつき、ググりました。

ありました。

 Stylish - ウェブサイト用カスタムテーマ - Chrome ウェブストア

このChrome拡張は、特定のページまたはサイトを開いている時だけに適用できるスタイル(CSS)を設定できる優れものです。

設定方法

 Stylish  をインストールすると、ブラウザの右上に以下の拡張ボタンが表示されれます。

f:id:Kame777:20170131144316p:plain

これを右クリックして「オプション」をクリックしましょう。

「新しスタイルを作成」を押してください。

f:id:Kame777:20170131144550p:plain

 

右の「セッション」に見たまま編集モードに反映させたいCSSをコピーしてください。

「適用先」は「個別指定」から「次で始まるURL」をクリックし、「見たまま編集」モードのURLを[////edit]までをコピーして貼り付けてください。

f:id:Kame777:20170131145006p:plain

URLはおそらく

http://blog.hatena.ne.jp/はてなID/ブログURL/edit

です。

最後に「名前」を記入して「保存」してあげます。

f:id:Kame777:20170131145538p:plain

そうするとあら不思議!「見たまま」編集モードでもスタイルを反映させられました。

好きなだけ、テーマのスタイルを反映させてください。

ほとんどの方は、h2、h3、h4、などの見出しタグで十分かも。テーマによっては、リスト、引用タグ、強調、を入れたほうがいいかもしれません。

CSSコードの探し方

ここまで読まれた方で、もしかしたら、ご自分が「はてなブログ」で利用しているテーマの見出しCSSコードをどこから入手すれば良いか分らないという方もいるかもしれません。

ご安心ください。

簡単に調べる方法があります。

以下はブラウザChromeの例です。

ご自分の「はてなブログ」を表示させ、スタイルを調べたいところにカーソルを持って行き、右クリックから「検証」へ。

f:id:Kame777:20170131150917p:plain

 

以下は見出しタグ<h2>の部分ですが、そこが指定されていることを確認し、右の「Styles」から .entry-content を省いた部分をコピー、上記のChrome拡張に貼り付けます。

f:id:Kame777:20170131151145p:plain

このテーマの<h2>スタイルなら以下のとおりです。

h2 {
padding: 18px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1D3557;
margin: 0 -10px;
}

※ 近いうちに変更するかも。

このようにして、CSSコードをどんどんコピペしてあげてください。

以上、はてなブログの「見たまま」編集モードでスタイルを反映させる方法でした。

はてな村の方で何か別の良い方法があれば教えてください。