当ブログを観覧いただき　 ”ありがとうございます。”　

【囲み枠コピペコード大量放出】ブログを始めて１週間で学んだ事

皆さん！！こんばんは、ブログ初心者の『やまさん』です。
私事ですが、本日でブログを始めて１週間が経ち投稿は１０投稿目を
迎えることが出来ました。正直、分からないことばかりで勉強の日々
ですが少しづつ出来ることが増え、刺激の多い毎日を過ごしていす。

今回は、私が毎日やっている事と出来る様になった事のお裾分けとして投稿させて頂きます。
ブログ初心者の内容ですので超超イージーなので同じ境遇の方向けと考えて下さい。

目次

 はじめに、ブログを始めて毎日やっている事

１）複数名の決めたブロガーさんの投稿を読む様にしています。

２）ブロガーさんの記事を読んで実行出来ることはその場でやってみる。

３）１日１投稿を心がける様にする。

 なぜ、毎日行うのか

なぜかは分からないですが、ブログを始めた時に決めたことだからです。ブログを始める前から読んでいる
ブロガーの方々の投稿を読み必要な事だと理解出来ているのが大きな理由かもしてないですね。

１）毎日、成功者の方々の投稿を読む事でマインドやプロセスなど情報収集を行う。

２）学んだ事はアウトプットしなければ価値がないと考え、出来るだけ即実行の意識で行う。

３）毎日の成長を記録するとともに継続の証として投稿を行う。

 出来る様になって嬉しかった事

これまで、文章を書く事しかしてこなかった私としては恥ずかしながら『囲み枠』を使える様になった事が
１番嬉しかったですね(笑) そこっ！？って思われるかもですが素人の私としては、そこなんです！！

そして、私と同じ様にブログを始めたばかりの方へコピペで簡単に『囲み枠』を使える様にしたものを以下へ
お裾分けしていきますのでご自由にお使い下さい。（私も初めてはコピペからスタートしました照）

理屈不要で簡単に使いたい方にぴったりの内容です。

WordPressの記事編集画面にコピペするだけなので、面倒なファイルの編集も必要ありません。

それでは早速、お裾分けの『囲み枠コピペコード大量放出』です！！！

 シンプル囲み枠（モノトーン）

モノトーン（枠有り）

以下の記事に貼るだけ！
<div style=”background: #F7F7F7; border: 1px solid #A1A1A1; padding: 10px; “>ここに文章を入力します</div>

 

モノトーン（枠なし）

記事に貼るだけ！
<div style=”background: #F7F7F7; padding: 10px; “>ここに文章を入力します</div>

 

モノトーン二重線

記事に貼るだけ！
<div style=”background: #F7F7F7; border: 7px double #A1A1A1; padding: 10px;”>ここに文章を入力します</div>

 

モノトーン影付き

記事に貼るだけ！
<div style=”background: #F7F7F7; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;”>ここに文章を入力します</div>

 

モノトーン浮き出し

記事に貼るだけ！
<div style=”background: #F7F7F7; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;”>ここに文章を入力します</div>

 

モノトーン枠付二重線

記事に貼るだけ！
<div style=”background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;”>ここに文章を入力します</div>

 

モノトーン枠付二重線（枠有り）

記事に貼るだけ！
<div style=”background: #DCDCDC; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #DCDCDC; padding: 10px;”>ここに文章を入力します</div>

 

シンプル囲み枠（青系）

青系（枠有り）

記事に貼るだけ！
<div style=”background: #F0F8FF; border: 1px solid #6091D3; padding: 10px;”>ここに文章を入力します</div>

 

青系二重線

記事に貼るだけ！
<div style=”background: #F0F8FF; border: 7px double #6091D3; padding: 10px;”>ここに文章を入力します</div>

 

青系影付き

記事に貼るだけ！
<div style=”background: #F0F8FF; border: 1px solid transparent; border-radius: 5px; box-shadow: 3px 3px 5px 1px #778899; padding: 10px;”>ここに文章を入力します</div>

 

青系浮き出し

記事に貼るだけ！
<div style=”background: #F0F8FF; border: 1px solid #6091D3; box-shadow: 5px 5px 0 0 #778899; padding: 10px;”>ここに文章を入力します</div>

 

青系枠付二重線（青線）

記事に貼るだけ！
<div style=”background: #F0F8FF; border: 4px double #6091D3; box-shadow: 0 0 0 10px #F0F8FF; padding: 10px;”>ここに文章を入力します</div>

 

青系枠付二重線（白線）

記事に貼るだけ！
<div style=”background: #A1D8E6; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #A1D8E6; padding: 10px;”>ここに文章を入力します</div>

シンプル囲み枠（赤系）

