Speech bubble (ふきだしプラグイン)

Version Description

Release Info

Developer	snb arisoude-nakatta
Plugin	Speech bubble (ふきだしプラグイン)
Version	1.0.0
Comparing to
See all releases

Version 1.0.0

Files changed (19) hide show

README +190 -0
classes/SnbSpeechBubble.php +564 -0
css/sb-no-br.css +10 -0
css/sb-type-drop.css +324 -0
css/sb-type-fb-flat.css +354 -0
css/sb-type-fb.css +372 -0
css/sb-type-ln-flat.css +374 -0
css/sb-type-ln.css +380 -0
css/sb-type-pink.css +339 -0
css/sb-type-rtail.css +327 -0
css/sb-type-std.css +321 -0
css/sb-type-think.css +250 -0
img/1.jpg +0 -0
img/2.jpg +0 -0
screenshot-1.png +0 -0
screenshot-2.png +0 -0
screenshot-3.png +0 -0
screenshot-4.png +0 -0
speech-bubble.php +31 -0

README ADDED Viewed

	@@ -0,0 +1,190 @@


1	+ === Speech Bubble ===
2	+ Contributors: snb arisoude-nakatta
3	+ Tags: SpeechBubble Post
4	+ Requires at least: 3.7.1
5	+ Tested up to: 3.7.1
6	+ Stable tag: 1.0.0
7	+ License: GPLv2 or later
8	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
9	+
10	+ Easy to add Speech bubbles in your post.
11	+
12	+
13	+ == Description ==
14	+ You can easily add speech bubble ornament in your post, without direct HTML&CSS coding.
15	+
16	+ <h3>Features</h3>
17	+ <ul>
18	+ <li>Ornament your posts with speech bubbles (like Chat,Act,lect.,etc)</li>
19	+ <li>9 pattern speech bubbles are available (at version 1.0)</li>
20	+ <li>Fit narrow frame automatically</li>
21	+ <li>By short code, use speech bubble.</li>
22	+ <li>Quickly use them without using direct HTML&CSS code and database</li>
23	+ <li>In a post, you can use same speach bubble more easily (Preset Type)</li>
24	+ <li>Not support IE8</li>
25	+ </ul>
26	+
27	+ == Installation ==
28	+
29	+ <ol>
30	+ <li>See WordPress ControlPanel.</li>
31	+ <li>Log in.</li>
32	+ <li>Click Plugin->Add New.</li>
33	+ <li>Search Speech Bubble Plugin</li>
34	+ <li>Click Active Plugin button.</li>
35	+ </ol>
36	+
37	+ You can use Speach bubbles in your post.
38	+
39	+ == Frequently Asked Questions ==
40	+
41	+ = How to add new icon =
42	+ Upload to speach-bubble/img/ folder.
43	+
44	+ = How to use "Quick" type short code =
45	+
46	+ Write the below example to post by "Text mode".
47	+
48	+ <code>
49	+ [speech_bubble type="std" subtype="a" icon="1.jpg" name="A san" ]Ask something. [/speech_bubble]
50	+ [speech_bubble type="std" subtype="b" icon="2.jpg" name="B san" ]Answer something.[/speech_bubble]
51	+ [speech_bubble type="std" subtype="c" icon="1.jpg" name="A san" ]Think something. [/speech_bubble]
52	+ [speech_bubble type="std" subtype="d" icon="2.jpg" name="A san" ]Think something, too.[/speech_bubble]
53	+ </code>
54	+
55	+ <p>type: std, fb, fb-flat,ln,ln-flat,pink, rtail,drop, think</p>
56	+ <p>subtype: a,b,c,d </p>
57	+ <p>icon: Use images in "speach-bubble/img/" folder.</p>
58	+
59	+ <br>
60	+ = How to use "ID preset" type short code =
61	+ Write the below example to post by "Text mode".
62	+
63	+ <code>
64	+ [speech_bubble_preset]
65	+ {sb_id=11:type=std ,subtype=left1,icon=1.jpg,name=Antonio}
66	+ {sb_id=22A:type=st d, subtype=right1,icon=2.jpg,name=Sebastian}
67	+ {sb_id=33:type=std ,subtype=left2,icon=1.jpg,name=Antonio}
68	+ {sb_id=44:type=st d, subtype=right2,icon=2.jpg,name=Sebastian}
69	+ {SPEECH_BUBBLE_DELIMITER}
70	+ [speech_bubble_id sb_id=11]Ask something. [/speech_bubble_id]
71	+ [speech_bubble_id sb_id=22A]Answer something.[/speech_bubble_id]
72	+ [speech_bubble_id sb_id=33]Think something. [/speech_bubble_id]
73	+ [speech_bubble_id sb_id=44]Think something, too.[/speech_bubble_id]
74	+ [/speech_bubble_preset]</code>
75	+
76	+ <p>subtype: a,b,c,d,L1,R1,L2,R2,left1,right1,left2,right2 </p>
77	+ <p>This {:} section is for preset id. Write this section from [speech_bubble_useid] to {SPEECH_BUBBLE_DELIMITER}.</p>
78	+ <br>
79	+
80	+ = These short code doesn't work well. Why? =
81	+ <p> We think it cause maybe by miss type.</p>
82	+ <p>Use Developer tools -> element and Search next message in html (for example in chrome)</p>
83	+ <ul>
84	+ <li>"SB_ALERT_TYPE_MISSING"</li>
85	+ <li>"SB_ALERT_SUBTYPE_MISSING"</li>
86	+ <li>"SB_ALERT_ICON_EXTENSION_MISSING"</li>
87	+ <li>"SB_ALERT_DELIMITER_MISSING"</li>
88	+ </ul>
89	+ <p>These code will help you.</p>
90	+ <br>
91	+
92	+ = These short code doesn't work well. Why? (in ID preset type) =
93	+ <p> We think it maybe cause by miss type, too. But ID preset type is more complicated. </p>
94	+ <p>And, then we prepare the analysing flag for preset type. Input like,</p>
95	+ <code>
96	+ [speech_bubble_preset id_analysis="ON"]
97	+ {sb_id=11:type=ste ,subtype=left1,icon=1.jpg,name=Antonio}
98	+ {SPEECH_BUBBLE_DELIMITER}
99	+ [speech_bubble_id sb_id=11]Ask something. [/speech_bubble_id]
100	+ [/speech_bubble_preset]
101	+ </code>
102	+ Show the analysed result like below in your post.
103	+ <code>
104	+ ---SPEECH_BUBBLE_ID_ANALYSIS_START---
105	+ sb_id=0001
106	+ =>type="std" subtype="a" icon="1.jpg" name="A san"
107	+ sb_id=0002
108	+ =>type="std" subtype="b" icon="2.jpg" name="B san"
109	+ sb_id=11
110	+ =>type="SB_ALERT_TYPE_MISSING" subtype="a" icon="1.jpg" name="Antonio"
111	+ ---SPEECH_BUBBLE_ID_ANALYSIS_END---
112	+ </code>
113	+
114	+ <p>In this example, I do miss type type=<strong>"ste"</strong>(std:correct), and show type="SB_ALERT_TYPE_MISSING".</p>
115	+ <p>sb_id=0001 and sb_id=0002 are default preset id.</p>
116	+ <p> Also use id_analysis = "OFF", If this flag is off, this short code work as normal ID preset type.</p>
117	+ <br>
118	+
119	+
120	+ = Using ID preset type, line's oreder is little bit upset. Why? =
121	+ <p>We know this sympton, and couldn't pursue the exact cause of it. One of example is below,</p>
122	+
123	+ <code>
124	+ FIRST
125	+ [speech_bubble_preset id_analysis="ON"]
126	+ {sb_id=11:type=std,subtype=left1,icon=1.jpg,name=Antonio}
127	+ {SPEECH_BUBBLE_DELIMITER}
128	+ SECOND
129	+ [speech_bubble_id sb_id=11]Ask something. [/speech_bubble_id]
130	+ [/speech_bubble_preset]
131	+ THIRD
132	+ </code>
133	+
134	+ Result of above code.
135	+ <code>
136	+ SECOND
137	+ "SpeechBubble"
138	+ FIRST
139	+ THIRD
140	+ </code>
141	+
142	+ <p>We have Two solution for this</p>
143	+
144	+ Solution 1. Use all FIRST,SECOND,THIRD in speech_bubble_preset shortcode.
145	+ <code>
146	+ [speech_bubble_preset id_analysis="ON"]
147	+ {sb_id=11:type=std,subtype=left1,icon=1.jpg,name=Antonio}
148	+ {SPEECH_BUBBLE_DELIMITER}
149	+ FIRST
150	+ SECOND
151	+ THIRD
152	+ [speech_bubble_id sb_id=11]Ask something. [/speech_bubble_id]
153	+ [/speech_bubble_preset]
154	+ </code>
155	+
156	+ Solution 2. Use FIRST,SECOND in speech_bubble_preset shortcode, and THIRD is used in lower outside of shortcode.
157	+ <code>
158	+ [speech_bubble_preset id_analysis="ON"]
159	+ {sb_id=11:type=std,subtype=left1,icon=1.jpg,name=Antonio}
160	+ {SPEECH_BUBBLE_DELIMITER}
161	+ FIRST
162	+ SECOND
163	+ [speech_bubble_id sb_id=11]Ask something. [/speech_bubble_id]
164	+ [/speech_bubble_preset]
165	+ THIRD(outside of shortcode)
166	+ </code>
167	+
168	+
169	+
170	+ == Screenshots ==
171	+ 1. Example, using type="std".
172	+ 1. Fit narrow frame automatically, use type="std".
173	+ 1. Short code sample
174	+ 1. Using type="drop", please try other type!
175	+
176	+
177	+ == Upgrade Notice ==
178	+
179	+ Make back up of added images by yourself.
180	+
181	+ == Changelog ==
182	+
183	+ = var 1.0.0 - Newly created =
184	+ <ul>
185	+ <li>9 design patterns are available</li>
186	+ <li>9 pattern :std, fb, fb_flat,ln,ln_flat,pink, rtail,drop, think</li>
187	+ <li>2 type short codes are available</li>
188	+ <li>2 type : "Quick", "ID preset"</li>
189	+ </ul>
190	+

classes/SnbSpeechBubble.php ADDED Viewed

	@@ -0,0 +1,564 @@


