【Diverカスタマイズ】囲み枠の太さとフォントの色を変更する

無料テーマを使ってるブログでは、囲み枠を入れるのにプラグイン「Shortcodes Ultimate」を使ってるんですが、

まぁ面倒。

それがDiverなら、入力補助でサクっと入れられちゃうのだからやんなっちゃう。(いい意味で)

でも枠の太さの主張がちょっと強いかなぁ…

あと、枠内の文字色だけ黒(#ccc)になってるのも気になってしまう!

そこで今回は、囲み枠の太さとフォントの色を変更するカスタマイズです。

デフォルトの囲み枠の太さと文字色を変えたい

こんな便利な機能を使わせてもらいながら、文句があるとは何事よ?

…と恐れ多い気持ちもあるにはあるのですが。

ブログ全体のカラーが淡色系なので、どうしても囲み枠が目立ちすぎる気がしまして。

デフォルトだとこんな感じ↓

デフォルトの囲み枠

ラインが太めなのと、文字色が記事内の色と違うのも違和感。(目立っていいかもしれないけど)

デフォルトのままだと、文字色は黒(#CCC)、線の太さは3px。

よし、文字色は記事内と合わせて、線はもう少し細くしてみようっと。

囲み枠をカスタマイズ

線の太さを2pxに、文字色を#666にしてみました。

もう少し細くてもいいかも?と思ったので、1pxにしてみたところ…

囲い枠の変更
さすがと細すぎるかな。

というわけで、1.8pxで様子をみることにしました。

「ダッシュボード」⇒「外観」⇒「カスタマイズ」⇒「追記CSS」に以下のコードを書き込んでいます。

/*枠の太さと色*/
.sc_frame {
    border: 1.8px solid #ccc;
    color: #666;
}

 

では、早速カスタマイズした囲み枠を使って行きますね。

Diverの便利な入力補助【囲み枠】の使い方

プラグイン不要で色んな装飾ができてしまうDiver。

入力補助を使う事で、会話や吹き出し、人気のアイコンfontAwesemeだって使えちゃいます。

囲み枠も数種類のデザインと色の組み合わせができるのですごく便利。

囲み枠とは?

文章を枠で囲むことで、強調したり、記事内の文章に緩急をつけることができます。
私は参考サイト(外部リンク)の記載に使う事もあります。

 

また、直感的に操作できる使いやすさも嬉しいところ。

Diver入力補助を使う

エディタ上に表示される「入力補助」⇒「囲い枠」を選択。

囲い枠の入力補助

タイトル・アイコン(種類と位置)・テキストを入力していきます。

入力補助(囲い枠)の使い方
アイコンのマークをクリックすると、デフォルトで読み込まれているfontAwesomeを使うことができるのも楽しい!

(↓一部です)
fontAwesomeのアイコン(一部)

アイコンは黒い部分が文字色と同じになるので、背景色のあるタイトル内に入れる時は、黒い部分が白抜きになります。

文字だとわかりにくいので、使ってみますね。

これはテスト

黒いアイコンを使ってみました。

これはテスト

白抜きのアイコンを使ってみました。

あとは囲い枠のタイプと色(罫線と影も付けられる!)を選んで挿入ボタンを押すだけ。

囲い枠の使い方

囲い枠は全部で7種類、カラーはカスタムできるのでつまりは無限ってことですね!(バージョン: 4.6.5現在)

囲い枠デザイン一覧
(クリックで拡大できます)

これだけデザインが選べたら十分。

ブログのイメージや用途にあわせて使用する色を固定すると見やすくなりますよね。

おしまいに

Diverには内部リンクカードはありますが、外部リンクカードはプラグインやツールを使うかカスタマイズするしかありません。

でも、外部リンクってそんなに目立ってほしいです?

私は今のところそうでもないので(失礼)、テキスト+囲い枠で十分かなって。(単にfunctions.phpを触りたくないってのもある)

そんなわけで、囲い枠フル活用させていただきたいと思います!

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事