[↑PageTop]
»
ブログ検索 タグ検索
検索タグ:「テンプレート」を含む記事は見つかりませんでした。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2011/02/09 19時頃

AutoPatchWork に対応してみる

AutoPatchWorkを使い始めて、随分経つのですが、自分のブログをちゃんと対応させました。
これで、AutoPatchWorkを使用していても、読みやすくなったと思います。

実際のところ、「AutoPatchWork」は、「AutoPagerize」のクローンで、「AutoPagerize」が持っているページ毎の設定を利用できます。
FC2ブログの設定もその中に書かれているので、対応とかしなくても、使える場合も多々あります。

自分のブログの場合は、次のページのプラグインの領域まで読み込まれて観にくいとか、表紙の下に記事が読み込まれて観にくいとか、個別記事のページでは次が読み込まれないとか、色々とおかしな点があったので、ブログのテンプレートを修正して、「AutoPagerize」側の、現在のFC2ブログ対応の定義で、気持ちよく動くようにタグを追加したり、IDを変更したりして、対応してみました。

記事の部分だけが、ちゃんと読み込まれるようになって、スッキリです。


AutoPagerizeクローンのツールを使っていない人には、なんの変化もない変更ですが、使っている人は読みやすくなったはずです。

AutoPatchWorkでは、ページ境界に挿入されるページの区切りにも、各要素にちゃんとクラス名が与えられていたので、cssで装飾も出来ますね。
<div class="autopagerize_page_separator_blocks">
<hr class="autopagerize_page_separator"/>
<p class="autopagerize_page_info">
<a class="autopagerize_link" href="--URL--" number="--No.--"/>
</p>
</div>

名前を見る限り、「AutoPagerize」から受け継いでいるっぽいから、他のクローンでも対応出来るのかな?

試していないので、その辺りは不明。
2010/09/28 22時頃

ありがとう! 複眼RSS

複眼RSSというブログパーツを組み込んでみました。
こいつはすげ~!

画像入りのRSSを配信しているサイトなら、登録可能みたい。

例)ビビアン・スーオフィシャルブログ 「Vivian Hsu's Beautiful Day」


© フクガンRSS


今回は、画像でみる関連記事 みたいな感じで、導入してみました。
画像が表示されるのって、華やかでいいね。
2010/09/27 20時頃

Next Page Link

ページナビを導入して、移動しやすくなった気がする。

そうなると、更にさわりたくなる悪い癖が出る。(こうして、さんざん触って結局もとに戻す事が何度有った事か・・・

今回は、[前ページ] と、[次ページ]へのリンクを、ブログの表示範囲外に常に固定位置で表示してやろう!という変更。

ページの上部へ移動する [↑PageTop] を表示しているから簡単さ!と思っていたが、それが甘かった・・・。

実は以前の[↑PageTop]は、画面の左下の位置からの絶対位置指定で表示されていた。
要するに、画面の幅がブログの幅より狭くなった場合、ブログの中にめり込んで表示されていたのだ。
再下段だったため、あまり気にならなかったので、そのまま採用となった。

しかし、今回は、画面の中央。画面の幅が狭いとブログにめり込み見づらい。
幅が広すぎると、画面の端っこに行ってしまって使いづらく意味がない。

画面の左上からの絶対位置では困るのだ。
しかし、位置を固定して表示するための css 設定 position : fixedでは、親となるブロックのpositionが問題となってくる。

今回は、ブログ全体を覆っているブロック要素のからの相対位置指定をしたいから、ブログ全体を覆っているブロック要素が親となるのが一番都合がよい。
しかし、その要素は、センタリングをしたい関係で、positionは、staticとして、要素の幅(width)を指定して、左右のマージン(margin)をAutoとして、常に表示領域の中央になるように指定している。

この条件では、画面の左上が基準となり、親BOXの左上からの相対位置でオブジェクトを指定出来ない。

これをなんとか、騙したいというのが今回の目標。
第1案:position : fixed の 画面幅一杯の子BOXを作り、その中に、ブログの幅より幅広い孫BOXをセンタリング配置して、孫BOXの左右にリンクを置く BOXを配置。
 これは、名案だと思った。
 しかし、一番上に表示してしまうと、透明のBOXに隠された部分は、見えるけどクリックできない領域となってしまう。

それならば!と、上記のBOX全体を z-index : -1 で、後ろに沈めた。
 これは、名案だと思った。
 ブログの操作不能領域も無くなった!やった!
 しかし、肝心の左右に配置したリンクが操作できない。背景の後ろに沈んでしまって操作不能らしい。

それならば、全てのBOXを、z-index 2 に持ち上げて、上記のBOX全体を z-index : 1 に配置したらどうなのだろうか?
 これは・・・、面倒なのでパス。

この案は、ダメだ!


あれこれ試しているときに気が付いた。
topだけ指定して、leftを指定せず、margin-leftだけ指定したら、どこに配置されるの?
なんと、親要素の左側からの相対位置指定をしたように表示された。
とりあえず、普段使っている、Opera10.xx と、IE 7 で、正しく表示されているのを確認した。
自分用だからこれでいいや。

cssの規定上は、どんな解釈が正しいのかな?
詳しく知りたいところです。
2010/09/27 20時頃

ページナビ 導入メモ

FC2ブログのプラグイン「ページナビ」を導入した。
ページ数が多くなっても、素早く後ろの方のページにも移動できるようになった。作者さんありがとう!


しかし、これも気になる点が一つ。

自分の表示しているページによっては、「ページナビ」に表示されるページ番号の数が変化してしまう点。

例)全体で7ページ有るカテゴリーを表示。ページナビでは、表示しているページから前後2ページのページ番号を表示する設定の場合。

