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の書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

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

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

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

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

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

no image

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

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

no image

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

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

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

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

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

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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