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

  1. WordPress
  2. 72 view

WordPressで吹き出しを実装する【10分】

最終更新日:2019/03/23

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

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

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

ぞえまる
ぞえ

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

ぞえまる
ぞえ

そうしたほうがいいぞ

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

アイコン画像選び

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

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

CSS

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

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

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

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

AddQuickTagで登録

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

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

プラグイン > インストール済みプラグインの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冊できちんと身につく本

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

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

WordPressの最近記事

  1. WordPressをお試しで始める方法【5分できてなんと無料】

  2. WordPressで吹き出しを実装する【10分】

  3. WordPressでカテゴリーの並べ替えをする方法【3分で完了します】

  4. 現役エンジニアの選ぶWordPressの使いやすいテーマ9選【綺麗・使いやすい】

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

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP