●掲載ソースを追加して正しく表示されないときは次を確認ください。
・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。
・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。
●画像は説明用のイメージサンプル画像です。
実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。
●CSS/HTMLソースの行数の番号/色は説明用です。
実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。
PCとスマホで改行を自動修正する
PCとスマホで改行を自動修正する方法の説明です。
デバイス毎に表示幅が違うため、PCで丁度良い位置で改行しても、スマホ・タブレットではもちろん同じ改行にはなりません。
タブレットはPCとほぼ同じ感じになることが多いですが、スマホでは少し読み辛い記事になることがありますので、それを自動修正する方法を説明します。
便宜を図る為の情報提供の一環として
方法を説明しますがサポート対象ではありませんので予めご了承願います。
自動修正の概要
※2016-02-03 09:00 内容変更個別記事・メインカラムスペース・記事下フリースペースに入力した
改行タグの <br /> を非表示にして、改行させないという方法です。
自動修正に変更する方法
※2016-02-03 09:00 内容変更記事を書くときは（seesaa）
リッチテキストエディタを利用しないに変更した上で記事編集ページの詳細設定「改行HTMLタグ変換」を次の設定にしてください。
●改行HTMLタグ変換 ： 改行を<br/>タグに変換しない
改行の入力方法
段落毎に <p>〜</p> で囲んだ上で、改行する場所で <br /> を入力してください。※ ご注意 ※
PCでは<br />だけで改行されますが、スマホでは<br />を非表示にしますので改行されません。
スマホでも改行した状態にするときは、次のように段落毎に <p>〜</p> で囲んでください。
<p>テキスト テキスト</p>
<p>テキスト テキスト</p>
１行空けるときの入力方法
１行空けるときは <p> </p> を入力ください。CSSに記述を追加する
上記の方法で記事を書いただけでは <br /> は非表示になりませんのでCSSに記述を追加します。
書き替えしたメインCSSの■レスポンシブ設定から次の箇所を見つけてください。
/*max415px*/
@media screen and (max-width: 415px) {
/* #header {height: 0px;} /*ヘッダー画像 395px÷横幅px×縦幅px*/
.header-imgr,.header-imgl {padding: 0;}
#footer2 p {display: inline;}
.kb-l {width: 80px; height: 80px;}
.kb-l img {width: 80px;}
.ul-kl li a:before,.ul-kl li a:after {display: none;}
.ul-kl li a {padding: 0;}
}
灰色行の箇所に次の記述を追加してください。
※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
.article-body br,.post-body br,.ad3 br {display: none;}
※画面サイズが横幅415pxまでのとき
個別記事とメインカラムスペースの改行<br />を非表示にする記述となります。