ブログ運営

【ブログでの新たな試み】吹き出しを入れTwitterを埋め込んでみました

このような方におすすめ

● ワードプレスに慣れてきてサイトデザインを少しいじりたい方
● ワードプレステーマ「JIN」で吹き出しを入れたい方
● ブログにTwitterを埋め込みたい方

みなさん、こんにちは。

このブログをはじめて、もうすぐ1ヵ月になります。

試行錯誤の連続ですが、Googleアドセンスに合格するなど、一歩一歩前進している実感があります。

今回は、他の方のブログを見て、いいな~と思った「吹き出し」と「Twitter」の埋め込みを行いたいと思います。

実際に、設定しながら、解説する形で進めていきます。

ワードプレステーマ「JIN」で吹き出しを入れてみた

このブログのテーマは「JIN」です。

JINのマニュアルを参考に、吹き出しを作成していきたいと思います。

まず必要となるのは、吹き出しの内容を話すキャラクターです。

いつも利用させていただいている「いらすとや」で男性と女性のキャラクターを入手しました。

    

このお二人に会話をさせたいと思います。

 

吹き出しの使い方はJINの公式サイトにあるマニュアルに詳しく記載されていますが、ここでは簡単にご紹介します。

ダッシュボードから「メディア」⇒「新規作成を選択」

 

吹き出しに使用するキャラクター画像をアップロードし、編集ボタンをクリック。

 

ファイル名をメモ。

 

テキストエディターを開き、次のコードをペースト。

[[chat face=”画像情報” name=”キャラクター名” align=”配置” border=”枠の色” bg=”背景色”] 吹き出しの内容 [/chat]]

※最初と最後の[]以外をコピーしてください

 

chat faceには先ほどメモしたキャラクターのファイル名を、 nameにはキャラクターに付けたい名前を、alignはキャラを配置したい位置を(左:left、右:right)、borderには吹き出しの枠の色、bgには吹き出しの背景色(今回はいずれも青:blue)を入力。

 

すると、次のようになります(吹き出しの内容を変えました)。

 

やる夫
やる夫
はじめまして!

 

女性も同じように配置。

やる美
やる美
はじめまして!

 

無事、吹き出しが完成しました。

やってみて分かったことですが、キャラクターにしゃべらせると、愛着が湧きます。

これからお二人には活躍してもらいたいと思います。

吹き出しのショートコードをAddQuicktagに登録

JINのマニュアルに「完成したショートコードはAddQuickTagに登録しておくと便利だよ!」とあります。

AddQuickTagはプラグインのようです。

早速、導入してみました。

「プラグイン」⇒「新規追加」⇒キーワード「AddQuickTag」で検索⇒「インストール」
※有効化を忘れないでください

 

「プラグイン」⇒「インストール済みプラグイン」⇒AddQuickTagの「設定」をクリック。

 

「ボタンのラベル」は任意の分かりやすい名前を、開始タグに先ほどのショートコードを入力し、一番右にチェック(すべての項目にチェックが入ります)。

 

するとテキストエディターに設定したボタンが表示されますので、ワンクリックで吹き出しのショートコードを入力することができます。

 

やる夫
やる夫
とっても簡単だね!
やる美
やる美
すぐに登場できるね!

ブログにTwitterのタイムラインを埋め込んでみる

私のツイッターでは、お得な情報を中心に、みなさんのお役に立つ内容を発信しています。

他の方のブログをみると、ツイッターが埋め込まれているのを見かけるので、私もやってみたいと思います。

こちらも実際に、設定しながら、解説する形で進めていきます。

 

① タイムラインの埋め込みページ(https://publish.twitter.com/)を開く

② Twitter IDを入力し、「→」をクリック

 

③ 左側をクリック。

 

④ カスタマイズオプションを選択

 

⑤ サイズを500×500にし、アップデート。

 

⑥ コードをコピー。

 

⑦ ワードプレスのダッシュボードより「外観」⇒「ウィジェット」⇒「テキスト」を選択し、タイムラインを埋め込む場所を選択(今回はサイドバー)。

 

⑧ サイドバーにテキストタグが表示されているので、タイトルを入力し、テキストエディターで先ほどのコードを入力し、保存。

 

⑨ いい感じにTwitterのタイムラインが埋め込めました。

まとめ

ブログをはじめる際、ワードプレスは自由度が高いことがメリットだという情報は入手したいましたが、今回吹き出しとTwitterの埋め込みを行ってみて、その意味が少し分かったような気がします。

真の自由度が高いというのはもっと次元が違うのでしょうが、この程度のカスタマイズでも十分に楽しめます。

「AddQuickTag」というすごく便利なプラグインも使えるようになったので、レベルが少し上がったとも思います。

これからも、いろいろとカスタマイズしていきたいと思いつつ、今日はこれまで。

COMMENT

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