Blogger の引用を幾つかのパターンで

今迄、本 Blog では、引用は CSS でひとつ設定して、色々、使い廻して来ました。
本来の用途ではない、強調　とか、プログラム･コードの説明　とか。
まぁ、重宝して来た訳ですが、やはり、適材適所。
スクロール･バーがあるものが欲しいなぁ～　と。


やっと、重たい腰を上げて、CSS を手直ししようかと。
でも、今迄の投稿を書き直す事になるような変更は、　したくありませんよね。

そこで、追加の　引用　用の CSS を書き加える事にします。

やりたい事は、スクロール・バーの表示と自動改行の回避です。
　　背景はこうです。
　　引用は、全文を、必要に応じて、行を折り返して、縦に長く調整し、自動表示する。
　　これが、Blogger を弄って来た印象です。
　　本来の引用は、これでバッチリですね。　　良く出来ています。
　　しかし、用途転用でこれを流用する場合、
　　　　分量が多く冗長になるので、可能なら、一部のみの窓を切り、スクロールで逃げたい　とか、
　　　　プログラムの様に、自動改行によって、反って、分かり辛くなる　とか、
　　この様な弊害も多少ありました。
　　これを、なんとか、しようと　いう事です。

この Blog で採用した既存の CSS では次の様な表示になります。　　　例では、プログラムの一部を。

  Private Sub DataGridView1_CellValidating(ByVal sender As Object, ByVal e As System.Windows.Forms.DataGridViewCellValidatingEventArgs) Handles DataGridView1.CellValidating
        'Only Cell Value Changed
        If Not DataGridView1.IsCurrentCellDirty Then
            Exit Sub
        End If
        Dim headerText As String = Me.DataGridView1.Columns(e.ColumnIndex).HeaderText
        If headerText.Contains("New") And Not IsDate(e.FormattedValue) Then
            Me.DataGridView1.Rows(e.RowIndex).ErrorText = Me.DataGridView1.Columns(e.ColumnIndex).Name & " = yyyy/MM/dd HH:mm:ss"
...

最初の 2 行は 1 行が長い為に自動改行された結果です。　　分り辛いですね。
また、引用した全文が表示される為、長大な場合には Blog のページも相当長くなります。
本当は、次の様に、表示する方が良いこともありますね。

  Private Sub DataGridView1_CellValidating(ByVal sender As Object, ByVal e As System.Windows.Forms.DataGridViewCellValidatingEventArgs) Handles DataGridView1.CellValidating
        'Only Cell Value Changed
        If Not DataGridView2.IsCurrentCellDirty Then
            Exit Sub
        End If
        Dim headerText As String = Me.DataGridView2.Columns(e.ColumnIndex).HeaderText
        If headerText.Contains("New") And Not IsDate(e.FormattedValue) Then
            Me.DataGridView2.Rows(e.RowIndex).ErrorText = Me.DataGridView2.Columns(e.ColumnIndex).Name & " = yyyy/MM/dd HH:mm:ss"
...

これを実現するのが、次の CSS と HTML 文です。

CSS　　　　　　薄い字のブロックは、書き加える前の設定です。　そのまま、残します。

blockquote {
margin:10px 2px 10px; /* 枠の外側の余白(上 右 下 左) */
padding:10px 20px 10px 20px; /* 枠の内側の余白(上 右 下 左) */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
background:#c1c1c1; /* 背景色 */
} blockquote.tr_bq_scroll {
overflow:scroll;
white-space:nowrap; margin:10px 2px 10px; /* 枠の外側の余白(上 右 下 左) */
padding:10px 20px 10px 20px; /* 枠の内側の余白(上 右 下 左) */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
background:#c1c1c1; /* 背景色 */
} 

HTML　標準　　　　　　引用ボタンをクリックしただけの状態です。

<blockquote　class="tr_bq">
&nbsp; Private Sub DataGridView1_CellValidating ...　　　　引用文
</blockquote>

HTML　横スクロール

<blockquote class="tr_bq_scroll">
&nbsp; Private Sub DataGridView1_CellValidating ...　　　　引用文
</blockquote>

HTML　縦横スクロール

<blockquote class="tr_bq_scroll" style="height: 100px;" >
&nbsp; Private Sub DataGridView1_CellValidating ...　　　　引用文
</blockquote>

CSS の最初のブロックが標準的な引用、次がスクロール･バー有です。
最初のブロックをコピーして、直後に貼り付け、オレンジの部分 を書き加えます。

HTML ですが、通常の様に、引用ボタンで、作文して、
HTML モードに切り替え、オレンジの部分 を書き加えます。　　数字部分は任意に。
HTML モードで、書き加えなければ、標準的な引用になります。



以上で、おしまい　っと、したい所なのですが ... 。　　困った事がひとつ。

縦横スクロールで、文章を校正する時、引用文と続く本文が重なってしまうのです。　とほほ。
また、公開前にプレビューで、引用文のスクロールが機能しないのも、校正を妨げます。
そこで、校正および編集･訂正時には、HTML で、style="height: 100px;"　の部分を一旦削除し、
公開時に、また、付加してやる必要がありそうです。
そこでそこで、捻り出した対応策は、コメント文の挿入　です。

<!--注意！blockquoteScroll ！ style="height: 100px;" -->

こんな感じの文を、 HTML の引用部分の冒頭に挿入して、凌ぐ事にしています。
いちいち、つけたり、とったり、と面倒ですが、　...　ご勘弁を。



[2014/01/18] タイトルに　の　を追加　　サイトマップの並びを配慮