シリウスのスマホ閲覧時に改行を無効にできる機能をワードプレスでも利用する方法

急上昇中!
ブログランキングがんばってます^^
詳細はコチラから!!

HTMLサイト作成ソフトのシリウスには、
スマホから閲覧した時に改行を無効化できます。

このシリウスの機能は「改行の最適化」として
バージョンアップ時に備わった機能です。

参考:「シリウスでキレイなスマホサイトが作成可能に」

 

ワードプレスでは、スマホから閲覧したときに
フォントサイズを変更することで対応していました。

つまり、パソコンからの閲覧とスマホからの閲覧、
同時に意識しながら文章を考えていた、ということです。

ワードプレスでも改行の最適化ができないか?】を、
ネットで調べていたところ、改行を自動修正する方法がありました。

【CSS】PC上で見やすく改行した文章がスマホでは変な位置で改行されてしまうのを自動修正する方法:ウェブの触手さん

改行最適化

 

当然、改行の最適化をサイト全体に適用してしまうと、
サイドバーの表記などもすべて適用されてしまいます。

なので、投稿記事のみに適用することにしました。

 

またサイト全体ではなく投稿記事だけに適用させたいのであれば、
クラス名を指定して限定的にすることもできます。

 

・・・が、CSSに関して勉強不足の私は、
丁寧に書かれているにもかかわらず、
「クラス名を指定」ってどういうこと?追加するの?
と、迷ってしまったわけです。

そこで、以下にまとめたものを自分用の備忘録として。

 

結論、この記述を加えればOK

改行を無効にする記述(基本形)

 

リファイン用に幅を調整する

リファインPROの2カラムを利用している場合、
”max-width: 480px”ではなく、”max-width: 640px”
に修正するときちんとおさまります。

 

個別記事のみに適用させる場合

リファインPROを利用している場合は、

この記述でOKです。

 

TCDのテーマを利用している場合は、
「entry-content」ではなく「body.single-post」という記述で。

ということになります。

 

その他の注意点として、

●●●はコチラ
→http://itwo.biz/memo/6461/

というリンクの貼り方をしている場合、

●●●はコチラ→http://itwo.biz/memo/6461/

スマホからだと、このような表記になります。

 

もし、完璧を目指すのであれば、

●●●はコチラ

→http://itwo.biz/memo/6461/

「<br>で改行せず<p></p>で改行する」
もしくは、
「”max-width: ●●●px”」の数値を調整する」
ということで対応すればキレイになります。

 

管理人オススメ教材&ツール

コメントを残す