2023年3月27日この記事はこんな人におすすめ文章のテキスト文字を枠で囲いたい。便利な装飾方法があれば教えて欲しい。簡単に貼り付けコピーで可能な囲み枠を作りたい。Toshi文章に囲み枠をつくるだけで文章が読みやすくなります。本記事では、ブログ初心者向けに、Wordpressで文章に囲み枠を作成する方法を解説します。HTMLやCSSといった難しい用語は不要で、ブログ初心者の方でも、これから紹介するコードを貼り付けするだけでコピーで文章に囲み枠を作成する事ができます。文章やテキスト文字に、囲み枠をつくりたいけど、作り方がよくわからない。そんな方は、当記事を読み進めてもらえると、作成方法を理解する事ができるようになります。この記事を書いた人ブログ初心者の方向けにブログの運営方法やWordpressの使い方を発信しています。複数サイト運営中Toshiです!WordPressで文章に囲み枠を作成する3つの方法は?3つの作り方CSSをいじって囲み枠を作成するwordpressテーマに元々備わっている囲み枠を作成する(とても簡単)テキストエディタにHTMLコードを張り付けて囲み枠を作成する(とても簡単)今回の記事では、テキストエディターにHTMLコードを貼り付けて囲み枠を作成する方法をご紹介します。誰でも簡単に貼り付けコピーでテキスト枠が完成します!難しくないのでぜひ、チャレンジして素敵な装飾デザインを探してみてください。何も装飾がないデザインのサイトよりも、囲み枠をつける事で、自然と読者が見やすいようなサイトをつくる事もできます。この記事の内容WordPressで文章に囲み枠をつくるとは!?WordPressで文章に囲み枠をつくる方法の完成例を先にみていただき、どんなデザインを作成することができるのか確認しておきましょう。それを踏まえたうえで、カラーだったり、ボックス枠のデザインの変更方法を紹介します。WordPressで文章に囲み枠を作成するデザインの完成例そもそも、文章に囲み枠をつくる!とはどういうことですか??という方向けに、一目みてわかるように、完成例を準備しました。以下のようなボックスを簡単に作成する方法を今回ご紹介します。グレーのおしゃれな枠グレーの2重線の囲み枠です。緑いろのマットカラーこんな感じのデザインです。どんな枠ができるかイメージはできましたか?他にもいろいろな種類の枠のボックスデザインやカラーの作り方など、のちほど詳しく解説します。HTML、CSSの知識は不要!手順に沿って貼り付けコピーで完成します!HTMLとか、CSSをつかわなくても、Wordpressで文章に囲み枠を作成する方法なので、CSSの画面は一切ひらきませんので、ご安心ください。基本的には、コードの貼り付けコピーでデザイン枠を作成することが可能です。文章に囲み枠を作成するときの注意点WordPressで文章に囲み枠を作成するときの注意点をいくつか紹介しておきます。注意点1|ブロックエディター、もしくはクラシックエディターによりやや貼り付け方が異なります!現在Wordpressを最新の状態にしている方であれば、デフォルトの状態でグーテンベルク仕様になっているかと思います。以前にクラシックエディターを利用している方もいるかと思いますので、両方の貼り付け方についても解説します。注意点2|コードを張り付けているのに、デザイン枠が表示されない方はコードを張り付けたあとに『”』をチェックしてください!コードを貼り付けすれば、基本的にはデザイン枠が簡単に表示されるかと思いますが、うまくボックス枠が表示されない場合の対処方法についてもここに記載しておきます。あなたのブログで活用する時は、テキストにコードを貼り付けを行った際に、『”』が全角になっている箇所をすべて、半角に修正してください。コードをはったのに、うまく表示されない。そんな方は、貼り付けをしたあとに、コードの中にある『”』に注目してください。『”』が張り付けたあとに全角になることがありこれだとうまく表示されません。そのため、半角になっているかすべて確認してください。注意点3|他のブログテーマを利用している方は貼り付けできない可能性もあります。基本的にはWordpressを利用している方であれば、簡単に貼り付けして表示させることが可能ですが、他のブログテーマ(無料・他のサービス)を利用している方はうまくはれるかどうかはわかりません。WordPressであれば、クラシックエディター(旧エディター)・ブロックエディター(グーテンベルク)どちらも枠を作成することが可能かと思います。WordPressで文章に囲み枠を作成する手順ちなみに、Wordpress5.0以降では操作画面がグーテンベルク仕様になっています。現在Wordpressをはじめる方であればデフォルトでグーテンベルクの操作画面になっているかと思います。旧エディターであるクラシックエディターで記事を書いている。いう方もいると思うので、ねんのため両方貼り付け方と便利な使い方について解説します。記事の投稿は、クラシックエディタとグーデンベルクどちらかをつかって記事を投稿する事ができます。わたしは、以前よりWordPressにふれているので、クラシックへエデ...以前よりWordpressに触れていてクラシックエディタに慣れているという方もいるでしょうし、グーテンベルクの方が作業がしやすい。いう方も多いかと思います。基本的にはどちらのエディタ画面でも枠を作成する事ができます。クラシックエディターを使って文章に囲み枠を作成する手順クラシックエディターを利用している方は、以下の手順で、文章に囲み枠を表示させることができます。テキストエディターをクリックテキスト・ビジュアルとあるうちの、『テキスト』を選択してください。下のように、これから説明する(※後述します)コードをそのまま、テキストに張り付けコピーします。『ここに文字を入力』と書かれている部分に、文字を修正して利用していきます。次に、しっかり枠ができているかどうか、『ビジュアル』モードに変更して確認します。すると、、、、コードをコピペするだけで、こんな文字装飾が簡単にできました。(※この枠がでてこない時は、コードがすべてコピーして貼り付けているか再度確認してみてください。”を全角を半角にしてください。)再度、手順をまとめます。クラシックエディタで文章に囲み枠を作成する手順1テキスト画面を開く。2テキスト編集画面で『枠を作成できるコード』をそのまま張り付ける。3ビジュアルで枠ができているか確認4ビジュアル画面で、そのまま文字を修正し完成といった流れでしょうか。Addquicktagプラグインでよく使用するコードを登録して便利に利用しよう!クラシックエディターを利用している方は、Addquicktagというプラグインを利用すると便利です。自作の囲み枠のコードを事前に登録しておくことで、次回からはボタン一つでショートコードで、文章の囲み枠を出力する事ができる便利なプラグインです。本日は、ショートコードとして活用できる便利なWordPressプラグインの『AddQuicktag』についてご紹介します。このプラグインは結構便利なので、使っている方は多いんじ...グーテンベルク(ブロックエディタ)を使って文章に囲み枠を作成する手順グーテンベルクで枠をつくる方も非常に簡単に作成することができます。フォーマットのカスタムHTMLをクリックグーテンベルクブロックのフォーマットで、カスタムHTMLをクリックします。すると、HTMLを入力する画面になるので、囲み枠のコードを張り付けるだけです。次にうまく貼る事ができているかどうかをプレビューで確認します。グレーの2重線の囲み枠です。すると、上記のように簡単に表示させることができました。ブロックエディタで文章に囲み枠を作成する手順1カスタムHTMLのブロックを選択。2HTMLを入力...。表示されるHTMLブロックの中にコードをまるっとコピーするだけです。3プレビュー画面で作成できるているか確認!再利用ブロックに追加登録して便利に利用しよう!ブロックエディタ(グーテンベルク)で文章に囲み枠を便利につかうためには、再利用ブロックに登録しておくと便利です。使うコードやまた次回も同じ枠を使用したい。いう方は、再利用ブロックに登録することで、次回から1クリックでコードデザインを呼び起こすことができます。WordPressのボックス枠のデザインの種類ボックス枠のデザインの種類について紹介します。以下のコードを張り付けておつかいください。ノーマルタイプのデザイン枠1本線のデザイン枠になります。;">ここに文章を記載する</div>二重枠のボックスデザイン枠2本線で表示させるデザイン枠になります。立体的に表示させるデザイン枠になります。立体的に表示させるデザイン枠になります。16px;">囲み内の文章</span></p></div></div>文章の囲み枠の色(カラー)を変更する方法WordPressの囲み枠のデザインが決定したけど、カラーを変更したい。そんな時も簡単に色を変更する事ができますので、ぜひやってみてくださいね!例えば、オレンジ色の囲み枠から、赤の囲み枠に変更したい!と思った場合の方法についてお伝えします。(ちなみに、どんな色にも変更が可能です。)まずは、黄色マーカー部分に注目してください。#F90といったものがあります。⇒コードの#以降の所を変更するだけで色の変更が可能です。オレンジ色の枠を、赤色に変更したい。そんな場合、どうするか。修正する場所といえば、#~の部分だけです。使用するデザインのスタイルが決まっていれば、あとは黄色マーカー部分の色(コード)を変更すれば、カラーが変更できる。#ff330をにするだけで、赤のカラーに変更する事ができます。カラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽...HTMLカラーコードというサイトで気にいったカラーを一発で調べることができます。マウスを好きなカラー部分にあてるとカラーコードが上に表示されるので、そのまま好きなスタイルのカラーコードの部分に貼りつけをします。次に、枠線の太さや、角の丸みの大きさ、余白の間隔を変更する方法についてお伝えします。(noteで詳しく方法を紹介しています。)ここまでできるようになると、色々な幅やカスタマイズが広がります。簡単なので、ぜひやってみましょう。オレンジ色の枠線で試してみたいと思います。solid・;padding:10px・border-radius:10pxと記載している箇所があります。次に、わかりやすくするために、すべてを、「50px」に変更すると、以下こうなります(笑)かなり大きいので、びっくりしないでくださいね。