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

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

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

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

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

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

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

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

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

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

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

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

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

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

最新記事

チャーさん

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

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

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