hiiyanのオフな生活

血圧の上がらないのんびりとした食生活と旅ブログ

 当サイトはプロモーションが含まれています

はてなブログの文字修飾は定型文貼り付け機能が便利


スポンサーリンク

ブログ記事を見やすくするため文字修飾を結構使っています。

はてなの編集メニューには太字、斜体、打消、アンダーライン、文字の大きさ、文字色などがあります。

ですが、よく見かけるマーカー、囲み、付箋紙風などの文字修飾は、はてなの編集メニューにはありません。使ってみたい❕

 

   (こんな感じ)

マーカー

囲み枠

付箋紙風

 

でもHTMLやCSS・・・難しいことは分かりません😣

なので、メニューにはない文字修飾を使いたいときには、その度に他の方のサイトを参考にさせていただいていました。

 

やり方はデザインのカスタマイズでCSSを登録してから編集画面でHTMLを入力します。

一度きりの文字修飾であればそれでもいいのですが、別の記事で再度使いたいと思ったときにあっ、HTMLはなんだっけ?忘れた~💦」ってなことになります。

 

こんなときに「定型文の貼り付け機能」がとっても便利だということがわかり、すっかりはまっています。

 

頻繁に使用する文章やHTMLなどを「定型文」として保存し繰り返し貼り付けることができる機能です。

help.hatenablog.com

 

この機能を使って文字修飾する方法は次のように。

 

初めにCSSを登録します(CSSを使わないものもありますが)

サイドメニューから「デザイン」→「カスタマイズ」→「{ }

デザインCSS」と進みCSSを記述し保存する。

 このとき既に入力されていたCSSは決して消さないように、追加記述してください。

なお、参考にしたCSSコードは記事の最後にリンクさせていただきました。

 

  • 定型文の作成

サイドバーの定型文作成で、デザインCSSに対応したHTMLを入力して保存する。

この時に分かりやすいように文字を入力する箇所は〇〇などにしておくと分かりやすいでしよう。

 

  • HTMLコードを入力

記事編集に戻り「HTML編集」モードから、定型文で登録したコードを貼り付けします。(「見たまま編集」画面のままでもできると思いますが)

 

  • 修飾したい文字を入力

HTML編集から編集(見たまま)に戻ると〇〇が表示されているので〇と〇の間に修飾したい文字を入力した後に、前後の〇〇を削除する。

 

そして、プレビューを見ると修飾されています。

 

やり方は以上です。

これを使えば、いつでも修飾コードを呼び出すことができます。

こんな便利機能あるなんて知りませんでした💦

みんなすでに知っていると思いますが・・・

他にもいろいろと使えそうです。

もし使っていない方はぜひ。

 

なお、CSS、HTMLコードについては、こちらのサイトを参考にさせていただきました。

 

daizumayuge.hatenablog.com

 

saruwakakun.com