最近、目の調子が悪くて更新頻度がおちています ><

【初心者さん向け】プレビューしながら「囲み枠」を簡単カスタマイズ

スポンサーリンク

囲み枠(BOX)を使って文章を装飾したいけど、「CSS」とか「Html」とか……なんだかよくわからない!

WordPressはじめたばかりの頃って、みんなそう思いますよね~

そんな方のために、登録不要で使える『CODEPEN』を使って、リアルタイムにプレビューしながら  このページで紹介している

この  「クリップ付き囲み枠(BOX)」を例にして、お好みの色にカスタマイズする方法と使い方を紹介します。

さらに、よく使うHTMLを登録できる便利な『AddQuicktag』プラグインの使い方までを解説!

ぜひ、オリジナルの囲み枠(BOX)を作ってみて下さい。

ポイント!「CSS」や「html」がよくわからなくても、流れに沿ってカスタマイズしていただくと、簡単にオリジナル囲み枠(BOX)が作れます。
スポンサーリンク

『CODEPEN』を使う準備(コードのコピペ)

CODEPEN』にアクセスし、右上にある「Create 」から「New Pen」を開きます。

codepen

右上にある「Change View」からレイアウトを変更できるので、使いやすいレイアウトを選んで下さい。

Change View

次に、サンプルとして『クリップ付き囲み枠(BOX)』のコードをコピーし、『CODEPEN』のHTMLCSSに、それぞれ貼り付けてみます。

ちょっと長いコードですが下の「 コードを表示」をクリックして、それぞれコピペして下さい。




CSS(CodePenのCSS欄にコピペ)

/* メモ クリップ A */
.clip-box-a {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #333; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 1px #acacac; /* 影の色 */
}
.clip-box-a:before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #555555; /*クリップ色 */
 background: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-a:after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: 5px solid #fff; /*背景色と同じ色にする*/
 z-index: 2;
}

HTML(CodePenのHTML欄にコピペ)

<div class="clip-box-a">テキスト</div>

HTMLCSSを貼り付けると、リアルタイムでプレビューされました。便利ですね~ここから枠線・背景・クリップの色を変更してみたいと思います。

codepen プレビュー

うまく表示されない時の”あるある”は、『 > 』や『 } 』の書き忘れです。最後の『 } 』までコピペできているか確認してみて下さい。

枠線・背景・クリップのカラーを変更する

囲み枠(BOX)の「枠線の色」「背景色」「クリップの色」を変更していきます。

サンプルとして区別のつきやすいカラーを使用していますので、お好みのカラーに置き換えてカスタマイズして下さい。

枠線の色(border)を変更する

カラーコード一覧表から、ボックス枠線に指定したいカラーを選びます。使い慣れているサイトがある場合は、そちらを参照して下さい。

カラーコード表から、グリーン系の《#009900》というカラーを枠線にしたいと思います。

  • 9行目 →【border: 1px solid #ccc; /* 枠線 */】の「#ccc」を「#009900」に書き換えます。
  • 枠線の太さも「1px」から「2px」にしてみました。これは一時的に色の確認をしやすくする意味もあります。お好みで変更して下さい。

codepen カラーを変更する

表示してみたら「この色イメージと違う!」ってことありますよね。『CODEPEN』を使えば、スタイルシートに書く前に、何度でもテストすることができて便利です。

枠線 カラー 変更

枠線の色と太さを変更できました。次は、ボックスの背景色を変更します。

背景色(background-color)を変更する

カラーコード一覧表から、薄いブルー系の《#86F9C5》というカラーを背景色にしたいと思います。

  • 7行目 →【background-color: #fff; /* ボックス背景色 */】の「#fff」を「#86F9C5」に書き換えます。

背景色 カスタマイズ

すると・・・?

怪しげな四角いものが! じつは・・・楕円形の枠の上に小さな四角(背景色と同じ色)を置いて、クリップのように見せていました…。ナイショですよぉ~

というわけで

  • 32行目(下から3行目)→【border: 5px solid #fff; /*背景色と同じ色にする*/】も「#fff」を「#86F9C5」に書き換えます。

これで枠線と背景色を変更できました。次はクリップの色ですが、ここまできたら楽勝ですよ~

クリップのカラーを変更する

