今日も元気に、こんにちは★キャロリーナです! 初心者の私が、やってみて感じたこと、難しかったことを紹介していきます。 今回は、「マスキングテープ風デザインの見出しを追加する」です。
突然ですが、皆さん以下のような見出しを見たことがありませんか?
このような感じ!
かわいい!一目惚れしました。どのようにすればできるのか調べて挑戦してみましたので、やり方をご紹介します。
参考にしたサイト
Minimal Greenさんのサイトを参考に見出しを追加しました。
マスキングテープ風見出し以外にも、かわいいデザインがたくさんあるので、ぜひ確認してみてください!
色やサイズの変更がなければ、サイト上の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をコピペして保存してください。
こちらに登録しておくと、次回から定型文一覧に記載され、選択した定型文を貼り付けをすることで、いつでも簡単にマスキングテープ風デザインを使うことができます。
簡単にかわいいデザインを追加することができますので、ぜひやってみてください!