人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

文字数の多いブログタイトルに対応する          □□□□□□□□□□

2016年 06月 03日
私のこの間のタイトルは、文字数が増えて気になって来ました。 おそらく殆どのスキンは文字列が端まで来た場合に行送りするでしょうが、私の場合はタイムスタンプを入れてます。 この設置は少し手抜きで、文字が下をくぐる様にしたのですが、タイトルの一部が見えないのはねぇ...

文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_20451319.png
都合の良い場所でタイトルを改行出来ると便利ですが、これはエキサイトも含め多くのブログでは出来ない様です。 スクリプト等を使えない以上、せいぜい全角の空白と「。」等を利用するしか対策がありません。 CSSで可能な事を探すと「改行を強制的にさせない」というコードがありましたが、看板タイトルでページ幅が左右されるのも目的とはズレている気がします。 特殊なコンテンツが基本ページ幅を超える場合は、それは理由があるからOKですが、「看板はキャッチ」程度と思うのです。

まあ、今の所は名案は諦めて、せめて文字は隠れない方法を考えました。


なんとかタイムスタンプが文字から逃げる様にしました。 こういうのは「float」で良く見る動作で、この指定を使いました。
下図はタイトル部の模式図で、私のCSS上の勝手な名前ですが、タイトルの文字列は「.POST_TTL h2」、タイムスタンプは「.POST_TIME」、外側を「POST_TTL」が囲う構造です。

文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_10244878.png

左側は最初に試した指定で、タイムスタンプが逃げるまでは良いのですが、最後の行送りで更にもう一行下に行ってしまいます。 文字通り間が抜けた表示で、あきません。 この時は「.POST_TTL h2」に「inline-block」、「.POST_TIME」は「float」を指定していました。(「.POST_TIME」は本来「block」属性です)

知識が足りず可能な設定を総当たりをして、「.POST_TTL h2」に「inline」の指定でようやく右側の動作となりました。 「inline-block」も「block」もブロック属性で「自らは箱として振る舞う」という事が判ってなかったわけで...

とにかく「inline」「block と float」の組み合わせで、右側の様な「文字から逃げる」タイムスタンプが出来たという話です。


余り参考になりませんが、下が新しいタイトル部のHtmlです。


<div class="POST_HEAD">
<div class="POST_TTL">
<h2><$postsubject$></h2>
<div class="POST_TIME"><$postdate$></div>
</div>
<div class="POST_ADM">
<$postadmin type=2$>
</div>
</div>


太字の部分が関係する所で、外側を「POST_TTL」が囲み、中に「h2」と「POST_TIME」を並べています。

下は関連するCSSで、細かな margin、padding、font-size、color等の指定は省いてます。 赤のところが肝心な部分です。


.POST_TTL h2 {
display: inline; }

.POST_TIME {
position: relative;
float: right;
display: block; }

.POST_ADM {
position: absolute;
right: 0px; }


.POST_TIME で「position: relative;」を使ってますが、これは本来の場所的存在を確保したまま、表示位置をシフト調整させるための指定で、margin等でも調整可能ですが他の配置を崩す心配がないので使ってます。 シフトの必要が無いなら特に要らないものです。
注意が要るのは、ここに「position: absolute;」は使えません。「absolute」は本来の場所的存在を消して親ブロック内のフリーな配置にする指定です。これを使うと「float」で押される自分の場所的存在が消え、押し出されなくなると私は理解してます。

なお、「.POST_ADM」はログインしたブログ所有者に対してのみ表示される「編集|削除」スイッチで、私の場合は「position: absolute;」で宙に浮かせ、タイトル文字の干渉を受けず、下を通り抜けさせるために指定したものです。


以上のHtmlとCSSのアレンジの結果で、長いタイトルに対して、ウインドウ幅を狭くして行った時の実際の様子です。
文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_22123444.png

タイムスタンプはタイトル文字が接すると下に逃げ、タイトル枠が拡がります。
文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_22142242.png

更に狭めタイトルが折り返し場所に近付きます。
実際の長めのタイトルも、この状態までに納めるべきでしょうか。
文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_22155182.png

それを超えてタイトル文字が折り返され、次行に送られた状態です。
文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_22181110.png
ログインしたブログ所有者には「Edit | Del」スイッチが表示され、下をタイトル文字がくぐります。 タイムスタンプの実質的な動作は上と同じです。
文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_22234889.png
タイムスタンプは最初隠れていますが、タイトル文字に押されて出て来ます。
文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_22244745.png

今回のアレンジはタイムスタンプが編集者本人から見え難くなったのが難点です。 「Edit | Del」スイッチをズラす事も出来ますが、デザイン上いまいちで見送りました。

最後に、タイトルの縦幅を少し拡げ、タイムスタンプの背景色をなくして、タイトルの高さの拡張時にタイトル文字の上下バランスが悪くなるのを緩和しました。 タイムスタンプの下マージンをマイナスにして、実際に多いであろうタイトルが折り返し前の状態での表示の高さを減らしています。 最後の調整の結果、タイトルの折り返し時の高さは、下の様な3段階の変化をする形になりました。 この記事のタイトルをサンプル用に長くしているので、動作を試して見てください。
文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_17013302.png


〔追記〕2016.06.26
1ヵ月ほどこの設定を使って来ましたが、自分でタイムスタンプを見たいと思う事が時々ありました。 そこでちょっと頭をひねり「Edit Del」スイッチをタイトル枠の右隅に隠す事を思い付きました。 タイトルの右上にタブの様に出すデザインもアリですが、こちらの方が簡単で「外からの見え方」に近いのが良です。

文字数の多いブログタイトルに対応する          □□□□□□□□□□_b0174191_08311398.png

上図の左がなにもしない状態、ポインターを持って行くと右の様に「Edit Del」スイッチが出て来るという塩梅です。


.POST_ADM {
position: absolute;
top: 0px;
right: -7.5em;
background: #d7e3ec; }

.POST_ADM:hover {
right: -0.8em; }


上のCSSは要点のみですが、本来「position: absolute;」が設定されているので、アレンジは簡単です。「right値」をデフォルトで「-7.5em」、マウスオーバーで「-0.8em」としただけです。



by Ataron | 2016-06-03 22:55 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。