龍市龍市

どうも!龍市です!
『昇り龍物語』へのご訪問ありがとうございます!\(^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>

こんな感じになります。

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

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

龍市龍市

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

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

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

パンダパンダ

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

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

龍市龍市

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

 
 ◆こんな疑問を持っていたら…◆

 〇 インターネットでお金が稼げるって本当?
 〇 実際に稼ぐにはどうしたら良いの?
 〇 スキルも知識もないけど大丈夫?
 〇 主婦や副業でも稼げるの?
 〇 スマホだけでも大丈夫?
 〇 モチベーションが続くか心配…


龍市龍市

大丈夫です!!(*^^*)

龍市が月の残業100時間以上の生活から
副業で本業以上(20~50万円)の金額を稼ぎ
脱サラするまでに行った

【ネットビジネスでの稼ぎ方】

具体的なノウハウ、知識の全てを”無料”公開中!


  • ネットビジネスの収益メカニズム
  • ネットビジネスを始める具体的方法(実況動画 多数)
  • ブログの設定や操作方法(実況動画 多数)
  • 文章力不要の初心者向け文章術
  • SEO集客のイロハ
  • 仕事術・時間術・モチベーションup術
  • 成功者のマインドセット
  • スマホだけで稼ぐ方法
  • 初心者にもおすすめ便利ツールの紹介(実況動画 多数)
etc…


さらに!

LINEの友達追加してくれた方限定

  • ブログではお伝えしていない裏情報も完全暴露
  • LINE友達限定で初心者の為の最短実績構築メンバー募集
  • 知識0から月収10万、月収100万と稼ぎ続けるための知識とマインドを伝授
  • 完全無料の月利30%を超えるFX自動売買システムモニター権利
もプラスαで無料プレゼントしています。



これらは
LINE限定でお伝えしている一部に過ぎません。


他にも
一般には公開できないような
有料級の情報もLINE限定で配信しています。



さらに、メルマガ読者限定で
”【大人版】夏休みの友”もプレゼント中!

初心者が最短で稼ぐための情報を
200本以上の記事と動画でまとめています。(合計400本以上)


  ↓↓↓LINEの登録は下の画像をクリックでできます。↓↓↓
2Mパートナー、龍市、メルマガ、副業、ネットビジネス、ブログ、主婦、記事下LINE@へのリンク画像2


     >>  
運営者についてキャラクター紹介
龍市アフィリエイト、ネットビジネス、副業、趣味ブログ昇り龍物語実写プロフィール写真丸

龍市(りゅういち)
猫と音楽が大好きな、いつも笑顔の自由人。

20代半ばまで社労士を目指し勉強に明け暮れ、資格取得&就職するも、あまりのブラック企業ぶりにストレスで病気に。

病気を機にネットビジネスの世界へ。
現在は脱サラして趣味のスポーツや旅行を楽しみつつノンビリ生活しています。

王道の稼ぐ複数手法を独自の方法で掛け合わせることに成功!
「対応が丁寧・親切と好評なこと」「難しいことを簡単に分かりやすく説明できること」が数少ない自慢です。(*^^*)

⇒ 龍市の詳しいプロフィールはこちら
⇒ 龍市の信念・理念はこちら

⇒ 龍市の公式無料メルマガ&参加者プレゼントはこちら
トラ
3兄妹の次男。オスのトラ猫。甘えん坊でヤンチャな性格。



パンダ
3兄妹の長男。猫なのに8kgもある巨漢。でも声が一番かわいい。



ハナ
3兄妹で唯一のメス。一番ネコっぽい性格でツンデレ。



3匹とも龍市の愛猫。
3匹と龍市の出会いのヒストリーはメルマガ1通目で紹介しています。

⇒ 龍市の公式無料メルマガを読んでみる!