【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技術ブログへ