ブログ

WordPressのプラグイン無しでも簡単!文字装飾のやり方を解説【コピペ素材あり】

 

このブログでは、

  • WordPressでブログを始めたけど、もっと読みやすくしたい
  • でも、プラグインを入れるのは、不具合のリスクが心配なので避けたい
  • コードをコピペして、楽に装飾したい。目次を入れてみたい

という初心者の悩みを解決出来るように、難しい単語無しで、すぐに実践できるように、スクショやコピペ素材を入れながら紹介します。

 

 

1.ブログ初心者なので勉強したい、けど、ラクしたい

 

ブログの記事を書いていると、ついつい言葉が多くなってしまい、いつの間にか文字だけの長文!なんてことになっていませんか?

私は2020年1月からブログを始め、間もなく1ヶ月が経ちます。
初めてのブログはあえてリライトせず、記念に残しておこうと思っていますが、これを見るたびに自分の知識や技術が少しずつ上がってきていると実感します。(まだまだ初心者ですが・・・)

恥ずかしいですが、よろしければご覧下さい。
リンク→2020年 挑戦開始

こちらもCHECK

WordPressブログを実質無料で始める方法【実証済】

続きを見る

 

WordPressでブログを作成していると機能を拡張するための「プラグイン」という便利なツールがたくさん存在している事がわかってきます。

自分がブログの中でやりたい事をググると、いろいろな「プラグイン」の使い方が紹介されています。
そして、良さがわかると、つい何でも使いたくなってしまいますよね?

しかし「プラグイン」をたくさんインストールすると、WordPressテーマとの互換性やプラグイン同士で不具合が出る可能性も!
一番困るのは、私もそうですが、初心者はどこに問題があるのか全く見当もつかず、ググりまくり、時間を浪費してしまうという事だと思います。

今回はプラグインを使わずに、テキストエディタにコピペするだけで使える、目次や囲み枠などをご紹介します。
プラグインを使うと便利ですが、私の目標はプログラミングのスキルをつける事でもあるので、コードに慣れるためにも出来るだけテキストエディタを使用していこうと思っています。

では、ここからは余計なコメントを控え、最速で文字装飾、文章装飾が出来るサンプルをまとめて紹介しますので、一つでもお役に立てばうれしいです。

 

関連

文字装飾だけでなくいろいろな装飾機能やかっこいいレイアウト、会話風吹き出しアイコンなどを簡単に作りたい方には有料テーマの購入をおすすめします。

ブログを継続するなら出来るだけ早い段階で有料テーマを使うことで、楽に、早く、カッコよくブログが作れますよ

テーマについてはこちらの記事で詳しく解説しています。

 

2.改行と段落わけの違い

 

↓テキストエディタに下記をコピペしてみて下さい。

  1. この行は改行しています。</br>
  2. この行も改行しています。</br>
  3. <p>この行は段分けです。上下に1行ずつ空きます。</p>
  4. この行の下の行は途中で改行しています。</br>
  5. 改行すると、行間は狭いです。

 

↓プレビューするとこんな感じになります。

改行と段分けを使い分けて、見やすくレイアウトしていきましょう。

 

 

3. 文字や広告を横や縦に並べる

 

↓このような感じに並べたい時は

 

↓このコードをコピペしてください。

  1. <table>
  2. <tbody>
  3. <tr>
  4. <td>あいう</td>
  5. <td>かきく</td>
  6. <td>さしす</td>
  7. </tr>
  8. <tr>
  9. <td>たちつ</td>
  10. <td>なにぬ</td>
  11. <td>はひふ</td>
  12. </tr>
  13. </tbody>
  14. </table>

 

 

 

4. 目次をつくる

 

目次から、各見出しへリンクもされます。

 

こんな目次を作りたいときは、下記をコピペしてください。

  1. <div style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;">■もくじ
  2. <a href="#i1">1.記事トップ</a>
  3. <a href="#i2">2.2番目の記事</a>
  4. <a href="#i3">3.3番目の記事</a></div>
  5. <h3 id="i1">1.記事トップ</h3>
  6. あいうえお
  7. あいうえお
  8. <h3 id="i2">2.2番目の記事</h3>
  9. かきくけこ
  10. かきくけこ
  11. <h3 id="i3">3.3番目の記事</h3>
  12. さしすせそ
  13. さしすせそ
  14. <div style=border:5px dashed #f90; padding>

 

 

