静的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

画像の拡大時にキャプションを表示する

gon15
スキマ族


ためしに拡大してみて下さい。
通常ファイル名が表示されるところにキャプションが入っていると思います。

正直このカスタマイズは色々と微妙なのですが、個人的には気に入っているので紹介します。

デメリットとしては
・ツールチップにまで表示される
・長いキャプションが打てない(拡大画像の横幅を超えるとレイアウトが崩れる)
があります。


改造するのはutils.php
912行目の
    $info = '  ファイル名: '.$imgName.'&#13;&#10;ファイルサイズ: '.$fs;
これを
    $info = $caption=='' ? '  ファイル名: '.$imgName.'&#13;&#10;ファイルサイズ: '.$fs : '“'.$caption.'”&#13;&#10;ファイルサイズ: '.$fs;
こう書き換えます。キャプションがなければこれまでと同じ表示になります。
このサイトでは「ファイルサイズ」を「Size」などと英語にしていますが、そんな感じに変更することも可能です。
例えば、キャプションはダブルクォーテーションで括って表示されますが、鍵括弧にする、など。

utils.phpなど、更新が頻繁に行われるファイルは基本的にあまりいじらない方が色々と楽なのですが、このように一行で済む改造なら、まあ良いかな、と思っています。

icon

11:42 pm
Comment [0]
TrackBack [0]

Up
 

カスタムエディタ1.7

追記
最新版があります。Link


もっと読む»

着々とバージョンアップしていくppblogに追いつけずに放置しまくりだったカスタムエディタをようやくバージョンアップしました。

以下、readme全文記載。

ppblog1.7.3用カスタマイズファイル「カスタムエディタ1.7」

●機能
デフォルトのエディタをカスタマイズしたものです。
具体的には以下の通り

