BLOG

WordPress無料テーマに吹き出しを追加する方法

今回は、WordPressのテーマに吹き出しがないときに、自力で追加する方法をご紹介します。

有名ブロガーさんのページを見ると、大体吹き出しって使われていますよね?

見た目的にも、文章でつらつらと書くよりキャッチ―になるので、楽しく読むことができます

この記事では、「いきなり有料テーマを購入するのは気が引ける。でも、吹き出しは使いたい...」というあなたのお悩みを解決します!

吹き出しの追加方法

では、さっそく追加方法を解説していきます。

参考にしたブログ

僕が追加するときには、こちらのブログを参考にさせていただきました。

WordPress(LIONBLOG)で吹き出しを作る方法【アナログ人間でもできた】(ryocoblog)

前準備

まず、前準備として下記のプラグインを追加してください。

  • AddQuicktag
  • Classic Editor
  • TinyMCE Advanced

それぞれ追加したら、有効化も忘れずにお願いします。

(僕はClassic Editorを入れていなかったので、AddQuicktagが表示されずだいぶ往生しました。。。)

AddQuicktagの設定

こちらは、前述のryocoblogさんの手順通りに進めてください。

特に迷う箇所はなかったと思います。

ひとつ注意するとしたら、タグの名前でどちらに画像が出て、どちらに吹き出しが出るのか分かりやすいようにした方がいいと思います。

追加CSSの設定

ここも特に迷うところはなかったと思います。

左メニューから「外観」→「カスタマイズ」→左メニューの一番下「追加CSS」を選択して、コピペしてください。

※"コピペ"とは、Ctrl+Cで"コピー"して、Ctrl+Vで"ペースト(=貼り付け)"する作業のことを言います

空白の削除

ryocoblogさんでは特に触れられていませんでしたが、更に元記事のNORILOGさんの方では空白を削除するための設定をしていたので、それもしていきます。

左メニューの「外観」→「テーマエディター」(もしくは「テーマの編集」)を選択してください。

ここで子テーマを入れている人は、header.phpが表示されていないと思います。

その場合、右上のプルダウンで親テーマを選択してください。

このheader.phpの</head>のすぐ後ろあたりにNORILOGさんのコードをコピペしてください。

これで設定は完了です。

使用方法

これから使用方法について解説していきます。

左メニューの「投稿」→「新規追加」で記事の作成画面を開いてください。

「Quicktags」を選択して、吹き出しのタグを貼り付けます。

画像下に出る名前に自分の名前、吹き出しテキストに適当な文字を入力します。

そして、ここからがミソなんですが、エディター右上の「テキスト」を選択してください。

そうすると、このような画面になります。

ここで「src="画像のURLを記載"」の「画像のURLを記載」のところに画像のURLを記載します。

画像のURLは、表示したい画像を右クリックして、「画像アドレスをコピー」で取得できます。

今の状態は、クリップボードという見えない領域にコピーされている状態なので、そのまま「画像のURLを記載」のところにCtrl+Vでペーストしてください。

この状態で「ビジュアル」に戻ると、画像が表示されていると思います。

ここまで来たらプレビューで確認してみましょう。

この通り、無事吹き出しの追加に成功しました。

 

●●●
みつ

吹き出し完成!

まとめ

吹き出しがあるとないとじゃ、書き出しのハードルが全然ちがいますよね。

これであなたもグイグイ引き込める書き出しを書けること、間違いなし!!

 

●●●
みつ

ここまで読んでくれてありがと!じゃーね!!

-BLOG
-,

© 2020 eureka