5.カラーコードを知る

 

文字や線などに色をつける時はカラーコードで、色の指示ができます。
カラーコード表で好きな色をクリックすれば、簡単にコードがわかり便利ですよ。

カラーコード表→ https://html-color-codes.info/japanese/

 

 

6.囲み枠をつくる(サンプル8種類)

 

ここからは、完成イメージの下にコピペ素材を貼り付けています。
自分の使いたい囲み枠のコードをコピペしたあと、色やサイズを変えて、自分好みのものをつくりましょう。

 

囲み枠①

下記の赤文字の部分を、さきほど4で紹介したカラーコード表をもとに変更すれば、好きな色が表示されます。

  1. <div style="background:#ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;">ここに文章</div>

 

 

囲み枠② 文章の大きさに合わせた枠

  1. <div style="display:inline-block;background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

 

 

囲み枠③ 背景の色と枠線の太さ

 

赤文字の部分にあるカラーコードや数値を変えて、好みのスタイルを見つけてみましょう。

  1. <div style="background: #ffffea;padding: 15px; border: 5px solid #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

 

 

囲み枠④ 丸めの2重線

  1. <div style="background:#ffffea;padding:15px;border: double 4px #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

 

 

囲み枠⑤ 点線

  1. <div style="background:#ffffea; padding:15px;border:dotted 3px #99cc00; border-radius: 10px; word-break: break-all; ">ここに文章</div>

 

 

囲み枠⑥ エッジがある2重線

  1. <div style="background: #ffffff; padding: 10px; border: double 10px #0099ff; ">ここに文章</div>

 

 

囲み枠⑦ 帯のある枠(角)

  1. <div style="background: #ff9900; padding: 5px 10px; color: #ffffff; "><strong>見出し文字</strong></div>
  2. <div style="background: #ffffff; padding: 10px; border: 2px solid #ff9900; ">ここに文章</div>

 

 

囲み枠⑧ 帯のある枠(丸)

  1. <div style="background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0; "><strong>見出しタイトル</strong></div>
  2. <div style="background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px; ">ここに文章</div>

 

 

まとめ

プラグインは便利ですが、勉強のためにも、WordPressの不具合に合わないためにも、この記事のコピペが少しでもお役に立てば幸いです。

コードを見るといろいろな英単語が出てくるので、本当は単語の意味も理解しながら覚えた方が良いかも知れませんが、「まずはやってみる」ことを優先してみました。

私としては「考えてから走る」よりも「走りながら考える」タイプなので、走って、壁に当たる事もありますが、この記事を見ていただいている方の壁が、少しでも取り除ける事が出来れば何よりです。

 

ブログ

AFFINGER5の評判と私が購入した理由

2020/6/25  

  ねこキチWordpressで有料テーマを入れようと思うけど、情報をググってたらいろいろ情報ありすぎで悩むなぁ   初心者のうちは無料テーマでいいのでは?オッドアイ   ...

ブログ

AFFINGER5の機能/文字装飾とデザイン一覧

2020/7/6  

AFFINGER5を導入したいけど、事前に記事作成のパーツを知りたいという方のために、実際にどのようなパーツがあるのかを紹介します。 オッドアイどんなパーツが使えるのかわかれば納得して購入できますね ...

ブログ

AFFINGER5/吹き出しアイコンの設定方法と使い方

2020/7/2  

  ねこキチ文章で伝えようとすると文字が多くなってなんだか硬い感じだなぁ ワシは文字ばかりの記事は読む気にならんぞ!チェシャ猫 オッドアイそれなら吹き出しアイコンをつかうといいよ AFFIN ...

ブログ

AFFINGER5 /ブログカード・記事一覧のつくり方

2020/6/28  

  チェシャ猫せっかく購入した有料テーマだから、個性を活かした装飾やカスタマイズをしたい!   でも詳細なマニュアルは読むのがたいへんだなぁねこキチ   チェシャ猫とりあ ...

ブログ

AFFINGER5/デザイン済みデータの評判と導入方法【注意点あり】

2020/7/7  

AFFINGER5(アフィンガー5)を購入しただけではかっこいいデザインにはなりません。 かっこいいデザインを自分で一からつくるのはちょっと面倒という方はデザイン済みデータを試してみては? デザイン済 ...

-ブログ

© 2021 かずログ