ワードプレスでブログを書くけど見た目をよくしたくないですか？
ワードプレスで囲み枠を使用するベストな方法
まずワードプレス上で囲み枠を使用するベストな方法は新規投稿のビジュアル画面ではなくテキスト画面を使って、HTML（CSS込み）コードを書くなりコピペをするなりして囲み枠を作るのがいいかと思います。
<div style="border: 5px solid #FFF5EE; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文字を入力</div>
上記のようにスタイルをコードの中に書き、これ一つで囲み枠を完成させることが出来るので簡単ですよね。
それではこのコードをテキスト画面の方で打ち込んでいきましょう。
|
1 |
<div style="border: 5px solid #FFF5EE; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文字を入力</div> |
ブログで使うならこの囲み枠！
囲み枠といっても実際に使うべきものは下記のようなツールに限ると思っています。
それはタイトルがつけられる囲み枠になります。
非常に利便性がありどの要素でも使いやすいと思います。
それは下記のような囲み枠になります。
|
1 2 |
<div><span style="background: #ffa500; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;">□タイトル</span></div> <div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #ffa500;">★ここに文字を入力してください。</div> |
さてこのコードはどうなっているかを解説しますね。
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #ffa500;">★ここに文字を入力してください。</div>
padding: 30px 15px 10px; オレンジの線枠から文字の間隔を指定 上から30ピクセル、下から15ピクセル、左から10ピクセルの場所から文字がスタートする。
border-radius: 5px; 角を丸くする。
border: 2px solid #ffa500; オレンジの囲み線の設定 2ピクセルの太さ、実線、オレンジカラー
コピペよりも簡単に囲み枠を作るプラグインAddQuicktag
前回のワードプレスでも紹介したコードを登録するだけでボタン一つで囲み枠ができます。
下記のようにコードを登録してみてください。
登録が終わるとテキストエディターにボタンが出てきますのでそのボタンを押すだけで楽チンです。
今回は実際によく使う囲み枠の解説をさせていただきました。
ビジネスにもブログにも使いやすいWordPressテーマ
「WING（AFFINGER5）」
SEOや収益化に効果的な機能が豊富
記事ごとにAMP化を選択可能
簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計
