囲み枠ってワードプレスでも出来ますか？囲み枠 枠 枠で囲む

こんにちは。
AmebaOwndマイスター加藤です。


一昨日発生した、南岸低気圧が北海道の東沖に進んできまして、昨夜から北海道全域で降雪状態になっています。
時に道東では、猛吹雪の状態で避難勧告もでていますし、停電などの被害も。。

冬ですから、雪が降るのは当り前なのですが、一気にではなくて、徐々に降ってほしいもです。。。



さてさて、「ワードプレスでも囲み枠って出来ますか？」というご質問が来まして、過去に、このような記事をアップさせていただきました。


それから、追記をしていなかったのですが、改めてご質問を頂いたので、別記事として投稿、まとめてみましたので、よろしければ参考になさってください。



ワードプレスでも囲み枠できますか？

もちろん、出来ますよ(^^ゞ
ワードプレスのほうが自由度が上ですから、それ以上にカスタマイズ可能です。
ただし、ワードプレスをカスタマイズしてくのには、HTMLとCSSのお勉強が必要になりますね。。

今回は、4種類の囲み枠をサンプルとしてまとめてみました。



ワードプレスで使える囲み枠4種類！！

サンプルの囲み枠の下に、HTMLタグを表記しています。
そちらをコピーして、ワードプレスで使ってみてくださいませ。

エディターはテキストを使ったほうが良いと思います。



【薄いブルー】  
■ここに文章を入力する■
<div style="background:#d8f1ff;padding: 20px; border: solid 2px #ff0000; border-radius: 10px;  margin-top: 30px; margin-bottom: 30px;"> ■ここに文章を入力する■</div>




【ぴんく】  
■ここに文章を入力する■
<div style="background:#ffeeee;padding: 20px; border: solid 2px #ff0000; border-radius: 10px;  margin-top: 30px; margin-bottom: 30px;"> ■ここに文章を入力する■</div>



【みどり】  
■ここに文章を入力する■
<div style="background:#bfffdf;padding: 20px; border: solid 2px #ff0000; border-radius: 10px;  margin-top: 30px; margin-bottom: 30px;"> ■ここに文章を入力する■</div>




【グレー】  
■ここに文章を入力する■
 <div style="background:#f7f7f7;padding: 20px; border: solid 2px #ff0000; border-radius: 10px;  margin-top: 30px; margin-bottom: 30px;"> ■ここに文章を入力する■</div>




本家本元の囲み枠って？


本家本元の囲み枠といったら、やはりこの方ではないでしょうか？？







ではまた。
加藤でした。


AmebaOwndマニュアル
AmebaOwndってなに？

私のSmilefactorytenのAmebaOwndサイトはこちらでーす！！
kato AmebaOwnd site