龍市龍市

どうも!龍市です!
『2Mパートナー』へのご訪問ありがとうございます!\(^o^)/

ワードプレス記事を枠でオシャレに!コピペするだけのコードを色や線種別に1

ワードプレスの記事中に枠を入れたい!!(≧∇≦)
こんな風に考えたことはないですか?

今回の記事では、
ワードプレスの記事中に
文字を囲む枠を作る方法をまとめていきます。


一応、コードの仕組みの解説もしますが、
手っ取り早くコピペだけで済ませられるように
枠の例とそのコードを貼っておきます。


ぜひ、あなたの記事もオシャレな枠で彩ってあげてください。(^^)

ワードプレス記事中に枠を挿入するには?

ワード―プレスの記事中に
枠を挿入して文字を囲んで
目立たせたり、オシャレに飾ったりするためには

htmlのコードを入力すれば
cssをイジらずとも挿入することができます。
龍市龍市

↑↑↑↑↑
ちょうど、こんな感じに枠で囲むことが可能です。

いちいち、このコードを覚えておいて
毎回、手入力で入れるのは大変なので
「AddQuicktag」「TinyMCE Advanced」を使って
簡略化しておくと楽ですよ。(^^)

「AddQuicktag」や「TinyMCE Advanced」の使い方、設定方法はコチラ!

枠コードの仕組みをざっくり紹介

枠を挿入するためのコードについても
ざっくりと紹介しておきます。

その他

