SIRIUS(シリウス)でスマホ表示時、吹き出し画像をPC表示と同じく左(右)寄せにする方法【レスポンシブテンプレート限定】

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

新サイトのご紹介

SIRIUSの大型バージョンアップ(ver1.5)によって、システム内部に様々な改良が加えられました。

それによって当サイトでご紹介している独自の機能拡張の一部が【新】テンプレートに標準で搭載されるようにもなってます。

反対に大型バージョンアップによって、これまでご紹介してきたTipsの中にはうまく作動しないものもあったりします。

よって今後このサイトの更新はストップすることにしました。
(サイトはしばらくは残しておきます)

これに伴い、新テンプレートに対応した新しい『SIRIUSの賢い使い方』サイトを公開しました。

さらに【新】SIRIUSテンプレートをベースにしたカスタムテンプレート【Volar】も公開中です。(※SIRIUS購入の特典になります)

【Volar】はこれまで私がご紹介してきたTipsが最初から組み込まれたカスタムテンプレートであり、当サイトではまだご紹介してない新機能も追加搭載してます。

新サイトの方もよろしくお願いします→SIRIUSでウェブサイト作成~ホームページ使いこなしのワザ~

※当サイトで紹介しているSIRIUS小技は順次新サイトに移植の予定です。

スマホ表示時、吹き出し画像をPC表示と同じく左(右)寄せにする方法【レスポンシブテンプレート限定】

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

この記事はレスポンシブテンプレート限定の内容です。

SIRIUS(シリウス)には
1クリックで吹き出しを表示できる機能が備わってます。

 

こんな↓感じですね。

 

キャプチャ画像

 

通常のSIRIUS(シリウス)サイトならPCでもスマホでも上図のように
画像とテキストが横並びで表示されますね。

 

ところがレスポンシブテンプレートだと、スマホで見た時は
画像がテキストの上に来てしまうんです。

 

こんな↓感じです。

 

キャプチャ画像

 

これって、、、吹き出しっぽく見えないような。。。

 

それに会話の数が多くなってくるとどっちの会話なんだか
ちょっとわかりにくくなると思うのですよ。

 

これはSIRIUSの便利機能(視認性を高めるため画像の中央表示)のせいなんですが、
吹き出し利用時はPCと同じような感じで表示させた方が
サイト訪問者もわかりやすいと思うのです。

 

というわけで、スマホで見た時もこちら↓のように、
吹き出しっぽく表示させるやり方をご紹介します。

(レスポンシブテンプレート限定の話ですよ)

 

キャプチャ画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


てっぺん