赤系（枠有り）

記事に貼るだけ！
<div style=”background: #FFF4F4; border: 1px solid #EA5532; padding: 10px;”>ここに文章を入力します</div>

 

赤系（枠なし）

記事に貼るだけ！
<div style=”background: #FFF4F4; padding: 10px;”>ここに文章を入力します</div>

 

赤系二重線

記事に貼るだけ！
<div style=”background: #FFF4F4; border: 7px double #EA5532; padding: 10px;”>ここに文章を入力します</div>

 

赤系影付き

記事に貼るだけ！
<div style=”background: #FFF4F4; border-radius: 5px; box-shadow: 3px 3px 3px 1px #8B0000; padding: 10px;”>ここに文章を入力します</div>

 

赤系浮き出し

記事に貼るだけ！
<div style=”background: #FFF4F4; border: 1px solid #EA5532; box-shadow: 5px 5px 0 0 #8B0000; padding: 10px;”>ここに文章を入力します</div>

 

赤系枠付二重線（赤枠）

記事に貼るだけ！
<div style=”background: #FFF4F4; border: 4px double #EA5532; box-shadow: 0 0 0 10px #FFF4F4; padding: 10px;”>ここに文章を入力します</div>

 

赤系枠付二重線（白枠）

記事に貼るだけ！
<div style=”background: #CD5C5C; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #CD5C5C; padding: 10px;”><span style=”color: #FFFFFF;”>ここに文章を入力します</span></div>

 

シンプル囲み枠（緑系）

緑系（枠有り）
記事に貼るだけ！
<div style=”background: #EAFFEA; border: 1px solid #43A047; padding: 10px;”>ここに文章を入力します</div>

 

緑系（枠なし）

記事に貼るだけ！
<div style=”background: #EAFFEA; padding: 10px;”>ここに文章を入力します</div>

 

緑系二重線

記事に貼るだけ！
<div style=”background: #EAFFEA; border: 7px double #43A047; padding: 10px;”>ここに文章を入力します</div>

 

緑系影付き

記事に貼るだけ！
<div style=”background: #EAFFEA; border-radius: 5px; box-shadow: 3px 3px 3px 1px #556B2F; padding: 10px;”>ここに文章を入力します</div>

 

緑系浮き出し

記事に貼るだけ！
<div style=”background: #EAFFEA; border: 1px solid #43A047; box-shadow: 5px 5px 0 0 #556B2F; padding: 10px;”>ここに文章を入力します</div>

 

緑系枠付二重線（緑枠）

記事に貼るだけ！
<div style=”background: #EAFFEA; border: 4px double #43A047; box-shadow: 0 0 0 10px #EAFFEA; padding: 10px;”>ここに文章を入力します</div>

 

緑系枠付二重線（白枠）
記事に貼るだけ！
<div style=”background: #2E8B57; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #2E8B57; padding: 10px;”><span style=”color: #FFFFFF;”>ここに文章を入力します</div>

 

シンプル囲み枠（ピンク系）

ピンプ系（枠有り）


記事に貼るだけ！
<div style=”background: #FFF9FF; border: 1px solid #F5B1AA; padding: 10px;”>ここに文章を入力します</div>

 

ピンク系（枠なし）


記事に貼るだけ！
<div style=”background: #FFF9FF; padding: 10px;”>ここに文章を入力します</div>

 

ピンク系二重線

記事に貼るだけ！
<div style=”background: #FFF9FF; border: 7px double #F5B1AA; padding: 10px;”>ここに文章を入力します</div>

 

ピンク系影付き

記事に貼るだけ！
<div style=”background: #FFF9FF; border-radius: 5px; box-shadow: 3px 3px 3px 1px #CC3366; padding: 10px;”>ここに文章を入力します</div>

 

ピンク系浮き出し

記事に貼るだけ！
<div style=”background: #FFF9FF; border: 1px solid #F5B1AA; box-shadow: 5px 5px 0 0 #CC3366; padding: 10px;”>ここに文章を入力します</div>

 

ピンク系枠付二重線（ピンク線）

記事に貼るだけ！
<div style=”background: #FFF9FF; border: 4px double #F5B1AA; box-shadow: 0 0 0 10px #FFF9FF; padding: 10px;”>ここに文章を入力します</div>

 

ピンク系枠付二重線（白線）

記事に貼るだけ！
<div style=”background: #FF99CC; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #FF99CC; padding: 10px;”><span style=”color: #ffffff;”>ここに文章を入力します</span></div>

シンプル囲み枠（黄色系）

黄色系（枠有り）

記事に貼るだけ！
<div style=”background: #FFFAF0; border: 1px solid #E69A00; padding: 10px;”>ここに文章を入力します</div>

