そのビール冷えてます?

とりあえずの雑記ブログ。燻製やネットショップのことなど

AFFINGER

AFFINGER5(アフィンガー5)でスマホだけで改行・パソコンだけで改行させる設定方法

投稿日:2019年9月5日 更新日:

AFFINGER5(アフィンガー5)でスマホだけで改行・パソコンだけで改行させる設定方法

 

・パソコンで表示するときだけ改行したい
・スマホ表示のときだけ改行したい
なんてことはありませんか?
僕はあります!

この記事では、AFFINGER5(アフィンガー5)を使っている場合にスマホだけ、パソコンだけで改行させる場合の設定を説明します。
手順はたったの2つだけです!

 

step
1
CSSコードを追加

「外観」⇒「カスタマイズ」⇒「追加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が入っているタグは消しますよー
ってことですね。

「外観」メニューの「カスタマイズ」をクリックします。
AFFINGER5メニュー

 

追加CSSの入力エリアに、上記のコピーしたコードを追加し「公開」ボタンをクリックすれば設定は終了です。
追加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">走る 走る~ 日本ブレイク工業
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
家を壊すぜ 橋を壊すぜ
ビルを壊すぜ 東へ西へ
走る 走る~ 日本ブレイク工業

-AFFINGER

Copyright© そのビール冷えてます? , 2020 All Rights Reserved Powered by AFFINGER5.