レスポンシブデザインテンプレートで『改行の最適化』を実現する方法

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

レスポンシブデザインテンプレートで『改行の最適化』を実現する方法(スマホサイト用)

サンプル画像

 

すべてのレスポンシブテンプレートで動作検証を行っているものではありません。ご了承ください。

カスタマイズの際の注意点として、元に戻せるようオリジナルファイルのコピーは必ず作ってください。

それでも不安な方はサイトのバックアップを事前に作成しておくと安心です。

レスポンシブデザインテンプレートならどの機器でも最適なレイアウトでサイトが表示されますが、
シリウス上位版のみの機能でもある「iPhoneサイト同時生成機能」 OFFにして使っている場合、
『改行の最適化』が利用できなくなります。

 

『改行の最適化』がわからない方は上のリンク先をご覧いただくとして、
この機能ってホントに便利なんですよ。(そう思ってるのは私だけ?)

 

理屈としては、シリウスが自動で改行(<br />)タグを除去して
ひと続きの文として表示してくれるというもの。

 

ハイ、ここから先は『改行の最適化』を知ってる前提で話していきますよ。

 

ここで気がついた方もいるかと思いますが、
じゃあ『iPhoneサイト同時生成機能』を ONにすればいいんじゃね?
ということにもなります。

 

確かに。

 

しかしそれだとせっかくレスポンシブデザインテンプレートを使っている意味がなくなっちゃいますでしょ。

 

それに『iPhoneサイト同時生成機能』を ONにするといろいろやっかいなこともあったりするんですよ。

 

それはいとも簡単に解決した

この疑問、実はシリウスのサポートに投げかけたことがあります。(^^;
その回答としては『大幅な改修になるので難しい』というものでした。

 

そんなわけで「それじゃぁ仕方ないなぁ」と思ってずっと放置していたんです。

 

でもつい先日、購読しているとあるブログを見てたら、
この問題を簡単に解決する記述を偶然見つけたのですよ。

 

やり方としては以下のプロパティを CSSに加筆するだけです。
「テンプレート」→「スタイルシート編集」に書き込み)

 

コード

@media screen and (max-width: 640px) {
	br {
		display:none;
	}
}

意味合いとしては”改行(<br />)マークを非表示にする”
→つまり改行を無視するということですね。

 

なるほど、こんな方法があったとは知りませんでした。
ただし上記の書き方はすべてのページで同じ動作をしちゃいます。

 

もしもエントリーページの記事だけに適用したいとか「記事1」だけに適用させたいなど
限定的に使いたい時は次のようにします。

 

★トップページは外してエントリーページだけに適用したい……
この場合、body classを使うのが手っ取り早いかと思います。
body class に関しては「特定のテンプレートだけに適用可能なCSS・body class」をご覧ください)

 

コード

@media screen and (max-width: 640px) {
	body.entrypage br {
		display:none;
	}
}

ここでは”body.entrypage”...となっていますが、もちろん body class 名はあなた自身が名付けたクラス名に変えてくださいね。

 

★カテゴリーページとエントリーページだけに適用したい……
複数のテンプレートにまたがる場合は「,(カンマ)」で区切って並べてあげましょう。

 

コード

@media screen and (max-width: 640px) {
	body.entrypage br,
	body.catpage br {
		display:none;
	}
}

 

★記事1 のみに適用したい……
この場合は「記事1」に該当する”id=text1”に当ててやります。

 

コード

@media screen and (max-width: 640px) {
	#text1 br {
		display:none;
	}
}

ちなみに @media screen and (max-width: 640px) というのは
『スマホで見た時には...』を意味する呪文のようなもんだと思ってください。(・_・;)
(640 という数字はシリウスのレスポンシブテンプレート用のものであって他のテンプレートでは 480といった数字が多いですね。この数字についての説明は長くなるので割愛します)

 

以上です。

 

これは通常のシリウステンプレートでも使えますよ。

詳しくはこちらのページの最後をご覧ください。

購入ページへ


TOPへ戻る