カラーコード一覧表から、レッド系の《#FF0000》というカラーをクリップの色にしたいと思います。

  • 19行目 →【border: 3px solid #555555; /*クリップ色 */】の「#555555」を「#FF0000」に書き換えます。

css クリップ カスタマイズ

このように出来上がりました。

完成イメージ

これでカラーのカスタマイズは終了です。

CSSをコピペする場所やHTMLの使い方がよくわからない!という方は、【「CSS」や「HTML」をどうやって使うの?】をご覧下さい。
スポンサーリンク

「CSS」や「HTML」をどうやって使うの?

さっそく完成した囲み枠(BOX)を使ってみたいけれど、「使い方がよくわからない」、「CSSコピペでかんたん!」とか言われても・・・

そんなご心配をされている方へ、お使いのテーマによって多少の違いがありますが、一般的な使い方をご紹介します。

  • テーマのスタイルシート(style.css)にCSSを貼り付ける(最初の一度だけ)
  • 投稿や固定ページのテキストエディタにHTMLを貼り付ける

基本的にはこれだけです。

最初の一度だけスタイルシートにCSSを貼り付けておけば、あとは囲み枠(BOX)を使いたいときに、同じHTMLを貼り付けるだけで、何度でも使えるようになります。

テーマによっては『Cocoon』のように、「親テーマ」と「子テーマ」が用意されているものがあり、その場合は「子テーマ」のスタイルシートにCSSを貼り付けて使用することを推奨します。「親テーマ」のスタイルシートに直接CSSを貼り付けている場合、テーマをアップデートした時に上書きされてしまうため、再度CSSを貼り付ける必要があります。

CSSをスタイルシートにコピペする

お好みの『クリップ付き囲み枠』が完成したので『CODEPEN』側のCSS全てコピーします。※『 } 』忘れに注意して下さい。

ダッシュボード →「外観」→「テーマの編集」→「編集するテーマを選択」からお使いのテーマを選び、「スタイルシート(style.css)」を開いたら、コピーしたCSSを貼り付け ファイルを更新 して下さい。

CSSをstyle.cssへ貼り付け

  • 子テーマがある場合は子テーマのstyle.cssへ(推奨)
  • AMP化されている場合は、amp.cssなどにも(テーマによって異なりますのでご確認下さい。)

CSSに関わる作業は終了です。次は実際にBOXを使ってみましょう。

HTMLを「テキストエディタ」にコピペする

「新規投稿」や「投稿の編集」からテキストエディタを開き、「クリップ付き囲み枠(BOX)」のHTMLを貼り付けます。

<div class="clip-box-a">テキスト</div>

html テキストエディタ

《テキスト》の部分に文章を書いたら、プレビューして確認してみましょう。

囲み枠を使うたびに、HTMLを貼り付けて使うのは面倒ですよね。そんな時は【『AddQuicktag』にHTMLを登録して使う】をご覧下さい。
「表示されない!」という場合は【CSSが反映されない原因は?】をご覧下さい。

CSSが反映されない原因は?

一般的に、CSSが反映されない原因の多くは、「コードの記入ミス」や「ブラウザのキャッシュが残っている」場合です。

  • 『CODEPEN』側できちんと囲み枠が表示されていたとすれば、CSSのコピー範囲が一部抜けている…などが考えられます。
  • とくに最後の『 } 』(波括弧)は忘れがちですので、再度コピペし直してみて下さい。
  • ブラウザのキャッシュを削除する。古いデータがブラウザに残っているため「表示されない!」と慌ててしまいますが、キャッシュを削除することで解決することも多いです。

各ブラウザのキャッシュ削除の方法は、こちらを参考にされると便利です。

参考 ブラウザのキャッシュをクリアにする方法

『AddQuicktag』にHTMLを登録して使う

せっかく作った囲み枠(BOX)も、毎回HTMLをコピペして使うなんて面倒ですよね。そんな時は、多くの方が使っている『AddQuicktag』というプラグインが超便利です。

『AddQuicktag』プラグインのインストール方法は、こちらのページでも紹介していますが・・・

せっかくなので、簡単に説明させていただきます。

インストールとタグの登録

ダッシュボード →「プラグイン」→「新規追加」からAddQuicktagと入力し、インストールして 有効化 にします。

addquicktag

