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

ブログタイトルに日付を入れる

2016年 01月 25日
ネットで情報を調べていると、情報の書込まれた日付を知りたいと思うことがあります。 そこにある情報が何時の話しで後に情報更新があったのか、技術的なことに限らず、時間が曖昧なのは間違いの元です。 まあ、堅苦しい問題だけでなく、自他から日記として読まれるわけで、ああ、こんな頃の話なのかというのが判って良いことは多いはずです。

というわけで、記事の日付を下の方の探し難い場所だけでなく、記事タイトルの横にも表示する様にしました。



当該記事の日付を表示するには、Htmlの中に「<$postdate$>」というエキサイトの用意した特殊なタグを書込めばOKです。 詳しくは、下を参照ください。

 エキサイト スキンタグ集

タイトルの横に表示させたいので、その周辺のHtmlをアレンジすることになります。 私のスキンでは、既にタイトルの中に「編集|削除」のスイッチを同居させているので、その横に入れることにしました。 この「編集|削除」スイッチはブログ主にしか表示されず、私には下の様に見えます。
ブログタイトルに日付を入れる_b0174191_21293395.png
上は意図的にウインドウ幅を狭めていて、実際のタイトルはもっと余裕があり、日付もスイッチも浮いた表示で、長いタイトルを書いたとしても下を素通りします。 散々長い場合はタイトルが改行して付き合う仕組みです。(そこまでしませんが)
過去記事の「「Edit Del」スイッチのデザイン 最後の纏め」の最後の方に、タイトルが下を素通りする状況の絵があります。

ブログ主以外からの見え方は、下の様に日付が端に退いて納まります。
ブログタイトルに日付を入れる_b0174191_21461783.png


Htmlは「本文」の部分です。 下はアレンジでclass名等が変わっていますが、説明のための引用です。

<div class="POST">
<div class="POST_HEAD">
<div class="POST_TTL">
<h2><$postsubject$></h2></div>
<div class="POST_ADM">
<div class="POST_TIME"><$postdate$></div>
<$postadmin type=2$>
</div>
</div>
<div class="POST_BODY"><$postcont$></div>
<div class="POST_TAIL"><$posttail$></div>
<$cmtjs$>
</div>

下はタイトル部分の構造の模式図です。
ブログタイトルに日付を入れる_b0174191_22381970.png
今回は、「POST_ADM」内に新たに「POST_TIME」を入り込ませた形です。 「PODT_ADM」は「POST_HEAD」の中で右上隅に宙に浮く指定をしているので、その中に置かれた「POST_TIME」「<$postadmin$>」は「POST_TTL」(タイトル文字)と干渉しません。

関係する CSS記述です。
.POST_TIME {
display: inline-block;
padding: 0.24em 0.2em 0.08em;
margin-top: 0.12em;
margin-right: 1.2em;
font-size: 0.72em; /* 高さ乱れに有効 */
color: #0080c0;
background-color: #e7eff5; }

「POST_TIME」に「inline-block」の属性を指定して、元からあった「POST_ADM」と横並びに同居させています。 「padding」は「日付文字」の周囲の背景枠(明るい灰色)の広さを指定、「margin」は上と右からの余裕を指定、いずれも日付の配置に関係して来ます。

この配置調整で高さ位置の調整は、案外困難なものです。 ブラウザにはフォント切換えの機能があります。この切換えを行っても高さの配置バランスが変化しない様に、工夫が必要になります。 もちろん、フォントサイズを固定指定してしまえば事は簡単ですが、サイズ切換えに応じないデザインは、どうも不親切な気がしていますので。

で、単位を「em」で指定すると、その場の文字の大きさから計算して、高さ幅を計算して描画してくれるので、枠幅や高さがフォントサイズに比例して、どのサイズでもバランスが変化しないはずなのですが...
実際はそううまくは運びません。 上のコメントのある行で、「 font-size: x-small; 」と普通にやっていたら、上下位置のバランスがいつまでたっても安定しません。
ブログタイトルに日付を入れる_b0174191_23071534.png
上は一例で、「フォント最大」では少し下ぎみ。「 中」ではやたら上に揚がり、「最小」も上揚がりです。「中」だけ妙に狂うことが多く、とても満足出来ません。 これは、フォントサイズの計算法が関係していそうな気がしています。

そこで、サイズ指定を上の様に「em」値で指定したところ、ずいぶん改善されました。
ブログタイトルに日付を入れる_b0174191_23154824.png
この程度なら許せるというところです。 もっと入れ子を増やし頑丈にバランスする設定もあるでしょうが、複雑になるのは避けたく、手をうちました。



by Ataron | 2016-01-25 23:18 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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