自分が1ページ目を表示している場合。
1 2 3 . . . 7

ところが、4ページ目を表示すると
1 2 3 4 5 6 7
となる。

先頭と、最後のページは確実に表示。 それ以外に、最大 5ページ(表示ページ+前後2ページ)の番号が表示されるのだ。

個人的には、つねに表示される番号の数は一定(先頭ページ + 表示ページ + 前後表示ページ(設定分)+ 最終ページ)となるようにしたい。

計算式と判定文をいじって調整した。
こういった細かい事は、個人の好みによるところが大きいので、本当にこれがよい修正なのかわからないが、個人的にはスッキリしたと思う。

テンプレートを少し変えました。
画面上部のメニューの下にあった、タグ表示領域を無しにしました。

そのスペースに、左側にあった「検索ヘルパー」を移動させました。
少しは見やすく&使いやすくなったのかな?

あとは、検索時に表示されるテンプレートで、絶対表示されない無駄なブログ変数を削りました。
副作用で余計なものが表示されなくなったので、少し見やすくなりました。
それはいいとしても、検索後の個別画面の広告表示は何とかして欲しいね・・・。

FC2(fc2.com)では今後もユーザーサイドの視点で、
利用者の皆様が快適に利用できるよう努めてまいります。
FC2め・・・こんな事書くから余計に腹が立つ!

とりあえず、検索キーワードに該当する記事が無いけど、スポンサー広告がある場合の広告だけでも止めてほしい。

自分のブログで、自分の書いた記事がないのに、広告だけ表示は納得出来ないぞ。
例えばこんなの ←こんな不愉快な広告だけが、表示されるとか止めてほしい!

昼休みにちょっと設定(表示される広告の種類)だけを変更したつもりが、なぜかアカマイ利用をすることになっていた。
ウワー・゚・(ノД`)・゚・。・゚・( ノД)・゚・。・゚・(  ノ)・゚・。・゚・(  )・゚・。・゚・(`  )・゚・。・゚・(Д` )・゚・。・゚・(ノД`)・゚・。

一度 On にすると、1週間は Off に出来ないらしく、1週間(※2010/03/26 12:37 まで)Offに出来なくなってしまいました。
( ノ゚Д゚)ノ  ┻━━┻ =3

見ている皆さん、済みません。不愉快な広告が、あちらこちらで表示されると思いますが、1週間我慢して下さい。
2009/08/29 19時頃

記事一覧

以前の記事で、記事一覧を、テンプレートに合わせた形にカスタマイズしたのですが、今回はその続き。

見た目は、統一できたものの、全ての記事が時間順に並んで、多すぎてみにくい。
そんな悩みを解決してくれる記事を見つけました。
早速導入!お~良いじゃないですか!