* 取り消し線をdel要素からspan要素にthroughクラスを指定したものへ変更
* 囲み線クラスの追加(enclose)
* コメントアウト文(#を文頭にいれ、グレーにする:comment-out)クラスの追加
* 「ルビ」クラスの追加(純粋にCSSで実装しています)
* リスト要素の改行位置などを調整
* dfn要素の挿入補助。noteクラスを指定しています。
   (定義語をマークアップするタグですが、拡大解釈して注釈用のタグにしてみました
* abbr要素の挿入補助(タイトルに正式名称を入力)
* br要素の挿入補助(ページ作成時に微妙に使えるかと)
* 文の整形:アスキーアート用ボックスを追加し、引用ボックスは自動的にp要素とcite要素が挿入されるようになっています
   h1要素とh2要素は必ず使っているはずなので省きました。
* 「その他のタグ」セレクトボックス追加:単純に反転させた語句に対してタグの挿入補助を行うものを纏めています
   ・コード一部:code要素
    ・変数:var要素
    ・短い引用文:q要素
    ・出典:cite要素
    ・追記:ins要素(これに関しては<ins datetime="略" class="alert">追記</ins>のような形で、反転語句の前に挿入します)
    ・削除:del要素(ins要素もそうですが、挿入した時点の時刻でdatetime属性を設定します)
    ・上付き文字:sup要素
    ・下付き文字:sub要素
* 文字サイズをptからpxに変更
* テーブル挿入時のポップアップの文章を若干変更
* 絵文字ボタンの位置変更
* Fixされたツールバーの見た目を変更
* Fix modeをOnにしたときに、サイドバーを隠し、画面領域を大きく取ります(もちろん表示することも可能です)

●インストール方法
※必ずバックアップを取ってください

1、buttonディレクトリに画像ファイルをアップロード
2、editor.jsを上書き
3、テーマのスタイルシートに、customEditor.cssの内容を追記し(あるいは@import)、色などを適当にカスタマイズする
(最低でも、取り消し線・囲み線・ルビ・cite要素まわりはスタイルを当てないとちゃんと表示されません)

以上です。スタイルシートの文字色などは適宜カスタマイズしてください。また、クラス名がバッティングする場合はお手数ですが被ってしまったほうを変更してください。

●アンインストール方法
最新版のppblogのeditor.jsで上書きし、buttonディレクトリの中にある
abbr.png
br.png
cmtout.png
dfn.png
enclose.png
ruby.png
thr.png
を削除して下さい。


●注意
このカスタマイズファイルは、

○元ファイル
ppblog1.7.3(2008/05/13 build)
editor.js by martin $ 2008/05/10 17:03:15

○確認ブラウザ
InternetExplorer7
Firefox2.0
Opera9.27
Safari3.1.1(ただし、promptの挙動の違いにより若干意図しない動きをするときがあります)

に基づいて作製しています。ブラウザ依存はあまりありませんが、Fix modeはIE6では使用できません。
また、ppblogのバージョンが合わないと正常動作しません。
ppblogのメジャーなバージョンアップがあった時はこちらもバージョンアップするまで使用はお控えください。

なお、このファイルの使用はあくまで自己責任でお願いします。
このファイルを使用したことによる損失等に対しての責任は、BENITは一切負いませんので予めご了承ください。


要望その他ありましたらBENITまで。
Sky-Yard -Note- :: http://welkin.s60.xrea.com/blog/Link


更新履歴:

○2008/05/18
1.7.3に対応
ビデオタグ関連廃止
fix=onの時に自動的に左メニューを隠すように


○2007/03/01
1.6.0に対応
ボタン統廃合
ビデオタグ入力にURL入力を追加
dfn要素にクラスを指定
ツールバー上部固定ボタン


目玉機能だったfix modeが公式についてしまったのが嬉しいやら悲しいやら。おかげで、あえてインストールするほどのものでもなくなってきた気がします(笑
一応、このカスタムエディタではfix modeの見た目を公式のものとちょっと変えています(以前からカスタムエディタで実装していたものと同じ形です)。
かつ、同時に左に出ているサイドバーメニューを隠すというどうでもいい機能まで(ノ∀`)これは、人によっては鬱陶しいかもしれませんね。

実は、一つ付け損なった機能がありました。
長文の記事を書いている時アンカージャンプでページの一番上まで飛ぶボタン、というものなんですが、現在のURLの取得などに難があったためやめました。まあ、作るには作ったんですが、色々と微妙だったので……。


ちなみに、Diaryのほうでは配布版にはない機能をつけています。
あちらではカクテルレシピを載せることが多いのですが、それを毎回打つのが面倒だったため、最初にベースを選んで後はpromptに何回か入力するとレシピ以外のヘッダを挿入する、という機能です。
エディタのカスタマイズにも慣れてきたので、そんな感じの機能も割りとすぐ実装できました。

ま、エディタをここまでいじりたいなんて人は滅多に居ないでしょうけど(笑


添付ファイル: CustomEditor1-7.lzh 

icon

11:42 pm
Comment [0]
TrackBack [0]

Up
 

Note復活

やっとこさこちらもバージョンアップ完了です。バージョンアップというかほぼリプレースに近いのですが(笑
復旧したログは下にある4つだけです。

ついでにエディタのカスタマイズも完了したので、エントリをこれから起こしたいと思います。

icon

08:18 pm
Comment [0]
TrackBack [0]

Up

同日結合のネック

ppblogには同日結合という機能があります。
呼んで名の如し、同じ日のエントリを見た目上結合するという機能です。

具体的には、以下の通り。

通常は
<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="下の記事は同じ日のエントリーです">&nbsp;</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の底部指定を適当にしてお茶を濁すことにしました。ま、どのブラウザもそのうち対応するでしょ……。


というか、この話自体がかなり限定的な話なので、ネックと題したもの別に全然ネックでもなんでもないんだよね(笑

icon

05:53 pm
Comment [0]
TrackBack [0]

Up
Visual Switch