WPテーマ「STORK」カスタマイズ!「ミニ吹き出し」を作る方法!

WPテーマ「STORK」カスタマイズ!「ミニ吹き出し」を作る方法!

ここあです。

 

ワードプレステーマ「STORK」のカスタマイズ記事を

いろいろと書いています。

 

これまではテーマ全体をカスタマイズするための

記事を中心にご紹介していましたが

 

最近は記事を書くパーツ作りのための

カスタマイズ方法をご紹介しています。

 

ということで、今回も

AFFINGER5のあれが使いたい企画第3弾!

ミニ吹き出し」の作り方をご紹介します。

 

ミニ吹き出し」とは言うものの…

前回ご紹介した「ポラロイド風」画像と同じで

なかなか使いどころは難しそうですよね^^;

 

なので最近…

  • 記事の装飾に変化を取り入れたい
  • 他のブロガーと差別化したい
  • AFFINGER5ユーザーには負けたくない!(笑)

と思っているあなたはぜひ参考にしてくださいね!

 

今回のミニ吹き出しに関しては…

HTML」と「CSS」を使って表示させるだけなので

STORK」に限らずどのテーマにも応用できます^^

 

ミニ吹き出しを表示させる手順

今回もカスタマイズに慣れている人には

説明するまでもないコードの記述先からご説明致します。

分かっている方は読み飛ばしてくださいね。

 

CSSコードの記述先はここ

ミニ吹き出し」を表示させるための

CSSコードはこちらにコピペしましょう。

 

ダッシュボードメニューから

外観」→「カスタマイズ

ダッシュボードメニュー

 

以下の「追加CSS」の部分にCSSコードをコピペしてください。

追加CSS編集画面

 

「ミニ吹き出し」の種類

今回、あなたにご紹介する「ミニ吹き出し」は2種類。

1つ目は「AFFINGER5」とほぼ同じの「ミニ吹き出し

かわいいミニ吹き出し

 

色は自由に変えてください。

こんな感じに…

可愛いミニ吹き出し♥︎

 

もう1つはこんな「ミニ吹き出し

違うのも紹介しておかないと怒られそうだ…

 

ちょっとぼんやりと考え事をしているような

ぼやき」にも合いそうな吹き出しです…^^

 

どちらの「ミニ吹き出し」も使い方次第では

変化の付いた楽しい記事にできるので

お!いいやん!」と思ったらぜひご活用ください^^

 

それでは、CSSコードをご紹介していきます。

 

「ミニ吹き出し」のCSSコード

以下「ミニ吹き出し」のCSSコードを

追加CSS」にコピペしましょう。

 

それぞれコードを分けて書きますので

あなたが使いたいコードのみコピペしてくださいね^^

 

このミニ吹き出しがいい場合は…

.hukidashi-a{
font-size: 100%;
display: inline-block;
position: relative;
background: #fdd835;
color: #fff;
line-height: 1.4;
margin-bottom: 20px;
padding: 7px 20px;
border-radius: 22px;
}

.hukidashi-a:before{
content: '';
position: absolute;
margin-left: -10px;
border: 10px solid transparent;
border-top-width: 10px;
border-top-style: solid;
border-top-color: transparent;
border-top: 10px solid #fdd835;
top: 100%;
left: 40px;
z-index:1;
}

上記「CSSコード」をコピペしてください。

 

このミニ吹き出しがいい場合は…

.balloon-a {
font-size: 100%;
display: inline-block;
position: relative;
background: #ccc;
color: #fff;
border:solid 1px #ccc;
line-height: 1.4;
margin-bottom: 20px;
padding: 7px 20px;
border-radius: 22px;
}

.balloon-a:before{
content: "";
position: absolute;
top:65px;
left:35px;
width: 13px;
height: 12px;
bottom: 0;
background: #ccc;
border-radius: 50%;
}

.balloon-a:after{
content: "";
position: absolute;
top: 48px;
left:20px;
width: 20px;
height: 18px;
bottom: 3px;
background: #ccc;
border-radius: 50%;
}

上記「CSSコード」をコピペしましょう。

 

「ミニ吹き出し」の表示方法

ミニ吹き出し」のCSSコードがコピペ出来たら

HTMLコード」を記述して記事に表示させてみましょう。

 

ご使用時には以下の「HTML」コードを

記事内に記述してください。

このミニ吹き出しの「HTMLコード」は…

<p class="hukidashi-a">ここにテキスト</p>

もう1つの「ミニ吹き出し」…

このミニ吹き出しのHTMLコードは…

<p class="balloon-a">ここにテキスト</p>

 

それぞれ使いたい方をコピペしてくださいね^^

 

「ミニ吹き出し」を使いやすくするために

ミニ吹き出し」の表示が上手くできたら