早速上部のメニューに、「サイトマップ」の項目を作りました。
これで、昔の記事も、多少は掘り起こしやすくなったでしょうか?
FC2ブログには、関連エントリーを表示する機能が有りません。
ネットを色々見てみると、そんなFC2ブログに、関連エントリーを表示しちゃう素敵なサービスも有るのですが、どうしても広告が表示されしまって、それが気になるFerioです。

少し前に、導入した、「関連エントリー」っぽい何かについての記録がなかったので、自分が忘れないようにメモ。


関連エントリーっぽい と言っているように、実際は同じカテゴリーの属する記事のRSSから情報を取得して表示しているだけです。これでも、無いよりは随分ましです。

今回は、Kawa.netさんのJAVASCRIPTのライブラリを使用させていただきました。
jkl-parsexml.js : JKL.ParseXML/ajax通信処理ライブラリ
サーバ上の XML 形式ファイルをダウンロード~解析して、 JavaScript オブジェクト(配列やマップ)に変換するライブラリ

jkl-hina.js : テンプレート展開クラス
HTML ページ内に予め用意したテンプレート、データを与えて、テンプレートへの展開処理を高速に行うライブラリ

この2つを使わせていただきました。


まずは、ダウンロード。
 上記のページにそれぞれコードがおいてありますので、ダウンロードして自分のブログに、「jkl-parsexml.js」 と、「jkl-hina.js」を、アップロードしておいてください。

次に、下記のソースをテンプレートの、関連エントリーが表示したい部分に追加。
<!-- 関連エントリー 開始 -->
<!--permanent_area-->
<script type="text/javascript" src="http://blog-imgs-24.fc2.com/f/e/r/ferio68k/※1jkl-parsexml.js" charset="euc-jp"></script>
<script type="text/javascript" src="http://blog-imgs-24.fc2.com/f/e/r/ferio68k/※1jkl-hina.js" charset="euc-jp"></script>

<script><!--
window.onload = function () {
var url = "http://ferio68k.blog71.fc2.com/※2?xml&category=<%topentry_category_no>";
var http = new JKL.ParseXML( url );
var func = function ( data ) {
var hina = new JKL.Hina( "rssbox" );
var dest = hina.expand( data, "rssbox" );
dest.style.display = "";
};
http.async( func );
http.parse();
}
// --></script>
<br>
<div class="kanrenbox">
<h3><a href="<%topentry_category_link>">【<%topentry_category>】 関連エントリー</a></h3>
<div id="rssbox" style="display: none;">
<ul>
<li title="@foreach item1 [/rdf:RDF/item]"><a _href="[/item1/link]">[/item1/title]</a></li>
</ul>
</div>
</div>
※3
<!--/permanent_area-->
<!-- 関連エントリー 終了 -->
※1 自分のファイルアップローダーのアドレスに合わせてください。
※2 自分のブログのアドレスに合わせてください。
※3 ひな形

以上で、関連エントリーもどきが、表示できます。
タグの解析など、一切していない、カテゴリーのRSS垂れ流しな訳ですから、多大な期待をしてはいけません。


ひな形のカスタマイズのために。
オレンジ色で示した部分が、変数展開前のひな形の部分です。
<li title="@foreach item1 [/rdf:RDF/item]"><a _href="[/item1/link]">[/item1/title]</a></li>
この1行が、RSSの1項目毎に繰り返されます。

細かい説明は面倒なのでしませんので、気になる人は自分で調べてください。
ヒント1:非同期モード : ヒント2:@foreach 制御構文 : ヒント3:RSSの要素と構文


カスタマイズに使える項目だけを、書いてお行きます。

jkl-parsexml.js が展開して、取り込んだ配列は下記のものが使えるはずです。
[/item1/link]   関連記事のアドレス
[/item1/title]   関連記事のタイトル
[/item1/description]   関連記事の要約
[/item1/content:encoded]   関連記事の記事(一部 or 全文 ブログの設定による)
[/item1/dc:subject]   関連記事のカテゴリー
[/item1/dc:date]   関連記事の日時
[/item1/dc:creator]   ブログオーナーの名前
[/item1/dc:publisher]   組織名(FC2-BLOG)

<%topentry_category_link>など、<%で始まる、FC2ブログが展開する変数は、テンプレート中に使える変数一覧 で調べてください。
ブログの記事に貼り付けてある画像。
ブログを華やかにしてくれる大切なアイテムな訳ですがもう少し見栄え良くと言う事で、Fancy Zoomとい、ビュアー?を入れてみる事にしました。
FC2ブログへの導入方法と、カスタマイズ項目も解る範囲で説明したいと思います。