1	+ <?php
2	+ /**
3	+ * Snb Speech bubble
4	+ */
5	+ class SnbSpeechBubble {
6	+
7	+ private $sb_reg_type = array( 'std', 'fb', 'fb-flat', 'ln', 'ln-flat', 'pink', 'rtail', 'drop', 'think' );
8	+ private $sb_reg_subtype = array( 'a', 'b', 'c', 'd' );
9	+ private $sb_asc_subtype = array(
10	+ 'L1' => 'a',
11	+ 'R1' => 'b',
12	+ 'L2' => 'c',
13	+ 'R2' => 'd',
14	+ 'a' => 'a',
15	+ 'b' => 'b',
16	+ 'c' => 'c',
17	+ 'd' => 'd',
18	+ 'left1' =>'a',
19	+ 'right1' =>'b',
20	+ 'left2' =>'c',
21	+ 'right2' =>'d'
22	+ );
23	+ private $sb_reg_icon_ext = array( 'jpg', 'png', 'gif', 'svg', 'tif' );
24	+
25	+
26	+ /**
27	+ * Speech Bubble folder const
28	+ * @see shortcode_speech_bubble(), shortcode_speech_bubble_id()
29	+ */
30	+
31	+ const PLUGIN_FOLDER_PATH = 'speech-bubble/';
32	+ const PLUGIN_FOLDER_PATH_CSS = 'speech-bubble/css/';
33	+ const PLUGIN_FOLDER_PATH_IMG = 'speech-bubble/img/';
34	+
35	+
36	+ /**
37	+ * alert message const
38	+ * @see check_sb_type(), check_sb_subtype(), check_icon_extension_exists()
39	+ * @see get_sb_arguments_type(), get_sb_arguments_subtype(), get_sb_arguments_icon(), check_icon_reg_extension_exists()
40	+ */
41	+ const SB_ALERT_SBID_INCLUDE_WHITESPACE = 'SB_ALERT_SBID_INCLUDE_WHITESPACE';
42	+
43	+ const SB_ALERT_TYPE_MISSING = 'SB_ALERT_TYPE_MISSING';
44	+ const SB_ALERT_SUBTYPE_MISSING = 'SB_ALERT_SUBTYPE_MISSING';
45	+ const SB_ALERT_ICON_EXTENSION_MISSING = 'SB_ALERT_ICON_EXTENSION_MISSING';
46	+ const SB_ALERT_DELIMITER_MISSING = 'SB_ALERT_DELIMITER_MISSING';
47	+
48	+ /**
49	+ * constructor
50	+ */
51	+ public function __construct() {
52	+ add_action( 'wp_enqueue_scripts', array( $this, 'action_wp_enqueue_scripts' ) );
53	+
54	+ add_shortcode( 'speech_bubble', array($this, 'shortcode_speech_bubble' ) );
55	+ add_shortcode( 'speech_bubble_preset', array($this, 'shortcode_speech_bubble_preset' ) );
56	+ add_shortcode( 'speech_bubble_id', array($this, 'shortcode_speech_bubble_id' ) );
57	+ }
58	+
59	+
60	+ /**
61	+ * action wp_enqueue_scripts
62	+ */
63	+ public function action_wp_enqueue_scripts() {
64	+ wp_register_style( 'sb-type-std', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-std.css' ) );
65	+ wp_enqueue_style( 'sb-type-std' );
66	+ wp_register_style( 'sb-type-fb', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-fb.css' ) );
67	+ wp_enqueue_style( 'sb-type-fb' );
68	+ wp_register_style( 'sb-type-fb-flat', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-fb-flat.css' ) );
69	+ wp_enqueue_style( 'sb-type-fb-flat' );
70	+ wp_register_style( 'sb-type-ln', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-ln.css' ) );
71	+ wp_enqueue_style( 'sb-type-ln' );
72	+ wp_register_style( 'sb-type-ln-flat', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-ln-flat.css' ) );
73	+ wp_enqueue_style( 'sb-type-ln-flat' );
74	+ wp_register_style( 'sb-type-pink', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-pink.css' ) );
75	+ wp_enqueue_style( 'sb-type-pink' );
76	+ wp_register_style( 'sb-type-rtail', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-rtail.css' ) );
77	+ wp_enqueue_style( 'sb-type-rtail' );
78	+ wp_register_style( 'sb-type-drop', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-drop.css' ) );
79	+ wp_enqueue_style( 'sb-type-drop' );
80	+ wp_register_style( 'sb-type-think', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-type-think.css' ) );
81	+ wp_enqueue_style( 'sb-type-think' );
82	+
83	+ wp_register_style( 'sb-no-br', plugins_url( self::PLUGIN_FOLDER_PATH_CSS . 'sb-no-br.css' ) );
84	+ wp_enqueue_style( 'sb-no-br' );
85	+ }
86	+
87	+ /**
88	+ * Shortcode [speech_bubble][/] call this function
89	+ *
90	+ * @param string shortcode's argument ( type, subtype, icon ,name )
91	+ * @param string content (saying)
92	+ * @return string speech bubble divs
93	+ */
94	+ public function shortcode_speech_bubble( $atts, $content = '' ) {
95	+ $content = (string) $content;
96	+ if ( 0 == strlen( $content ) ) {
97	+ return '';
98	+ }
99	+
100	+ $default_atts = array(
101	+ 'type' => 'std',
102	+ 'subtype' => 'L1',
103	+ 'icon' => '1.jpg',
104	+ 'name' => 'no name'
105	+ );
106	+ $atts = shortcode_atts( $default_atts, $atts );
107	+
108	+ self::make_speech_bubble_divs( $code );
109	+
110	+ $sb_type = self::check_sb_type( $atts['type'] );
111	+ $sb_subtype = self::check_sb_subtype( $atts['subtype'] );
112	+ $user_icon = self::check_icon_extension_exists( $atts['icon'] );
113	+ $sb_name = $atts['name'];
114	+
115	+ $sb_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $user_icon );
116	+
117	+ return sprintf( $code, $sb_type, $sb_subtype, $sb_icon_path, $sb_name, $content );
118	+ }
119	+
120	+ /**
121	+ * Make the structured divs
122	+ *
123	+ * @param string &$div_code structured divs
124	+ */
125	+ public function make_speech_bubble_divs( &$div_code ) {
126	+ $div_code = <<<EOD
127	+ <div class="sb-type-%s">
128	+ <div class="sb-subtype-%s">
129	+ <div class="sb-speaker">
130	+ <div class="sb-icon">
131	+ <img src="%s" class="sb-icon">
132	+ </div>
133	+ <div class="sb-name">%s</div>
134	+ </div>
135	+ <div class="sb-content">
136	+ <div class="sb-speech-bubble">%s</div>
137	+ </div>
138	+ </div>
139	+ </div>
140	+ EOD;
141	+ return;
142	+ }
143	+
144	+
145	+
146	+ /**
147	+ * Check whether a user's setting speech bubble type is in registered types.
148	+ *
149	+ * @param string $check_arguments
150	+ * @return string type name or ALERT MESSAGE
151	+ */
152	+ function check_sb_type( $check_arguments ) {
153	+ $match_type = preg_replace( '/(\s\|　)/', '', $check_arguments );
154	+ $match_type = str_replace( array( '\r\n' , '\n' , '\r' ), '', $match_type );
155	+
156	+ //typeが存在するかを確認して，存在しなければtype_missingを入力
157	+ if( FALSE === in_array( $match_type, $this->sb_reg_type ) ) {
158	+ $match_type = self::SB_ALERT_TYPE_MISSING;
159	+ }
160	+
161	+ return $match_type;
162	+ }
163	+
164	+ /**
165	+ * Check whether a user's setting speech bubble subtype is in registered subtypes.
166	+ *
167	+ * @param string $check_arguments
168	+ * @return string subtype name or ALERT MESSAGE
169	+ */
170	+ function check_sb_subtype( $check_arguments ) {
171	+ $match_subtype = preg_replace( '/(\s\|　)/', '' , $check_arguments );
172	+ $match_subtype = str_replace( array( '\r\n', '\n', '\r'), '', $match_subtype );
173	+
174	+ //subtypeが存在するかを確認して，存在しなければsubtype_missingを入力
175	+ if( FALSE === in_array( $match_subtype, $this->sb_reg_subtype ) ) {
176	+ $match_subtype = self::SB_ALERT_SUBTYPE_MISSING;
177	+ }
178	+
179	+ return $match_subtype;
180	+ }
181	+
182	+
183	+ /**
184	+ * Check whether a user's setting icon name has extion.
185	+ *
186	+ * @param string $icon_file
187	+ * @return string icon file name or ALERT MESSAGE
188	+ */
189	+ function check_icon_extension_exists( $icon_file ) {
190	+ $pos_ext = strrpos( $icon_file, '.' );
191	+ $len_file = strlen( $icon_file );
192	+
193	+ if( $len_file - 4 == $pos_ext ) {
194	+ //拡張子ありの場合,そのまま出力
195	+ return $icon_file;
196	+ } else {
197	+ return self::SB_ALERT_ICON_EXTENSION_MISSING;
198	+ }
199	+ }
200	+
201	+
202	+
203	+ /**
204	+ * Shortcode [speech_bubble_preset][/] call this function
205	+ *
206	+ * @param string shortcode's argument ( type, subtype, icon ,name )
207	+ * @param string content (saying)
208	+ */
209	+ public function shortcode_speech_bubble_preset( $atts, $content = '' ) {
210	+ $content = (string) $content;
211	+ if ( 0 == strlen( $content ) ) {
212	+ return '';
213	+ }
214	+
215	+ $default_atts = array( 'id_analysis' => 'off' );
216	+ $atts = shortcode_atts( $default_atts, $atts );
217	+
218	+ //idの解析をするかどうかの引数
219	+ $sb_id_analysis = $atts['id_analysis'];
220	+
221	+ $b_use_analysis = FALSE;
222	+ if( 0 == strcasecmp( $sb_id_analysis, 'on' ) ) {
223	+ $b_use_analysis = TRUE;
224	+ }
225	+
226	+ //delimiterで内容とIDsetsを分割する
227	+ $my_delimiter = '{SPEECH_BUBBLE_DELIMITER}';
228	+ $idsets_and_post = explode( $my_delimiter, $content );
229	+
230	+ //delimiterが$contentにない場合
231	+ if ( strcmp( $content, $idsets_and_post[0] ) == 0 ) {
232	+
233	+ if( FALSE === $b_use_analysis ) {
234	+ //中身のみ表示
235	+ echo $content;
236	+ return;
237	+ } elseif ( TRUE === $b_use_analysis ) {
238	+ //エラー解析結果を表示
239	+ echo self::SB_ALERT_DELIMITER_MISSING;
240	+ return;
241	+ }
242	+ }
243	+
244	+ //delimiterがあり，$contentがid_sets部分と記事($my_post)部分に分割。
245	+ $idsets = $idsets_and_post[0];
246	+ $my_post = $idsets_and_post[1];
247	+
248	+ //デフォルトの引数タイプを作成
249	+ self::make_default_arg_array( $id_arg_array );
250	+
251	+ //$id_setsからショートコード用の引数$id_arg_arrayを取り出す
252	+ $is_invalid_idsets = self::make_array_from_idsets( $idsets, $id_arg_array );
253	+
254	+
255	+ //無効なショートコード用引数なので$my_post部分のみを書き出して，終了
256	+ if ( FALSE === $is_invalid_idsets ) {
257	+ echo $my_post;
258	+ return ;
259	+ }
260	+
261	+ //idを解析した内容を出力する 'id_analysis' => 'on'のとき
262	+ if( TRUE === $b_use_analysis ) {
263	+ $res = '---SPEECH_BUBBLE_ID_ANALYSIS_START---<br>';
264	+ foreach ( $id_arg_array as $key => $value ) {
265	+ $res .= $key . '<br>' . ' =>' . $value . '<br>';
266	+ }
267	+ $res .= '---SPEECH_BUBBLE_ID_ANALYSIS_END---<br>';
268	+ echo $res;
269	+ return;
270	+ }
271	+
272	+ //$id_arg_arrayを降順にする
273	+ krsort( $id_arg_array );
274	+
275	+ //$id_arg_arrayから$id_arrayを作成する
276	+ foreach( $id_arg_array as $key => $value ) {
277	+ $id_array[] = $key;
278	+ }
279	+
280	+ //$id_arg_arrayがポスト部分に存在するかを確認し,
281	+ //post部分にあるid=XXX部分をすべて,id_arg_arrayに置換する
282	+ $rep_count_total = 0;
283	+ foreach( $id_array as $key => $value ) {
284	+ $my_post = str_replace( $value, $id_arg_array[ $value ], $my_post, $rep_count_tmp );
285	+ $rep_count_total += $rep_count_tmp;
286	+ }
287	+
288	+ //置換が0なら，$my_post部分のみを書き出して，終了
289	+ if( 0 == $rep_count_total ) {
290	+ echo $my_post;
291	+ return ;
292	+ }
293	+
294	+ //置換された部分をショートコードを通して出力
295	+ $my_post = do_shortcode( $my_post );
296	+ echo $my_post;
297	+ return;
298	+
299	+ }
300	+
301	+ /**
302	+ * Make default arg_array
303	+ *
304	+ * @param array arg_array[IN/OUT]
305	+ */
306	+ function make_default_arg_array( &$arg_array ) {
307	+ $arg_array = array(
308	+ 'sb_id=0001' => 'type="std" subtype="a" icon="1.jpg" name="A san"',
309	+ 'sb_id=0002' => 'type="std" subtype="b" icon="2.jpg" name="B san"',
310	+ );
311	+ return;
312	+ }
313	+
314	+
315	+ /**
316	+ * Shortcode [speech_bubble_id][/] call this function
317	+ *
318	+ * @param shortcode's argument ( type, subtype, icon ,name )
319	+ * @param content (saying)
320	+ * @return speech bubble divs
321	+ */
322	+ public function shortcode_speech_bubble_id( $atts, $content = '' ) {
323	+ $content = (string) $content;
324	+ if ( 0 == strlen( $content ) ) {
325	+ return '';
326	+ }
327	+
328	+ $default_atts = array(
329	+ 'type' => 'std',
330	+ 'subtype' => 'L1',
331	+ 'icon' => '1.jpg',
332	+ 'name' => 'no name'
333	+ );
334	+ $atts = shortcode_atts( $default_atts, $atts );
335	+
336	+ self::make_speech_bubble_divs( $code );
337	+
338	+ $speaker_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $atts['icon'] );
339	+
340	+ return sprintf( $code, $atts['type'], $atts['subtype'], $speaker_icon_path, $atts['name'], $content );
341	+ }
342	+
343	+ /**
344	+ * Make arg associated array
345	+ *
346	+ * Analyse id_sets {id1;arg A} are valid and Make arg A's associated array
347	+ *
348	+ * @param string $id_sets_str
349	+ * @param array &$arg_array
350	+ * @return bool valid arg
351	+ */
352	+ function make_array_from_idsets( $id_sets_str, &$arg_array ) {
353	+ $idsets_tmp = $id_sets_str;
354	+ $idsets_tmp = str_replace( '}', ':', $idsets_tmp );
355	+ $idsets_tmp = str_replace( '{', '', $idsets_tmp );
356	+
357	+ $idsets_tmp = explode( ':', $idsets_tmp );
358	+
359	+ for( $i = 0; $i < count( $idsets_tmp ); ++$i ) {
360	+ if( $idsets_tmp[i] !== NULL ) {
361	+ $idsets_tmp[i] = rtrim( $idsets_tmp[i] );
362	+ }
363	+ }
364	+
365	+ $id_arr = array();
366	+ $type_arr = array();
367	+ $subtype_arr = array();
368	+ $icon_arr = array();
369	+ $name_arr = array();
370	+
371	+ //$idsets_tmpの配列内容を確かめる $id_argとして配列要素を取り出す
372	+ foreach( $idsets_tmp as $id_arg ) {
373	+ //idを取り出し，配列にする
374	+ array_push( $id_arr, self::get_sb_id( $id_arg ) );
375	+ array_push( $type_arr, self::get_sb_arguments_type( $id_arg ) );
376	+ array_push( $subtype_arr, self::get_sb_arguments_subtype( $id_arg ) );
377	+ array_push( $icon_arr, self::get_sb_arguments_icon( $id_arg ) );
378	+ array_push( $name_arr, self::get_sb_arguments_name( $id_arg ) );
379	+ }
380	+
381	+
382	+ $valid_arr = array();
383	+ //idと引数(type,subtype,icon,name)をチェックして,有効なら連想配列を作成する。
384	+ self::make_valid_id_sets( $valid_arr, $arg_array, $id_arr, $type_arr, $subtype_arr, $icon_arr, $name_arr );
385	+
386	+ //有効なidsetが見つかれば，
387	+ return TRUE;
388	+ }
389	+
390	+
391	+ /**
392	+ * Get sb_id
393	+ *
394	+ * Check given string is sb_id and Get sb_id argument
395	+ *
396	+ * @param string $check_sb_id
397	+ * @return string or NULL (valid=sb_id, invalid=NULL)
398	+ */
399	+ function get_sb_id( $check_sb_id ) {
400	+ $check_sb_id = str_replace( array('\r\n', '\n', '\r' ), '', $check_sb_id );
401	+ $match_result = preg_match( '/sb_id=([a-zA-Z0-9_\-\s]*)/u', $check_sb_id, $match_id );
402	+
403	+ if( 1 === $match_result ) {
404	+ $match_id = $match_id[1];
405	+
406	+ $chech_result = preg_match( '/([\s\|　])/', $match_id, $str_tmp );
407	+ if( 1 === $chech_result ) {
408	+ return self::SB_ALERT_SBID_INCLUDE_WHITESPACE;
409	+ }
410	+ } elseif ( 0 === $match_result ) {
411	+ $match_id = NULL;
412	+ } elseif ( FALSE === $match_result ) {
413	+ $match_id = NULL;
414	+ }
415	+
416	+ return $match_id;
417	+ }
418	+
419	+
420	+ /**
421	+ * Get type
422	+ *
423	+ * Check given string is type of speech bubble and Get given type from users
424	+ * Make some misspellling or some spaces eliminate.
425	+ *
426	+ * @param string $check_arguments
427	+ * @return string or NULL (valid=sb_id, invalid=NULL)
428	+ */
429	+ function get_sb_arguments_type( $check_arguments ) {
430	+ $match_result = preg_match('/type=([a-zA-Z0-9\s]*),/u', $check_arguments, $match_type );
431	+
432	+ if ( 1 === $match_result ) {
433	+ $match_type = preg_replace( '/(\s\|　)/', '', $match_type[1] );
434	+ $match_type = str_replace( array( '\r\n', '\n', '\r' ), '', $match_type );
435	+
436	+ //typeが存在するかを確認して，存在しなければtype_missingを入力
437	+ if( in_array( FALSE === $match_type, $this->sb_reg_type ) ) {
438	+ $match_type = self::SB_ALERT_TYPE_MISSING;
439	+ }
440	+ } elseif ( 0 === $match_result ) {
441	+ $match_type = NULL;
442	+ } elseif ( FALSE === $match_result ) {
443	+ $match_type = NULL;
444	+ }
445	+
446	+ return $match_type;
447	+ }
448	+
449	+ /**
450	+ * Get subtype
451	+ *
452	+ * Check given string is subtype of speech bubble and Get given subtype from users
453	+ * Make some misspellling or some spaces eliminate.
454	+ *
455	+ * @param string $check_arguments
456	+ * @return string or NULL (valid=sb_id, invalid=NULL)
457	+ */
458	+ function get_sb_arguments_subtype( $check_arguments ) {
459	+ $match_result = preg_match( '/subtype=([a-zA-Z0-9\s]*),/u', $check_arguments , $match_subtype );
460	+
461	+ if( 1 === $match_result ) {
462	+ $match_subtype = preg_replace( '/(\s\|　)/', '', $match_subtype[1] );
463	+ $match_subtype = str_replace( array( '\r\n', '\n', '\r' ), '', $match_subtype );
464	+
465	+ $check_res = array_key_exists( $match_subtype, $this->sb_asc_subtype );
466	+
467	+ //subtypeが存在するかを確認して，存在しなければsubtype_missingを入力
468	+ if( TRUE === $check_res ) {
469	+ $match_subtype = $this->sb_asc_subtype[ $match_subtype ];
470	+ } elseif ( FALSE === $check_res ) {
471	+ $match_subtype = SB_ALERT_SUBTYPE_MISSING;
472	+ }
473	+ } elseif ( 0 === $match_result ) {
474	+ $match_subtype = NULL;
475	+ } elseif ( FALSE === $match_result ) {
476	+ $match_subtype = NULL;
477	+ }
478	+
479	+ return $match_subtype;
480	+ }
481	+
482	+
483	+ /**
484	+ * Get icon filename
485	+ *
486	+ * Check given string is icon and has extension. Get given subtype from users.
487	+ * Make some misspelling or some spaces eliminate.
488	+ *
489	+ * @param string $check_arguments
490	+ * @return string or NULL (valid=sb_id, invalid=NULL)
491	+ */
492	+ function get_sb_arguments_icon( $check_arguments ) {
493	+ $match_result = preg_match('/icon=([a-zA-Z0-9._\-\/\s]*),/u', $check_arguments , $match_icon );
494	+
495	+ if( 1 === $match_result ) {
496	+ $match_icon = preg_replace( '/(\s\|　)/', '', $match_icon[1] );
497	+ $match_icon = str_replace( array( '\r\n', '\n', '\r' ), '', $match_icon );
498	+
499	+ $match_icon = self::check_icon_extension_exists( $match_icon );
500	+ } elseif ( 0 === $match_result ) {
501	+ $match_icon = NULL;
502	+ } elseif ( FALSE === $match_result ) {
503	+ $match_icon = NULL;
504	+ }
505	+
506	+ return $match_icon;
507	+ }
508	+
509	+
510	+ /**
511	+ * Get name
512	+ *
513	+ * Check given string is name. Get given name from users.
514	+ *
515	+ * @param string $check_arguments
516	+ * @return string or NULL (valid=sb_id, invalid=NULL)
517	+ */
518	+ function get_sb_arguments_name( $check_arguments ) {
519	+ $match_result = preg_match( '/name=(.*)/u', $check_arguments , $match_name );
520	+
521	+ if( 1 === $match_result ) {
522	+ $match_name = $match_name[1];
523	+ } elseif ( 0 === $match_result ) {
524	+ $match_name = NULL;
525	+ } elseif ( FALSE === $match_result ) {
526	+ $match_name = NULL;
527	+ }
528	+
529	+ return $match_name;
530	+ }
531	+
532	+ /**
533	+ * Make valid associated array for replacing.
534	+ *
535	+ * Check given id_sets is valid , not NULL and Make valid associated array for replacing.
536	+ *
537	+ * @param array &$valid_arr
538	+ * @param array &$asc_arr
539	+ * @param string $id
540	+ * @param string $type
541	+ * @param string $subtype
542	+ * @param string $icon
543	+ * @param string $name
544	+ */
545	+ function make_valid_id_sets( &$valid_arr, &$asc_arr ,$id, $type, $subtype, $icon, $name ) {
546	+ for( $i = 0; $i < count( $id ); ++$i ) {
547	+ if( NULL !== $id[ $i ] ) {
548	+ if( ( NULL !== $type[ $i + 1 ] ) && ( NULL !== $subtype[ $i + 1 ] )&& ( NULL !== $icon[ $i + 1 ] )&& ( NULL !== $name[ $i + 1 ] ) ) {
549	+ array_push( $valid_arr, TRUE);
550	+ $str_asc_key = sprintf( "sb_id=%s", $id[ $i ] );
551	+ $str_asc_value = sprintf( "type=\"%s\" subtype=\"%s\" icon=\"%s\" name=\"%s\"", $type[ $i + 1 ], $subtype[ $i + 1 ], $icon[ $i + 1 ], $name[ $i + 1 ] );
552	+ $asc_arr += array( $str_asc_key => $str_asc_value );
553	+ } else {
554	+ array_push( $valid_arr, FALSE );
555	+ }
556	+ } else {
557	+ array_push( $valid_arr, FALSE );
558	+ }
559	+ }
560	+
561	+ return;
562	+ }
563	+
564	+ }

css/sb-no-br.css ADDED Viewed

	@@ -0,0 +1,10 @@


1	+ @charset "UTF-8";
2	+
3	+ .sb-no-br br{
4	+ display: none;
5	+ }
6	+
7	+ .sb-no-br p{
8	+ margin: 0 0 0px
9	+ }
10	+

css/sb-type-drop.css ADDED Viewed

	@@ -0,0 +1,324 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+
11	+ @media screen and (min-width:721px) {
12	+ .sb-type-drop {
13	+ overflow: hidden;
14	+ padding: 10px 20px;
15	+ margin: 0;
16	+ line-height: 1.5;
17	+ color: #333333;
18	+ }
19	+ }
20	+ @media screen and (max-width:720px) {
21	+ .sb-type-drop {
22	+ overflow: hidden;
23	+ padding: 5px 10px;
24	+ margin: 0;
25	+ line-height: 1.5;
26	+ color: #333333;
27	+ }
28	+ }
29	+
30	+ .sb-type-drop > .sb-subtype-a:after,
31	+ .sb-type-drop > .sb-subtype-b:after,
32	+ .sb-type-drop > .sb-subtype-c:after,
33	+ .sb-type-drop > .sb-subtype-d:after {
34	+ display: block;
35	+ clear: both;
36	+ content: "";
37	+ }
38	+
39	+ /**
40	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
41	+ *
42	+ * 話者領域
43	+ * Speaker Field
44	+ */
45	+
46	+ .sb-type-drop > .sb-subtype-a > .sb-speaker,
47	+ .sb-type-drop > .sb-subtype-c > .sb-speaker {
48	+ float: left;
49	+ position: relative;
50	+ margin-right: -70px;
51	+ width: 70px;
52	+ }
53	+
54	+ .sb-type-drop > .sb-subtype-b > .sb-speaker,
55	+ .sb-type-drop > .sb-subtype-d > .sb-speaker {
56	+ float: right;
57	+ position: relative;
58	+ margin-left: -70px;
59	+ width: 70px;
60	+ }
61	+
62	+ /**
63	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
64	+ *
65	+ * 話者のアイコン部分
66	+ * Speaker Icon part
67	+ */
68	+
69	+ .sb-type-drop > .sb-subtype-a > .sb-speaker > .sb-icon,
70	+ .sb-type-drop > .sb-subtype-b > .sb-speaker > .sb-icon,
71	+ .sb-type-drop > .sb-subtype-c > .sb-speaker > .sb-icon,
72	+ .sb-type-drop > .sb-subtype-d > .sb-speaker > .sb-icon {
73	+ text-align: center;
74	+ height: 60px;
75	+ }
76	+
77	+ .sb-type-drop > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
78	+ .sb-type-drop > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
79	+ .sb-type-drop > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
80	+ .sb-type-drop > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
81	+ height: 60px;
82	+ width: 60px;
83	+ border-radius: 5px;
84	+ }
85	+
86	+ /**
87	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
88	+ *
89	+ * 話者の名称部分
90	+ * Speaker name part
91	+ */
92	+
93	+ .sb-type-drop > .sb-subtype-a > .sb-speaker > .sb-name,
94	+ .sb-type-drop > .sb-subtype-b > .sb-speaker > .sb-name,
95	+ .sb-type-drop > .sb-subtype-c > .sb-speaker > .sb-name,
96	+ .sb-type-drop > .sb-subtype-d > .sb-speaker > .sb-name {
97	+ position: absolute;
98	+ overflow: hidden;
99	+ top: 0;
100	+ font-size: 12px;
101	+ white-space: nowrap;
102	+ }
103	+
104	+ .sb-type-drop > .sb-subtype-a > .sb-speaker > .sb-name,
105	+ .sb-type-drop > .sb-subtype-c > .sb-speaker > .sb-name {
106	+ left: 80px;
107	+ }
108	+
109	+ .sb-type-drop > .sb-subtype-b > .sb-speaker > .sb-name,
110	+ .sb-type-drop > .sb-subtype-d > .sb-speaker > .sb-name {
111	+ right: 80px;
112	+ }
113	+
114	+
115	+
116	+ /----------------------------------------------------------------------------------/
117	+ /* dropタイプの吹き出し */
118	+ /* drop Type (For a,b) */
119	+ /----------------------------------------------------------------------------------/
120	+
121	+ /**
122	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
123	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
124	+ *
125	+ * セリフ&引き出し部分
126	+ * Serief& Tail part
127	+ */
128	+
129	+ @media screen and (min-width:721px) {
130	+ .sb-type-drop > .sb-subtype-a > .sb-content {
131	+ float: left;
132	+ position: relative;
133	+ padding-top: 1.5em;
134	+ margin-left: 80px;
135	+ margin-right: 80px;
136	+ }
137	+ }
138	+ @media screen and (max-width:720px) {
139	+ .sb-type-drop > .sb-subtype-a > .sb-content {
140	+ float: left;
141	+ position: relative;
142	+ padding-top: 1.5em;
143	+ margin-left: 80px;
144	+ }
145	+ }
146	+
147	+
148	+ @media screen and (min-width:721px) {
149	+ .sb-type-drop > .sb-subtype-b > .sb-content {
150	+ float: right;
151	+ position: relative;
152	+ padding-top: 1.5em;
153	+ margin-right: 80px;
154	+ margin-left: 70px;
155	+ }
156	+ }
157	+ @media screen and (max-width:720px) {
158	+ .sb-type-drop > .sb-subtype-b > .sb-content {
159	+ float: right;
160	+ position: relative;
161	+ padding-top: 1.5em;
162	+ margin-right: 80px;
163	+ }
164	+ }
165	+
166	+
167	+ /**
168	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
169	+ *
170	+ * 吹き出しの本体部分
171	+ * Speach bubble' body part
172	+ */
173	+
174	+ .sb-type-drop > .sb-subtype-a > .sb-content > .sb-speech-bubble {
175	+ float: left;
176	+ padding: 10px 20px;
177	+ margin-bottom: 6px;
178	+ background: #D9E5FF;
179	+ border-radius: 15px 33px 50px 50px / 0px 50px 50px 50px;
180	+ border: solid 3px rgba(122,122,180,0.3);
181	+ box-shadow: 7px 7px 8px rgba(0,0,0,0.4);
182	+ }
183	+
184	+
185	+ .sb-type-drop > .sb-subtype-b > .sb-content > .sb-speech-bubble {
186	+ float: right;
187	+ padding: 10px 20px;
188	+ margin-bottom: 6px;
189	+ background: #D9E5FF;
190	+ border-radius: 50px 15px 50px 50px / 50px 0px 50px 50px;
191	+ border: solid 3px rgba(122,122,180,0.3);
192	+ box-shadow: 7px 7px 8px rgba(0,0,0,0.4);
193	+ }
194	+
195	+
196	+
197	+
198	+ /----------------------------------------------------------------------------------/
199	+ /* drop用に調整した考えてるタイプの吹き出し */
200	+ /* drop-think Type */
201	+ /----------------------------------------------------------------------------------/
202	+
203	+ /**
204	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
205	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
206	+ *
207	+ * セリフ&引き出し部分
208	+ * Serief& Tail part
209	+ */
210	+
211	+ @media screen and (min-width:721px) {
212	+ .sb-type-drop > .sb-subtype-c > .sb-content {
213	+ float: left;
214	+ position: relative;
215	+ padding-top: 1.5em;
216	+ margin-left: 100px;
217	+ margin-right: 80px;
218	+ }
219	+ }
220	+
221	+ @media screen and (max-width:720px) {
222	+ .sb-type-drop > .sb-subtype-c > .sb-content {
223	+ float: left;
224	+ position: relative;
225	+ padding-top: 1.5em;
226	+ margin-left: 100px;
227	+ }
228	+ }
229	+
230	+ .sb-type-drop > .sb-subtype-c > .sb-content:before {
231	+ position: absolute;
232	+ top: 24px;
233	+ left: -16px;
234	+ z-index: 3;
235	+ height: 9px;
236	+ width: 9px;
237	+ background: #D9E5FF;
238	+ border:solid 3px rgba(122,122,180,0.3);
239	+ border-radius: 9px;
240	+ box-shadow: 7px 7px 8px rgba(0,0,0,0.4);
241	+ content: "";
242	+ }
243	+
244	+ .sb-type-drop > .sb-subtype-c > .sb-content:after {
245	+ position: absolute;
246	+ top: 20px;
247	+ left: -27px;
248	+ z-index: 2;
249	+ height: 5px;
250	+ width: 5px;
251	+ background: #D9E5FF;
252	+ border:solid 3px rgba(122,122,180,0.3);
253	+ border-radius: 5px;
254	+ box-shadow: 7px 7px 8px rgba(0,0,0,0.4);
255	+ content: "";
256	+ }
257	+
258	+
259	+ @media screen and (min-width:721px) {
260	+ .sb-type-drop > .sb-subtype-d > .sb-content {
261	+ float: right;
262	+ position: relative;
263	+ padding-top: 1.5em;
264	+ margin-left: 80px;
265	+ margin-right: 100px;
266	+ }
267	+ }
268	+ @media screen and (max-width:720px) {
269	+ .sb-type-drop > .sb-subtype-d > .sb-content {
270	+ float: right;
271	+ position: relative;
272	+ padding-top: 1.5em;
273	+ margin-right: 100px;
274	+ }
275	+ }
276	+
277	+ .sb-type-drop > .sb-subtype-d > .sb-content:before {
278	+ position: absolute;
279	+ top: 24px;
280	+ right: -16px;
281	+ z-index: 5;
282	+ height: 9px;
283	+ width: 9px;
284	+ background: #D9E5FF;
285	+ border: solid 3px rgba(122,122,180,0.3);
286	+ border-radius: 9px;
287	+ box-shadow: 7px 7px 8px rgba(0,0,0,0.4);
288	+ content: "";
289	+ }
290	+
291	+ .sb-type-drop > .sb-subtype-d > .sb-content:after {
292	+ position: absolute;
293	+ top: 20px;
294	+ right: -27px;
295	+ z-index: 4; /* z-中 */
296	+ height: 5px;
297	+ width: 5px;
298	+ background: #D9E5FF;
299	+ border: solid 3px rgba(122,122,180,0.3);
300	+ border-radius: 5px;
301	+ box-shadow: 7px 7px 8px rgba(0,0,0,0.4);
302	+ content: "";
303	+ }
304	+
305	+
306	+ /**
307	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
308	+ *
309	+ * 吹き出しの本体部分
310	+ * Speach bubble' body part
311	+ */
312	+
313	+ .sb-type-drop > .sb-subtype-c > .sb-content > .sb-speech-bubble,
314	+ .sb-type-drop > .sb-subtype-d > .sb-content > .sb-speech-bubble {
315	+ position: relative;
316	+ padding: 5px 10px;
317	+ z-index: 3;
318	+ background: #D9E5FF;
319	+ border-style: solid;
320	+ border-width: 2px;
321	+ border: solid 3px rgba(122,122,180,0.3);
322	+ border-radius: 10px;
323	+ box-shadow: 7px 7px 8px rgba(0,0,0,0.4);
324	+ }

css/sb-type-fb-flat.css ADDED Viewed

	@@ -0,0 +1,354 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-fb-flat {
11	+ overflow: hidden;
12	+ padding: 5px 20px;
13	+ margin: 0;
14	+ line-height: 1.5;
15	+ color: #333333;
16	+ }
17	+
18	+ .sb-type-fb-flat > .sb-subtype-a:after,
19	+ .sb-type-fb-flat > .sb-subtype-b:after,
20	+ .sb-type-fb-flat > .sb-subtype-c:after,
21	+ .sb-type-fb-flat > .sb-subtype-d:after {
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+ /**
28	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
29	+ *
30	+ * 話者領域
31	+ * Speaker Field
32	+ */
33	+
34	+ .sb-type-fb-flat > .sb-subtype-a > .sb-speaker,
35	+ .sb-type-fb-flat > .sb-subtype-c > .sb-speaker {
36	+ float: left;
37	+ margin-right: -70px;
38	+ width: 70px;
39	+ }
40	+
41	+ .sb-type-fb-flat > .sb-subtype-b > .sb-speaker,
42	+ .sb-type-fb-flat > .sb-subtype-d > .sb-speaker {
43	+ float: right;
44	+ margin-left: -70px;
45	+ width: 70px;
46	+ }
47	+
48	+ /**
49	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
50	+ *
51	+ * 話者のアイコン部分
52	+ * Speaker Icon part
53	+ */
54	+
55	+ .sb-type-fb-flat > .sb-subtype-a > .sb-speaker > .sb-icon,
56	+ .sb-type-fb-flat > .sb-subtype-b > .sb-speaker > .sb-icon,
57	+ .sb-type-fb-flat > .sb-subtype-c > .sb-speaker > .sb-icon,
58	+ .sb-type-fb-flat > .sb-subtype-d > .sb-speaker > .sb-icon {
59	+ text-align: center;
60	+ height: 60px;
61	+ }
62	+
63	+ .sb-type-fb-flat > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
64	+ .sb-type-fb-flat > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
65	+ .sb-type-fb-flat > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-fb-flat > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
67	+ height: 60px;
68	+ width: 60px;
69	+ border-style: none;
70	+ border-radius: 50%;
71	+ }
72	+
73	+ /**
74	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
75	+ *
76	+ * 話者の名称部分
77	+ * Speaker name part
78	+ */
79	+
80	+ .sb-type-fb-flat > .sb-subtype-a > .sb-speaker > .sb-name,
81	+ .sb-type-fb-flat > .sb-subtype-b > .sb-speaker > .sb-name,
82	+ .sb-type-fb-flat > .sb-subtype-c > .sb-speaker > .sb-name,
83	+ .sb-type-fb-flat > .sb-subtype-d > .sb-speaker > .sb-name {
84	+ overflow: hidden;
85	+ font-size: 12px;
86	+ text-align: center;
87	+ color: #666666;
88	+ }
89	+
90	+
91	+
92	+ /----------------------------------------------------------------------------------/
93	+ /* fb-flatタイプの吹き出し */
94	+ /* fb-flat Type (For a,b) */
95	+ /----------------------------------------------------------------------------------/
96	+
97	+ /**
98	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
99	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
100	+ *
101	+ * セリフ&引き出し部分
102	+ * Serief& Tail part
103	+ */
104	+
105	+ @media screen and (min-width:721px) {
106	+ .sb-type-fb-flat > .sb-subtype-a > .sb-content {
107	+ float: left;
108	+ position: relative;
109	+ padding-top: 14px;
110	+ margin-left: 80px;
111	+ margin-right: 80px;
112	+ }
113	+ }
114	+
115	+ @media screen and (max-width:720px) {
116	+ .sb-type-fb-flat > .sb-subtype-a > .sb-content {
117	+ float: left;
118	+ position: relative;
119	+ padding-top: 14px;
120	+ margin-left: 80px;
121	+ }
122	+ }
123	+
124	+ .sb-type-fb-flat > .sb-subtype-a > .sb-content:before {
125	+ position: absolute;
126	+ top: 23px;
127	+ left: -6px;
128	+ z-index: 1;
129	+ height: 0;
130	+ width: 0;
131	+ border-style: solid solid solid none;
132	+ border-width: 6px;
133	+ border-color: transparent #EEEEEE;
134	+ content: "";
135	+ }
136	+
137	+ .sb-type-fb-flat > .sb-subtype-a > .sb-content:after {
138	+ position: absolute;
139	+ top: 23px;
140	+ left: -5px;
141	+ z-index: 3;
142	+ height: 0;
143	+ width: 0;
144	+ border-style: solid solid solid none;
145	+ border-width: 6px;
146	+ border-color: transparent #EEEEEE;
147	+ content: "";
148	+ }
149	+
150	+
151	+
152	+ @media screen and (min-width:721px) {
153	+ .sb-type-fb-flat > .sb-subtype-b > .sb-content {
154	+ float: right;
155	+ position: relative;
156	+ padding-top: 14px;
157	+ margin-left: 80px;
158	+ margin-right: 80px;
159	+ }
160	+ }
161	+
162	+ @media screen and (max-width:720px) {
163	+ .sb-type-fb-flat > .sb-subtype-b > .sb-content {
164	+ float: right;
165	+ position: relative;
166	+ padding-top: 14px;
167	+ margin-right: 80px;
168	+ }
169	+ }
170	+
171	+ .sb-type-fb-flat > .sb-subtype-b > .sb-content:before {
172	+ position: absolute;
173	+ top: 23px;
174	+ right: -6px;
175	+ z-index: 1;
176	+ height: 0;
177	+ width: 0;
178	+ border-style: solid none solid solid;
179	+ border-width: 6px;
180	+ border-color: transparent #5555FF;
181	+ content: "";
182	+ }
183	+
184	+ .sb-type-fb-flat > .sb-subtype-b > .sb-content:after {
185	+ position: absolute;
186	+ top: 23px;
187	+ right: -5px;
188	+ z-index: 3;
189	+ height: 0;
190	+ width: 0;
191	+ border-style: solid none solid solid;
192	+ border-width: 6px;
193	+ border-color: transparent #5555FF;
194	+ content: "";
195	+ }
196	+
197	+ /**
198	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
199	+ *
200	+ * 吹き出しの本体部分
201	+ * Speach bubble' body part
202	+ */
203	+
204	+ .sb-type-fb-flat > .sb-subtype-a > .sb-content > .sb-speech-bubble,
205	+ .sb-type-fb-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
206	+ position: relative;
207	+ padding: 5px 10px;
208	+ z-index: 2;
209	+ background-color: #EEEEEE;
210	+ border-style: solid;
211	+ border-width: 1px;
212	+ border-color: #EEEEEE;
213	+ border-radius: 4px;
214	+ color: #333333;
215	+ }
216	+
217	+ .sb-type-fb-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
218	+ color: #FFFFFF;
219	+ background-color: #5555FF;
220	+ border-color: #5555FF;
221	+ }
222	+
223	+
224	+
225	+
226	+ /----------------------------------------------------------------------------------/
227	+ /* fb-flat用に調整した考えてるタイプの吹き出し */
228	+ /* fb-flat-Think Type (For c,d) */
229	+ /----------------------------------------------------------------------------------/
230	+
231	+ /**
232	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
233	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
234	+ *
235	+ * セリフ&引き出し部分
236	+ * Serief& Tail part
237	+ */
238	+
239	+ @media screen and (min-width:721px) {
240	+ .sb-type-fb-flat > .sb-subtype-c > .sb-content {
241	+ float: left;
242	+ position: relative;
243	+ padding-top: 14px;
244	+ margin-left: 100px;
245	+ margin-right: 80px;
246	+ }
247	+ }
248	+
249	+ @media screen and (max-width:720px) {
250	+ .sb-type-fb-flat > .sb-subtype-c > .sb-content {
251	+ float: left;
252	+ position: relative;
253	+ padding-top: 14px;
254	+ margin-left: 100px;
255	+ }
256	+ }
257	+
258	+ .sb-type-fb-flat > .sb-subtype-c > .sb-content:before {
259	+ position: absolute;
260	+ top: 24px;
261	+ left: -17px;
262	+ height: 12px;
263	+ width: 12px;
264	+ background-color: #EEEEEE;
265	+ border-color: #EEEEEE;
266	+ border-radius: 10px;
267	+ color: #333333;
268	+ content: "";
269	+ }
270	+
271	+ .sb-type-fb-flat > .sb-subtype-c > .sb-content:after {
272	+ position: absolute;
273	+ top: 20px;
274	+ left: -28px;
275	+ height: 8px;
276	+ width: 8px;
277	+ background-color: #EEEEEE;
278	+ border-color: #EEEEEE;
279	+ border-radius: 5px;
280	+ color: #333333;
281	+ content: "";
282	+ }
283	+
284	+
285	+
286	+
287	+ @media screen and (min-width:721px) {
288	+ .sb-type-fb-flat > .sb-subtype-d > .sb-content {
289	+ float: right;
290	+ position: relative;
291	+ padding-top: 14px;
292	+ margin-left: 80px;
293	+ margin-right: 100px;
294	+
295	+ }
296	+
297	+ @media screen and (max-width:720px) {
298	+ .sb-type-fb-flat > .sb-subtype-d > .sb-content {
299	+ float: right;
300	+ position: relative;
301	+ padding-top: 14px;
302	+ margin-right: 100px;
303	+ }
304	+ }
305	+ .sb-type-fb-flat > .sb-subtype-d > .sb-content:before {
306	+ top: 24px;
307	+ right: -17px;
308	+ height: 12px;
309	+ width: 12px;
310	+ background-color: #5555FF;
311	+ border-color: #5555FF;
312	+ position: absolute;
313	+ border-radius: 10px;
314	+ content: "";
315	+ }
316	+
317	+ .sb-type-fb-flat > .sb-subtype-d > .sb-content:after {
318	+ position: absolute;
319	+ top: 20px;
320	+ right: -27px;
321	+ height: 8px;
322	+ width: 8px;
323	+ background-color: #5555FF;
324	+ border-color: #5555FF;
325	+ border-radius: 5px;
326	+ content: "";
327	+ }
328	+
329	+
330	+ /**
331	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
332	+ *
333	+ * 吹き出しの本体部分
334	+ * Speach bubble' body part
335	+ */
336	+
337	+ .sb-type-fb-flat > .sb-subtype-c > .sb-content > .sb-speech-bubble,
338	+ .sb-type-fb-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
339	+ position: relative;
340	+ z-index: 2;
341	+ padding: 5px 10px;
342	+ background-color: #EEEEEE;
343	+ border-style: solid;
344	+ border-width: 1px;
345	+ border-color: #EEEEEE;
346	+ border-radius: 4px;
347	+ color: #333333;
348	+ }
349	+
350	+ .sb-type-fb-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
351	+ background-color: #5555FF;
352	+ border-color: #5555FF;
353	+ color: #FFFFFF;
354	+ }

css/sb-type-fb.css ADDED Viewed

	@@ -0,0 +1,372 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-fb {
11	+ overflow: hidden;
12	+ padding: 5px 20px;
13	+ margin: 0;
14	+ line-height: 1.5;
15	+ color: #333333;
16	+ }
17	+
18	+ .sb-type-fb > .sb-subtype-a:after,
19	+ .sb-type-fb > .sb-subtype-b:after,
20	+ .sb-type-fb > .sb-subtype-c:after,
21	+ .sb-type-fb > .sb-subtype-d:after{
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+ /**
28	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
29	+ *
30	+ * 話者領域
31	+ * Speaker Field
32	+ */
33	+
34	+ .sb-type-fb > .sb-subtype-a > .sb-speaker,
35	+ .sb-type-fb > .sb-subtype-c > .sb-speaker {
36	+ float: left;
37	+ margin-right: -70px;
38	+ width: 70px;
39	+ }
40	+
41	+ .sb-type-fb > .sb-subtype-b > .sb-speaker,
42	+ .sb-type-fb > .sb-subtype-d > .sb-speaker {
43	+ float: right;
44	+ margin-left: -70px;
45	+ width: 70px;
46	+ }
47	+
48	+ /**
49	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
50	+ *
51	+ * 話者のアイコン部分
52	+ * Speaker Icon part
53	+ */
54	+
55	+ .sb-type-fb > .sb-subtype-a > .sb-speaker > .sb-icon,
56	+ .sb-type-fb > .sb-subtype-b > .sb-speaker > .sb-icon,
57	+ .sb-type-fb > .sb-subtype-c > .sb-speaker > .sb-icon,
58	+ .sb-type-fb > .sb-subtype-d > .sb-speaker > .sb-icon {
59	+ text-align: center;
60	+ height: 60px;
61	+ }
62	+
63	+ .sb-type-fb > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
64	+ .sb-type-fb > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
65	+ .sb-type-fb > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-fb > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
67	+ height: 59px;
68	+ width: 59px;
69	+ border-style: solid;
70	+ border-width: 1px;
71	+ border-color: #CCCCCC;
72	+ border-radius: 50%;
73	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
74	+ }
75	+
76	+ /**
77	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
78	+ *
79	+ * 話者の名称部分
80	+ * Speaker name part
81	+ */
82	+
83	+ .sb-type-fb > .sb-subtype-a > .sb-speaker > .sb-name,
84	+ .sb-type-fb > .sb-subtype-b > .sb-speaker > .sb-name,
85	+ .sb-type-fb > .sb-subtype-c > .sb-speaker > .sb-name,
86	+ .sb-type-fb > .sb-subtype-d > .sb-speaker > .sb-name {
87	+ overflow: hidden;
88	+ font-size: 12px;
89	+ text-align: center;
90	+ text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
91	+ }
92	+
93	+
94	+ /----------------------------------------------------------------------------------/
95	+ /* fbタイプの吹き出し */
96	+ /* fb Type (For a,b) */
97	+ /----------------------------------------------------------------------------------/
98	+
99	+ /**
100	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
101	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
102	+ *
103	+ * セリフ&引き出し部分
104	+ * Serief& Tail part
105	+ */
106	+
107	+ @media screen and (min-width:721px) {
108	+ .sb-type-fb > .sb-subtype-a > .sb-content {
109	+ float: left;
110	+ position: relative;
111	+ padding-top: 14px;
112	+ margin-left: 80px;
113	+ margin-right: 80px;
114	+ }
115	+ }
116	+
117	+ @media screen and (max-width:720px) {
118	+ .sb-type-fb > .sb-subtype-a > .sb-content {
119	+ float: left;
120	+ position: relative;
121	+ padding-top: 14px;
122	+ margin-left: 80px;
123	+ }
124	+ }
125	+
126	+ .sb-type-fb > .sb-subtype-a > .sb-content:before {
127	+ position: absolute;
128	+ top: 23px;
129	+ left: -6px;
130	+ z-index: 1;
131	+ height: 0;
132	+ width: 0;
133	+ border-style: solid solid solid none;
134	+ border-width: 6px;
135	+ border-color: transparent #CCCCCC;
136	+ content: "";
137	+ }
138	+
139	+ .sb-type-fb > .sb-subtype-a > .sb-content:after {
140	+ position: absolute;
141	+ top: 23px;
142	+ left: -5px;
143	+ z-index: 3;
144	+ height: 0;
145	+ width: 0;
146	+ border-style: solid solid solid none;
147	+ border-width: 6px;
148	+ border-color: transparent #FCFCFC;
149	+ content: "";
150	+ }
151	+
152	+
153	+
154	+ @media screen and (min-width:721px) {
155	+ .sb-type-fb > .sb-subtype-b > .sb-content {
156	+ padding-top: 14px;
157	+ margin-left: 80px;
158	+ margin-right: 80px;
159	+ float: right;
160	+ position: relative;
161	+ }
162	+ }
163	+
164	+ @media screen and (max-width:720px) {
165	+ .sb-type-fb > .sb-subtype-b > .sb-content {
166	+ float: right;
167	+ position: relative;
168	+ padding-top: 14px;
169	+ margin-right: 80px;
170	+ }
171	+ }
172	+
173	+ .sb-type-fb > .sb-subtype-b > .sb-content:before {
174	+ position: absolute;
175	+ top: 23px;
176	+ right: -6px;
177	+ z-index: 1;
178	+ height: 0;
179	+ width: 0;
180	+ border-style: solid none solid solid;
181	+ border-width: 6px;
182	+ border-color: transparent #A8BFDF;
183	+ content: "";
184	+ }
185	+
186	+ .sb-type-fb > .sb-subtype-b > .sb-content:after {
187	+ position: absolute;
188	+ top: 23px;
189	+ right: -5px;
190	+ z-index: 3;
191	+ height: 0;
192	+ width: 0;
193	+ border-style: solid none solid solid;
194	+ border-width: 6px;
195	+ border-color: transparent #E4ECFF;
196	+ content: "";
197	+ }
198	+
199	+
200	+ /**
201	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
202	+ *
203	+ * 吹き出しの本体部分
204	+ * Speach bubble' body part
205	+ */
206	+
207	+ .sb-type-fb > .sb-subtype-a > .sb-content > .sb-speech-bubble,
208	+ .sb-type-fb > .sb-subtype-b > .sb-content > .sb-speech-bubble {
209	+ position: relative;
210	+ z-index: 2;
211	+ padding: 5px 10px;
212	+ background-color: #FFFFFF;
213	+ background: linear-gradient(#FFFFFF, #F2F2F2);
214	+ border-style: solid;
215	+ border-width: 1px;
216	+ border-color: #CCCCCC;
217	+ border-radius: 4px;
218	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
219	+ color: #333333;
220	+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
221	+ }
222	+
223	+ .sb-type-fb > .sb-subtype-b > .sb-content > .sb-speech-bubble {
224	+ background-color: #E8F0FF;
225	+ background: linear-gradient(#E8F0FF, #C8DFFF);
226	+ border-color: #A8BFDF;
227	+ }
228	+
229	+
230	+
231	+
232	+ /----------------------------------------------------------------------------------/
233	+ /* fb用に調整した考えてるタイプの吹き出し */
234	+ /* fb-Think Type (For c,d) */
235	+ /----------------------------------------------------------------------------------/
236	+
237	+
238	+ /**
239	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
240	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
241	+ *
242	+ * セリフ&引き出し部分
243	+ * Serief& Tail part
244	+ */
245	+
246	+ @media screen and (min-width:721px) {
247	+ .sb-type-fb > .sb-subtype-c > .sb-content {
248	+ float: left;
249	+ position: relative;
250	+ padding-top: 14px;
251	+ margin-left: 100px;
252	+ margin-right: 80px;
253	+ }
254	+ }
255	+
256	+ @media screen and (max-width:720px) {
257	+ .sb-type-fb > .sb-subtype-c > .sb-content {
258	+ float: left;
259	+ position: relative;
260	+ padding-top: 14px;
261	+ margin-left: 100px;
262	+ }
263	+ }
264	+
265	+ .sb-type-fb > .sb-subtype-c > .sb-content:before {
266	+ position: absolute;
267	+ top: 24px;
268	+ left: -17px;
269	+ height: 12px;
270	+ width: 12px;
271	+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
272	+ background-color: #FFFFFF;
273	+ background: linear-gradient(#FFFFFF, #F2F2F2);
274	+ border:solid 1px #CCCCCC;
275	+ border-radius: 10px;
276	+ color: #333333;
277	+ content: "";
278	+ }
279	+
280	+ .sb-type-fb > .sb-subtype-c > .sb-content:after {
281	+ position: absolute;
282	+ top: 20px;
283	+ left: -28px;
284	+ height: 8px;
285	+ width: 8px;
286	+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
287	+ background-color: #FFFFFF;
288	+ background: linear-gradient(#FFFFFF, #F2F2F2);
289	+ border:solid 1px #CCCCCC;
290	+ border-radius: 5px;
291	+ color: #333333;
292	+ content: "";
293	+ }
294	+
295	+
296	+
297	+ @media screen and (min-width:721px) {
298	+ .sb-type-fb > .sb-subtype-d > .sb-content {
299	+ float: right;
300	+ position: relative;
301	+ padding-top: 14px;
302	+ margin-left: 80px;
303	+ margin-right: 100px;
304	+ }
305	+ }
306	+
307	+ @media screen and (max-width:720px) {
308	+ .sb-type-fb > .sb-subtype-d > .sb-content {
309	+ float: right;
310	+ position: relative;
311	+ padding-top: 14px;
312	+ margin-right: 100px;
313	+ }
314	+ }
315	+ .sb-type-fb > .sb-subtype-d > .sb-content:before {
316	+ position: absolute;
317	+ top: 24px;
318	+ right: -17px;
319	+ height: 12px;
320	+ width: 12px;
321	+ background-color: #E8F0FF;
322	+ background: linear-gradient(#E8F0FF, #C8DFFF);
323	+ border-color: #A8BFDF;
324	+ border:solid 1px #A8BFDF;
325	+ border-radius: 10px;
326	+ content: "";
327	+ }
328	+
329	+ .sb-type-fb > .sb-subtype-d > .sb-content:after {
330	+ position: absolute;
331	+ top: 20px;
332	+ right: -27px;
333	+ height: 8px;
334	+ width: 8px;
335	+ background-color: #E8F0FF;
336	+ background: linear-gradient(#E8F0FF, #C8DFFF);
337	+ border-color: #A8BFDF;
338	+ border:solid 1px #A8BFDF;
339	+ border-radius: 5px;
340	+ content: "";
341	+ }
342	+
343	+
344	+ /**
345	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
346	+ *
347	+ * 吹き出しの本体部分
348	+ * Speach bubble' body part
349	+ */
350	+
351	+ .sb-type-fb > .sb-subtype-c > .sb-content > .sb-speech-bubble,
352	+ .sb-type-fb > .sb-subtype-d > .sb-content > .sb-speech-bubble {
353	+ position: relative;
354	+ z-index: 2;
355	+ padding: 5px 10px;
356	+ background-color: #FFFFFF;
357	+ background: linear-gradient(#FFFFFF, #F2F2F2);
358	+ border-style: solid;
359	+ border-width: 1px;
360	+ border-color: #CCCCCC;
361	+ border-radius: 4px;
362	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
363	+ color: #333333;
364	+ text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
365	+ }
366	+
367	+
368	+ .sb-type-fb > .sb-subtype-d > .sb-content > .sb-speech-bubble {
369	+ background-color: #E8F0FF;
370	+ background: linear-gradient(#E8F0FF, #C8DFFF);
371	+ border-color: #A8BFDF;
372	+ }

css/sb-type-ln-flat.css ADDED Viewed

	@@ -0,0 +1,374 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-ln-flat {
11	+ overflow: hidden;
12	+ padding: 10px 20px;
13	+ margin: 0;
14	+ ln-height: 1.5;
15	+ color: #333333;
16	+ }
17	+
18	+ .sb-type-ln-flat > .sb-subtype-a:after,
19	+ .sb-type-ln-flat > .sb-subtype-b:after,
20	+ .sb-type-ln-flat > .sb-subtype-c:after,
21	+ .sb-type-ln-flat > .sb-subtype-d:after {
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+ /**
28	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
29	+ *
30	+ * 話者領域
31	+ * Speaker Field
32	+ */
33	+
34	+ .sb-type-ln-flat > .sb-subtype-a > .sb-speaker,
35	+ .sb-type-ln-flat > .sb-subtype-c > .sb-speaker {
36	+ float: left;
37	+ position: relative;
38	+ margin-right: -70px;
39	+ width: 70px;
40	+ }
41	+
42	+ .sb-type-ln-flat > .sb-subtype-b > .sb-speaker,
43	+ .sb-type-ln-flat > .sb-subtype-d > .sb-speaker {
44	+ float: right;
45	+ position: relative;
46	+ margin-left: -70px;
47	+ width: 70px;
48	+ }
49	+
50	+ /**
51	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
52	+ *
53	+ * 話者のアイコン部分
54	+ * Speaker Icon part
55	+ */
56	+
57	+ .sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-icon,
58	+ .sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-icon,
59	+ .sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-icon,
60	+ .sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-icon {
61	+ text-align: center;
62	+ height: 60px;
63	+ }
64	+
65	+ .sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
67	+ .sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
68	+ .sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
69	+ border-style: none;
70	+ height: 60px;
71	+ width: 60px;
72	+ }
73	+
74	+ /**
75	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
76	+ *
77	+ * 話者の名称部分
78	+ * Speaker name part
79	+ */
80	+
81	+ .sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-name,
82	+ .sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-name,
83	+ .sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-name,
84	+ .sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-name {
85	+ position: absolute;
86	+ top: 0;
87	+ overflow: hidden;
88	+ font-size: 12px;
89	+ white-space: nowrap;
90	+ }
91	+
92	+ .sb-type-ln-flat > .sb-subtype-a > .sb-speaker > .sb-name,
93	+ .sb-type-ln-flat > .sb-subtype-c > .sb-speaker > .sb-name {
94	+ left: 80px;
95	+ }
96	+
97	+ .sb-type-ln-flat > .sb-subtype-b > .sb-speaker > .sb-name,
98	+ .sb-type-ln-flat > .sb-subtype-d > .sb-speaker > .sb-name {
99	+ right: 80px;
100	+ }
101	+
102	+
103	+
104	+ /----------------------------------------------------------------------------------/
105	+ /* ln-flatタイプの吹き出し */
106	+ /* ln-flat Type (For a,b) */
107	+ /----------------------------------------------------------------------------------/
108	+
109	+ /**
110	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
111	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
112	+ *
113	+ * セリフ&引き出し部分
114	+ * Serief& Tail part
115	+ */
116	+
117	+ @media screen and (min-width:721px) {
118	+ .sb-type-ln-flat > .sb-subtype-a > .sb-content {
119	+ float: left;
120	+ position: relative;
121	+ padding-top: 26px;
122	+ margin-right: 80px;
123	+ margin-left: 80px;
124	+ }
125	+ }
126	+
127	+ @media screen and (max-width:720px) {
128	+ .sb-type-ln-flat > .sb-subtype-a > .sb-content {
129	+ float: left;
130	+ position: relative;
131	+ padding-top: 26px;
132	+ margin-left: 80px;
133	+ }
134	+ }
135	+
136	+ .sb-type-ln-flat > .sb-subtype-a > .sb-content:before {
137	+ position: absolute;
138	+ top: 26px;
139	+ left: -8px;
140	+ z-index: 1;
141	+ height: 0;
142	+ width: 0;
143	+ border-style: solid none none solid;
144	+ border-width: 8px;
145	+ border-color: #EEEEEE transparent;
146	+ content: "";
147	+ }
148	+
149	+ .sb-type-ln-flat > .sb-subtype-a > .sb-content:after {
150	+ position: absolute;
151	+ top: 27px;
152	+ left: -6px;
153	+ z-index: 3;
154	+ height: 0;
155	+ width: 0;
156	+ border-style: solid none none solid;
157	+ border-width: 8px;
158	+ border-color: #EEEEEE transparent;
159	+ content: "";
160	+ }
161	+
162	+
163	+
164	+ @media screen and (min-width:721px) {
165	+ .sb-type-ln-flat > .sb-subtype-b > .sb-content {
166	+ float: right;
167	+ position: relative;
168	+ padding-top: 26px;
169	+ margin-right: 80px;
170	+ margin-left: 80px;
171	+ }
172	+ }
173	+
174	+ @media screen and (max-width:720px) {
175	+ .sb-type-ln-flat > .sb-subtype-b > .sb-content {
176	+ float: right;
177	+ position: relative;
178	+ padding-top: 26px;
179	+ margin-right: 80px;
180	+ }
181	+ }
182	+
183	+ .sb-type-ln-flat > .sb-subtype-b > .sb-content:before {
184	+ position: absolute;
185	+ top: 26px;
186	+ right: -8px;
187	+ z-index: 1;
188	+ height: 0;
189	+ width: 0;
190	+ border-style: solid solid none none;
191	+ border-width: 8px;
192	+ border-color: #77DD66 transparent;
193	+ content: "";
194	+ }
195	+
196	+ .sb-type-ln-flat > .sb-subtype-b > .sb-content:after {
197	+ position: absolute;
198	+ top: 27px;
199	+ right: -6px;
200	+ z-index: 3;
201	+ height: 0;
202	+ width: 0;
203	+ border-style: solid solid none none;
204	+ border-width: 8px;
205	+ border-color: #77DD66 transparent;
206	+ content: "";
207	+ }
208	+
209	+ /**
210	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
211	+ *
212	+ * 吹き出しの本体部分
213	+ * Speach bubble' body part
214	+ */
215	+
216	+ .sb-type-ln-flat > .sb-subtype-a > .sb-content > .sb-speech-bubble,
217	+ .sb-type-ln-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
218	+ position: relative;
219	+ z-index: 2;
220	+ padding: 6px 12px;
221	+ background-color: #EEEEEE;
222	+ border-style: solid;
223	+ border-width: 1px;
224	+ border-color: #EEEEEE;
225	+ border-radius: 15px;
226	+ color: #333333;
227	+ }
228	+
229	+ .sb-type-ln-flat > .sb-subtype-a > .sb-content > .sb-speech-bubble {
230	+ border-radius: 0 15px 15px 15px;
231	+ }
232	+
233	+ .sb-type-ln-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
234	+ background-color: #77DD66;
235	+ border-color: #77DD66;
236	+ border-radius: 15px 0 15px 15px;
237	+ }
238	+
239	+
240	+
241	+ /----------------------------------------------------------------------------------/
242	+ /* ln-flat用に調整した考えてるタイプの吹き出し */
243	+ /* ln-flat-Think Type (For c,d) */
244	+ /----------------------------------------------------------------------------------/
245	+
246	+ /**
247	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
248	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
249	+ *
250	+ * セリフ&引き出し部分
251	+ * Serief& Tail part
252	+ */
253	+
254	+ @media screen and (min-width:721px) {
255	+ .sb-type-ln-flat > .sb-subtype-c > .sb-content {
256	+ float: left;
257	+ position: relative;
258	+ padding-top: 1.5em;
259	+ margin-left: 100px;
260	+ margin-right: 80px;
261	+ }
262	+ }
263	+
264	+ @media screen and (max-width:720px) {
265	+ .sb-type-ln-flat > .sb-subtype-c > .sb-content {
266	+ float: left;
267	+ position: relative;
268	+ padding-top: 1.5em;
269	+ margin-left: 100px;
270	+ }
271	+ }
272	+
273	+ .sb-type-ln-flat > .sb-subtype-c > .sb-content:before {
274	+ position: absolute;
275	+ top: 24px;
276	+ left: -17px;
277	+ height: 12px;
278	+ width: 12px;
279	+ background-color: #EEEEEE;
280	+ border:solid 1px #EEEEEE;
281	+ border-radius: 10px;
282	+ color: #333333;
283	+ content: "";
284	+ }
285	+
286	+ .sb-type-ln-flat > .sb-subtype-c > .sb-content:after {
287	+ position: absolute;
288	+ top: 20px;
289	+ left: -28px;
290	+ height: 8px;
291	+ width: 8px;
292	+ background-color: #EEEEEE;
293	+ border:solid 1px #EEEEEE;
294	+ border-radius: 5px;
295	+ color: #333333;
296	+ content: "";
297	+ }
298	+
299	+
300	+
301	+
302	+ @media screen and (min-width:721px) {
303	+ .sb-type-ln-flat > .sb-subtype-d > .sb-content {
304	+ float: right;
305	+ position: relative;
306	+ padding-top: 1.5em;
307	+ margin-left: 80px;
308	+ margin-right: 100px;
309	+ }
310	+ }
311	+
312	+ @media screen and (max-width:720px) {
313	+ .sb-type-ln-flat > .sb-subtype-d > .sb-content {
314	+ float: right;
315	+ position: relative;
316	+ padding-top: 1.5em;
317	+ margin-right: 100px;
318	+ }
319	+ }
320	+
321	+ .sb-type-ln-flat > .sb-subtype-d > .sb-content:before {
322	+ position: absolute;
323	+ top: 24px;
324	+ right: -17px;
325	+ height: 12px;
326	+ width: 12px;
327	+ background-color: #77DD66;
328	+ border: solid 1px #77DD66;
329	+ border-radius: 10px;
330	+ content: "";
331	+ }
332	+
333	+ .sb-type-ln-flat > .sb-subtype-d > .sb-content:after {
334	+ position: absolute;
335	+ top: 20px;
336	+ right: -27px;
337	+ height: 8px;
338	+ width: 8px;
339	+ background-color: #77DD66;
340	+ border: solid 1px #77DD66;
341	+ border-radius: 5px;
342	+ content: "";
343	+ }
344	+
345	+
346	+ /**
347	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
348	+ *
349	+ * 吹き出しの本体部分
350	+ * Speach bubble' body part
351	+ */
352	+
353	+ .sb-type-ln-flat > .sb-subtype-c > .sb-content > .sb-speech-bubble,
354	+ .sb-type-ln-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
355	+ position: relative;
356	+ z-index: 2;
357	+ padding: 6px 12px;
358	+ background-color: #EEEEEE;
359	+ border-style: solid;
360	+ border-width: 1px;
361	+ border-color: #EEEEEE;
362	+ border-radius: 15px;
363	+ color: #333333;
364	+ }
365	+
366	+ .sb-type-ln-flat > .sb-subtype-c > .sb-content > .sb-speech-bubble {
367	+ border-radius: 15px 15px 15px 15px;
368	+ }
369	+
370	+ .sb-type-ln-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
371	+ background-color: #77DD66;
372	+ border-color: #77DD66;
373	+ border-radius: 15px 15px 15px 15px;
374	+ }

css/sb-type-ln.css ADDED Viewed

	@@ -0,0 +1,380 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-ln {
11	+ overflow: hidden;
12	+ padding: 10px 20px;
13	+ margin: 0;
14	+ line-height: 1.5;
15	+ color: #333333;
16	+ }
17	+
18	+ .sb-type-ln > .sb-subtype-a:after,
19	+ .sb-type-ln > .sb-subtype-b:after,
20	+ .sb-type-ln > .sb-subtype-c:after,
21	+ .sb-type-ln > .sb-subtype-d:after {
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+ /**
28	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
29	+ *
30	+ * 話者領域
31	+ * Speaker Field
32	+ */
33	+
34	+ .sb-type-ln > .sb-subtype-a > .sb-speaker,
35	+ .sb-type-ln > .sb-subtype-c > .sb-speaker {
36	+ float: left;
37	+ position: relative;
38	+ margin-right: -70px;
39	+ width: 70px;
40	+ }
41	+
42	+ .sb-type-ln > .sb-subtype-b > .sb-speaker,
43	+ .sb-type-ln > .sb-subtype-d > .sb-speaker {
44	+ float: right;
45	+ position: relative;
46	+ margin-left: -70px;
47	+ width: 70px;
48	+ }
49	+
50	+ /**
51	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
52	+ *
53	+ * 話者のアイコン部分
54	+ * Speaker Icon part
55	+ */
56	+
57	+ .sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-icon,
58	+ .sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-icon,
59	+ .sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-icon,
60	+ .sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-icon {
61	+ text-align: center;
62	+ height: 60px;
63	+ }
64	+
65	+ .sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
67	+ .sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
68	+ .sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
69	+ height: 60px;
70	+ width: 60px;
71	+ border-style: none;
72	+ }
73	+
74	+ /**
75	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
76	+ *
77	+ * 話者の名称部分
78	+ * Speaker name part
79	+ */
80	+
81	+ .sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-name,
82	+ .sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-name,
83	+ .sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-name,
84	+ .sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-name {
85	+ position: absolute;
86	+ overflow: hidden;
87	+ top: 0;
88	+ font-size: 12px;
89	+ white-space: nowrap;
90	+ }
91	+
92	+ .sb-type-ln > .sb-subtype-a > .sb-speaker > .sb-name,
93	+ .sb-type-ln > .sb-subtype-c > .sb-speaker > .sb-name {
94	+ left: 80px;
95	+ }
96	+
97	+ .sb-type-ln > .sb-subtype-b > .sb-speaker > .sb-name,
98	+ .sb-type-ln > .sb-subtype-d > .sb-speaker > .sb-name {
99	+ right: 80px;
100	+ }
101	+
102	+
103	+
104	+ /----------------------------------------------------------------------------------/
105	+ /* lnタイプの吹き出し */
106	+ /* ln Type (For a,b) */
107	+ /----------------------------------------------------------------------------------/
108	+
109	+ /**
110	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
111	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
112	+ *
113	+ * セリフ&引き出し部分
114	+ * Serief& Tail part
115	+ */
116	+
117	+ @media screen and (min-width:721px) {
118	+ .sb-type-ln > .sb-subtype-a > .sb-content {
119	+ float: left;
120	+ position: relative;
121	+ padding-top: 26px;
122	+ margin-right: 80px;
123	+ margin-left: 80px;
124	+ }
125	+ }
126	+
127	+ @media screen and (max-width:720px) {
128	+ .sb-type-ln > .sb-subtype-a > .sb-content {
129	+ float: left;
130	+ position: relative;
131	+ padding-top: 26px;
132	+ margin-left: 80px;
133	+ }
134	+ }
135	+
136	+ .sb-type-ln > .sb-subtype-a > .sb-content:before {
137	+ position: absolute;
138	+ top: 26px;
139	+ left: -8px;
140	+ z-index: 1;
141	+ height: 0;
142	+ width: 0;
143	+ border-style: solid none none solid;
144	+ border-width: 8px;
145	+ border-color: #AAAAAA transparent;
146	+ content: "";
147	+ }
148	+
149	+ .sb-type-ln > .sb-subtype-a > .sb-content:after {
150	+ position: absolute;
151	+ top: 27px;
152	+ left: -6px;
153	+ z-index: 3;
154	+ height: 0;
155	+ width: 0;
156	+ border-style: solid none none solid;
157	+ border-width: 8px;
158	+ border-color: #F9F9F9 transparent;
159	+ content: "";
160	+ }
161	+
162	+
163	+ @media screen and (min-width:721px) {
164	+ .sb-type-ln > .sb-subtype-b > .sb-content {
165	+ float: right;
166	+ position: relative;
167	+ padding-top: 26px;
168	+ margin-right: 80px;
169	+ margin-left: 80px;
170	+ }
171	+ }
172	+
173	+ @media screen and (max-width:720px) {
174	+ .sb-type-ln > .sb-subtype-b > .sb-content {
175	+ float: right;
176	+ position: relative;
177	+ padding-top: 26px;
178	+ margin-right: 80px;
179	+ }
180	+ }
181	+
182	+ .sb-type-ln > .sb-subtype-b > .sb-content:before {
183	+ position: absolute;
184	+ top: 26px;
185	+ right: -8px;
186	+ z-index: 1;
187	+ height: 0;
188	+ width: 0;
189	+ border-style: solid solid none none;
190	+ border-width: 8px;
191	+ border-color: #AAAAAA transparent;
192	+ content: "";
193	+ }
194	+
195	+ .sb-type-ln > .sb-subtype-b > .sb-content:after {
196	+ position: absolute;
197	+ top: 27px;
198	+ right: -6px;
199	+ z-index: 3;
200	+ height: 0;
201	+ width: 0;
202	+ border-style: solid solid none none;
203	+ border-width: 8px;
204	+ border-color: #CCFF88 transparent;
205	+ content: "";
206	+ }
207	+
208	+ /**
209	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
210	+ *
211	+ * 吹き出しの本体部分
212	+ * Speach bubble' body part
213	+ */
214	+
215	+ .sb-type-ln > .sb-subtype-a > .sb-content > .sb-speech-bubble,
216	+ .sb-type-ln > .sb-subtype-b > .sb-content > .sb-speech-bubble {
217	+ position: relative;
218	+ z-index: 2;
219	+ padding: 6px 12px;
220	+ background-color: #FCFCFC;
221	+ border-style: solid;
222	+ border-width: 1px;
223	+ border-color: #AAAAAA #999999 #777777;
224	+ border-radius: 15px;
225	+ color: #333333;
226	+ }
227	+
228	+ .sb-type-ln > .sb-subtype-a > .sb-content > .sb-speech-bubble {
229	+ border-radius: 0 15px 15px 15px;
230	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(0, 0, 0, 0.1) inset;
231	+ }
232	+
233	+ .sb-type-ln > .sb-subtype-b > .sb-content > .sb-speech-bubble {
234	+ background-color: #BBFF77;
235	+ border-radius: 15px 0 15px 15px;
236	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(90, 127, 60, 0.2) inset;
237	+ }
238	+
239	+
240	+
241	+
242	+ /----------------------------------------------------------------------------------/
243	+ /* ln用に調整した考えてるタイプの吹き出し */
244	+ /* ln-Think Type (For c,d) */
245	+ /----------------------------------------------------------------------------------/
246	+
247	+ /**
248	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
249	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
250	+ *
251	+ * セリフ&引き出し部分
252	+ * Serief& Tail part
253	+ */
254	+
255	+ @media screen and (min-width:721px) {
256	+ .sb-type-ln > .sb-subtype-c > .sb-content {
257	+ float: left;
258	+ position: relative;
259	+ padding-top: 1.5em;
260	+ margin-left: 100px;
261	+ margin-right: 80px;
262	+ }
263	+ }
264	+
265	+ @media screen and (max-width:720px) {
266	+ .sb-type-ln > .sb-subtype-c > .sb-content {
267	+ float: left;
268	+ position: relative;
269	+ padding-top: 1.5em;
270	+ margin-left: 100px;
271	+ }
272	+ }
273	+
274	+ .sb-type-ln > .sb-subtype-c > .sb-content:before {
275	+ position: absolute;
276	+ top: 24px;
277	+ left: -17px;
278	+ height: 12px;
279	+ width: 12px;
280	+ background-color: #FCFCFC;
281	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(0, 0, 0, 0.1) inset;
282	+ border:solid 1px #ABABAB;
283	+ border-radius: 10px;
284	+ color: #333333;
285	+ content: "";
286	+ }
287	+
288	+ .sb-type-ln > .sb-subtype-c > .sb-content:after {
289	+ position: absolute;
290	+ top: 20px;
291	+ left: -28px;
292	+ height: 8px;
293	+ width: 8px;
294	+ background-color: #FCFCFC;
295	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(0, 0, 0, 0.1) inset;
296	+ border:solid 1px #ABABAB;
297	+ border-radius: 5px;
298	+ color: #333333;
299	+ content: "";
300	+ }
301	+
302	+
303	+
304	+
305	+ @media screen and (min-width:721px) {
306	+ .sb-type-ln > .sb-subtype-d > .sb-content {
307	+ float: right;
308	+ position: relative;
309	+ padding-top: 1.5em;
310	+ margin-left: 80px;
311	+ margin-right: 100px;
312	+ }
313	+ }
314	+
315	+ @media screen and (max-width:720px) {
316	+ .sb-type-ln > .sb-subtype-d > .sb-content {
317	+ float: right;
318	+ position: relative;
319	+ padding-top: 1.5em;
320	+ margin-right: 100px;
321	+ }
322	+ }
323	+
324	+ .sb-type-ln > .sb-subtype-d > .sb-content:before {
325	+ position: absolute;
326	+ top: 24px;
327	+ right: -17px;
328	+ height: 12px;
329	+ width: 12px;
330	+ background-color: #BBFF77;
331	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(90, 127, 60, 0.2) inset;
332	+ border:solid 1px #AAAAAA;
333	+ border-radius: 10px;
334	+ content: "";
335	+ }
336	+
337	+ .sb-type-ln > .sb-subtype-d > .sb-content:after {
338	+ position: absolute;
339	+ top: 20px;
340	+ right: -27px;
341	+ height: 8px;
342	+ width: 8px;
343	+ background-color: #BBFF77;
344	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(90, 127, 60, 0.2) inset;
345	+ border:solid 1px #AAAAAA;
346	+ border-radius: 5px;
347	+ content: "";
348	+ }
349	+
350	+
351	+ /**
352	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
353	+ *
354	+ * 吹き出しの本体部分
355	+ * Speach bubble' body part
356	+ */
357	+
358	+ .sb-type-ln > .sb-subtype-c > .sb-content > .sb-speech-bubble,
359	+ .sb-type-ln > .sb-subtype-d > .sb-content > .sb-speech-bubble {
360	+ position: relative;
361	+ padding: 6px 12px;
362	+ z-index: 2;
363	+ background-color: #FCFCFC;
364	+ border-style: solid;
365	+ border-width: 1px;
366	+ border-color: #AAAAAA #999999 #777777;
367	+ border-radius: 15px;
368	+ color: #333333;
369	+ }
370	+
371	+ .sb-type-ln > .sb-subtype-c > .sb-content > .sb-speech-bubble {
372	+ border-radius: 15px 15px 15px 15px;
373	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(0, 0, 0, 0.1) inset;
374	+ }
375	+
376	+ .sb-type-ln > .sb-subtype-d > .sb-content > .sb-speech-bubble {
377	+ background-color: #BBFF77;
378	+ border-radius: 15px 15px 15px 15px;
379	+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(255, 255, 255, 0.5) inset, 0 -10px 10px rgba(90, 127, 60, 0.2) inset;
380	+ }

css/sb-type-pink.css ADDED Viewed

	@@ -0,0 +1,339 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-pink {
11	+ overflow: hidden;
12	+ padding: 10px 20px;
13	+ margin: 0;
14	+ line-height: 1.5;
15	+ color: #333333;
16	+ }
17	+
18	+ .sb-type-pink > .sb-subtype-a:after,
19	+ .sb-type-pink > .sb-subtype-b:after,
20	+ .sb-type-pink > .sb-subtype-c:after,
21	+ .sb-type-pink > .sb-subtype-d:after {
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+ /**
28	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
29	+ *
30	+ * 話者領域
31	+ * Speaker Field
32	+ */
33	+
34	+ .sb-type-pink > .sb-subtype-a > .sb-speaker,
35	+ .sb-type-pink > .sb-subtype-c > .sb-speaker {
36	+ float: left;
37	+ margin-right: -70px;
38	+ width: 70px;
39	+ }
40	+
41	+ .sb-type-pink > .sb-subtype-b > .sb-speaker,
42	+ .sb-type-pink > .sb-subtype-d > .sb-speaker {
43	+ float: right;
44	+ margin-left: -70px;
45	+ width: 70px;
46	+ }
47	+
48	+ /**
49	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
50	+ *
51	+ * 話者のアイコン部分
52	+ * Speaker Icon part
53	+ */
54	+
55	+ .sb-type-pink > .sb-subtype-a > .sb-speaker > .sb-icon,
56	+ .sb-type-pink > .sb-subtype-b > .sb-speaker > .sb-icon,
57	+ .sb-type-pink > .sb-subtype-c > .sb-speaker > .sb-icon,
58	+ .sb-type-pink > .sb-subtype-d > .sb-speaker > .sb-icon {
59	+ text-align: center;
60	+ height: 60px;
61	+ }
62	+
63	+ .sb-type-pink > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
64	+ .sb-type-pink > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
65	+ .sb-type-pink > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-pink > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
67	+ height: 60px;
68	+ width: 60px;
69	+ border-radius: 10px;
70	+ }
71	+
72	+ /**
73	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
74	+ *
75	+ * 話者の名称部分
76	+ * Speaker name part
77	+ */
78	+
79	+ .sb-type-pink > .sb-subtype-a > .sb-speaker > .sb-name,
80	+ .sb-type-pink > .sb-subtype-b > .sb-speaker > .sb-name,
81	+ .sb-type-pink > .sb-subtype-c > .sb-speaker > .sb-name,
82	+ .sb-type-pink > .sb-subtype-d > .sb-speaker > .sb-name {
83	+ overflow: hidden;
84	+ font-size: 12px;
85	+ font-weight: bold;
86	+ text-align: center;
87	+ color: #FF0099;
88	+ }
89	+
90	+ /----------------------------------------------------------------------------------/
91	+ /* pinkタイプの吹き出し */
92	+ /* pink Type (For a,b) */
93	+ /----------------------------------------------------------------------------------/
94	+
95	+ /**
96	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
97	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
98	+ *
99	+ * セリフ&引き出し部分
100	+ * Serief& Tail part
101	+ */
102	+
103	+ @media screen and (min-width:721px) {
104	+ .sb-type-pink > .sb-subtype-a > .sb-content {
105	+ float: left;
106	+ position: relative;
107	+ margin-left: 80px;
108	+ margin-right:80px;
109	+ }
110	+ }
111	+
112	+ @media screen and (max-width:720px) {
113	+ .sb-type-pink > .sb-subtype-a > .sb-content {
114	+ float: left;
115	+ position: relative;
116	+ margin-left: 80px;
117	+ }
118	+ }
119	+
120	+ .sb-type-pink > .sb-subtype-a > .sb-content:before {
121	+ position: absolute;
122	+ top: 10px;
123	+ left: -6px;
124	+ z-index: 1;
125	+ height: 0;
126	+ width: 0;
127	+ border-style: solid solid solid none;
128	+ border-width: 6px;
129	+ border-color: transparent #FF0099;
130	+ content: "";
131	+ }
132	+
133	+ .sb-type-pink > .sb-subtype-a > .sb-content:after {
134	+ position: absolute;
135	+ top: 10px;
136	+ left: -3px;
137	+ z-index: 3;
138	+ height: 0;
139	+ width: 0;
140	+ border-style: solid solid solid none;
141	+ border-width: 6px;
142	+ border-color: transparent #FFF0F8;
143	+ content: "";
144	+ }
145	+
146	+
147	+
148	+
149	+ @media screen and (min-width:721px) {
150	+ .sb-type-pink > .sb-subtype-b > .sb-content {
151	+ float: right;
152	+ position: relative;
153	+ margin-right: 80px;
154	+ margin-left: 80px;
155	+ }
156	+ }
157	+
158	+ @media screen and (max-width:720px) {
159	+ .sb-type-pink > .sb-subtype-b > .sb-content {
160	+ float: right;
161	+ position: relative;
162	+ margin-right: 80px;
163	+ }
164	+ }
165	+
166	+ .sb-type-pink > .sb-subtype-b > .sb-content:before {
167	+ position: absolute;
168	+ top: 10px;
169	+ right: -6px;
170	+ z-index: 1;
171	+ height: 0;
172	+ width: 0;
173	+ border-style: solid none solid solid;
174	+ border-width: 6px;
175	+ border-color: transparent #FF0099;
176	+ content: "";
177	+ }
178	+
179	+ .sb-type-pink > .sb-subtype-b > .sb-content:after {
180	+ position: absolute;
181	+ top: 10px;
182	+ right: -3px;
183	+ z-index: 3;
184	+ height: 0;
185	+ width: 0;
186	+ border-style: solid none solid solid;
187	+ border-width: 6px;
188	+ border-color: transparent #FFF0F8;
189	+ content: "";
190	+ }
191	+
192	+ /**
193	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
194	+ *
195	+ * 吹き出しの本体部分
196	+ * Speach bubble' body part
197	+ */
198	+
199	+ .sb-type-pink > .sb-subtype-a > .sb-content > .sb-speech-bubble,
200	+ .sb-type-pink > .sb-subtype-b > .sb-content > .sb-speech-bubble {
201	+ position: relative;
202	+ z-index: 2;
203	+ padding: 5px 10px;
204	+ background-color: #FFF0F8;
205	+ border-style: solid;
206	+ border-width: 2px;
207	+ border-color: #FF0099;
208	+ border-radius: 10px;
209	+ color: #FF0099;
210	+ }
211	+
212	+
213	+
214	+
215	+ /----------------------------------------------------------------------------------/
216	+ /* pink用に調整した考えてるタイプの吹き出し */
217	+ /* pink-Think Type (For c,d) */
218	+ /----------------------------------------------------------------------------------/
219	+
220	+ /**
221	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
222	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
223	+ *
224	+ * セリフ&引き出し部分
225	+ * Serief& Tail part
226	+ */
227	+
228	+ @media screen and (min-width:721px) {
229	+ .sb-type-pink > .sb-subtype-c > .sb-content {
230	+ float: left;
231	+ position: relative;
232	+ padding-top: 1.5em;
233	+ margin-left: 100px;
234	+ margin-right: 80px;
235	+ }
236	+ }
237	+
238	+ @media screen and (max-width:720px) {
239	+ .sb-type-pink > .sb-subtype-c > .sb-content {
240	+ float: left;
241	+ position: relative;
242	+ padding-top: 1.5em;
243	+ margin-left: 100px;
244	+ }
245	+ }
246	+
247	+ .sb-type-pink > .sb-subtype-c > .sb-content:before {
248	+ position: absolute;
249	+ top: 24px;
250	+ left: -17px;
251	+ height: 10px;
252	+ width: 10px;
253	+ background-color: #FFF0F8;
254	+ border:solid 2px #FF0099;
255	+ border-radius: 8px;
256	+ color: #333333;
257	+ content: "";
258	+ }
259	+
260	+ .sb-type-pink > .sb-subtype-c > .sb-content:after {
261	+ position: absolute;
262	+ top: 20px;
263	+ left: -27px;
264	+ height: 6px;
265	+ width: 6px;
266	+ background-color: #FFF0F8;
267	+ border:solid 2px #FF0099;
268	+ border-radius: 5px;
269	+ color: #333333;
270	+ content: "";
271	+ }
272	+
273	+
274	+
275	+
276	+ @media screen and (min-width:721px)
277	+ {
278	+ .sb-type-pink > .sb-subtype-d > .sb-content {
279	+ float: right;
280	+ position: relative;
281	+ padding-top: 1.5em;
282	+ margin-left: 80px;
283	+ margin-right: 100px;
284	+ }
285	+ }
286	+ @media screen and (max-width:720px)
287	+ {
288	+ .sb-type-pink > .sb-subtype-d > .sb-content {
289	+ float: right;
290	+ position: relative;
291	+ padding-top: 1.5em;
292	+ margin-right: 100px;
293	+ }
294	+ }
295	+
296	+ .sb-type-pink > .sb-subtype-d > .sb-content:before {
297	+ position: absolute;
298	+ top: 24px;
299	+ right: -17px;
300	+ height: 10px;
301	+ width: 10px;
302	+ background-color: #FFF0F8;
303	+ border: solid 2px #FF0099;
304	+ border-radius: 8px;
305	+ content: "";
306	+ }
307	+
308	+ .sb-type-pink > .sb-subtype-d > .sb-content:after {
309	+ position: absolute;
310	+ top: 20px;
311	+ right: -27px;
312	+ height: 6px;
313	+ width: 6px;
314	+ background-color: #FFF0F8;
315	+ border: solid 2px #FF0099;
316	+ border-radius: 5px;
317	+ content: "";
318	+ }
319	+
320	+
321	+ /**
322	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
323	+ *
324	+ * 吹き出しの本体部分
325	+ * Speach bubble' body part
326	+ */
327	+
328	+ .sb-type-pink > .sb-subtype-c > .sb-content > .sb-speech-bubble,
329	+ .sb-type-pink > .sb-subtype-d > .sb-content > .sb-speech-bubble {
330	+ position: relative;
331	+ padding: 5px 10px;
332	+ z-index: 2;
333	+ background-color: #FFF0F8;
334	+ border-style: solid;
335	+ border-width: 2px;
336	+ border-color: #FF0099;
337	+ border-radius: 10px;
338	+ color: #FF0099;
339	+ }

css/sb-type-rtail.css ADDED Viewed

	@@ -0,0 +1,327 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-rtail {
11	+ overflow: hidden;
12	+ line-height: 1.5;
13	+ color: #333333;
14	+ padding: 5px 20px;
15	+ margin: 0;
16	+ }
17	+
18	+ .sb-type-rtail > .sb-subtype-a:after,
19	+ .sb-type-rtail > .sb-subtype-b:after,
20	+ .sb-type-rtail > .sb-subtype-c:after,
21	+ .sb-type-rtail > .sb-subtype-d:after {
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+
28	+ /**
29	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
30	+ *
31	+ * 話者領域
32	+ * Speaker Field
33	+ */
34	+
35	+ .sb-type-rtail > .sb-subtype-a > .sb-speaker,
36	+ .sb-type-rtail > .sb-subtype-c > .sb-speaker {
37	+ float: left;
38	+ margin-right: -70px;
39	+ width: 70px;
40	+ }
41	+
42	+ .sb-type-rtail > .sb-subtype-b > .sb-speaker,
43	+ .sb-type-rtail > .sb-subtype-d > .sb-speaker {
44	+ float: right;
45	+ margin-left: -70px;
46	+ width: 70px;
47	+ }
48	+
49	+ /**
50	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
51	+ *
52	+ * 話者のアイコン部分
53	+ * Speaker Icon part
54	+ */
55	+
56	+ .sb-type-rtail > .sb-subtype-a > .sb-speaker > .sb-icon,
57	+ .sb-type-rtail > .sb-subtype-b > .sb-speaker > .sb-icon,
58	+ .sb-type-rtail > .sb-subtype-c > .sb-speaker > .sb-icon,
59	+ .sb-type-rtail > .sb-subtype-d > .sb-speaker > .sb-icon {
60	+ text-align: center;
61	+ height: 60px;
62	+ }
63	+
64	+ .sb-type-rtail > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
65	+ .sb-type-rtail > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-rtail > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
67	+ .sb-type-rtail > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
68	+ height: 60px;
69	+ width: 60px;
70	+ border-radius: 5px;
71	+ }
72	+
73	+ /**
74	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
75	+ *
76	+ * 話者の名称部分
77	+ * Speaker name part
78	+ */
79	+
80	+ .sb-type-rtail > .sb-subtype-a > .sb-speaker > .sb-name,
81	+ .sb-type-rtail > .sb-subtype-b > .sb-speaker > .sb-name,
82	+ .sb-type-rtail > .sb-subtype-c > .sb-speaker > .sb-name,
83	+ .sb-type-rtail > .sb-subtype-d > .sb-speaker > .sb-name {
84	+ overflow: hidden;
85	+ font-size: 12px;
86	+ text-align: center;
87	+ }
88	+
89	+
90	+
91	+ /----------------------------------------------------------------------------------/
92	+ /* rtailタイプの吹き出し */
93	+ /* rtail Type (For a,b) */
94	+ /----------------------------------------------------------------------------------/
95	+
96	+ /**
97	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
98	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
99	+ *
100	+ * セリフ&引き出し部分
101	+ * Serief& Tail part
102	+ */
103	+
104	+ @media screen and (min-width:721px) {
105	+ .sb-type-rtail > .sb-subtype-a > .sb-content {
106	+ float: left;
107	+ position: relative;
108	+ margin-left: 80px;
109	+ margin-right: 80px;
110	+ }
111	+ }
112	+ @media screen and (max-width:720px) {
113	+ .sb-type-rtail > .sb-subtype-a > .sb-content {
114	+ float: left;
115	+ position: relative;
116	+ margin-left: 80px;
117	+ }
118	+ }
119	+
120	+ .sb-type-rtail > .sb-subtype-a > .sb-content:before {
121	+ position: absolute;
122	+ top: -5px;
123	+ left: -11px;
124	+ z-index: 1;
125	+ height: 50px;
126	+ width: 50px;
127	+ border-radius: 25px;
128	+ background: #4FDCE2;
129	+ content: "";
130	+ }
131	+
132	+ .sb-type-rtail > .sb-subtype-a > .sb-content:after {
133	+ position: absolute;
134	+ top: -16px;
135	+ left: -15px;
136	+ z-index: 2;
137	+ height: 45px;
138	+ width: 57px;
139	+ border-radius: 15px;
140	+ background: #FFFFFF;
141	+ content: "";
142	+ }
143	+
144	+ @media screen and (min-width:721px)
145	+ {
146	+ .sb-type-rtail > .sb-subtype-b > .sb-content {
147	+ float: right;
148	+ position: relative;
149	+ margin-right: 80px;
150	+ margin-left: 80px;
151	+ }
152	+ }
153	+ @media screen and (max-width:720px)
154	+ {
155	+ .sb-type-rtail > .sb-subtype-b > .sb-content {
156	+ float: right;
157	+ position: relative;
158	+ margin-right: 80px;
159	+ }
160	+ }
161	+ .sb-type-rtail > .sb-subtype-b > .sb-content:before {
162	+ position: absolute;
163	+ top: -5px;
164	+ right: -11px;
165	+ z-index: 1;
166	+ height: 50px;
167	+ width: 50px;
168	+ border-radius: 25px;
169	+ background: #4FDCE2;
170	+ content: "";
171	+ }
172	+
173	+ .sb-type-rtail > .sb-subtype-b > .sb-content:after {
174	+ position: absolute;
175	+ top: -16px;
176	+ right: -15px;
177	+ z-index: 2;
178	+ height: 45px;
179	+ width: 57px;
180	+ border-radius: 15px;
181	+ background: #FFFFFF;
182	+ content: "";
183	+ }
184	+
185	+ /**
186	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
187	+ *
188	+ * 吹き出しの本体部分
189	+ * Speach bubble' body part
190	+ */
191	+
192	+ .sb-type-rtail > .sb-subtype-a > .sb-content > .sb-speech-bubble,
193	+ .sb-type-rtail > .sb-subtype-b > .sb-content > .sb-speech-bubble {
194	+ position: relative;
195	+ padding: 17px 11px;
196	+ z-index: 3;
197	+ background: #4FDCE2;
198	+ border-radius: 5px;
199	+ }
200	+
201	+
202	+
203	+
204	+ /----------------------------------------------------------------------------------/
205	+ /* rtail用に調整した考えてるタイプの吹き出し */
206	+ /* rtail-Think Type (For c,d) */
207	+ /----------------------------------------------------------------------------------/
208	+
209	+ /**
210	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
211	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
212	+ *
213	+ * セリフ&引き出し部分
214	+ * Serief& Tail part
215	+ */
216	+
217	+ @media screen and (min-width:721px) {
218	+ .sb-type-rtail > .sb-subtype-c > .sb-content {
219	+ float: left;
220	+ position: relative;
221	+ padding-top: 14px;
222	+ margin-left: 100px;
223	+ margin-right: 80px;
224	+ }
225	+ }
226	+
227	+ @media screen and (max-width:720px) {
228	+ .sb-type-rtail > .sb-subtype-c > .sb-content {
229	+ float: left;
230	+ position: relative;
231	+ padding-top: 14px;
232	+ margin-left: 100px;
233	+ }
234	+ }
235	+
236	+ .sb-type-rtail > .sb-subtype-c > .sb-content:before {
237	+ position: absolute;
238	+ top: 24px;
239	+ left: -17px;
240	+ height: 14px;
241	+ width: 14px;
242	+ background-color: #4FDCE2;
243	+ border-color: #4FDCE2;
244	+ border-radius: 14px;
245	+ content: "";
246	+ }
247	+
248	+ .sb-type-rtail > .sb-subtype-c > .sb-content:after {
249	+ position: absolute;
250	+ top: 20px;
251	+ left: -28px;
252	+ height: 9px;
253	+ width: 9px;
254	+ background-color: #4FDCE2;
255	+ border-color: #4FDCE2;
256	+ border-radius: 9px;
257	+ content: "";
258	+ }
259	+
260	+
261	+
262	+ @media screen and (min-width:721px)
263	+ {
264	+ .sb-type-rtail > .sb-subtype-d > .sb-content {
265	+ float: right;
266	+ position: relative;
267	+ padding-top: 14px;
268	+ margin-left: 80px;
269	+ margin-right: 100px;
270	+ }
271	+ }
272	+ @media screen and (max-width:720px)
273	+ {
274	+ .sb-type-rtail > .sb-subtype-d > .sb-content {
275	+ float: right;
276	+ position: relative;
277	+ padding-top: 14px;
278	+ margin-right: 100px;
279	+ }
280	+ }
281	+ .sb-type-rtail > .sb-subtype-d > .sb-content:before {
282	+ position: absolute;
283	+ top: 24px;
284	+ right: -17px;
285	+ height: 14px;
286	+ width: 14px;
287	+ background-color: #4FDCE2;
288	+ border-color: #4FDCE2;
289	+ border-radius: 14px;
290	+ content: "";
291	+ }
292	+
293	+ .sb-type-rtail > .sb-subtype-d > .sb-content:after {
294	+ position: absolute;
295	+ top: 20px;
296	+ right: -27px;
297	+ height: 9px;
298	+ width: 9px;
299	+ background-color: #4FDCE2;
300	+ border-color: #4FDCE2;
301	+ border-radius: 9px;
302	+ content: "";
303	+ }
304	+
305	+ /**
306	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
307	+ *
308	+ * 吹き出しの本体部分
309	+ * Speach bubble' body part
310	+ */
311	+
312	+ .sb-type-rtail > .sb-subtype-c > .sb-content > .sb-speech-bubble,
313	+ .sb-type-rtail > .sb-subtype-d > .sb-content > .sb-speech-bubble {
314	+ position: relative;
315	+ padding: 5px 10px;
316	+ z-index: 2;
317	+ background-color: #4FDCE2;
318	+ border-style: solid;
319	+ border-width: 1px;
320	+ border-color: #4FDCE2;
321	+ border-radius: 4px;
322	+ }
323	+
324	+ .sb-type-rtail > .sb-subtype-d > .sb-content > .sb-speech-bubble {
325	+ background-color: #4FDCE2;
326	+ border-color: #4FDCE2;
327	+ }

css/sb-type-std.css ADDED Viewed

	@@ -0,0 +1,321 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-std {
11	+ overflow: hidden;
12	+ padding: 10px 20px;
13	+ margin: 0;
14	+ line-height: 1.5;
15	+ color: #333333;
16	+ }
17	+
18	+ .sb-type-std > .sb-subtype-a:after,
19	+ .sb-type-std > .sb-subtype-b:after,
20	+ .sb-type-std > .sb-subtype-c:after,
21	+ .sb-type-std > .sb-subtype-d:after {
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+ /**
28	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
29	+ *
30	+ * 話者領域
31	+ * Speaker Field
32	+ */
33	+
34	+ .sb-type-std > .sb-subtype-a > .sb-speaker,
35	+ .sb-type-std > .sb-subtype-c > .sb-speaker {
36	+ float: left;
37	+ margin-right: -70px;
38	+ width: 70px;
39	+ }
40	+
41	+ .sb-type-std > .sb-subtype-b > .sb-speaker,
42	+ .sb-type-std > .sb-subtype-d > .sb-speaker {
43	+ float: right;
44	+ margin-left: -70px;
45	+ width: 70px;
46	+ }
47	+
48	+ /**
49	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
50	+ *
51	+ * 話者のアイコン部分
52	+ * Speaker Icon part
53	+ */
54	+
55	+ .sb-type-std > .sb-subtype-a > .sb-speaker > .sb-icon,
56	+ .sb-type-std > .sb-subtype-b > .sb-speaker > .sb-icon,
57	+ .sb-type-std > .sb-subtype-c > .sb-speaker > .sb-icon,
58	+ .sb-type-std > .sb-subtype-d > .sb-speaker > .sb-icon {
59	+ text-align: center;
60	+ height: 60px;
61	+ }
62	+
63	+ .sb-type-std > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
64	+ .sb-type-std > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
65	+ .sb-type-std > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-std > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
67	+ height: 60px;
68	+ width: 60px;
69	+ border-radius: 5px;
70	+ }
71	+
72	+ /**
73	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
74	+ *
75	+ * 話者の名称部分
76	+ * Speaker name part
77	+ */
78	+
79	+ .sb-type-std > .sb-subtype-a > .sb-speaker > .sb-name,
80	+ .sb-type-std > .sb-subtype-b > .sb-speaker > .sb-name,
81	+ .sb-type-std > .sb-subtype-c > .sb-speaker > .sb-name,
82	+ .sb-type-std > .sb-subtype-d > .sb-speaker > .sb-name {
83	+ overflow: hidden;
84	+ text-align: center;
85	+ font-size: 12px;
86	+ }
87	+
88	+
89	+
90	+ /----------------------------------------------------------------------------------/
91	+ /* stdタイプの吹き出し */
92	+ /* std Type (For a,b) */
93	+ /----------------------------------------------------------------------------------/
94	+
95	+ /**
96	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
97	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
98	+ *
99	+ * セリフ&引き出し部分
100	+ * Serief& Tail part
101	+ */
102	+
103	+ @media screen and (min-width:721px) {
104	+ .sb-type-std > .sb-subtype-a > .sb-content {
105	+ float: left;
106	+ position: relative;
107	+ margin-left: 80px;
108	+ margin-right:80px;
109	+ }
110	+ }
111	+ @media screen and (max-width:720px) {
112	+ .sb-type-std > .sb-subtype-a > .sb-content {
113	+ float: left;
114	+ position: relative;
115	+ margin-left: 80px;
116	+ }
117	+ }
118	+
119	+ .sb-type-std > .sb-subtype-a > .sb-content:before {
120	+ position: absolute;
121	+ top: 9px;
122	+ left: -6px;
123	+ z-index: 1;
124	+ height: 0;
125	+ width: 0;
126	+ border-style: solid solid solid none;
127	+ border-width: 6px;
128	+ border-color: transparent #CCCCCC;
129	+ content: "";
130	+ }
131	+
132	+ .sb-type-std > .sb-subtype-a > .sb-content:after {
133	+ position: absolute;
134	+ top: 9px;
135	+ left: -5px;
136	+ z-index: 3;
137	+ height: 0;
138	+ width: 0;
139	+ border-style: solid solid solid none;
140	+ border-width: 6px;
141	+ border-color: transparent #FFFFFF;
142	+ content: "";
143	+ }
144	+
145	+
146	+
147	+
148	+ @media screen and (min-width:721px) {
149	+ .sb-type-std > .sb-subtype-b > .sb-content {
150	+ float: right;
151	+ position: relative;
152	+ margin-right: 80px;
153	+ margin-left: 80px;
154	+ }
155	+ }
156	+ @media screen and (max-width:720px) {
157	+ .sb-type-std > .sb-subtype-b > .sb-content {
158	+ float: right;
159	+ position: relative;
160	+ margin-right: 80px;
161	+ }
162	+ }
163	+
164	+ .sb-type-std > .sb-subtype-b > .sb-content:before {
165	+ position: absolute;
166	+ top: 9px;
167	+ right: -6px;
168	+ z-index: 1;
169	+ height: 0;
170	+ width: 0;
171	+ border-style: solid none solid solid;
172	+ border-width: 6px;
173	+ border-color: transparent #CCCCCC;
174	+ content: "";
175	+ }
176	+
177	+ .sb-type-std > .sb-subtype-b > .sb-content:after {
178	+ position: absolute;
179	+ top: 9px;
180	+ right: -5px;
181	+ z-index: 3;
182	+ width: 0;
183	+ height: 0;
184	+ border-style: solid none solid solid;
185	+ border-width: 6px;
186	+ border-color: transparent #FFFFFF;
187	+ content: "";
188	+ }
189	+
190	+
191	+ /**
192	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
193	+ *
194	+ * 吹き出しの本体部分
195	+ * Speach bubble' body part
196	+ */
197	+
198	+ .sb-type-std > .sb-subtype-a > .sb-content > .sb-speech-bubble,
199	+ .sb-type-std > .sb-subtype-b > .sb-content > .sb-speech-bubble {
200	+ position: relative;
201	+ padding: 5px 10px;
202	+ z-index: 2;
203	+ background-color: #FFFFFF;
204	+ border-style: solid;
205	+ border-width: 1px;
206	+ border-color: #CCCCCC;
207	+ border-radius: 5px;
208	+ color: #333333;
209	+ }
210	+
211	+
212	+
213	+ /----------------------------------------------------------------------------------/
214	+ /* std用に調整した考えてるタイプの吹き出し */
215	+ /* std-Think Type (For c,d) */
216	+ /----------------------------------------------------------------------------------/
217	+
218	+ /**
219	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
220	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
221	+ *
222	+ * セリフ&引き出し部分
223	+ * Serief& Tail part
224	+ */
225	+
226	+ @media screen and (min-width:721px) {
227	+ .sb-type-std > .sb-subtype-c > .sb-content {
228	+ float: left;
229	+ position: relative;
230	+ margin-left: 100px;
231	+ margin-right: 100px;
232	+ }
233	+ }
234	+ @media screen and (max-width:720px) {
235	+ .sb-type-std > .sb-subtype-c > .sb-content {
236	+ float: left;
237	+ position: relative;
238	+ margin-left: 100px;
239	+ }
240	+ }
241	+
242	+ .sb-type-std > .sb-subtype-c > .sb-content:before {
243	+ position: absolute;
244	+ top: 10px;
245	+ left: -17px;
246	+ height: 12px;
247	+ width: 12px;
248	+ border:dashed 1px #909090;
249	+ border-radius: 10px;
250	+ content: "";
251	+ }
252	+
253	+ .sb-type-std > .sb-subtype-c > .sb-content:after {
254	+ content: "";
255	+ position: absolute;
256	+ top: 20px;
257	+ left: -28px;
258	+ height: 8px;
259	+ width: 8px;
260	+ border:dashed 1px #909090;
261	+ border-radius: 5px;
262	+ }
263	+
264	+
265	+
266	+
267	+ @media screen and (min-width:721px) {
268	+ .sb-type-std > .sb-subtype-d > .sb-content {
269	+ float: right;
270	+ position: relative;
271	+ margin-right: 100px;
272	+ margin-left: 100px;
273	+ }
274	+ }
275	+
276	+ @media screen and (max-width:720px) {
277	+ .sb-type-std > .sb-subtype-d > .sb-content {
278	+ float: right;
279	+ position: relative;
280	+ margin-right: 100px;
281	+ }
282	+ }
283	+
284	+ .sb-type-std > .sb-subtype-d > .sb-content:before {
285	+ position: absolute;
286	+ top: 10px;
287	+ right: -17px;
288	+ height: 12px;
289	+ width: 12px;
290	+ border:dashed 1px #909090;
291	+ border-radius: 10px;
292	+ content: "";
293	+ }
294	+
295	+ .sb-type-std > .sb-subtype-d > .sb-content:after {
296	+ position: absolute;
297	+ top: 20px;
298	+ right: -28px;
299	+ height: 8px;
300	+ width: 8px;
301	+ border:dashed 1px #909090;
302	+ border-radius: 5px;
303	+ content: "";
304	+ }
305	+
306	+ /**
307	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
308	+ *
309	+ * 吹き出しの本体部分
310	+ * Speach bubble' body part
311	+ */
312	+
313	+ .sb-type-std > .sb-subtype-c > .sb-content > .sb-speech-bubble,
314	+ .sb-type-std > .sb-subtype-d > .sb-content > .sb-speech-bubble {
315	+ position: relative;
316	+ padding: 5px 10px;
317	+ margin-bottom: 20px;
318	+ border:dashed 1px #909090;
319	+ border-radius: 5px;
320	+ }
321	+

css/sb-type-think.css ADDED Viewed

	@@ -0,0 +1,250 @@


1	+ @charset "UTF-8";
2	+
3	+ /**
4	+ * .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
5	+ *
6	+ * コマ(アイコンと吹き出しをまとめたもの)部分
7	+ * frame(speaker icon and name, serief) part
8	+ */
9	+
10	+ .sb-type-think {
11	+ overflow: hidden;
12	+ padding: 5px 20px;
13	+ margin: 0;
14	+ line-height: 1.5;
15	+ color: #333333;
16	+ }
17	+
18	+ .sb-type-think > .sb-subtype-a:after,
19	+ .sb-type-think > .sb-subtype-b:after,
20	+ .sb-type-think > .sb-subtype-c:after,
21	+ .sb-type-think > .sb-subtype-d:after {
22	+ display: block;
23	+ clear: both;
24	+ content: "";
25	+ }
26	+
27	+
28	+ /**
29	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker
30	+ *
31	+ * 話者領域
32	+ * Speaker Field
33	+ */
34	+
35	+ .sb-type-think > .sb-subtype-a > .sb-speaker,
36	+ .sb-type-think > .sb-subtype-c > .sb-speaker {
37	+ float: left;
38	+ margin-right: -70px;
39	+ width: 70px;
40	+ }
41	+
42	+ .sb-type-think > .sb-subtype-b > .sb-speaker,
43	+ .sb-type-think > .sb-subtype-d > .sb-speaker {
44	+ float: right;
45	+ margin-left: -70px;
46	+ width: 70px;
47	+ }
48	+
49	+ /**
50	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
51	+ *
52	+ * 話者のアイコン部分
53	+ * Speaker Icon part
54	+ */
55	+
56	+ .sb-type-think > .sb-subtype-a > .sb-speaker > .sb-icon,
57	+ .sb-type-think > .sb-subtype-b > .sb-speaker > .sb-icon,
58	+ .sb-type-think > .sb-subtype-c > .sb-speaker > .sb-icon,
59	+ .sb-type-think > .sb-subtype-d > .sb-speaker > .sb-icon {
60	+ text-align: center;
61	+ height: 60px;
62	+ }
63	+
64	+ .sb-type-think > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
65	+ .sb-type-think > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
66	+ .sb-type-think > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
67	+ .sb-type-think > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
68	+ height: 60px;
69	+ width: 60px;
70	+ border-radius: 5px;
71	+ }
72	+
73	+ /**
74	+ * .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
75	+ *
76	+ * 話者の名称部分
77	+ * Speaker name part
78	+ */
79	+
80	+ .sb-type-think > .sb-subtype-a > .sb-speaker > .sb-name,
81	+ .sb-type-think > .sb-subtype-b > .sb-speaker > .sb-name,
82	+ .sb-type-think > .sb-subtype-c > .sb-speaker > .sb-name,
83	+ .sb-type-think > .sb-subtype-d > .sb-speaker > .sb-name {
84	+ overflow: hidden;
85	+ font-size: 12px;
86	+ text-align: center;
87	+ }
88	+
89	+
90	+ /**
91	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content
92	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
93	+ *
94	+ * セリフ&引き出し部分
95	+ * Serief& Tail part
96	+ */
97	+
98	+ @media screen and (min-width:721px) {
99	+ .sb-type-think > .sb-subtype-a > .sb-content,
100	+ .sb-type-think > .sb-subtype-c > .sb-content {
101	+ float: left;
102	+ position: relative;
103	+ margin-left: 100px;
104	+ margin-right: 100px;
105	+ }
106	+ }
107	+
108	+ @media screen and (max-width:720px) {
109	+ .sb-type-think > .sb-subtype-a > .sb-content,
110	+ .sb-type-think > .sb-subtype-c > .sb-content {
111	+ float: left;
112	+ position: relative;
113	+ margin-left: 100px;
114	+ }
115	+ }
116	+
117	+ .sb-type-think > .sb-subtype-a > .sb-content:before {
118	+ position: absolute;
119	+ top: 24px;
120	+ left: -17px;
121	+ height: 15px;
122	+ width: 15px;
123	+ background: #D9E5FF;
124	+ border-radius: 10px;
125	+ content: "";
126	+ }
127	+
128	+ .sb-type-think > .sb-subtype-a > .sb-content:after {
129	+ position: absolute;
130	+ top: 20px;
131	+ left: -28px;
132	+ height: 10px;
133	+ width: 10px;
134	+ background: #D9E5FF;
135	+ border-radius: 5px;
136	+ content: "";
137	+ }
138	+
139	+ .sb-type-think > .sb-subtype-c > .sb-content:before {
140	+ position: absolute;
141	+ top: 24px;
142	+ left: -17px;
143	+ height: 15px;
144	+ width: 15px;
145	+ background: #FFDDBB;
146	+ border-radius: 10px;
147	+ content: "";
148	+ }
149	+
150	+ .sb-type-think > .sb-subtype-c > .sb-content:after {
151	+ position: absolute;
152	+ top: 20px;
153	+ left: -28px;
154	+ height: 10px;
155	+ width: 10px;
156	+ background: #FFDDBB;
157	+ border-radius: 5px;
158	+ content: "";
159	+ }
160	+
161	+
162	+ @media screen and (min-width:721px)
163	+ {
164	+ .sb-type-think > .sb-subtype-b > .sb-content,
165	+ .sb-type-think > .sb-subtype-d > .sb-content {
166	+ float: right;
167	+ position: relative;
168	+ margin-right: 100px;
169	+ margin-left: 100px;
170	+ }
171	+ }
172	+ @media screen and (max-width:720px)
173	+ {
174	+ .sb-type-think > .sb-subtype-b > .sb-content,
175	+ .sb-type-think > .sb-subtype-d > .sb-content {
176	+ float: right;
177	+ position: relative;
178	+ margin-right: 100px;
179	+ }
180	+ }
181	+
182	+ .sb-type-think > .sb-subtype-b > .sb-content:before {
183	+ position: absolute;
184	+ top: 24px;
185	+ right: -17px;
186	+ height: 15px;
187	+ width: 15px;
188	+ background: #D9E5FF;
189	+ border-radius: 10px;
190	+ content: "";
191	+ }
192	+
193	+ .sb-type-think > .sb-subtype-b > .sb-content:after {
194	+ position: absolute;
195	+ top: 20px;
196	+ right: -28px;
197	+ height: 10px;
198	+ width: 10px;
199	+ background: #D9E5FF;
200	+ border-radius: 5px;
201	+ content: "";
202	+ }
203	+
204	+ .sb-type-think > .sb-subtype-d > .sb-content:before {
205	+ position: absolute;
206	+ top: 24px;
207	+ right: -17px;
208	+ height: 15px;
209	+ width: 15px;
210	+ background: #FFDDBB;
211	+ border-radius: 10px;
212	+ content: "";
213	+ }
214	+
215	+ .sb-type-think > .sb-subtype-d > .sb-content:after {
216	+ position: absolute;
217	+ top: 20px;
218	+ right: -28px;
219	+ height: 10px;
220	+ width: 10px;
221	+ background: #FFDDBB;
222	+ border-radius: 5px;
223	+ content: "";
224	+ }
225	+
226	+ /**
227	+ * .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
228	+ *
229	+ * 吹き出しの本体部分
230	+ * Speach bubble' body part
231	+ */
232	+
233	+ .sb-type-think > .sb-subtype-a > .sb-content > .sb-speech-bubble,
234	+ .sb-type-think > .sb-subtype-b > .sb-content > .sb-speech-bubble {
235	+ position: relative;
236	+ padding: 15px 10px;
237	+ margin-bottom: 20px;
238	+ background: #D9E5FF;
239	+ border-radius: 15px;
240	+ }
241	+
242	+ .sb-type-think > .sb-subtype-c > .sb-content > .sb-speech-bubble,
243	+ .sb-type-think > .sb-subtype-d > .sb-content > .sb-speech-bubble {
244	+ position: relative;
245	+ padding: 15px 10px;
246	+ margin-bottom: 20px;
247	+ background: #FFDDBB;
248	+ border-radius: 15px;
249	+ }
250	+

img/1.jpg ADDED Viewed

Binary file

img/2.jpg ADDED Viewed

Binary file

screenshot-1.png ADDED Viewed

Binary file

screenshot-2.png ADDED Viewed

Binary file

screenshot-3.png ADDED Viewed

Binary file

screenshot-4.png ADDED Viewed

Binary file

speech-bubble.php ADDED Viewed

	@@ -0,0 +1,31 @@


1	+ <?php
2	+ /*
3	+ Plugin Name: Speech bubble
4	+ Description: Speech bubble (ふきだしプラグイン) can easily add speech bubble ornament in your post, without direct HTML&CSS coding. ふきだしプラグインは簡単に記事にふきだしを追加することが可能です。ショートコードを用いるため直接的なHTMLとCSSのコーディングは不要です。
5	+ Version: 1.0
6	+ Author: Masashi Sonobe, Mamoru Fukuda
7	+ License: GPLv2 or later
8	+ */
9	+
10	+
11	+ /*
12	+ Copyright (C) 2014 Masashi Sonobe, Mamoru Fukuda
13	+
14	+ This program is free software; you can redistribute it and/or
15	+ modify it under the terms of the GNU General Public License
16	+ as published by the Free Software Foundation; either version 2
17	+ of the License, or (at your option) any later version.
18	+
19	+ This program is distributed in the hope that it will be useful,
20	+ but WITHOUT ANY WARRANTY; without even the implied warranty of
21	+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
22	+ GNU General Public License for more details.
23	+
24	+ You should have received a copy of the GNU General Public License
25	+ along with this program; if not, write to the Free Software
26	+ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
27	+ */
28	+
29	+ require_once dirname( __FILE__ ) . '/classes/SnbSpeechBubble.php';
30	+
31	+ new SnbSpeechBubble();

Speech bubble (ふきだしプラグイン) - Version 1.0.0

Version Description

Release Info

Version 1.0.0