静的URL出力時のブログトップへのアンカーの作り方、他

Noteリニューアル前にDiaryのほうに書いたエントリを移植しました。


静的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さんがこういうことが出来るようにそうしたかどうかは定かではない、というか恐らくそういうわけではないと思うのですが、思わぬ副産物ですね。

icon

01:11 am
Comment [0]
TrackBack [0]

Up

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~ (QQ)

     

[Top ↑]

Visual Switch