コピペで使える見出しデザインいろいろ

コピペで使える見出しデザインいろいろ

カスタマイズ
2017/11/15 14
vanillaice (Akira)
vanillaice (Akira)
Instruction HTML CSS Tips 初心者向け

見出しの 装飾 CSSをいくつかご紹介しようと思います。

私の製作したテンプレートについては各専用記事を必ず用意していますが、ARTICLE DEMO のページを開くとそのテンプレートの固有機能説明があり、そこに掲載されている見出しデザインはすぐに利用できるようになっていますので事前にご確認ください。

見出しデザイン という文言が無い場合には自動で見出し装飾が行われることはありませんので、本記事をご覧頂きまして、CSS内容の追加を行なってください。
CSSを指定しない限り装飾はできませんので、ご自身でソース追加及び管理をお願いします。

本記事内で テンプレート と書かれている箇所については全て 私がリリースしたものに限ります
他者製作者様テンプレートへの言及は一切ありませんので事前にご承知おきください。

一部テンプレートに既に含まれている見出しデザイン

ご自身のテンプレートに含まれているかを事前にご確認ください。
CSS内容が重複してもレイアウトが崩れるといった重大なことは起こりませんが、無駄な記述となり、ページの読み込みが微々たるものとはいえ遅くなります。

ソース内容の右上に Markup とあるものはhtml内容です。
記事を書く際に利用したい場面で毎回記述する内容です。

右上に CSS とあるものはCSS内容です。
テンプレート管理画面下段にあるスタイルシートの末尾に追加してください。

html, CSSソース共に Copy をクリックして頂くことで内容が一発コピーされます。
そのままご自身のページでペーストを行なってください。

最終章に重要な内容を記しています。部分的ではなく、記事内容全てに目を通して頂ますようお願いします。

手書き風

<h2 class="freehand">テキスト内容</h2>
.freehand {
  border: 3px solid rgb(230,230,230); /* ボーダーの色 */
  border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
  padding: 1em;
  font-weight: bold;
}

ドッグイヤー

<h2 class="dogear">テキスト内容</h2>
.dogear {
  position: relative;
  padding: 1em;
  background-color: rgb(240,240,240); /* 背景色 */
  color: rgb(51,51,51);
  font-weight: bold;
}

.dogear::after {
  content: "";
  width: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: white white rgb(221,221,221) rgb(221,221,221); /* whiteの部分は記事背景色と同じものを指定 */
  box-shadow: -1px 1px 2px rgba(0,0,0,.1);
  position: absolute;
  top: 0;
  right: 0;
}

カール

<h2 class="curl">テキスト内容</h2>
.curl {
  background-color: rgb(240,240,240); /* 背景色 */
  padding: .5em .75em;
  position: relative;
  z-index: 3;
  font-weight: bold;
  transform-style: preserve-3d;
}

.curl::before,
.curl::after {
  content: "";
  width: 30%;
  height: 50%;
  position: absolute;
  bottom: 8px;
  z-index: -1;
  box-shadow: 0 10px 15px rgba(0,0,0,.2);
}

.curl::before {
  left: .3em;
  -webkit-transform: translate3D(0,0,-1px) rotate(-3deg);
  transform: translate3D(0,0,-1px) rotate(-3deg);
}

.curl::after {
  right: .3em;
  -webkit-transform: translate3D(0,0,-1px) rotate(3deg);
  transform: translate3D(0,0,-1px) rotate(3deg);
}

注意
テンプレートの構造によっては利用できない場合があります。

どのテンプレートにも含めていない見出しデザイン

既存テンプレート(もちろん私が制作したものについてです)のいずれにも含めていない見出し装飾です。
お使いになる場合には新規でCSSへの追加を行なってください。

淡い色(ペイル)の見出し

<h2 class="pale">テキスト内容</h2>
.pale {
  width: calc(100% - 10px);
  background-color: rgb(239,239,255); /* 背景色 */
  outline: 1px solid rgb(239,239,255); /* ボーダータイプ */
  outline-offset: 5px;
  padding: 8px;
}

