WordPressで文字を囲む方法を学んで、より見やすいブログにしよう!

WordPressでブログを立ち上げたはいいものの、思うように使いこなせず苦戦しています。

というのも、WebライターとしてクライアントのWordPressを使う時は、
もうすでにサイトが出来上がっているので、ボタンひとつでやりたいことが出来たからです!

このWordPressで作っているブログも、

サーバーってなに?え?ドメインってなにそれ?

というところから始まりました。
さすがにそのへんのことは調べても理解できなかったので、WordPressの立ち上げだけは、ストアカで見つけた

たった2時間でWordPressブログを始める

という講座を受講し、立ち上げていただきました。
それ以外は、空いた時間を見つけては、独学で学んでいます。

今回は文字の装飾のひとつ、文字の囲みについての備忘録としてまとめてみました。

参考にしたのは、こちらのサイトです。

 

囲み枠のHTMLタグ

このあたりまでくると、HTMLタグというものから逃げられなくなってきます…

そもそもHTMLタグとはなにか?というのすら分かっていませんが、ズラズラアルファベットが並んでいるアレだろうと思っています。

意味が分からなすぎて心が折れそうになってきますが、見やすいブログを作りたいので、頑張ります…

では、さっそく試してみます!

囲みたい文字

この「囲みたい文字」を囲んでいきたいと思います。

まず、このHTMLタグを使うと書かれています。

 

<div style=”border: 5px solid #FFF5EE; padding: 10px; border-radius: 0px; background: ##ffffff;”>ここに文字を入力</div>

 

なにがなんだか分かりません…
とりあえず「ここに文字を入力」というところに文字を入力するのかな?ということだけ、うっすら分かります。

では、「ここに文字を入力」というところに文字を入力して、テキストに貼り付けてみます。

 

囲みたい文字

 

おお!囲みができました!
しかし、囲みの線の色も変えたい…
では、この囲み枠のHTMLタグを細かくみていきます。

囲み枠のHTMLタグの属性

この囲み枠のHTMLタグは、このような意味と書かれています。

 

border: 5px solid #FFF5EE;

線の太さ・種類・色の指定です。

太さ→1px 数字が大きくなれば線は太くなります。

種類→solid(線の種類は次ページで紹介します。)

色→#e9967a(カラーコードは原色大辞典を参考にしてください。)

引用:WordPressで文字装飾!文字に囲み枠を付ける方法とコピペで使えるHTMLタグサンプル

 

なるほど。
分かったような分からないような。

とりあえず、原色大辞典を見てみます。

いろんな色とコードが書いてあります。

では先ほどのHTMLタグのborder: 5px solid #FFF5EE;の部分を変えてみたいと思います。

【変更前】
<div style=”border: 5px solid #FFF5EE; padding: 10px; border-radius: 0px; background: ##ffffff;”>ここに文字を入力</div>

【変更後】
<div style=”border: 5px solid #a52a2a; padding: 10px; border-radius: 0px; background: ##ffffff;”>ここに文字を入力</div>

変更してみました。
では、これをテキストに貼り付けてみます。

囲みたい文字

 

おお!変わりました!
これでまたひとつできることが増えました!

まとめ

プラグインをインストールしてボタンを設定する方法もあるようなのですが、プラグインを入れすぎてもよくない、という記事もよく見かけるので、頑張ってHTMLタグで文字を囲ってみました。

他にもっと簡単な方法があったら、ぜひ教えてください!

 

 

今回も最後までお読みいただき、ありがとうございます!

⬇︎こちらからメールアドレスを登録していただくと、最新の記事が届きます。
ぜひ、ご登録おねがいします。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です