簡単!WordPressの記事を見やすくするためにすぐ使える3つのテクニック

Doさん
いつもご覧いただきありがとうございます。

今日はブログ初心者の僕でも使える、ブログの記事を見やすくするために使えるテクニックを3つ公開したいと思います。

ブログを始めたばかりの時って、どうしても記事を書くことばかりに意識が集中してしまって、テキストがつらつらっとびっしり書かれた仕上がりになりがちですよね。

僕もまだまだそうなんですけど、1年以上ブログを続けてようやく少しはまともに見れるようになってきたかなとここ最近は実感しています。

そんな、初心者でもすぐ出来て記事の見栄えも良くなるテクニックがあれば誰でも知りたいですよね!

早速、その3つのテクニックのやり方を教えていきます。


1. 記事をテキストボックスで囲ってまとまりを良くする

このテクニックは要所要所で伝えたいことをまとめたい時に凄く役立ちます。

こんな感じのテキストボックスが記事内に挿れられます。

見出しタイトル
囲み内の文章

見出しも付いているので、記事がよりまとめやすくなります。

やり方はビジュアルエディター【テキスト】に次のコードを入れます。

<div><span style=”background: #FF0000; padding: 6px 10px; border-radius: 10px 10px 0 0; color: #ffffff; font-weight: bold; margin-left: 10px;”>見出しタイトル</span></div>
<div style=”padding: 10px; border-radius: 5px; border: 2px solid #FF0000;”>囲み内の文章</div>

「見出しタイトル」「囲み内の文章」を好きな文字に変えればお好きな形で使えます。

コードの中の色も好きに変えられます。

コードの中の#の後ろ6桁の文字を好きなカラーコードに変えることでお好きな色を選べます。

このサイトからお好きなカラーコードを調べられますので、自分のサイトに合ったカラーを探してぜひ使って見て下さい!

その他の例も載せておきますね。

囲みの中の文章

 

ショートコード

<div style=”border: 10px solid #cccccc; padding: 10px; background: #ffffff;”>囲みの中の文章</div>
囲みの中の文章

 

ショートコード 

<div style=”border: 4px inset #F06060; padding: 4px; background: #ffffff;”>囲みの中の文章</div>

こんな感じで様々なタイプのテキストボックスを記事内に挿れて、より自分のオリジナリティを出した文章が書けます。

尚、ここに載せたショートコードは色と枠の線の幅を変更可能ですので、色々変えて使ってみて下さい。

  • #~~~~~~が色
  • ~pxが線の幅
です。

他にもWordPressのプラグインShortcodes Ultimateというものを使う方法もあります。

🔺こちらのサイトで詳しく紹介されているので参考にしてみて下さい。

WordPressのプラグイン「Speech Bubble」を使えば吹き出しの会話文が使える!

LINEなどのチャットアプリで使われいる吹き出しの会話文はみなさんご存知かと思います。

実はこの吹き出し形式の会話文、WordPressのブログでも簡単に使えるんです。

その方法は、WordPressで公開されているプラグインの「Speech Bubble」をインストールして使うだけです。

インストールはこちらから

すると、

Doさん
こんな感じで使えます
ワイフ
ほんとだ~!LINEみたいになってる!

吹き出しの横のイラスト画像とかはご自身で準備したものを使えますので、画像だけ用意しておくといいかと思います。

詳しいやり方なんですけど、これに関してはブログマーケッターのJUNICHIさんが詳しく解説してくれているので、そちらの方をぜひ参考にして下さい!

実は僕がブログをはじめて間もない頃に、このブログマーケッターのJUNICHIさんのブログを訪れて、そのブログのクオリティーの高さにビックリさせられました。

この吹き出し形式の会話文も、その時に拝見して無性に真似してみたくなって参考にさせてもらったんです。

しかも僕が今使っているWordPressのテーマは、このJUNICHIさんが携わって作っているOPENCAGE製のWordPressテーマ「ストーク」
なんです。

