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

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

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

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

no image

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

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

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

最新記事

チャーさん

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

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

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