・パソコンで表示するときだけ改行したい
・スマホ表示のときだけ改行したい
なんてことはありませんか？
僕はあります！
この記事では、AFFINGER5（アフィンガー5）を使っている場合にスマホだけ、パソコンだけで改行させる場合の設定を説明します。
手順はたったの2つだけです！
step
1CSSコードを追加
「外観」⇒「カスタマイズ」⇒「追加CSS」に下記のコードを追加します。
追加するコード（コピーしてください）
@media screen and (min-width: 768px) {
.sp {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.pc {
display: none !important;
}
}
コードの内容としては、
ブラウザの画面サイズが768px以上の場合は「sp」というclassが入っているタグは消しますよー
画面サイズが768px以下の場合は「pc」というclassが入っているタグは消しますよー
ってことですね。
「外観」メニューの「カスタマイズ」をクリックします。
追加CSSの入力エリアに、上記のコピーしたコードを追加し「公開」ボタンをクリックすれば設定は終了です。
step
2記事にタグを設定
追加CSSを設定した後は、改行を入れたい記事に下記のタグを入れれば完了です。
<br> どの画面でも改行されるタグ
<br class="sp"> スマホ画面だけで改行されるタグ
<br class="pc"> パソコン画面でだけで改行されるタグ
それぞれ下記のようなになります。パソコン、スマホでそれぞれ見ただけるとわかりやすいです。
<br>の場合
ブレイク! ブレイク! あなたの街の<br>解体 解体 一役買いたい<br>耐久年数過ぎていく コンクリートが朽ちていく
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
ブレイク! ブレイク! あなたの街の
解体 解体 一役買いたい
耐久年数過ぎていく コンクリートが朽ちていく
<br class="sp">の場合
地球の平和を はばむ奴らさ BREAK OUT!<br class="sp">日本ブレイク工業 スチールボール Da Da Da!<br class="sp">日本ブレイク工業 ケミカルアンカー 大地を揺らせ!
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
地球の平和を はばむ奴らさ BREAK OUT!
日本ブレイク工業 スチールボール Da Da Da!
日本ブレイク工業 ケミカルアンカー 大地を揺らせ!
<br class="pc">の場合
家を壊すぜ 橋を壊すぜ<br class="pc">ビルを壊すぜ 東へ西へ<br class="pc">走る 走る～ 日本ブレイク工業
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
家を壊すぜ 橋を壊すぜ
ビルを壊すぜ 東へ西へ
走る 走る～ 日本ブレイク工業