WP【Twenty Seventeen】初心者でも簡単にできる!タイトル見出しサンプル集22選

WordPress【Twenty Seventeen】初心者の方向けに通常の見出し&テキストの長さに合わせて自動で可変するサンプルを作ってみました。

HTML,CSS初心者の方は🔰マークのところを読んでくださいね。

その他の方は🔰マークのところはスルーしたください。

🔰 ビジュアルモードの場合

見出しにしたいテキスト内にカーソルを合わせて以下のように投稿画面の段落から見出しを選択するだけ!!
 


 

🔰 テキストモードの場合

以下のようにタイトルにしたいテキストを<h2>~</h2>などで囲みます。

<h2>タイトル</h2>
<h3>タイトル</h3>
<h4>タイトル</h4>
<h5>タイトル</h5>
<h6>タイトル</h6>

 

🔰 CSSをコピペする時の注意事項

以下に記載のCSSは全て見出しの部分はh2で記述しています。
1 .entry content {h2  から始まるcssは、h2 を ご自身が使用したい h1~h6 に置き換えて使用してください。
2 .midashi で始まるcssにはhtmlも記述していますので参考にしてください。
3 fontサイズは、現在18px~20pxで指定していますのでご自分のサイトのレイアウトに応じて指定し直してください。

 

↓CSSにLet’s go!↓

シンプルなボーダーライン

 

ごくごくシンプルなラインですが、どんなサイトでも合いそうですね

見出し1のSampleです


↓h2タグを使用しない場合↓

見出し2のSampleです


↓h2タグを使用しない場合↓

見出し3のSampleです


↓h2タグを使用しない場合↓

立体感のあるシンプルでカラフルなライン

 

縦ラインにはgoogleで使われている色も入れて下には影を入れて立体感を出してみました。

見出し4のSampleです


↓h2タグを使用しない場合↓

見出し5のSampleです


↓h2タグを使用しない場合↓

見出し6のSampleです


↓h2タグを使用しない場合↓

見出し7のSampleです


↓h2タグを使用しない場合↓

パステルカラーの可愛らしいライン

 

パステルカラーで上下にラインを入れて少し可愛らしく仕上げてみました。

見出し8のSampleです


↓h2タグを使用しない場合↓

見出し9のSampleです


↓h2タグを使用しない場合↓

見出し10のSampleです


↓h2タグを使用しない場合↓

テキストの長さに合ってラインが可変するサンプルあり

◯でアクセントを付けてみました

パステル系の◯に濃いアンダーラインを引いてみまた。これは、中見出しくらいがいいでしょう!

見出し11と見出し12はテキストの長さに合わせてラインが可変します。

見出し11のSampleです


↓h2タグを使用しない場合↓

見出し12のSampleです


↓h2タグを使用しない場合↓

見出し13のSampleです


↓h2タグを使用しない場合↓

可愛らしいパステルカラーと濃いアンダーラインでシンプルに

見出し14と見出し15はテキストの長さに合わせてラインが可変します。

見出し14のSampleです


↓h2タグを使用しない場合↓

見出し15のSampleです


↓h2タグを使用しない場合↓

見出し16のSampleです


↓h2タグを使用しない場合↓

左右に縦ライン&unicodeの絵文字を使ってみました

見出し17と見出し18はテキストの長さに合わせてラインが可変します。

✔見出し17のSampleです


↓h2タグを使用しない場合↓

🗂見出し18のSampleです


↓h2タグを使用しない場合↓

🍎見出し19のSampleです


↓h2タグを使用しない場合↓

アクセントの◯やラインが薄く消えていくグラデーション

 

見出し20のSampleです


↓h2タグを使用しない場合↓

見出し21のSampleです


↓h2タグを使用しない場合↓

 

見出し22のSampleです


↓h2タグを使用しない場合↓

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ

🍹役にたったら共有してね🍹

【WordPress】改行しても囲い枠内にピッタリ文字が納まった時のまとめ!

display:inline-block;でテキストの長さに合わせる

一行に連続した文字を入力した場合以下のようにdisplay: inline-block;をCSで指定すると以下のように自動で枠が広がっていくのですが

 

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

改行すると下のように右側に空白ができてしまいます。

これはfukidashi1のサンプルです。
ここで改行してます。
右に余白ができてしまいますね

 

labelに文字を表示する

 

そこで試したのが”label”に文字を表示させることです。
これは以前アコーディオンみたいなのを作っていた時に文字と枠の間に空白ができないのが記憶の片隅に残っていてこれは試す価値ありだな!!・・・と思い試してみました!
参考にさせて頂いたサイトは、[CSS]可変するレイアウト幅の最大値を制限する簡単な方法 です。ありがとうございました。

 

するとこれは通常と同じ表示なのですが

 

改行した時以下のように、右側にあった空白がなくなっていました。

 

もっとわかりやすく表示すると

↓こんな感じです。↓

これはfukidashi1のサンプルです。改行はしてないのでピッタリと枠内に納まってますね

 

Excel
Word
PowerPoint

 

 

 

文字数が少ないとわかりやすいですね!

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ

【WordPress】初心者向け1記事に装飾枠を付けるサンプル

この記事のサンプルは、このページのみcssを反映させてますので、https://暮らしのハンドノート.comからダイレクトにアクセスされた方にはサンプル画像が表示されません。

サンプル画像が見えない時は、ここをクリックして下さい。
プラグインcssTwenty Seventeen追加cssを使うと全体的にcssが反映してしまいますね。

 

一部の記事にcssを反映させたい時は、カスタムフィールドにcssを記述しましょう。

 

カスタムフィールドの作成方法は、WordPressのカスタムフィールドを使用し投稿する方法

で説明していますので参考にして下さい。

 

※box名が重複した場合はbox名のみ重複しないbox名を使って下さい。

 

シンプルな囲い枠

 

↓htmlのコードは下記の通り↓

 

box10を使用したい任意のbox名(数値)に変更するだけです。

 

可愛くてシンプルなボーダー

このサンプルはborder: soid (直線)を使っています。

詳細はbox10の中に記述しています。

box10

.box10 {
position: relative;/*相対位置*/
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;/*領域間(枠の外)のスペース */
background: #fff6f5;/*背景色*/
box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/
border: solid 3px #ff7c5c;/*直線 太さ 色*/
padding: 1.0em ;/*領域(枠)内のスペース*/
font-weight: bold;/*枠内の文字を太字*/
color: #ff7c5c; /*枠内の文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center/*枠内の文字を中央表示*/
}
box20

.box20 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff9f1;
box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/
border: solid 3px #fbb305;/*直線*/
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #fbb305; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box30

.box30 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #efefff;
box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/
border: solid 3px #1765c5;;/*直線*/
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #1765c5; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}

 

立体的に窪んだ線

box11

.box11 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff6f5;
box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/
outline: groove 5px #ff7c5c;/*立体的に窪んだ線*/
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #ff7c5c; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box21

.box21 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff9f1;
box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/
outline: groove 5px #fbb305;/*立体的に窪んだ線*/
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #fbb305; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box31

.box31 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #efefff;
box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/
outline: groove 5px #1765c5;/*立体的に窪んだ線*/
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #1765c5; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}

 

立体的に隆起した線

 

box12

.box12 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fdf5e6;
box-shadow: 0px 0px 0px 10px #fdf5e6;/*線の外側*/
outline: ridge 5px #ff7c5c;/*立体的に隆起した線*/
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #ff7c5c; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box22

.box22 {
position: relative;
width: 250px;/*横幅*/
padding: 1.0em ;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff9f1;
box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/
outline: ridge 5px #fbb305;/*立体的に隆起した線*/
font-weight: bold;/*太字*/
color: #fbb305; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box32

.box32 {
position: relative;
width: 250px;/*横幅*/
padding: 1.0em ;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #efefff;
box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/
outline: ridge 5px #1765c5;/*立体的に隆起した線*/
font-weight: bold;/*太字*/
color: #1765c5; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}

 

角を丸くした線

 

box13

.box13 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff6f5;
box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/
border: solid 3px #ff7c5c;/*1本線*/
border-radius: 9px;
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #ff7c5c; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box23

.box23 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff9f1;
box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/
border: solid 3px #fbb305;/*1本線*/
border-radius: 9px;
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #fbb305; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box33

.box33 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #efefff;
box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/
border: solid 3px #1765c5;/*1本線*/
border-radius: 9px;
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #1765c5; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}

 

角を丸くした破線

 

box14

.box14 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff6f5;
box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/
border: dashed 3px #ff7c5c;/*破線*/
border-radius: 9px;
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #ff7c5c; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box24

.box24 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff9f1;
box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/
border: dashed 3px #fbb305;/*破線*/
border-radius: 9px;
padding: 1.0em ;
width: 250px;/*横幅*/
font-weight: bold;/*太字*/
color: #fbb305; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box34

.box34 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #efefff;
box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/
border: dashed 3px #1765c5;/*破線*/
border-radius: 9px;
padding: 1.0em ;
width: 250px;/*横幅*/
font-weight: bold;/*太字*/
color: #1765c5; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}

 

角を丸くした点線

 

box15

.box15 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff6f5;
box-shadow: 0px 0px 0px 10px #fff6f5;/*線の外側*/
border: dotted 3px #ff7c5c;/*点線*/
border-radius: 9px;
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #ff7c5c; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box25

.box25 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff9f1;
box-shadow: 0px 0px 0px 10px #fff9f1;/*線の外側*/
border: dotted 3px #fbb305;;/*点線*/
border-radius: 9px;
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #fbb305; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box35

.box35 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #efefff;
box-shadow: 0px 0px 0px 10px #efefff;/*線の外側*/
border: dotted 3px #1765c5;;/*点線*/
border-radius: 9px;
padding: 1.0em ;
font-weight: bold;/*太字*/
color: #1765c5; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}

 

角が変形した不思議な線

 

box16

.box16 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff6f5;
box-shadow: 0px 0px 0px 5px #fff6f5;/*線の外側*/
border: solid 5px #ff7c5c;/*1本線*/
border-radius: 300px 50px;
padding: 1.0em ;
width: 250px;/*横幅*/
font-weight: bold;/*太字*/
color: #ff7c5c; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box26

.box26 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #fff9f1;
box-shadow: 0px 0px 0px 5px #fff9f1;/*線の外側*/
border: solid 5px #fbb305;/*1本線*/
border-radius: 200px 100px 100px 200px;
padding: 1.0em ;
width: 250px;/*横幅*/
font-weight: bold;/*太字*/
color: #fbb305; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}
box36

.box36 {
position: relative;
width: 250px;/*横幅*/
margin: 2em 0 2em 0px;
background: #efefff;
box-shadow: 0px 0px 0px 5px #efefff;/*線の外側*/
border: solid 5px #1765c5;/*1本線*/
border-radius: 100px 500px;
padding: 1.0em ;
width: 250px;/*横幅*/
font-weight: bold;/*太字*/
color: #1765c5; /*文字色*/
font-size: 2em;/*フォントサイズ*/
text-align: center
}

 

こんな使い方もできるよ!

アルバムみたいに

width(幅)の指定を外せば画面いっぱいに

例えば、下のboxのようにアルバム代わりにもアレンジできます

可愛い動物

このFontAwesomeのアイコンを使うには少しだけ準備する必要があります。

まず、下のコードをコピーして

WordPressの[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]の<head>〜</head>の中に貼り付けます。

枠を横に並べる

枠を横に並べる時は幅や高さを指定できるdisplay: inline-block;を使います。

box13-1
box23-1
box33-1

画像と吹き出し枠を横に並べる

画像と枠や文字などを横に並べるにはalign属性を使います。

画像に記述する時は下コードを参考にして下さい。

残念ながら、スマホの画面には入りきれないので吹き出し枠が画像の下に表示されますが・・・

【align=”left】で画像に
回り込みを指定して表示しています。
可愛い3匹のワンちゃんですね。

 回り込みを指定するときは

今回の表示は

↓解除するときは↓

leftrightallのいずれかを指定。
画像が左側にあるときの回り込み解除は、値にleftを指定します。
画像が右側にあるときの回り込みを解除は、値にrightを指定します。
画像が左右のどちらにあっても、値にallを指定すれば回りこみを解除できます

wordpressで<br>タグを使って解除できないときは、

を使います。

border-radiusを使って●を作って少し可愛げに
右下には少し影を付けて立体感をだしてアレンジしてみました。
こちら表示は左marginを330pxで指定して表示しています。

ヨチヨチと歩く姿がかわいい!
アヒルの赤ちゃんですね。

にほんブログ村 IT技術ブログ WordPressへにほんブログ村 IT技術ブログへ