- 静的URL出力時のブログトップへのアンカーの作り方
- どういうことかといいますと、これまでは
<a href="#weblog">Topへ</a>
と書いてあればBODY要素に設定してあるIDまで飛んだのですが、静的URL出力時はこれが上手くいかないことがあります。#weblogがURIとして評価されてるのかどうかはよくわかりませんが、わざわざページを読み直してindex.phpのトップに飛んでしまいます。個別記事表示の時は全体ページのトップになってしまいます。
かといって
href="%_ARTCL_PMLINK_%#weblog"
なんて書くと、こんどは個別記事表示になってしまいます。要は、「現在表示しているページのURL」+「#weblog」でなければならないわけです。
で、拾い物ですが"現在のURLを取得するPHPの書き方"を見つけたので、このテーマの記事ボックステンプレートはこんな感じです。
# 記事ボックスフォーマット $thisURL='http://'.htmlspecialchars($HTTP_SERVER_VARS['HTTP_HOST'],ENT_QUOTES).htmlspecialchars($HTTP_SERVER_VARS['REQUEST_URI'],ENT_QUOTES); $_ARTCL_BOX_FORMAT =<<<FORMAT <div class="article" id="UID%_ARTCL_ID_%"><!--article--> <div class="article-main"> <h2 class="article-title"> <a href="%_ARTCL_PMLINK_%" title="PermaLink">%_ARTCL_TITLE_%</a> <span class="article-date">%_ARTCL_DATE_FORMAT[ymd]_%</span> </h2> <div class="article-content"> %_ARTCL_CONTENT_% </div><!--#article-content--> </div><!--#article-main--> <div class="article-side"> <p class="article-cat-icon">%_ARTCL_CATEGORY_ICON_%</p> <p class="article-category hidden">%_ARTCL_CATEGORY_%</p> </div><!--#article-side--> <p class="article-posted"> %_ARTCL_TIME_FORMAT[h:i a]_%<br /> %_ARTCL_COMMENT:<a class="comment-entree" title="コメント投稿はこちらからどうぞ" href="%_ARTCL_PMLINK_%#comment">Comment [%_CMT_NUM_%]</a>:_%<br /> %_ARTCL_TRACKBACK:<a class="trackback-entree" title="トラックバックはここから" href="%_ARTCL_PMLINK_%#trackback">TrackBack [%_TB_NUM_%]</a>:_% </p><!--#article-posted--> <div id="UID%_ARTCL_ID_%-END" class="article-bottom"> <a href="{$thisURL}#weblog"><img class="run" alt="Up" src="theme/Monolith-Avenue/Images/jump.png" title="ページの先頭へ" /></a> %_ARTCL_MOD_% </div> </div><!--#article--> FORMAT;下線部がポイント……というほど大げさなものでもありませんが。こう書いておけば、間違いなく同ページ内アンカーとして動くと思います。
どうでもいいですが、このテーマはエントリにカテゴリー名がテキストでは表示されません。カテゴリアイコン前提のテーマです。
が、テキストブラウザだとワケがわからんので、一応display:hidden;が適用されるクラスを指定して隠しつつ仕込んであります。テキストブラウザでこのページを見る人はいないでしょうけど(笑 - コメント部でのボーダー色
- やたらと色が多いことが売り(?)の当サイトコメントですが、今回思いつきで仕込んでいるのが、コメント部を囲う、選択文字色と同じ色のボーダーです。
スタイルシートでの指定なので、特にPHPから色を取得しているわけではありません。
これはCSSの仕様なのですが、border-colorを指定せずにborderプロパティを使う場合、border-colorはその要素に指定されているcolorプロパティ=文字色を参照します。で、ppblogはコメント色の指定はSPAN要素で括ったりせず、DIV.comment-bodyにインラインスタイルで指定しているため、こういった形で文字色のボーダーを設定できるというわけです。作者のmartinさんがこういうことが出来るようにそうしたかどうかは定かではない、というか恐らくそういうわけではないと思うのですが、思わぬ副産物ですね。
静的URL出力時のブログトップへのアンカーの作り方、他 080525
Noteリニューアル前にDiaryのほうに書いたエントリを移植しました。
01:11 am
Comment [0]
TrackBack [0]
画像の拡大時にキャプションを表示する 080518
スキマ族
ためしに拡大してみて下さい。
通常ファイル名が表示されるところにキャプションが入っていると思います。
正直このカスタマイズは色々と微妙なのですが、個人的には気に入っているので紹介します。
デメリットとしては
・ツールチップにまで表示される
・長いキャプションが打てない(拡大画像の横幅を超えるとレイアウトが崩れる)
があります。
改造するのはutils.php
912行目の
$info = ' ファイル名: '.$imgName.' ファイルサイズ: '.$fs;
これを
$info = $caption=='' ? ' ファイル名: '.$imgName.' ファイルサイズ: '.$fs : '“'.$caption.'” ファイルサイズ: '.$fs;
こう書き換えます。キャプションがなければこれまでと同じ表示になります。このサイトでは「ファイルサイズ」を「Size」などと英語にしていますが、そんな感じに変更することも可能です。
例えば、キャプションはダブルクォーテーションで括って表示されますが、鍵括弧にする、など。
utils.phpなど、更新が頻繁に行われるファイルは基本的にあまりいじらない方が色々と楽なのですが、このように一行で済む改造なら、まあ良いかな、と思っています。
11:42 pm
Comment [0]
TrackBack [0]
Note復活
やっとこさこちらもバージョンアップ完了です。バージョンアップというかほぼリプレースに近いのですが(笑
復旧したログは下にある4つだけです。
ついでにエディタのカスタマイズも完了したので、エントリをこれから起こしたいと思います。
復旧したログは下にある4つだけです。
ついでにエディタのカスタマイズも完了したので、エントリをこれから起こしたいと思います。
08:18 pm
Comment [0]
TrackBack [0]
同日結合のネック 080505
ppblogには同日結合という機能があります。
呼んで名の如し、同じ日のエントリを見た目上結合するという機能です。
具体的には、以下の通り。
通常は
例えばこのうち、エントリ2と3が同じ日付だったとしましょう。
すると、ppblogは以下のように出力します
デフォルトテーマのbasicでは、.article-unitedの中にある.articleは底部の指定をなくし、代わりに.article-unitedの底部に似たような指定を施しています。また、セパレータには背景画像を入れ、エントリをつなげつつも境目を作るようになっています。
表題のネックは、例えばarticle の中、一番最後にdiv.article-bottomなどという要素を作り(basicでは、そういう用途ではありませんが存在します)、articleではなくそれに指定を施してエントリごとの境目を作っている場合です。
この場合、.article-unitedの中にある場合のarticle-bottomに指定しているプロパティは別の形にする必要が出てきます。まあ、しなくても良いんですが、変えないと同日結合する意味がないですよね……。
そうなったとき、困るのが、上の例で言うとエントリ3と4の境目です。エントリ2はarticle-bottomの指定がないのが正解ですが、エントリ3はarticle-bottomの指定が必要になるからです。
まあ、結論から申しますと、私の力ではこれをすぱっと解決することはできませんでした。
アプローチとしては
前者はIE6,7,8全滅(IE8は:before擬似要素だかcontentプロパティへの対応が中途半端だそうで……)ですし、後者はベータ版を除けばFirefoxとSafariしか対応してません(Opera9.5βはOK。IE8はダメ)。
どうしたものか悩んだのですが、とりあえず:last-child擬似クラスの指定は残しておいて、article-unitedの底部指定を適当にしてお茶を濁すことにしました。ま、どのブラウザもそのうち対応するでしょ……。
というか、この話自体がかなり限定的な話なので、ネックと題したもの別に全然ネックでもなんでもないんだよね(笑
呼んで名の如し、同じ日のエントリを見た目上結合するという機能です。
具体的には、以下の通り。
通常は
<div class="article"> エントリ1 </div> <div class="article"> エントリ2 </div> <div class="article"> エントリ3 </div> <div class="article"> エントリ4 </div> ・ ・ ・このように、各日ごとのエントリはarticleクラスの指定されたDIV要素で括られています。
例えばこのうち、エントリ2と3が同じ日付だったとしましょう。
すると、ppblogは以下のように出力します
<div class="article">
エントリ1
</div>
<div class="article-united">
<div class="article">
エントリ2
</div>
<div class="separator" title="下の記事は同じ日のエントリーです"> </div>
<div class="article">
エントリ3
</div>
</div>
<div class="article">
エントリ4
</div>
・
・
・
同じ日のdiv.articleをdiv.article-unitedで括り、別の指定が出来るように+エントリの間にセパレータを挟みます。デフォルトテーマのbasicでは、.article-unitedの中にある.articleは底部の指定をなくし、代わりに.article-unitedの底部に似たような指定を施しています。また、セパレータには背景画像を入れ、エントリをつなげつつも境目を作るようになっています。
表題のネックは、例えばarticle の中、一番最後にdiv.article-bottomなどという要素を作り(basicでは、そういう用途ではありませんが存在します)、articleではなくそれに指定を施してエントリごとの境目を作っている場合です。
この場合、.article-unitedの中にある場合のarticle-bottomに指定しているプロパティは別の形にする必要が出てきます。まあ、しなくても良いんですが、変えないと同日結合する意味がないですよね……。
そうなったとき、困るのが、上の例で言うとエントリ3と4の境目です。エントリ2はarticle-bottomの指定がないのが正解ですが、エントリ3はarticle-bottomの指定が必要になるからです。
まあ、結論から申しますと、私の力ではこれをすぱっと解決することはできませんでした。
アプローチとしては
div.article-united + div.article:before { content:""; display: block;....}
みたいな指定でarticle-bottomにしていた指定を代用してみるとか、
.article-united .article:last-child article-bottom { }
/* .article-unitedに含まれる一番最後の.articleに包含されているarticle-bottomに対して指定 */
なんて、CSS3の擬似クラスを使ってみるとかくらいしか私は思いつきません(笑)前者はIE6,7,8全滅(IE8は:before擬似要素だかcontentプロパティへの対応が中途半端だそうで……)ですし、後者はベータ版を除けばFirefoxとSafariしか対応してません(Opera9.5βはOK。IE8はダメ)。
どうしたものか悩んだのですが、とりあえず:last-child擬似クラスの指定は残しておいて、article-unitedの底部指定を適当にしてお茶を濁すことにしました。ま、どのブラウザもそのうち対応するでしょ……。
というか、この話自体がかなり限定的な話なので、ネックと題したもの別に全然ネックでもなんでもないんだよね(笑
05:53 pm
Comment [0]
TrackBack [0]





















Comments