WEBのこと

コピペで出来るブログでの吹き出しの作り方とWordPressで簡単に使う方法

コピペで簡単吹き出し

ブログサイトでよく見かける吹き出し。実装するの大変なんでしょ?と思っている人、そんなことないぞ!

吹き出しは簡単に作れるよ!

コピペで簡単に実装できるからHTML・CSSがわからない人でも出来る!

でも、ブログを運営していくならこのくらいのHTML,CSSは知っておいたほうが後々カスタマイズも捗るぞ!

今回は吹き出しの作り方と、作った後にWordpressで簡単に使う方法を解説していく!

実際に吹き出しを作ってみよう!

今回は冒頭にも出したこのタイプね!

HTMLは吹き出しを使いたいところで呼び出して使うぞ!このやり方は後述する。

CSSはCSSファイルに記述しておこう。

【HTML】

【CSS】

吹き出しのデザインはいろいろなサイトでサンプルが配布されているので、自分の好みに合うものを見つけてこよう!

WordPressで簡単に吹き出しHTMLを呼び出す!

吹き出しは使うときにHTMLをテキストに貼る必要があるので、正直めんどくさいと思っている人が多いと思う。

メモ帳に保存して使っている人もいるんじゃないかなー。。。

今回はWordpressのプラグインを使った超簡単、お手軽コピペ方法を解説していくぞ!

今回使用するプラグインはこいつだ!

Post Snippets

ワードプレスのプラグインから「Post Snippets」と入力してインストールと有効をしてね。

Post Snippets

【Skip】を選択。

Skip選択後に管理画面 > 設定 > Post Snippetsを選択しよう!

Post Snippets

このような画面になるので、「Add New Snippet」から新しいSnippetを表示させる。

Post Snippets 記入

新しいSnippetが出たら「タイトル」と「HTML」を記入してUpdate Snippetsを選択。

これで準備は完了だ!投稿画面に移動しよう!

投稿のテキストエディタに新たに「Post Snippets」という項目が出ているので、選択。

Post Snippets 投稿

Post Snippetsを選択後、先ほど作った「タイトル」を選択した後「Insert」を選択。

これで先ほど登録したHTMLの内容が出るよ!!簡単でしょ。

広告

まとめ

吹き出しは意外と簡単に実装できちゃいます。

そして、Post Snippetsプラグインはかなり便利。よく使うHTMLを登録しておいて呼び出したり、ショートコードタイプで登録して、クライアントに納品する時にも利用することもある。

それくらい便利なので、ぜひ使ってみてね!