注意
IE11を含む全てのIEで利用不可(outlineプロパティ未実装のため)

バルーン(吹き出し)の見出し(ボーダーなし)

<h2 class="balloon">テキスト内容</h2>
.balloon {
  background: rgb(232,248,239); /* 背景色 */
  padding: .6em;
  position: relative;
}

.balloon::after {
  content: "";
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top: 15px solid rgb(232,248,239); /* 吹き出し矢印部分 */
  position: absolute;
  top: 100%;
  left: 30px; /* 吹き出し矢印の位置(左端からの距離) */
}

バルーン(吹き出し)の見出し(ボーダーあり)

<h2 class="balloon2">テキスト内容</h2>
.balloon2 {
  position: relative;
  margin: 0 0 2.5em;
  padding: .5em .75em;
  border-radius: 3px;
  border: 2px solid rgb(220,220,220);/* ボーダーの色と太さ */
  background: rgb(254,238,221);/* 背景色 */
  color: rgb(51,51,51);/* 文字色 */
}

.balloon2::before,
.balloon2::after {
  content: "";
  top: 100%;
  left: 50%;/* 矢印を水平中央にしない場合は削除 */
  height: 0;
  width: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
}

.balloon2::before {
  border-width: 18px;
  border-color: transparent;
  border-top-color: rgb(220,220,220);/* ボーダー色 */
  transform: translateX(-50%);/* 矢印を水平中央にしない場合は削除 */
  /* left: 27px; 矢印をを左に寄せる場合はコメント解除 */
}

.balloon2::after {
  border-color: transparent;
  border-top-color: rgb(254,238,221);/* 背景色 */
  border-width: 15px;
  transform: translateX(-50%);/* 矢印を水平中央にしない場合は削除 */
  /* left: 30px; 矢印をを左に寄せる場合はコメント解除 */
}

セロテープの見出し

<h2 class="scotchtape">テキスト内容</h2>
.scotchtape {
  background-color: rgb(241,248,255); /* 背景色 */
  border-radius: 2px;
  padding: 1em .6em .6em;
  position: relative;
}

