三十路!

1_2_1

WordPress専用プラグインSpeech bubble (ふきだしプラグイン)をスマートフォン向けに左寄せにした。

WordPress専用プラグインSpeech bubble (ふきだしプラグイン)をスマートフォン向けに左寄せにした。

Speech bubbleはショートコードで吹き出しを作成してくれる、非常に便利なWordPress専用のプラグインです。こんな感じに使えます。

呼んだか?

呼ばれた気がしたわ!!

公式サイトはこちら。

WordPress・吹き出しプラグイン(Speech Bubble) ver.1.0公開 | ありそうでなかったものを

WordPress・吹き出しプラグイン(Speech Bubble) ver.1.0公開
祝!!! ようやく作成していたプラグインをWordPressの公式プラグインサイトから公開することが出来ました。プラグイン名は"Speech Bubble"(吹き出しプラグイン)です。 特徴 ショートコードで記事に吹き出しとアイコンと名前が追加できます。 記事に直接…

詳しい解説はこちらがわかりやすいです。

広告

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

WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!
LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。今回は、漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグインのインストール方法&使い…

SnapCrab_NoName_2015-9-23_14-14-18_No-00

ただ、会話形式はPCサイトだったら普通に見やすいと思うですけど、スマホでは見にくい! こんな感じで、段落がばらばらになっちゃうですよね。スマホ全盛期の今、スマホのデザインを無視するわけにはいかないってことで、CSSでいじろうと決意。

いじくる。いじくる。いじくる。だめだwww わからんwww

プロに参考のCSSを書いてもらう。

WordPress(ワードプレス)の質問をお受けして、解決の方向へ

1日ぐらいでコードがもらえた。が、コピペだけではうまく表示されない。どうやら、おいさんのテーマーのせいらしいが、これ以上カスタマイズするなら追加料金がかかると言われ、断念。
(まぁ当然です。不満はまったくありません。)頂いたコードをもとに、Chromeの開発モードとにらめっこ。3時間ぐらいでできた。

必要は発明の母 と昔の人はいいましたが、追加料金を払いたくない一身でここまでできるもんだなとつくづく。

SnapCrab_NoName_2015-9-23_14-26-28_No-00

こんな感じになる。ええ感じや。と思って、PC版をみると左よりでなんか微妙な感じ。なるほど、PC版はそのままのCSSでスマホだけ変えたらいいちゃうのという発想に思い当たり、ググる。

できるっぽい。やってみる。やってみる。気付いたら更に1時間。時間が恐ろしい勢いでゴリゴリ減るw 最終的にこんな感じに

PC版(730以上の幅)

SnapCrab_NoName_2015-9-23_14-30-9_No-00

スマホ版(730以下の幅)

SnapCrab_NoName_2015-9-23_14-26-28_No-00

ばっちりやろ!!

ばっちりやな!

そうね!

 

CSSはこんな感じ。

/*デバイスの横幅が730以以上の場合*/
@media only screen and (min-width: 730px) {
 .sb-icon {
 /* 画像のいち調整*/
 margin-top: -5px!important;
} 
}
 /*デバイスの横幅が730以下の場合*/
@media only screen and (max-width: 729px) {
 
 /* 吹き出し画像の下(左)*/
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker, .sb-type-ln-flat > .sb-subtype-c > .sb-speaker {
 float: none!important;
}
.sb-type-ln-flat > .sb-subtype-a > .sb-content {
 float: left!important;
 margin-top: 5px!important;
 margin-right: auto!important;
 margin-left: 10px!important;
}
.sb-type-ln-flat > .sb-subtype-a > .sb-content:before {
 top: 18px!important;
 left: 15px!important;
 border-style: none solid solid!important;
}
.sb-type-ln-flat > .sb-subtype-a > .sb-content:after {
 top: 18px!important;
 left: 15px!important;
 border-style: none solid solid!important;
}
.sb-type-ln-flat > .sb-subtype-a > .sb-content > .sb-speech-bubble {
 border-radius: 15px 15px 15px 15px!important;
}
 /* 吹き出し画像の下(右を左に持ってくる)*/
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker, .sb-type-ln-flat > .sb-subtype-d > .sb-speaker {
 float: none!important;
 margin-left: 0px!important;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-content {
 float: left!important;
 margin-top: 5px!important;
 margin-left: 10px!important;
 margin-right: auto!important;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-content:before {
 top: 18px!important;
 left: 15px!important;
 border-style: none solid solid!important;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-content:after {
 top: 18px!important;
 left: 15px!important;
 border-style: none solid solid!important;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
 border-radius: 15px 15px 15px 15px!important;
}
 /* 考える吹き出し*/
.sb-type-ln-flat > .sb-subtype-a > .sb-speaker, .sb-type-ln-flat > .sb-subtype-c > .sb-speaker {
 float: none!important;
}
.sb-type-ln-flat > .sb-subtype-c > .sb-content {
 margin-top: 5px!important;
 margin-left: 60px!important;
 margin-right: auto!important;
}
.sb-type-ln-flat > .sb-subtype-b > .sb-speaker, .sb-type-ln-flat > .sb-subtype-d > .sb-speaker {
 float: none!important;
 margin-left: 0px!important;
}
.sb-type-ln-flat > .sb-subtype-d > .sb-content {
 float: left!important;
 margin-top: 5px!important;
 margin-left: 60px!important;
 margin-right: auto!important;
}
.sb-type-ln-flat > .sb-subtype-d > .sb-content:before {
 left: -17px!important;
}
.sb-type-ln-flat > .sb-subtype-d > .sb-content:after {
 left: -28px!important;
}
}

なお、おいさんの環境に合わしてるので、他人の環境でどうなるかは不明。

コメント&トラックバック

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. はじめまして、こちらの記事を参考にさせていただき、悩みのスマホ表示改善できました!
    ありがとうございました!

コメント歓迎やで!(匿名可)

*

Return Top