目次
龍市どうも！龍市です！
『昇り龍物語』へのご訪問ありがとうございます！＼(^o^)／
ワードプレスの記事中に枠を入れたい！！(≧∇≦)
こんな風に考えたことはないですか？
今回の記事では、
ワードプレスの記事中に
文字を囲む枠を作る方法をまとめていきます。
一応、コードの仕組みの解説もしますが、
手っ取り早くコピペだけで済ませられるように
枠の例とそのコードを貼っておきます。
ぜひ、あなたの記事もオシャレな枠で彩ってあげてください。(^^)
ワードプレス記事中に枠を挿入するには？
ワード―プレスの記事中に
枠を挿入して文字を囲んで
目立たせたり、オシャレに飾ったりするためには
htmlのコードを入力すれば
cssをイジらずとも挿入することができます。
cssをイジらずとも挿入することができます。
龍市↑↑↑↑↑
ちょうど、こんな感じに枠で囲むことが可能です。
毎回、手入力で入れるのは大変なので
「AddQuicktag」や「TinyMCE Advanced」を使って
簡略化しておくと楽ですよ。(^^)
「AddQuicktag」や「TinyMCE Advanced」の使い方、設定方法はコチラ！
⇒
枠コードの仕組みをざっくり紹介
枠を挿入するためのコードについても
ざっくりと紹介しておきます。
そんなこといいから早くコード教えろや！ヽ(`Д´)ﾉ
ワードプレスの記事中に枠を挿入するには
＜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: #◯◯◯◯;⇒背景色
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万円)の金額を稼ぎ
脱サラするまでに行った
【ネットビジネスでの稼ぎ方】
具体的なノウハウ、知識の全てを”無料”公開中！
さらに！
LINEの友達追加してくれた方限定で
もプラスαで無料プレゼントしています。
これらは
LINE限定でお伝えしている一部に過ぎません。
他にも
一般には公開できないような
有料級の情報もLINE限定で配信しています。
さらに、メルマガ読者限定で
”【大人版】夏休みの友”もプレゼント中！
初心者が最短で稼ぐための情報を
200本以上の記事と動画でまとめています。(合計400本以上)
↓↓↓LINEの登録は下の画像をクリックでできます。↓↓↓
〇 インターネットでお金が稼げるって本当？
〇 実際に稼ぐにはどうしたら良いの？
〇 スキルも知識もないけど大丈夫？
〇 主婦や副業でも稼げるの？
〇 スマホだけでも大丈夫？
〇 モチベーションが続くか心配…
龍市大丈夫です！！(*^^*)
副業で本業以上(20～50万円)の金額を稼ぎ
脱サラするまでに行った
【ネットビジネスでの稼ぎ方】
具体的なノウハウ、知識の全てを”無料”公開中！
- ネットビジネスの収益メカニズム
- ネットビジネスを始める具体的方法（実況動画 多数）
- ブログの設定や操作方法（実況動画 多数）
- 文章力不要の初心者向け文章術
- SEO集客のイロハ
- 仕事術・時間術・モチベーションup術
- 成功者のマインドセット
- スマホだけで稼ぐ方法
- 初心者にもおすすめ便利ツールの紹介（実況動画 多数）
さらに！
LINEの友達追加してくれた方限定で
- ブログではお伝えしていない裏情報も完全暴露
- LINE友達限定で初心者の為の最短実績構築メンバー募集
- 知識0から月収10万、月収100万と稼ぎ続けるための知識とマインドを伝授
- 完全無料の月利30％を超えるFX自動売買システムモニター権利
これらは
LINE限定でお伝えしている一部に過ぎません。
他にも
一般には公開できないような
有料級の情報もLINE限定で配信しています。
さらに、メルマガ読者限定で
”【大人版】夏休みの友”もプレゼント中！
初心者が最短で稼ぐための情報を
200本以上の記事と動画でまとめています。(合計400本以上)
↓↓↓LINEの登録は下の画像をクリックでできます。↓↓↓
１ ２ ＞＞
運営者についてキャラクター紹介
龍市(りゅういち)
猫と音楽が大好きな、いつも笑顔の自由人。
20代半ばまで社労士を目指し勉強に明け暮れ、資格取得＆就職するも、あまりのブラック企業ぶりにストレスで病気に。
病気を機にネットビジネスの世界へ。
現在は脱サラして趣味のスポーツや旅行を楽しみつつノンビリ生活しています。
王道の稼ぐ複数手法を独自の方法で掛け合わせることに成功！
「対応が丁寧・親切と好評なこと」「難しいことを簡単に分かりやすく説明できること」が数少ない自慢です。(*^^*)
⇒ 龍市の詳しいプロフィールはこちら！
⇒ 龍市の信念・理念はこちら！
⇒ 龍市の公式無料メルマガ＆参加者プレゼントはこちら！
トラ
3兄妹の次男。オスのトラ猫。甘えん坊でヤンチャな性格。
パンダ
3兄妹の長男。猫なのに8kgもある巨漢。でも声が一番かわいい。
ハナ
3兄妹で唯一のメス。一番ネコっぽい性格でツンデレ。
３匹とも龍市の愛猫。
３匹と龍市の出会いのヒストリーはメルマガ1通目で紹介しています。
⇒ 龍市の公式無料メルマガを読んでみる！
3兄妹の次男。オスのトラ猫。甘えん坊でヤンチャな性格。
パンダ
3兄妹の長男。猫なのに8kgもある巨漢。でも声が一番かわいい。
ハナ
3兄妹で唯一のメス。一番ネコっぽい性格でツンデレ。
３匹とも龍市の愛猫。
３匹と龍市の出会いのヒストリーはメルマガ1通目で紹介しています。
⇒ 龍市の公式無料メルマガを読んでみる！
