ブログシステムの記事表示機能を作る時のCSS公開

analog-972947_1280
LINEで送る
Share on GREE
Share on LinkedIn

WEBページを作る時に、タグによるブロック構成や、コンテンツの段落などを考えながらCSS記述を行うと思いますが、
今作っているブログシステムのコンテンツ部分をtextareaに登録した文字列を繁栄して行いたいので、どうすれば実現できるかをCSSで解決してみたいと思います。

今までの使えないシステム

ここで考えたいのは、今までのCMSなどでの仕様を知っておく必要があります。
 

よくある、スクラッチ開発をした入力テキストをそのままWEB表示する場合に、改行コードをそのままBRタグに変換するという方法でした。
 

文字列の段落構成に関しては、改行がそのまま段落になるので、基本的には問題ないのですが、TABLEタグなどを利用し、TRタグなどで改行を使うと、意図しない場所にBRタグが挿入されて、表示されたWEBページが、変な段落落ちしている感じになってしまいます。
 

これに対しての対策は、開発会社から「改行をいれないでください」というだけで、非常に使いづらいシステムとなってしまいました。
 

こうした不具合とも思えるWEBページの仕様を解決したいのが今回の考え方です。

今回の解決方法

もちろん、前述したBRタグに変換するという仕様は、却下です。
 

そこで今回は、対象になるコンテンツ部分にCSSを定義します。

 

こうすることで、どんなタグでも、PREタグと同じように、書かれている内容は、改行やタブなどのインデントをあわせてくれる表示方法に切り替わります。
 

ちょっと試してみましょう。
 

まずは、お試しソースコードは下記の通りです。

表示デモ

スクリーンショット 2017-08-09 19.43.43
 

いかがでしょうか?なんとなくやりたい事がわかってもらえましたか?

課題

今回事を考慮して、以下のようなテキスト文を作ってみました。
 

これをそのまま表示すると、
 
スクリーンショット 2017-08-09 19.47.42
 

こんな感じです。
改行が多くされている事に気が付きます。
 

なんだかテキストで書いた時のレンダリング印象と違いますね。
 

これは、テキスト内に記述した各種のタグが、display:block;要素で有るために発生しているようです。
 

これが解決できると、かなり実現性の高い方法だと思うので、これを突き詰めようと思います。

調整ポイント

レンダリング表示された結果を見て、以下のような調整ポイントを目標値にしました。

1. display:blockタグに対しての調整
2. 文字サイズの整え
3. リストタグとテーブルタグ

 

display:blockタグに対しての調整

表示しながら調整すると分かりやすいのですが、要するに「white-space: normal;」と「display:inline-block;」を入れていくのがポイントのようです。

文字サイズの整え

この対応は比較的簡単ですが、line-heightは好みの問題もあるので、お好きな行幅で調整しましょう。
ただし、一部の特殊なタグについては、font-sizeなどは、個別に記述しなくてはいけません。

リストタグとテーブルタグ

tableタグに対しては、cell毎にborderをつけたり、marginとpaddingを調整するのは一般的ですね。

最終的に出来上がったCSSソースコード

今回出来上がったソースコードを載せておきます。

 

そして、これのレンダリング結果は以下の通りです。
 

スクリーンショット 2017-08-09 19.59.51
 

いかがでしょうか?tableタグの装飾の問題というよりは、各要素の行間が気にならない程度になれば大成功です。
 

ソースコードを実際に書いてみるとわかりますが、かなり直感的に記述ができると思います。
 

ちなみに、wordpressで変換される場合、保存時にタグの種別を判別されて、段落ごとにPタグを付けられてしまうようです。
ごくまれにですが、意図しない表示になり、ソースコードを書くのに戸惑う時があるので、今回の方法を用いて、四苦八苦する手間を省けるようになると、かなり効果大ですね。

今回対象にしたタグ一覧

.contentsクラス名の内部に記述されたテキストが全て対象。

IMG
H1〜H6
TABLE系(tr , th , td)
LIST系(UL , OL , DD) + (LI , DT , DD)
BLOCKQUOTE
P
STRONG
PRE
BR
HR

ブログを書いている人であれば、大体こんな感じで問題ないでしょう。
あとはAタグとか特殊なembedぐらいが網羅されると完璧に近いですね。

とりあえず、このソースを駆使して業務効率アップと、コンテンツページの作成作業に励みたいと思います。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*