WordPressで吹き出しをプラグインなしで作ってみた

シュウマイ

こんにちは、シュウマイです。

100記事を目前にして、吹き出しを導入しました!今回は、そのやり方をシェアしたいと思います。

今回参考にしたのは、こちらの記事です。

WordPressで会話風の画像とテキストをコピペで簡単表示!

Speech Bubbleというプラグインが一般的らしい

吹き出しプラグインを導入しようと色々と調べていると、どうやらSpeech Bubbleというプラグインが一般的だということがわかりました。

でもこのプラグイン、とっても使いづらいんです。

使い方はこちら↓

WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!

その使いづらさの原因は、画像のアップロード。

自分が使っているサーバーに画像ファイルをアップロードしないと使えないんです。
サーバーの見方すらわからい初心者にはちょっと敷居が高いですね。

しかもプラグインってページの読み込みが遅くなる理由ですよね。
できることなら、無駄なプラグインはインストールしたくない。

さらには、9つの吹き出しが収録されていますが、拡張性もありません

スタイルシート(CSS)の編集で簡単吹き出し

まずは、スタイルシートにモリアワセさんが提供しているコードをコピペしましょう。

コードを全て選んだらCtrl+Cでコピーします。

ダッシュボード→外観→テーマの編集

と進むと編集画面になりますので、スタイルシートの場所がわからない方は参考にしてください。

スタイルシートには、テーマ作者の情報などが載っていますので、その一番下にCtrl+Vで張り付けましょう。
更新ボタンを押すのを忘れないでくださいね。

スタイルシートに書き足しても、何も起きない時の対処法はこちら↓

CSS変更が反映されない時の対処法・CSSの読ませ方

2017.10.11

ちょっとパソコンに強い人なら、この時点で書き換えると自分なりの吹き出しを作ることができますね。
色々と数字を変えてみましょう。

好きな方法で、HTMLを簡単挿入できるようにしよう

スタイルシートの編集で吹き出しの導入は完了しました。

後は記事を書く画面で、HTMLコードを書くだけです。
必要なHTMLコードはモリアワセさんのブログに載っています。

シュウマイ

毎回同じHTMLを書くのはめんどくさいな

って皆さん思いますよね?

今回は、三種類の簡単挿入の方法を紹介します。

プラグイン「TinyMCE Template」を使う

このプラグインは、テンプレートとして登録されたコードをワンクリックで挿入できるようにするプラグインです。
毎回同じ文章やデザインを使用する場合に便利になります。

詳しい使用方法は、モリアワセさんの記事に載っているのでここでは割愛します。

プラグイン「AddQuicktag」を使う

AddQuicktagの使い方は、こちらの記事で詳しく紹介されています。

AddQuicktagによく使うタグを登録して記事作成の効率を上げよう

function.phpを修正して編集画面にボタンを作る

プラグインを減らしたい方は、自分でテーマを編集し、記事編集画面にボタンを作りましょう。

function.phpを修正してボタンを作ってしまう方法はこちらの記事で紹介されています。

WordPressで脱プラグイン!AddQuicktagを使わないでコード挿入ボタンを増やす方法

function.phpをいじると最悪の場合WordPressサイトが全く開かなくなります。
なので、あまりお勧めしません。初心者は上記どちらかのプラグインを使いましょう。

まとめ

Speech Bubbleより簡単に吹き出しを導入する方法でした。

スタイルシートを導入し、テンプレートを作るところまでやってしまえば次回からは簡単に吹き出しが作れます。

テンプレートに写真と名前を入れておけば、編集の手間もいりません。写真の変更も自由自在にできます。

シュウマイ

やっと吹き出しの導入が終わった!



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です