HTMLコード」をワードプレスのプラグイン

AddQuicktagに登録しておきましょう。

 

AddQuicktag」に登録しておくことで

いつでもコードが表示できるので

使いやすさがさらに増します^^

 

AddQuicktag」に登録するには…

 

ダッシュボードメニューから

設定」→「AddQuicktag」をクリックし

設定画面を開き「HTML」コードを登録します。

※「AddQuicktag」未使用の方はプラグインをインストールしてくださいね。

 

AddQuicktag」の設定画面が開けたら

ミニ吹き出し」の「HTML」コードを以下のように登録しましょう。

AddQuicktag登録画面

 

左側の表示タイトルやアイコンは「AddQuicktag」を使う時に

あなたが分かりやすい名前で登録してください。

 

上記「Aの部分」には以下のコード(黄色い方のミニ吹き出しの場合…)

<p class="hukidashi-a">ここにテキスト

Bの部分」には、以下のコードを入力しましょう。

</p>

 

同様に「ぼんやり考え事風ミニ吹き出し」の場合は…

Aの部分」に…

<p class="balloon-a">ここにテキスト

Bの部分」に…

</p>

を入力します。

 

変更を保存」ボタンをクリックして

それぞれのコードが登録できれば完了です^^

 

登録できたら実際に「AddQuicktag」を使ってみて

「ミニ吹き出し」が表示されるかテストしてみましょう。

 

テキスト編集モード

 

私はこのようにバッチリ表示されました^^

ここにテキスト

ここにテキスト

 

 

「ミニ吹き出し」のカスタマイズ方法

続いて「ミニ吹き出し」のカスタマイズ方法です^^

 

ミニ吹き出し」のベースの色や

文字の色を変えたい方もいると思うので

調整方法だけ簡単に説明しておきます。

 

ミニ吹き出し」のベースカラーを変更する方法

まずはベースカラーの変更方法から…

 

↓こちらのミニ吹き出しの「ベースカラー」を変えたい場合は…

ここにテキスト

以下のカラーコードを変更してください。

全てのコードは書きませんので、同じ部分を探してくださいね^^;

.hukidashi-a{
background: #fdd835;
}

.hukidashi-a:before{
border-top: 10px solid #fdd835;
}

ピンク色の文字の部分が

ベースカラー」を変えるためのカラーコードです。

 

吹き出し」のデザインを作る場合…

テキストが載るベースの部分と、吹き出しになる

三角の部分が別々のコードになります。

 

なので、ベースカラーを変更する場合は

同時に2箇所の色を変える必要があります。

 

また「ぼんやり考え事風のミニ吹き出し」の場合は

デザインを構成しているコードが

3つに分かれています。

 

ということで「ぼんやり考え事風のミニ吹き出し

ここにテキスト

 

のベースカラーを変更する場合は…

以下3箇所のカラーコードを全て同じ色に変更しましょう。

.balloon-a {
background: #ccc;
}

.balloon-a:before{
background: #ccc;
}

.balloon-a:after{
background: #ccc;
}

 

上記コードから見ても分かる通り

ベースカラー」を変更したい場合は

background:のカラーコードを変えればOKです^^

 

続いて「文字の色」を変えたい場合の説明をします。

 

ミニ吹き出し」のフォントカラーを変更する方法

ミニ吹き出し」の文字色を変更したい場合

↓こちらのミニ吹き出しの「文字色」を変える場合は…

ここにテキスト

 

以下のカラーコードを変更しましょう。
※同じ場所をさがしてくださいね。

.hukidashi-a{
color: #fff;
}

color: #fff;のカラーコードを変更すれば

文字の色が変わります。

 

↓また、こちらの「ぼんやり考え事風のミニ吹き出し」の場合は…

ここにテキスト

 

以下のカラーコードを変更しましょう。
※同じ場所をさがしてください^^

.balloon-a{
color: #fff;
}

こちらもcolor: #fff;のカラーコードを変更すれば

文字の色が変更できます^^

 

さて、ここまでは初級編です。

ここから先は中級編です。チャレンジャーの方のみ読んでください^^

 

「ミニ吹き出し」の使い方応用編(中級編)

さてさて、ここからはチャレンジャーのためだけの

中級編講座になります^^

 

せっかくなので応用編も一応レクチャーしておきますね。

かなりややこしいので、途中で「無理だ!」と思った方は

遠慮なく挫折してください(笑)

 

CSSについて勉強したい」という粘り強いあなたは

がんばりましょう!

 

「ミニ吹き出し」を移動させる方法

さてさて、せっかく「ミニ吹き出し」を使うなら

より効果的に使える方がお得感が増します(笑)

 

例えば、こんな使い方も可能です。

さすがに一人で全部は食べ切れない!

