理系OLのひとりごと

~Karenの部屋~

【初心者でも簡単】はてなブログに「マスキングテープ風デザイン」を追加する方法

今日も元気に、こんにちは★キャロリーナです! 初心者の私が、やってみて感じたこと、難しかったことを紹介していきます。 今回は、「マスキングテープ風デザインの見出しを追加する」です。

 

突然ですが、皆さん以下のような見出しを見たことがありませんか?

 

マステ風見出し

このような感じ!

 

かわいい!一目惚れしました。どのようにすればできるのか調べて挑戦してみましたので、やり方をご紹介します。

参考にしたサイト

Minimal Greenさんのサイトを参考に見出しを追加しました。

マスキングテープ風見出し以外にも、かわいいデザインがたくさんあるので、ぜひ確認してみてください!

blog.minimal-green.com

色やサイズの変更がなければ、サイト上のCSSをコピペすれば完了です!

マスキング風デザインの色の変更方法(詳細)

私は色をピンクに変更しようとしたら、苦戦をしましたのでどこのCSSが何にあたるのかをご紹介します。

背景色のCSSのカスタマイズの仕方は、以下のHPを参考にしました。

WEB色見本 原色大辞典 - HTMLカラーコード (colordic.org)

background-color - CSS: カスケーディングスタイルシート | MDN (mozilla.org)

マスキング風デザインをはてなブログへ反映させる方法

マスキング風デザインをはてなブログへ反映させる方法は、はてなブログのブログ編集画面を開き、以下の文字列をHTML編集画面にコピペするだけです!

<div class="maste-box"><span class="maste-tape">マステ風見出し②</span>

<p>テキスト</p>

</div>

簡単ですね。

こちらのHTMLを定型文貼り付けに登録しておくと便利です。

右端のサイドバーから定型文の貼り付けを選択してください。選択しましたら、定型文を作成するを選択してください。

(サイドバーに定型文の貼り付けがない場合は、+マークから追加をお願い致します。)

以下の画面がでてきますので、タイトルを記入して先ほどのHTMLをコピペして保存してください。

こちらに登録しておくと、次回から定型文一覧に記載され、選択した定型文を貼り付けをすることで、いつでも簡単にマスキングテープ風デザインを使うことができます。

 

簡単にかわいいデザインを追加することができますので、ぜひやってみてください!