Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css ワードプレスデザイン

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

投稿日:2018年12月6日 更新日:

Pocket

 

うもchamです。

 

あなたはワードプレスで記事を書いていて

囲いをつけたいと思ったことはありませんか?

 

ここに文字を入れる

 

こんな風に囲いをつけれると目立ちますよね。

 

この記事では文字の周りを上記のように線で

囲う方法を書いています。

 

具体的にはコピペすれば一発で囲えるコードと

好きなように囲いを操作する方法を書いてるので、

囲いをつけたければ読んでください。

 

スポンサードサーチ

文字の周りに囲い線をつけるコード

 

で、早速ですがワードプレスで文字の周りに

囲いをつけるコードはこうです。

 

(以下の記述をテキストエディタの部分に打ち込みましょう。)

<p style=”border: 1px black solid;”>ここに文字を入れる<p>

 

(これをそのままテキストにコピペすると以下のようになります。)

ここに文字を入れる

 

こんな風に囲いが簡単に作れます。

あなたがいますぐ使う分にはこれをコピペすればいいですが

 

とはいえもう少し詳しく知りたい、見た目を自由に操作したい

というケースのために以下に補足説明を入れます。

 

囲いをつけるならborder

 

まずコードの中にあるborderですが、

<p style=”border: 1px black solid;”>ここに文字を入れる<p>

 

あなたがワードプレスなどで囲いをつけたい時は

このborderというものを書けば囲いをつけれます。

 

borderとは境界線という意味で、これを書くと周りに境界線を

作ってくれるのです。

 

とはいえborderと書くだけでは囲いはできません。

追加情報を入れないとダメなのです。

 

コードを見てくださると、

<p style=”border: 1px black solid;”>ここに文字を入れる<p>

 

borderの後ろには1px solid blackという部分がありますよね。

これが追加指示のことで、どんな境界線にするか決めるのです。

 

(borderの場合は色とか線の幅とか線の種類を決めます。)

 

囲い線の幅を変更する

 

次に線の幅を変えたい場合、

<p style=”border: 1px black solid;”>ここに文字を入れる<p>

の1pxの部分を変更すると線の幅が変わります。

 

1pxというのは線の幅を表してまして、

この数値が大きくなるとどんどん幅が分厚くなります。

 

サンプルコード

<p style=”border: 5px black solid;”>ここに文字を入れる<p>

ここに文字を入れる

 

こんな風にかなり分厚い囲いになりましたね。。笑

 

囲い線の種類を変えるには

 

そして次に線の種類を変える場合です。

コードを見るとsolidというものがあります。

<p style=”border: 1px black solid;”>ここに文字を入れる<p>

 

これは線の種類のことです。

solidと書くと直線で境界線を作ってくれます。

 

線には他にもドットだったり破線など種類が選べましてあなたのお好みです。

では試しにドット線を使って見ましょう。

 

サンプルコード

<p style=”border: 5px black dotted;”>ここに文字を入れる<p>

ここに文字を入れる

 

ドットにすると見辛いですね。。笑

 

線の色を変更するには

 

次に色を変更したい。

その場合変えるのは、blackと書いてる部分です。

<p style=”border: 1px black solid;”>ここに文字を入れる<p>

 

これは線の色を決める部分です。

ここはシンプルでblueと書けば青色の囲いになりますし、

orangeと書けばオレンジ色になってくれます。

 

試しに僕の好きな青色にしてみます。

 

サンプルコード

<p style=”border: 3px blue solid;”>ここに文字を入れる<p>

ここに文字を入れる

 

やーいい色ですね笑

 

こんな風にborderの後ろに追加指示を書いていって

初めて囲いができてくれるわけです。

 

ちなみにborderの後に書く追加指示の線の幅や色や線の種類ですが、

これは書く順番は決まってません。

どんな順番でタグを書いても動くので好きに書いてくださいね。

 

スポンサードサーチ

まとめ

 

それではまとめです。

 

あなたがワードプレスで囲いをつけたければ、

<p style=”border: 1px black solid;”>ここに文字を入れる<p>

をテキストエディタにコピペしましょう。

 

そしてここに文字を入れるのとこを書き換えれば

文字が書き換わってくれます。

 

また囲いをつけるには

borderのタグの後に以下の追加指示を書きましょう。

 

  • 線の幅(3px,1pxなど)
  • 線の色(blue,blackなど)、
  • 線の種類(solid,dottedなど)

 

これらを書かないと囲いができないので忘れず書きましょう。

 

それでは以上です。

読んでもらってありがとうございました。

 

cham

 

 

 

 

 

 

 

-css, ワードプレスデザイン

スポンサードサーチ

関連記事

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。