わお!美味しいそう!

ポラロイド風」画像に少し重ねてみたり…

 

見出しの補足にも使えます!

「ミニ吹き出し」はとても便利!

見出しに重ねてみたりと…

使い方次第ではかなり表現の幅が広がります^^

 

ということで「ミニ吹き出し」を効果的に使う

ミニ吹き出し」を移動させる方法を説明致します。

 

まずは「追加CSS」の部分に

新たに以下のCSSを追加してください。

 

このミニ吹き出しの追加コードは…

.hukidashi-wrap-a{
margin-bottom:-63px;
margin-left:170px;
}

 

このミニ吹き出しの追加コードは…

.balloon-wrap-a{
margin-bottom:-20px;
margin-left:170px;
}

CSSコードが追加できたら、ひとまずは準備完了です。

 

ミニ吹き出し」を所定の位置に移動させるために

HTML」コードを以下のように記述しましょう。

このミニ吹き出しの追加コードは…

<div class="hukidashi-wrap-a">
<p class="hukidashi-a">ここにテキスト</p>
</div>

 

このミニ吹き出しの追加コードは…

<div class="balloon-wrap-a">
<p class="balloon-a">ここにテキスト</p>
</div>

簡単に構造の説明をすると…

 

ミニ吹き出し」を表示させるための「pタグ」を

ミニ吹き出し」を移動させるための「divタグ」で囲み

divタグ」に位置指定をして移動させるというHTML構造になります。

 

後は、最初に追加した「CSSコード」

.balloon-wrap-a{
margin-bottom:-20px;
margin-left:170px;
}

-20px170pxの数値を入力し、

あなたが「ミニ吹き出し」を配置させたい場所まで

調整してください。

 

位置調整については、あなたのサイトの設定によります。

一概にこの数値が良いとは割り出せませんので

あなたご自身の手で調整してみてください^^;

 

「ミニ吹き出し」を移動させる時の注意点

今回私が紹介した「ミニ吹き出し」のコードは

.hukidashi-a.balloon-aのそれぞれ1種類ずつしかありません。

 

だから「ミニ吹き出し」の位置調整をする場合

CSS」や「HTML」コードが1種類だと

全てのコードに反映されてしまいます^^;

 

なので、個別に「ミニ吹き出し」の位置調整をする場合には

必ず新たに「CSSコード」を作り替えて

そのコードを「HTMLコード」にも反映させてください。

 

CSSコードを追加したい場合は、例えば…

.hukidashi-aaの部分を

全てbに変えて.hukidashi-bにする。

 

CSSコード」を.hukidashi-bと変えた場合は

HTMLコード」の指定も<p class="hukidashi-b">ここにテキスト</p>

といった具合にaの部分をbに変えれば個別に指定ができます。

 

CSSコード」と「HTMLコード」を指定する要領が分かれば

かなり上手く個別に使えますので

一度、色替えでも良いので同じコードを全て複製しつつ

 

必要な箇所だけ文字を変えて新たに

違うコードを作ってみてください^^

 

やってみたけど無理!」という方は

素直に諦めましょう(笑)

私もこれ以上はどう説明したら伝わるかわかりません^^;

 

「ミニ吹き出し」を作る方法まとめ

今回はAFFINGER5の

あれが使いたい企画第3弾として

ミニ吹き出し」の作り方をご紹介しました。

 

もちろんAFFINGER5のショートコードのように

使い勝手抜群のアイテムというワケにはいきませんが

いろいろと自分でやろうと思えばこうして作ることは可能です。

 

だからと言って、私は単純に「AFFINGER5」から

コードをコピーして持ってきているというワケでもなく

同じようなアイテムを作ることができないか?と

 

毎回いろいろなサイトを見てヒントを得ながら

独自にコードを作っています。

 

なので、決してテーマ開発者のように

100%完璧なコードではありませんが

 

少しでも他のブロガーと差別化したいという方のために

こうしてできるだけ具体的に詳しく

コードの使い方や見方を解説しています^^

 

私のサイトを見て「このサイトが一番分かりやすい」って

言ってもらえるとスゴく嬉しいですし

実際にそう言ってくれるユーザーさんもいらっしゃいます。

 

私はデザインが好きだし、カスタマイズするための

いろいろなコードをご紹介することで

私自身の勉強にもなっています。

 

今回はいつもよりかなり分かりにくい

コードの使い方になっているかもしれませんが

ぜひ一度あなたもコードをコピーしてみて

上手く活用してもらえたらと思います。

 

また面白そうなアイテムができたら

ご紹介しようと思いますので

楽しみにしていただけると嬉しいです^^

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

最後までお読みいただきありがとうございました!

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!「ミニ吹き出し」を作る方法!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。