黄色系（枠なし）

記事に貼るだけ！
<div style=”background: #FFFAF0; padding: 10px;”>ここに文章を入力します</div>

 

黄色系二重線

記事に貼るだけ！
<div style=”background: #FFFAF0; border: 7px double #E69A00; padding: 10px;”>ここに文章を入力します</div>

 

黄色系影付き

記事に貼るだけ！
<div style=”background: #FFFAF0; border-radius: 5px; box-shadow: 3px 3px 3px 1px #CC9900; padding: 10px;”>ここに文章を入力します</div>

 

黄色系浮き出し


記事に貼るだけ！
<div style=”background: #FFFAF0; border: 1px solid #E69A00; box-shadow: 5px 5px 0 0 #CC9900; padding: 10px;”>ここに文章を入力します</div>

 

黄色系枠付二重線（黄線）


記事に貼るだけ！
<div style=”background: #FFFAF0; border: 4px double #E69A00; box-shadow: 0 0 0 10px #FFFAF0; padding: 10px;”>ここに文章を入力します</div>

 

黄色系枠付二重線（白線）


記事に貼るだけ！
<div style=”background: #E69A00; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #E69A00; padding: 10px;”><span style=”color: #ffffff;”>ここに文章を入力します</span></div>

 ステッチ柄の囲み枠

黄色系ステッチ柄


記事に貼るだけ！
<div style=”background: #FFFFEA; border: 2px dashed #FFBF7F; box-shadow: 0 0 0 10px #FFFFEA; padding: 10px;”>ここに文章を入力します</div>

 

青系ステッチ柄


記事に貼るだけ！
<div style=”background: #E0EFFF; border: 2px dashed #6495ED; box-shadow: 0 0 0 10px #E0EFFF; padding: 10px;”>ここに文章を入力します</div>

 

ピンク系ステッチ柄


記事に貼るだけ！
<div style=”background: #FFEAFF; border: 2px dashed #FFFFFF; box-shadow: 0 0 0 10px #FFEAFF; padding: 10px;”>ここに文章を入力します</div>

 

紫系ステッチ柄


記事に貼るだけ！
<div style=”background: #EAEAFF; border: 2px dashed #FFFFFF; box-shadow: 0 0 0 10px #EAEAFF; padding: 10px;”>ここに文章を入力します</div>

メモ帳柄の囲み枠

モノトーンメモ帳

一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行

記事に貼るだけ！

<div style=”display: inline-block; background: #F7F7F7; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;”>
<div style=”border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;”>一番文字の多い行の幅に自動で調節されます。</div>
<div style=”border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;”>文字が少ない行</div>
<div style=”border-bottom: dashed 1px #A1A1A1;”>文字が少ない行</div>
</div>

 

黄色メモ帳

一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行

記事に貼るだけ！

<div style=”display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;”>
<div style=”border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;”>一番文字の多い行の幅に自動で調節されます。</div>
<div style=”border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;”>文字が少ない行</div>
<div style=”border-bottom: solid 1px #ECE1B9;”>文字が少ない行</div>
</div>

 

黄色メモ帳二重線

一番文字の多い行の幅に自動で調節されます。
文字が少ない行
文字が少ない行文字の

記事に貼るだけ！

<div style=”display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #FFF8DC; border: double 3px #ECE1B9;”>
<div style=”border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;”>一番文字の多い行の幅に自動で調節されます。</div>
<div style=”border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;”>文字が少ない行</div>
<div style=”border-bottom: solid 1px #ECE1B9;”>文字が少ない行文字の</div>
</div>

 まとめ

お疲れ様でした。私がグログを始めて１週間で出来る様になって１番嬉しかった『囲み枠』について色々な
パターンで記載させて頂きました。また、初心者の方でもコピペで使用出来るようにコードも記載しました
ので先ずは使用してみて下さい。

初めは、分からない事ばかりで大変ですし、正直辛いです。１週間前の自分もコード？？
って感じで意味もわからずスタートしました。色々な方のWordPress攻略法など読み漁り
ビジュアルとテキストを行ったり来たりの作業でした。コードを貼り付けてはビジュアル
側の変化を確認するみたいな感じです。笑われちゃうかもですが現実です(笑)
let’stry！！一緒に頑張りましょう！！https://different-standard.com

 

 

 

最新情報をチェックしよう！

初心者のブログ奮闘記の最新記事8件

>ともに行動しよう

ともに行動しよう

たとえ何も見つからなったとしても成功はそこにある。過去から学び、今日のために生き、未来に対して希望をもつ。大切なことは、常に疑問を持ち続けることだ。

やまさんのTwitterはこちら
CTR IMG