ワードプレス

ワードプレス道 「機能編」囲み枠で記事の見た目を整えよう!!

こんにちはNAOです。
ワードプレスでブログを書くけど見た目をよくしたくないですか?
ブログでは下線や囲み枠を使い見やすくメリハリのある記事にしたいですよね

今回は囲み枠の設定などを解説していきますね。

 

ワードプレスで囲み枠を使用するベストな方法

 

まずワードプレス上で囲み枠を使用するベストな方法は新規投稿のビジュアル画面ではなくテキスト画面を使って、HTML(CSS込み)コードを書くなりコピペをするなりして囲み枠を作るのがいいかと思います。

<div style="border: 5px solid #FFF5EE; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文字を入力</div>

 

上記のようにスタイルをコードの中に書き、これ一つで囲み枠を完成させることが出来るので簡単ですよね。

 

それではこのコードをテキスト画面の方で打ち込んでいきましょう。

 

 

ここに文字を入力
 
 
少し囲み枠色が見にくいので色を変更してみてくださいね。色を変えるときは下記をWEBのカラーチャートで選択して変更してみてください。
 
border: 5px solid #FFF5EE;  下線部分を入れ替えると色の変更出来ますよ。
 

ブログで使うならこの囲み枠!

 

囲み枠といっても実際に使うべきものは下記のようなツールに限ると思っています。

それはタイトルがつけられる囲み枠になります。

 

非常に利便性がありどの要素でも使いやすいと思います。

 

それは下記のような囲み枠になります。

 

タイトル
★ここに文字を入力してください。
 
コピペして使ってくださいね♪
 

 

さてこのコードはどうなっているかを解説しますね。

<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でタイトル部分囲み、
spanでタイトル部分の装飾の設定をしています。
 
 
最後にオレンジ線を実線で角丸で作成し、文字はそのままのデフォルトですので何も指定せず、シフトボタンを押しながらで文字の改行も出来ます。高さの指定はないので文字が続く限り囲み枠は伸びますので。
 
 
「タイトル部分の設定」
 
height: 0px;       高さを0ピクセル
 
background: #ffa500;  タイトル部分の背景カラー
 
padding: 6px 10px;   背景とタイトル文字の間隔
 
border-radius: 5px;   オレンジ背景の角を丸くする 
 
color: #ffffff;      タイトル文字を白カラーの設定
 
font-weight: bold;    タイトル文字を太文字にする
 
margin-left: 10px;   要素の左から10ピクセル移動
 
 
「オレンジ線枠の設定」
 

padding: 30px 15px 10px;  オレンジの線枠から文字の間隔を指定  上から30ピクセル、下から15ピクセル、左から10ピクセルの場所から文字がスタートする。  

border-radius: 5px;      角を丸くする。

border: 2px solid #ffa500;  オレンジの囲み線の設定 2ピクセルの太さ、実線、オレンジカラー

このコードを理解していますと自分で色の変更なども出来ますよね。
 
当然このままコピペでいいですよ。
 
 
 

コピペよりも簡単に囲み枠を作るプラグインAddQuicktag

前回のワードプレスでも紹介したコードを登録するだけでボタン一つで囲み枠ができます。

下記のようにコードを登録してみてください。

 

登録が終わるとテキストエディターにボタンが出てきますのでそのボタンを押すだけで楽チンです。

 

タイトル
★ここに文字を入力してください。

 

今回は実際によく使う囲み枠の解説をさせていただきました。

ご購読ありがとうございます。

ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

 
  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery/PHP 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-ワードプレス

© 2024 TSUTAERU BLOG