ビュアーの候補はいくつかあったのですが、Fancy Zoomは画像へのリンクを一つ一つ修正しなくても良い点で、導入決定となりました。
機能だけなら、highslide jsの方が高機能なんですけどね。

何はなくとも、まずはダウンロードから。
公式ホームページ
Fancy Zoom
へ行って、FancyZoom 1.1.zip をダウンロード。

ダウンロードしたFancyZoom 1.1.zipを解凍して中身を見てみると、
/
├__MACOSX       (MACOSX用のようなので放置)
└FancyZoom 1.1    (こっちを使用)
 ├images-global    (画像)
 │└zoom        (必要な画像は全てこの中 25個の画像ファイル)
 └js-global       (プログラム本体。2本のJavascriptでした。)

FancyZoom 1.1というフォルダーがあります。
このフォルダーの中身が本体のようです。


ホームページの説明では、そのフォルダーの中身をFTPでアップロードして、
使用したいページの<head>~</head>の間に、

<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>


を追加。

次に、<body>タグに、onload="setupZoom()"要素を追加。

そうすると、
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
と言った、画像への直接リンクが、zoomするようになるらしい。


なるほど。

ローカルにファイルを置いて試してみると、「こいつ・・・動くぞ!」
でも、使いたいのはFC2ブログの中です。
FTPで、フォルダ構造を維持してアップロードする事は出来ません。

仕方がないので、Fancy Zoomのプログラムを眺めてみる事にしました。
結構、ソースの中にいろいろとコメントが書いてあったりするんですよ。

var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images
お~やっぱりちゃんと書いてあるじゃん!
/images-global/zoom/の部分を、自分の画像をアップロードしたフォルダーにしてやればいいのね。

その上には、下記のような設定項目もありました。(違ってたらごめん)

var includeCaption = true; // 表題を付けるか? true = 付ける
var zoomTime = 5; // アニメーションの時間(ミリ秒)
var zoomSteps = 15; // アニメーションのフレーム数
var includeFade = 0; // 半透明機能を使うか 1=使う
var minBorder = 90; // 大きな画像をズームした時、画面の端からどのくらい空けるのか
var shadowSettings = '0px 5px 25px rgba(0, 0, 0, '; // 一部の対応ブラウザー用の影の設定


ここまで解れば、早速作業です。
1.画像ファイル25個を全てアップロード
2.画像アドレスを確認。
  私の場合は、http://blog-imgs-24.fc2.com/f/e/r/ferio68k/画像ファイル名
  と言うアドレスでした。
3.var zoomImagesURI = '/images-global/zoom/';
  を、先程調べたアドレスに書き換える。
  var zoomImagesURI = 'http://blog-imgs-24.fc2.com/f/e/r/ferio68k/';
4.書き換えたら、Javascriptファイルもアップロード。
5.Javascriptのアドレスも確認。
  私の場合は、http://blog-imgs-24.fc2.com/f/e/r/ferio68k/FancyZoom.js
  と言ったアドレスになります。

6.ブログのテンプレートを書き換える。
  書き換える箇所は、公式ホームページに説明のあった通りの2カ所。
  <script src="/js-global/FancyZoom.js" type="text/javascript"></script>
  は、ちゃんと自分のアップロードしたスクリプトのアドレスに変える事。
  <script src="http://blog-imgs-24.fc2.com/f/e/r/ferio68k/FancyZoom.js" type="text/javascript"></script>
  同じように、
  <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
  の方も書き換えてください。
  あとは、<body>タグに、onload="setupZoom()"要素を追加してやれば完成

後は、画像を貼り付けるだけで、zoomしてくれるようになります。

注意:表題をつけたい場合は、<a ..... title="表題"> ~ </a> としてやらないと表示されません。


FC2ブログでファイルをアップロードすると、
<a ..... ><img ... alt="表題"/></a>
と言うタグが挿入されます。

いちいち書き換えれば良いのでしょうが、面倒なので、何とか修正したいですね。

以下スクリプトの改造となりますので、個人の責任で行ってください。何があっても私は責任取れませんよ。
覚悟を決めたら、つづきをどうぞ。
続きを読む »

NEXT »

HOME : TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。