PC版の改行位置とスマホ版の改行位置を切り分ける動作を確認しました。
改行位置を切り分けるポイント
- 新しく作ったCSSを使う
- 新しく作ったCSSの読み込みは、ブログサブタイトルで行う
- CSSのメディアクエリーで改行位置を切り分ける
- 記事中のbrタグにclassを付ける
では、詳しく見ていきましょう。
新しく作ったCSSを使う
PC版とスマホ版で共通して使う「新しいCSS」を作ります。
既存のCSSにメディアクエリーを追記するのはダメです。
理由は、順番に説明しますね。
スマホ版で出力されるHTMLを見ると
ココログユーザーが操作できる
既存のCSS読み込み箇所がコメントアウトされてます。
コメントアウトされているため、読み込まれません。
これが理由１です。
新しく作ったCSSの読み込みは、ブログサブタイトルで行う
「【ココログ】スマホ版で改行位置を調整したいが「問題あり」」
でも書きましたが、
ココログはプロプランで上級テンプレートを使っていても、
スマホ版のHTMLを編集することが、できません。
テンプレートを編集してCSSを読み込ませることができないなら、どうするか？
ブログの「設定」－「基本設定」を選択すると「ブログのサブタイトル（キャッチフレーズ）」を入力できます。
ここで入力したものは、上級テンプレートでは以下のように出力します。
<h2><$MTBlogDescription$></h2>
<$MTBlogDescription$>のところが
入力した「ブログのサブタイトル（キャッチフレーズ）」に置き換わります。
かげさんが入力した内容は、下図のとおり。
キャッチフレーズの画像
<h2><$MTBlogDescription$></h2>
がこう置き換わります。
<h2>刻むぜ歴史！ ポツポツ日が開いたりしながらも、かげさん、地道に更新継続中！<br />2005年1月11日からの歴史ここにあり！</h2>
<link rel="stylesheet" href="https://kage3.cocolog-nifty.com/blog/common_style.css" type="text/css" />
<h2></h2>
「common_style.css」がかげさんが新しく作ったCSSです。
かげさんは、新しいCSSを上級テンプレートのインデックステンプレートとして作りました。
このため、CSSのパスを「blog/common_style.css」としています。
2019/03のココログリニューアル後で上級テンプレートを使っていない場合、
CSSのアップロードは、記事を書く時のファイルアップロードで行う必要があり
アップロード先は、「files」ディレクトリ固定なので
「files/common_style.css」とします。
また、参考にした「記事」には無かった「h2の閉じタグ」と「h2の開きタグ」を付けています。
これは、参考にした記事のように書くとHTMLとしては構文エラーになるためです。
h2の中で使えるタグは限られていて、linkは使えるタグに含まれていません。
構文エラーにならないよう、linkは、
<h2><$MTBlogDescription$></h2>
の<h2>に対応したh2の閉じタグの後に書きます。
そしてCSSを読み込むlinkタグ書いて
<h2><$MTBlogDescription$></h2>
の</h2>に対応したh2の「開きタグ」を最後に書きます。
これで構文エラーが無い状態となります。
さきほど「上級テンプレートでは」と書きましたが、
スマホ版のHTMLを見ると、同様のことをやっていました。
「ブログのサブタイトル（キャッチフレーズ）」は、
PC版とスマホ版の両方で使われてるということです。
PC版には、既にCSSがあります。
先程のCSSファイル名の指定箇所で既存のCSSを読み込む設定にすると
PC版では、同じCSSを２回読み込むことになります。
CSSのCはカスケード（滝）という意味で
２回同じ内容が出てくると後から出てきた設定が有効になるので
ブラウザに表示される内容としては問題ありません。
しかし、ブラウザがココログにアクセスする時、
ブラウザがHTMLを表示するまでにかかる時間として
PC版では、同じCSSを読み込む作業が２回になるので、表示がその分、遅くなります。
Pagespeed insightでも無駄なCSSの記述は減らすようにアドバイスが出ます。
このため、重複する内容は無いほうが良いです。
これが新しくCSSを作る理由２です。
また、スマホ版で既存のCSSを読み込む場合も問題があります。
スマホ版では、ココログが用意したCSSが先に読み込まれています。
そこに既存のCSSを読み込むと
ココログが用意したCSSと既存のCSSで設定がかぶっていた場合が問題です。
先に書いたようにCSSは
２回同じ内容が出てくると後から出てきた設定が有効になるので
意図しない結果になる可能性があります。
仮に意図しない結果になるとしても
スマホ版に適用したい設定だけ書かれたCSSであれば、
影響範囲の特定が楽です。
これが新しくCSSを作る理由３です。
表示に３秒以上かかると、ブラウザバックするユーザーが増える
とWebページ超速化という本に書いてました。
ブラウザは、HTMLを表示するとき、
CSSで表示の仕方をチェックしながら表示していきます。
ココログが用意しているCSSを見てみたところ、
かなりの量が記述されていました。
そこに余分なCSSの記述が増えると、チェックにかかる時間も増えます。
少しでも早いほうが良いと思います。
これが新しくCSSを作る理由４です。
これらの理由で新しいCSSを作って
PC版とスマホ版両方でそのCSSを使うべきと判断しました。
CSSのメディアクエリーで改行位置を切り分ける
新しく作るCSSの内容は、以下の通り。
@media screen and (min-width: 650px){
.br-pc { display:block; }
.br-sp { display:none; }
}
@media screen and (max-width: 650px){
.br-pc { display:none; }
.br-sp { display:block; }
}
@media screen and (～)がメディアクエリーです。
最初の記述は、画面幅最低が650以上の場合：PC用です。
brタグのclass名に「br-pc」と付けたものは改行が行われ、
brタグのclass名に「br-sp」と付けたものは改行されません。
次の記述が、画面幅最高が650以下の場合：スマホ用です。
brタグのclass名に「br-pc」と付けたものは改行が行われず、
brタグのclass名に「br-sp」と付けたものは改行されます。
650という数値は、参考サイトそのままの数値です。
改行位置なので、今回はザックリと
PC版とスマホ版を切り分けられれば良いので、650としました。
記事中のbrタグにclassを付ける
記事を投稿する前にココログの「通常エディタ」で「<br />」の部分を
必要に応じて「<br class="br-pc"/>」や
「<br class="br-sp"/>」にします。
「<br />」のままにしておけば、
PC版でもスマホ版でも改行されます。
「通常エディタ」の内容をテキストエディタにコピペし
テキストエディタで置換してから通常エディタにコピペする
という手順が良いでしょう。
「リッチテキスト」でPC用に改行した文章を作って
テキストエディタで<br />を「<br class="br-pc"/>」に
一括置換するのが楽な運用だと思います。
この記事では、記事中にも<br />があるので面倒ですが（笑）
まとめ
【ココログ】スマホ版で改行位置を調整する際は
以下のポイントに注意しましょう。
- 新しく作ったCSSを使う
- 新しく作ったCSSの読み込みは、ブログサブタイトルで行う
- CSSのメディアクエリーで改行位置を切り分ける
- 記事中のbrタグにclassを付ける
