SIRIUS(シリウス)のレスポンシブテンプレートで『改行の最適化』を実現する方法

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他

新サイトのご紹介

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

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

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

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

これに伴い、【新】SIRIUSテンプレートに対応した『SIRIUSでホームページ作成』サイトを新規公開しました。

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

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

※当サイトの更新ストップにより、一部の記事は自動的に新サイトの同記事に自動転送されます。

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

サンプル画像

 

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

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

 

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

 

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

 

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

 

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

 

確かに。

 

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

 

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

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

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

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

 

やり方としては以下のスタイルをCSSに加筆するだけです。

「テンプレート」→「スタイルシート編集」に書き込み)

 

コード

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

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

 

@media screen and (max-width: 640px) というのは『スマホで見た時には...』を意味する呪文のようなもんだと思ってください。

640という数字はシリウスのレスポンシブテンプレート用のものであって他のテンプレートでは480といった数字もあったりします。

この数字についての説明は長くなるので割愛します。

 

ただし上記の書き方はすべてのページで同じ動作をしちゃいます。

 

もしもエントリーページの記事だけに適用したいとか「記事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;
	}
}

以上です。

 


てっぺん