そんなこといいから早くコード教えろや!ヽ(`Д´)ノ

という人は、読み飛ばしちゃってください。笑


ワードプレスの記事中に枠を挿入するには
<div></div>タグを使います。

ハナハナ

<div>タグは囲った文字をグループ化するタグにゃ!

この<div>に
<div style=”◯◯: △△;”>で線種や色などを設定することもできます。

「◯◯: △△;」の部分は「” “」の間にいくつでも設定することができ、
線種と太さ、線の色、枠の大きさまで設定できます。

例.

例用の点線青枠

そのコードは以下になっています。
<div style=”padding: 16px; border: dotted 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 5px; margin-bottom: 5px;”>例用の点線青枠</div>
(<>を本来、半角のところ全角にしてあります。)

「padding: ◯px;」で枠の大きさ。
「padding: 10px 5px 10px 20px;」と挿入することで、
枠の上、右、下、左の余白の大きさを順に設定できます。

「border: ◯◯;」で線種
「border: ◯px;」で線の太さ
「border: #◯◯;」で線の色
をそれぞれ設定できます。

さらに
「border-radius: ◯px;」で枠の角を丸く
「background-color: #◯◯;」で枠の背景色

「margin-◯◯: ◯px;」では
枠の外側の余白幅を設定します。

margin-topで上余白、
margin-bototmで下余白、
margin-leftで左余白、
margin-rightで右余白をそれぞれ設定することが可能です。

ちなみに線種をまとめると

線種 htmlコード
実線 solid
点線 dotted
破線 dashed
二重線 double
線無し none

となります。

トラトラ

にゃるほどにゃ~

龍市龍市

こうやって分解して見てみると
できそうな気がするよね!(^^)

では、続いては
さっそくコードの例を見ていきましょう!

簡単♪コピペするだけ枠のコード例集!

【実線 ⇒ solid】

細めの枠
<div style="padding: 8px; border: solid 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠</div>

細めの枠 + 太い線
<div style="padding: 8px; border: solid 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

太めの枠
<div style="padding: 16px; border: solid 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠</div>

細めの枠 + 太い線
<div style="padding: 16px; border: solid 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

細めの枠 + 丸角
<div style="padding: 8px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 8px; border: solid 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

太めの枠 + 丸角
<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 16px; border: solid 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

【点線 ⇒ dotted】

細めの枠
<div style="padding: 8px; border: dotted 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠</div>

細めの枠 + 太い線
<div style="padding: 8px; border: dotted 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

太めの枠
<div style="padding: 16px; border: dotted 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠</div>

細めの枠 + 太い線
<div style="padding: 16px; border: dotted 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

細めの枠 + 丸角
<div style="padding: 8px; border: dotted 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 8px; border: dotted 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

太めの枠 + 丸角
<div style="padding: 16px; border: dotted 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 16px; border: dotted 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

【破線 ⇒ dashed】

細めの枠
<div style="padding: 8px; border: dashed 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠</div>

細めの枠 + 太い線
<div style="padding: 8px; border: dashed 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

太めの枠
<div style="padding: 16px; border: dashed 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠</div>

細めの枠 + 太い線
<div style="padding: 16px; border: dashed 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

細めの枠 + 丸角
<div style="padding: 8px; border: dashed 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 8px; border: dashed 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

太めの枠 + 丸角
<div style="padding: 16px; border: dashed 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 16px; border: dashed 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

【二重線 ⇒ double】

細めの枠
<div style="padding: 8px; border: double 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠</div>

細めの枠 + 太い線
<div style="padding: 8px; border: double 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

太めの枠
<div style="padding: 16px; border: double 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠</div>

細めの枠 + 太い線
<div style="padding: 16px; border: double 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

細めの枠 + 丸角
<div style="padding: 8px; border: double 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 8px; border: double 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

太めの枠 + 丸角
<div style="padding: 16px; border: double 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 16px; border: double 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

【線無し ⇒ none】

細めの枠
<div style="padding: 8px; border: none 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠</div>

細めの枠 + 太い線
<div style="padding: 8px; border: none 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

太めの枠
<div style="padding: 16px; border: none 3px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠</div>

細めの枠 + 太い線
<div style="padding: 16px; border: none 6px #4169e1; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線</div>

細めの枠 + 丸角
<div style="padding: 8px; border: none 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 8px; border: none 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>

太めの枠 + 丸角
<div style="padding: 16px; border: none 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;"><span style="line-height: 27.2px;">太めの枠 + 丸角</div>

細めの枠 + 太い線 + 丸角
<div style="padding: 16px; border: none 6px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">細めの枠 + 太い線 + 丸角</div>
龍市龍市

いかがですか?(^^)

ハナハナ

こうやって並べると種類がたくさんあるにゃね!

トラトラ

まだまだ~

続いては色のコードを紹介していきます。

【カラーコード】

カラーコードを変えての
コード例集を作るのは大変すぎるので

以下のカラーコードの中から
あなた好みのカラーを選んでそのコードを

padding: #◯◯◯◯;⇒枠線の色
padding: background-color: #◯◯◯◯;⇒背景色

の◯◯◯◯の部分に入れ替えて
あなただけの枠を作ってください!(^^)

#ff0000 #ff4949 #ffa0a0 #ffdddd
#ff9900 #ffb342 #ffcd82 #ffedd6
#ffff00 #ffff4f #ffff87 #ffffd3
#56f700 #85f747 #b5f791 #ddf7cd
#00ffbf #4fffd3 #9effe3 #d1ffef
#00cbff #5bdeff #87e7ff #d3f3ff
#0043ff #4778ff #91aeff #d1dbff
#6100ff #8d47ff #b98eff #dfd1ff
#e500ff #ec47ff #f38cff #fad3ff
#ff0044 #ff4c7c #ff8eaa #ffd8e1
#ffffff #d1d1d1 #afafaf #919191
#777777 #595959 #3d3d3d #0a0a0a

カラーコードももっとたくさんありますが、
僕なりに使用頻度の高そうな色をまとめてみました。

ひとつ例を上げてみると

黄色の二重線 細めの枠
<div style="padding: 8px; border: double 3px #ffb342; background-color: #ffff87; margin-top: 30px; margin-bottom: 30px;">黄色の二重線 細めの枠</div>

こんな感じになります。

ちなみにカラーコードのような表の挿入方法はこちらです!

ワードプレス記事に枠を入れる方法!最後に

龍市龍市

いかがでしたか?(*^^*)

今回、僕の紹介した枠のコードを
そのまま使うのも手ですし、

線の太さ・色や
枠の余白の幅を変えて
あなた好みの枠を作ってみても良いと思います。(^^)

パンダパンダ

ページをブックマークしておくと便利にゃよ。

ぜひ、おしゃれな枠を作って
記事をあなた色に彩ってください。

龍市龍市

それでは、最後まで読んでいただき
ありがとうございました!

     >>

 

なぜ、龍市は寝てても遊んでても
毎月20〜50万円の収入を得られるのか?


僕のネットビジネスの
仕組みから、組み立て方まで暴露!


初心者にも再現できるよう
実践レベルでステップ・バイ・ステップ
順番に行うだけ済むようにまとめました。

◆ネットビジネスとは?稼ぎ方のメカニズムを徹底解析!
◆ネットビジネスを始める超具体的な方法
◆成功者のマインドセット
◆スマホ一つで稼ぐ技・手法
◆初心者でも人を惹きつける記事を書く文章術

…などなど。

「無料でいいんですか!?」
「奉仕の精神がハンパない…」

なんて言われるくらい
濃い情報をまとめてます。

◆スマホ一つで稼ぐ技・手法
◆初心者でも人を惹きつける記事を書く文章術

なんかは
僕が数十万円のお金をかけて手に入れた情報が
無料でまとめられてます。

その関係で
人数限定で配布させていただいてます。

規定の人数に達し次第、突然配布を終了するので、
プレゼントを受け取ることができる今すぐに、
メール講座に登録をしてあなたのスキルにしてください。

※配布終了した場合、
お金を頂いてもお伝えすることはできませんので
あらかじめご了承ください。


下記にメール講座登録フォームがありますので、

1、お名前(苗字のみ、ニックネーム可)
2、メールアドレス

を入力後、「確認する」ボタンをクリックしてください。

折り返し、プレゼント付きのメールを送信します。

※万が一、5分経っても返信がこない場合は、
迷惑メールを確認してください。

それでも、メールが来ていなければ、
メールアドレスが間違っている可能性がありますので、
再度、入力をして登録し直してください。

超絶ホワイト手法で自由になるネットビジネス講座
参加登録フォーム

お名前(苗字のみ・ニックネーム可)
メールアドレス