.scotchtape::before {
  content: "";
  display: block;
  width: 70px;
  height: 30px;
  background-color: rgba(211,218,225,.9); /* セロテープ部分背景色 */
  background-image: radial-gradient(white 20%, transparent 0),
                    radial-gradient(white 20%, transparent 0);
  background-position: 0 0, 8px 8px;
  background-size: 15px 15px;
  border-left: 2px dotted rgba(0,0,0,.1);
  border-right: 2px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  position: absolute;
  top: -15px;
  left: 30px;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

hタグへの細かな指定 重要

テンプレートのhタグについて

今回ここで紹介するデザインにはいずれも margin設定とフォントサイズ設定を含めていません。

既存テンプレートの記事範囲に該当する部分については、位を問わず全てのhタグを初期値設定にしてあります。
例えばhタグの初期値は

h1 {
margin: .67em 0;
font-size: 2em;
font-weight: bold;
}

こうして予めスタイルを持っているんですね。
位が下がるとmarginやfont-sizeなどは小さくなります。
テンプレート内のCSSソースで意図的な変更が加えられていなければ初期値適用となります。
で、私のテンプレートは初期値のまま残してあります。

初期値で都合が悪い、と感じる場合には

  • margin
  • font-size

上記2プロパティについてそれぞれ指定を行なってください。
font-size の指定を行う場合は px などの絶対数値指定を避け、em の相対数値指定をおすすめします。

独自クラスであることをお忘れなく

全て 独自クラス での装飾です。
テンプレートを変更する際、引き続き装飾が必要な場合には CSS内容の移植を怠らない ようにしてください。
でないとデザインは全て失われます。

ご質問・サポートについては私のテンプレートをご利用の方に限らせてくださいね。

 14

There are no comments yet.
りりんまま
ありがとうございました

記事にまでしていただきありがとうございました(*´ω`*)

見出し装飾、できました♪

すいません。
質問の際、何を使っているか書き忘れていました(;_;)

これからも、
colonyを愛用させて頂きます(^-^)

お忙しい中、
すぐ対応して頂きありがとうございました。

2017/11/15 (Wed) 06:14
ぼっちん
し、質問です~

Akiraちゃん、記事内容に関係のないことですみませんが質問させてください (^^ゞポリポリ

このコード表示の方法があまりにもd(-_^)good!!で、初めて見る表示方法なんですが、これ、何ですか?
クリップボードに1発コピー出来ちゃったり、ほんとに素晴らしい出来栄え♪
SyntaxHighlighterじゃないですよね?
それともSyntaxHighlighterの新種ですか? 3でもないし4でもないし。
それともAkiraちゃんのオリジナルなんでしょうか?
正体を是非にお教えくださいませ m(_ _)m
----------
追記です。
あっ すみません、いま発見致しました(爆)
とりあえず自力で研究してみます (^_^; アハハ…

2017/11/15 (Wed) 07:37
vanillaice (Akira)
Akira
To りりんままさん(完了のご報告)

こんにちは。
導入できたということでお疲れ様でした :)

2017/11/15 (Wed) 15:10
Akira
To ぼっちんさん

ぼっちんさん、こんにちは (o'ω')ノ

prismJSです。
超うろ覚えだけども、JS内容とCSS内容にいくつか難点があったのでカスタマイズしてあります。
JSのどこかを変更したんですよね。
それがどこでなにが行けなかったのか思い出せない… ( ̄∀ ̄;)

説明には向きませんが、今回みたいにコピペで提供する際には便利だと思います (●'0'●)/

2017/11/15 (Wed) 15:12
ぼっちん
To Akiraちゃん

prismJS、了解です ^^

以前から SyntaxHighlighter 2 を利用していたんですけど「重い」「ツールバーの使い方が訪問者さんに分かりにくい」って思いから、もっと使い勝手の良いものがないかと探してたんです。
いろいろと研究してみますね~♪ 
どうもありがとうございます m(_ _)m

2017/11/15 (Wed) 16:31
ぬこぬこ

こんにちわ。
そういえば配色について、カラーのバランスの取り方がわからなくて苦労することがあります。

例えば1色、青系の気に入った色があったとして、同じ色調の他の色(黄色など)の作り方など。

それを自動で行えるサイトがあるかもしれませんが、とにかく色のバランスを考えるのって大変なので、色の調色についての記事とかもあれば嬉しいかもです。

記事というか、ウンチクが聞いてみたいというか。

2017/11/16 (Thu) 18:16
Akira
To ぬこぬこさん

色調というのは常に
rgb(x,x,x)
の10進数を使っていれば簡単にできますよ (´・ω・`)
#xxxxxx
の16進数よりも操作はしやすいと思います。
基本となる色が既に決まっているのであれば、例えば

rgb(255,255,255)
↓ 20づつ減らす
rgb(235,235,235)

これで色調(赤・緑・青)の混ざり具合を保ったままで淡くしたり濃くしたりできます。
10進数の方が便利なのに何故みなさんわざわざ直感的でない16進数をお使いになるのか不思議。

色のバランスや組み合わせというのはもう各々のセンスというか感覚というか ^^;

2017/11/16 (Thu) 20:52
ぬこぬこ
To Akiraさん

なるほど、そんな方法があったんですね~
それでrgbを使ってるんですね。
これはいい事聞きました。
ありがとうございます。

2017/11/16 (Thu) 21:47
bon

Akiraさん
こんにちは。
今コメントさせていただいている記事の目次2-2、「バルーンの見出し」を使わせてもらおうと思い、少し変えてみました。
(その吹き出しを載せた記事をurlに入れています)

私は、rgb(200,200,200)のグレーで吹き出しを囲おうとしています。ところが吹き出し矢印部分だけ思うようにならず、下に影が伸びたようになってしまいます(T_T)
矢印部分も含めて吹き出しを線で囲うにはどうすれば良いか、教えていただくことはできますでしょうか。
ネットで調べたらさまざまなCSS見本が出てきますが、AkiraさんのテンプレートなのでできるだけAkiraさんの作品で、と思っています。お手数をお掛けしますがよろしくお願い致します^^

CSSはこうです。
/* 吹き出し見出し */
.balloon {
background: white; /* 背景色 */
padding: .6em 1em;
position: relative;
border: solid 1px rgb(200,200,200);
border-radius: 10px;
}

.balloon:after {
content: "";
width: 0;
height: 0;
border: 15px solid rgb(200,200,200);
border-top: 15px solid white; /* 吹き出し矢印部分 */
position: absolute;
top: 100%;
left: 30px; /* 吹き出し矢印の位置(左端からの距離) */
}

2020/04/25 (Sat) 10:03
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/

まず、記事内のテキストが見づらかったと思いますのでお詫びします。修正しました。

CSS内容はカスタマイズされるであろう箇所にコメントを付けています。逆の言い方をすると「コメントの無い箇所(行)の変更はあまり無いだろう」という意味でもあります。

bonさんの言う「rgb(200,200,200)のグレーで吹き出しを囲おうと〜」がサンプルを見る限りでは不明なので

・背景色だけを変更するのか
・borderを付けたいのか

によって修正内容が異なります。
borderの色のことなのか背景色のことなのか不明ですが、

【背景色】
background: white; /* 背景色 */

border-top: 15px solid white; /* 吹き出し矢印部分 */

の赤字部位です。同じ色を指定してください。

borderを付けたい場合にはこの方法ではできませんので、こちらであればその旨お伝えくださいね。

2020/04/25 (Sat) 13:23
bon
To Akiraさん

お返事ありがとうございます。
まだまだ伝える能力がなくてお手数をお掛けします…
はい、「borderを付けたい」です。背景色は白のままでOKです。私がやってみたテストでは、borderにならずに下にズドーンと影みたいになってしまいました。
何度もすみません。よろしくお願い致します。

2020/04/25 (Sat) 15:07
vanillaice (Akira)
Akira
To bonさん

こんばんは。
borderを付けたい場合のソースを追加掲載しましたのでご確認くださいね。
吹き出しの方法はいくつかあるんですが、主に「border」プロパティを利用します。吹き出し矢印部分の三角部位作成でborderプロパティを使ってしまいますので、通常の「枠」として使うことはできないんですね。
なのでもうひとつ疑似要素を足す必要があります。

ひとつがborderプロパティを矢印背景色に利用
もうひとつがborderプロパティを矢印枠色に利用

ということで、枠なしの場合は疑似要素の ::before または ::after のいずれかだけでOKで、
枠ありの場合には疑似要素 ::before と ::after の両方が必要です。
(もちろん疑似要素を使わない方法などもあります)

ちょっと難しいかもしれませんので完全に理解する必要は無いんだけども、多くの方は
border = 周りに「枠」が付く
と思っていると思います。三角形や台形といった形をCSSで作るときは
borderで「面」を作る
という使い方があるので、単純に border プロパティの色を変更すれば良いということにはならないんです。今回つまずいたのはこの点です。borderは「枠線」とは限らない、ということですね。今後の参考として :)

2020/04/25 (Sat) 18:09
bon
To Akiraさん

こんばんは。
ボーダーあり吹き出しの追加をありがとうございましたm(__)m
はい、border=枠線のことだと思っていました。太さを変えることで面の担当もするんですね。他の方の紹介されている枠線ありの吹き出しCSSは確かにbeforeとafterがありました。なぜかまでわかりませんでしたが、border=枠線「とは限らない」ということなんですね。わかりやすくご説明下さりありがとうございます。

おかげさまでできたと思うのでご報告です(^^)
私のCSSを修正するとなると複雑なことだったと思うので、お手本の追加をさせてしまい、お手数をお掛けしましたがとても助かりました。ありがとうございました。

2020/04/25 (Sat) 19:17
vanillaice (Akira)
Akira
To bonさん

拝見しました。ちゃんと反映されてますね。良かったです。
お疲れ様でした :)

2020/04/26 (Sun) 00:09

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