このデザインに一目惚れして以来、それからはずっとこのWordPressテーマ「ストーク」を使わせていただいてます。

ブロガー専用WordPressテーマ「OPENCAGE」


どんだけJUNICHIさんに憧れてんだって話ですよね!

しかもこの「ストーク」は、今紹介させてもらっているSpeech Bubbleの吹き出し形式の会話文が、ショートコードを使って簡単にできるように作られています。

その他にもショートコードを使ってできることがてんこ盛りなので、ブログやサイトを綺麗に作りたい方にはピッタリのテーマだと思います!

途中でテーマのオススメなんかしちゃいました(^_^;)

Doさん
お次は最後

ショートコードを使ってアドセンス広告やアフィリバナーをセンター表示させよう

WordPressでサイト運営をされている方の中には、Google AdSenseやアフィリエイトの広告を表示させている方も多いと思います。

そして、そんな方の中に必ずこのような悩みを抱えている人がいると思うんですよね。

広告がきれいに真ん中に表示されたらいいのになぁ。。。

この悩みは意外と簡単に解消できちゃいます。

その方法はずばり、「ショートコードを使う」です。

もう何でもかんでもショートコードですね(笑)

やり方はめっちゃ簡単です。

<div style=”text-align: center;”>
<p style=”text-align: center;”>スポンサーリンク<br />あなたのアドセンスコード</p>

このショートコードを、WordPressのビジュアルエディタ【テキスト】内のあなたが広告を張りたい場所に貼り付けて、「あなたのアドセンスコード」にGoogle AdSenseのコードやアフィリエイトバナーのコードを貼り付けます。

Google AdSenseのコードを貼り付ける場合は「スポンサーリンク」の表示はそのままにして使えば規約違反にもならずに済むので手間が省けていいですね。

もしアフィリエイトのバナーを貼り付ける場合は、この「スポンサーリンク」を削除して使えばいいと思います。

見本として、ちょうどこの記事内にWordPressテーマ「ストーク」の300×250の広告が貼ってあると思うんですけど、きれいにセンター表示になっているかと思います。

こんな感じで記事のレイアウトもスッキリと見せることができるので、この方法はかなりオススメします!

今までも色んなサイトを見させていただいて、結構こういう細かい所を気にしないでいる方もちらほらみましたが、やっぱりちょっと見ていて残念だなぁ~って思うことが実際にありました。

なので、この記事を見たあなたは今日書く記事からでも実践で試してみて下さいね!



まとめ

今回紹介したテクニックをマスターすると

    • 記事で伝えたい事が、より視覚的でわかりやすくなる。
    • 読者が見ていて楽しくなる。
    • 記事のレイアウトがスッキリしてオシャレに見える。
    • ブログを書くのが楽しくなる!

 

この結果として、記事を書くモチベーションが以前より増しますし、何よりも書くのが「楽しくなる!」というのが一番の利益となります!

どうかこの記事が、一人でも多くの人のブログ人生の「Enjoy」につながれば嬉しいです(*^^*)

Doさん
ここまで読んで頂き、ありがとうございます。

ここまで当サイトを見て、このWordPressテーマ「ストーク」が気になった人は今すぐ導入してブログライフをより満喫しよう!


スポンサーリンク

スポンサーリンク

Music

当サイトの管理人をしている僕、Doさんが、若かれし頃に経験したDJの経験を活かして、読者の皆様に気持ちよく聴いていただけるおすすめMusicを紹介するコーナーです。ちょくちょく更新しますので、視聴がてら訪問しに来て下さい。

ABOUTこの記事をかいた人

まずは、ここまで見て頂けてうれしいです。ありがとうございます!管理人の安藤裕介と申します。ただいま全力で1歳の息子のおもちゃを努めています!文章ベタで読みにくい所が多々ありますが、気持ちを込めて記事を書かせていただきますので、またの訪問お待ちしてます。