22minスポンサーリンクSHAREツイートシェアはてブLINEPocketツイートシェアはてブLINEPocketAuthorトッド(Todd)トッドコピペで実装できる色んなブログ見出しを作ってみました。Content?色んな見出し見出しデザインカタログを作ってみました。色;の部分を書き換えると違った印象を与えることが出来ます。上記見出しは線種にsolid・・・一本線を使いました。線種にdouble・・・二重線になります。}上下にボーダーを引いてみました。上と下で異なる線種を使ってみると面白いかもしれません。6px;}h2見出しで使用するにはパンチが足りない気がしますが、シックに落ち着きある見出しを求めるなら良いかもしれません。translate(-50%,-50%);}この見出しではclip-pathというものを使用しています。以下の記事でclip-pathを用いた図形の作成が簡単になるツールの紹介をしています。100%);}大胆な下線かもしれません。この見出しもclip-pathを用いて作成しています。6px;/*角丸の度合い*/}角丸(border-radius)で、より遊びのある複雑な形を感覚的に作成した人はコチラの記事がオススメです。1;を書き加えてやるとボーダーにグラデーションをかけることが出来ます。}背景色を設定し、その色の明度しだいで文字色を変更してみると良いでしょう。ここでの枠線(ボーダー)でも、solid・double・dottedの箇所を書き換えてあげると印象が変わります。}このグラデーションカラーが好みでなくても大丈夫!!以下のリンクでは、180種類以上のグラデーションカラーが揃っており、好みの色を見つけられるはず。色;を使用すれば簡単です。#6666cc;/*三角の色*/}よくある、吹き出し見出しです。1.2rem;}この見出しだけ、独特のHTML記載方法があります。この見出しを使用するときは下記のようなHTML構成が必要です。5“のWEBアイコンを使用しています。Awesomeのアイコンを導入・反映させるためには、お使いのブログテーマの<head>~</head>間にCDNコードを貼り付ける方法があります。※2019年4月現在のコードはコチラになります。【STINGER8】3種メニュー「header・accordion・footer」のデザインカスタム(アイコン有)この記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。