現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WordPressで吹き出しを実装する方法を紹介します。
WINDIIでは他にも、リストやあわせて読みたいをカスタマイズしているので、それをまとめよーかなーなんて思いつつとりあえずこの記事を書いてます。

• リスト
• リスト
• リスト

ぞえのプロフィール｜一年でフリーランスになって人生逆転！

どうも、ぞえです！今は休日に一日中ゲームをやったり、友達と飲みにいったり、こうやってブログを書いたりと楽しく過ごしています。アルコールも毎日酩酊するまでグビグビと飲んでいます＾＾どれだけ僕がお酒を大好きかは以下の記事に書いてあるのですが、謎に禁酒...

吹き出しがあると一言コメントとかができていいですよね。

後でもっと爽やかな画像にしよう……

そうしたほうがいいぞ

今回の吹き出しの実装は、AddQuickTagとCSSでやります。

アイコン画像選び

アイコン画像選びです。
一番難しいところですが、適当なものを選んで投稿画面よりアップロードしましょう。
僕は、Twitterで使用している画像を利用しました。

urlが表示されますね。
これは後ほど使います。

CSS

レイアウトをする為にタブを複製してください。
ダッシュボード上　外観 > CSS　> 追加CSS

ここに、CSSを書いて行きます（どこでもいいです。）

コピペとクリックで簡単！WordPressでLINE風の吹き出し会話を作る方法

どうやら、先人の方がやってくださっていたので丸々コピーしてきましょう。
CSSは本家の方のものをそのまま使わせていただきます。

AddQuickTagで登録

AddQuicktagは記事投稿画面から登録したHTMLを呼び出せるプラグインです。
これを入れることで、毎回HTMLを入力しなくてよくなります。

ダッシュボード プラグイン > 新規追加よりAddQuicktagをインストール&有効化してください。

プラグイン >　インストール済みプラグインのAddQuicktagから設定に移動します。

AddQuicktagを使用する場所を選択できます。
ここには、ビジュアルエディタ,post,pageにチェックを入れてください。
固定ページと記事ページ（ビジュアルエディター含む）でAddQuicktagが使用できます。

タグ登録

画像のURLの部分には先ほど確認したurlを当て込みます。
altはSEO対策になるので、画像下にでる名前の部分と同じものを入力してください。
ここに吹き出しテキストを入力の部分は削除しましょう。

左吹き出しは開始タグの時に

<div class="voice">
<figure class="voice-img-left">
<img src="画像のURLを記載" alt="●●●"/>
<figcaption class="voice-img-description">画像下に出る名前
</figcaption>
</figure>
<div class="voice-text-right">
<p class="voice-text">ここに吹き出しテキストを入力

終了タグに

</p></div></div>

を追加してください。

右吹き出しも同様の作業をして変更を保存してください

開始タグ

<div class="voice">
<figure class="voice-img-right">
<img src="画像のURLを記載" alt="●●●"/>
<figcaption class="voice-img-description">画像下に出る名前
</figcaption>
</figure>
<div class="voice-text-left">
<p class="voice-text">

終了タグ

</p></div></div>

使い方

記事投稿画面に左吹き出しとあるのが確認できますのでクリックすると先ほどの開始タグが反映されます
のでその直後から吹き出しに入れたいテキストを入力し再度吹き出しボタンをクリックしてみましょう。

お〜い、みんな元気か〜い

カスタマイズ

画像の表示が少しずれていた為CSSを修正しましょう。
.voice figure img の部分に

object-fit:cover;

を追加してください。

まとめ

先人の方が優秀すぎてあんまり存在意義のない記事になってしまいましたorz
コピペとクリックで簡単！WordPressでLINE風の吹き出し会話を作る方法

CSSができると本家の方のような綺麗なレイアウトができるようになるので、この機会に習得してみては？

HTML&CSSとWebデザインが 1冊できちんと身につく本

WordPressの運用で行なっている事まとめ【プログラミング知識不要】

WINDIIがWordPressで行なっている施策をまとめた記事です。WINDIIの運用方針の一つに極力ソースコードはいじらないがあるのでプログラミングの知識がない方でも行えるものばかりです。初心者の方でもわかりやすいものから、KUSANAGI導入やAMP対応まで様々な記事があ...

pz-linkcardをあわせて読みたいに変更するコードとリストを綺麗に表示するコードもおいときます。

リスト

.attractive{
background-color:#fffcfc;
width:100%;
box-sizing:border-box;
border:1px solid #e03f3f;
color:#e03f3f;
cursor: pointer;
border-radius: 6px;
padding: 12px 0;
font-size: 18px;
}

あわせて読みたい

.linkcard{
    position:relative;
}
.linkcard img{
    object-fit:cover;
}
.linkcard::before{
    content:'あわせて読みたい';
    position: absolute;
    top: -10px;
    left: 30px;
    z-index: 3;
    height: 30px;
    width: 130px;
    line-height: 30px;
    text-align: center;
    background-color:#e03f3f;
      color:#fff;
      border-radius:3px;
}
.linkcard>.lkc-internal-wrap{
    min-width: 100%;
    border: 1px solid #e03f3f;
    border-radius:8px;
    background-image:none;
    background-color:#fff;
    padding:16px 8px 8px 8px;
    box-sizing:border-box;
}
.lkc-content>.lkc-thumbnail{
    margin: 0 20px 4px 4px;
    max-width:170px;
    background: #f3eeee;
}
@media screen and (max-width: 480px){
.lkc-content>.lkc-thumbnail {
    max-width: 50px;
}
}
.lkc-title{
    font-size:24px;
}

.post_content>ul{
    background-color: #fffcfc;;
    border: solid 1px #e03f3f;
    padding-left: 40px;
    padding-top: 40px;
    padding-bottom: 36px;
    margin: 0 0 20px 0;
    padding-right: 10px;
}
.post_content li, .post_content dt, .post_content dd {
    line-height: 2.4;
    color: #333;
    font-size: 16px;
}

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日