ダッシュボード →「設定」からAddQuicktagをクリックすると、タグを登録する画面が開くので、ここに先程のHTMLを【開始タグ】と【終了タグ】にわけて登録していきます。

  • ボタン名:エディタに表示されます。わかりやすいものにしましょう。
  • チェックボックス:表示場所です。よくわからない時は全てに 
  • 順番:エディタに表示する並び順です。登録数が増えてきたら、使いやすいように番号を入れて並び替えてみましょう。
  • 開始タグ:画像のように「テキスト」の部分を「●●●」にするのもオススメ。この部分は無くても構わないのですが、入力箇所がわかりやすいので入れています。お好みでどうぞ。
<div class="clip-box-a">テキスト
  • 終了タグ:忘れないように登録して下さい。
</div>

「ボタン名」「開始タグ」「終了タグ」の入力と、チェックボックスにをつけたら、 変更を保存 して終了です。

テキストエディタで登録した囲み枠を使ってみる

早速、テキストエディタを開いて、AddQuicktagに登録した『クリップ付き囲み枠(BOX)』を使ってみましょう。

ボタン名に登録した 枠(クリップ) というボタンが追加され、一度クリックするとボタンが /枠(クリップ) に変わります。

AddQuicktag テキストエディタ

一度目のクリックで「開始タグ」が入り、二度目のクリックで「終了タグ」が入ることになります。

プレビューしてブラウザで確認してみて下さいね。

ビジュアルエディタで登録した囲み枠を使ってみる

addquick ビジュアルエディタ

ビジュアルエディタには、「Quicktags」と表示されているプルダウンメニューが追加されます。

右の「▼」から登録したボタン名の 枠(クリップ) を選んでクリックすると、エディタ上に「テキスト」または「●●●」など、HTMLの開始タグに登録した文字が表示されます。

ビジュアルエディタでは、「開始タグ」と「終了タグ」が同時に入力されます。

プレビューして『クリップ付き囲み枠』が表示せれていることを確認しましょう。

『Cocoon』はstyle.cssに追加した独自CSSの場合、ビジュアルエディタにすぐ反映され、記事作成画面に囲み枠(BOX)そのものが表示されます。『Cocoon』以外のテーマでも「editor-style.css」が用意されている場合は、先ほどのstyle.cssと同じものをコピペしてみて下さいね。

ビジュアルエディタに反映されているイメージ

ビジュアルエディタ CSS 反映 イメージ

ビジュアルエディタに反映されると、公開時のイメージに近づけて記事が書けるので便利ですよ。

テーマに「editor-style.css」が用意されていない場合、自分で作成することもできますが、取り扱いに注意が必要な「function.php」にコードを追加したり、少し高度な作業が必要になるため、ここでは紹介しておりません。どうしてもという場合は『ビジュアルエディタ CSS 反映』などで作り方を検索してみて下さいね。

まとめ

お好みの囲み枠(BOX)は完成しましたか?

  • 『CODEPEN』を使えば、スタイルシートに書く前に、何度でもテストしてイメージをつかむことができます。
  • 『AddQuicktag』が使えるようになると、他の種類の囲み枠を登録したり、蛍光ペンのようなアンダーラインマーカー( ←これ )登録したりと、どんどん便利になって記事作成の効率もよくなります。

お気に入りの装飾で記事を書くと、モチベーションもアップしますよね♪

ほかの種類の「囲み枠」や「蛍光ペン」も紹介していますので、ぜひご覧になって下さい。

「蛍光ペン」っぽいアンダーラインマーカーで文字を装飾する
「明るい色」「パステル系の淡い色」「モノトーン」「ダーク」のアンダーラインマーカー(蛍光ペン)を作りました。記事を差別化したりテーマやスキンに合わせて使い分けてみてはいかがですか?スタイルシートにコピペするだけで簡単に使えます。
【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える
飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが…気に入ってます(笑)
WordPressテーマ『Cocoon』に変更Simplicity2後継テーマはマジでスゴイ
Simplicity2の後継テーマ『Cocoon』を使って感動した機能のゴク一部を紹介します。劇的に読み込み速度がアップ!アクセス集計機能や目次のデフォルト装備でプラグインが減りました。他にも数え切れないほどの機能が標準装備!
トップへ戻る