<< 【ちょいテク】月別アーカイブの英語表記を数値に・・・ | main | 【カスタム】積極的なJUGEM IT!(笑) >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
【カスタム】Photoテンプレート改造
JUGEM ユーザ助け合い板より、Photoテンプレートでカレンダー内にサムネイルってのがありました。
ぶっちゃけ無理でしょう(ぇw

JUGEM Photoのテンプレートは通常に表示される記事をJavascriptで細かく制御して全く別の物につくり上げた、takkyun氏入魂の一作。ただし、JUGEMの制約からは逃れられず、サムネイル部分に表示できる画像は最大10件。カレンダーに出すには少ない。
また、この質問を送ってきたosampohana氏のサイトを見ると、1日に何枚もの画像=記事があり、カレンダーにどうやって複数の画像をサムネイル表示するのか?といった仕様上の問題もある。

といって、このまま「無理です」の一言で済ますにはフリーの意地wwから、さけたい(爆)

osampohana氏が満足するかわかりませんが(←ダメジャン)、サムネイル表示にマウスを乗せたらタイトル&投稿日時をツールチップで表示(ショボw)って機能を追加してみようかと。

p.s.私のJUGEM側のBLOGは多人数で使用しており、趣旨も合わないため^^;、今後JUGEMの改造ネタは今後こちらにw(JUGEMの有料化&複数アカウントOKの時は引っ越すかもしれませんが・・・)
とまぁ、前振りは偉そうな事書いてますが、何のことはない、サムネイルの出力処理時(DisplayThumbnails関数)にアンカータグに属性"title"を埋め込むだけですw

テンプレート上のソース
function DisplayThumbnails(dispLog) {
  var obEntries = GetElementsByClassName('div','entry');
  var objImages = new Array();
  for (var i=0;i<obEntries.length;i++) {
    var checkImage = obEntries[i].getElementsByTagName('img');
    if (checkImage.length == 0) {
      objImages[i] = gNoImage;
    } else {
      var checkFlag = true;
      for (var j=0;j<checkImage.length;j++) {
        if (checkImage[j].className == 'pict' && checkFlag) {
          objImages[i] = checkImage[j].getAttribute("src");
        } else if (checkImage[j].className == 'thumb') {
          objImages[i] = checkImage[j].getAttribute("src");
          checkFlag = false;
        }
      }
      if (!objImages[i]) objImages[i] = gNoImage;
    }
  }
  for (var i=0;i<objImages.length;i++) {
    document.write(Array('<a href="#" ',makeNaviLink(i),' id="thumb',i,'">').join(''));
    document.write(Array('<img src="',objImages[i],'" width="',gThumbW,'" height="',gThumbH,'" /></a>').join(''));
  }
}

      ↓

function getEntryTitle( obj ) { // 表示用テキスト取り込み関数(新規)
  var sText = "";
  while ( obj && obj.className != "entry" ) {
    obj = obj.parentNode;
  }
  if ( obj ) {
    var objTitle = obj.getElementsByTagName("h2")[0];
    sText = objTitle.firstChild.innerHTML;
    while( objTitle && objTitle.className != "entry_date" ) {
      objTitle = objTitle.nextSibling;
    }
    if ( objTitle ) {
      var sTmp1 = objTitle.innerHTML;
      var sTmp2 = objTitle.getElementsByTagName("a")[0].innerHTML;
      var tmp1 = sTmp1.split(" ");
      var tmp2 = sTmp2.split(" ");
      sText = Array( sText, "/", tmp1[0], tmp1[1], tmp2[0], tmp2[1] ).join( " " );
    }
  }
  return sText;
}
function DisplayThumbnails(dispLog) {
  var obEntries = GetElementsByClassName('div','entry');
  var objImages = new Array();
  var sText = new Array(); // [追加箇所]
  for (var i=0;i<obEntries.length;i++) {
    var checkImage = obEntries[i].getElementsByTagName('img');
    if (checkImage.length == 0) {
      objImages[i] = gNoImage;
    } else {
      var checkFlag = true;
      for (var j=0;j<checkImage.length;j++) {
        if (checkImage[j].className == 'pict' && checkFlag) {
          objImages[i] = checkImage[j].getAttribute("src");
        } else if (checkImage[j].className == 'thumb') {
          objImages[i] = checkImage[j].getAttribute("src");
          checkFlag = false;
        }
      }
      if (!objImages[i]) objImages[i] = gNoImage;
    }
    sText[i] = getEntryTitle( obEntries[i] ); // [追加箇所]
  }
  for (var i=0;i<objImages.length;i++) {
    document.write(Array('<a href="#" ',makeNaviLink(i),' id="thumb',i,'" title="', sText[i], '">').join('')); // [修正箇所]
    document.write(Array('<img src="',objImages[i],'" width="',gThumbW,'" height="',gThumbH,'" /></a>').join(''));
  }
}


さて。ご満足いただけるでしょうか^^;

[7/7修正]IE6.0依存部分の修正

*** 役に立ったと思われましたら、下の広告などをポチッと押してもらえると助かります汗 ***
| [Custmize]JUGEM | 14:15 | comments(17) | trackbacks(1) |
スポンサーサイト
| - | 14:15 | - | - |
コメント
まめさん、こんばんわ。

これを設置させてもらおうと思って、
赤字部分のみ追加訂正したんですが反映されず、
そっくりまるごとコピー〜ペーストしたのですが、

●「LATEST」から「ALL」に切替えると、左側に縦いちで表示されます
(かえって、このほうが使いやすいような気もしますが)…サムネイルが表示されない状態になってしまいました。

別名保存でコピーはとりましたが、バックアップとして機能しません
(これは別件として、お聞きするつもりでした…ソースそのものは、書き換えられていないのに、表示は●のようになります。コピーとった意味がないんですが、これもサーバ不安定に関係あるんでしょうか?以前は、まともでした)。

チャープがらみのお取込中に恐縮ですが、
お時間とれましたら、お助けください…よろしくお願いします。
| さいもん | 2004/06/25 1:26 AM |
これって、冷や汗まさか「カレンダーが既に設置されている」が前提ではないですよね…
| さいもん | 2004/06/25 1:30 AM |
さいもんさんのサイト見てみました。スクリプトエラーが出てるんですが汗汗
追加した部分ですが、空白部分に全角スペースが入ってますね。
コード部分に全角スペースは入れないで下さい汗
あと、この情報取得用にgetEntryTitleという関数が追加になっていますが、それが入っていないようです。

>別名保存でコピーはとりましたが、バックアップとして機能しません
質問の意味を正確に理解していないのですが、別名保存はあくまで、使用状態のテンプレートを別のテンプレートとして保存するだけです。元が悪ければそのままです。
| まめ | 2004/06/25 12:06 PM |
月末のお忙しい時に、ご返答いただきありがとうございます。あと、この

>情報取得用にgetEntryTitleという関数が追加になっていますが、それが入っていないようです。

まるごとコピー〜ペーストしたはずなのに抜けてました。

>コード部分に全角スペースは入れないで下さい

これはどの部分のことを言われているのでしょうか?
function DisplayThumbnails(dispLog) {
var obEntries = GetElementsByClassName('div','entry');
var objImages = new Array();
       var sText = new Array(); // *
*追加分をペーストした際に、1行上のvarと頭が半角分どうしても揃いませんでした。この辺のことを仰ってるのでしょうか?

>●「LATEST」から「ALL」に切替えると、左側に縦いちで表示されます(かえって、このほうが使いやすいような気もしますが)…サムネイルが表示されない状態になってしまいました。

この状態で一晩使ったところ、こちらのほうが使い勝手がよいことがわかり、サムネイル表示できるのならこのまま使いたいと思うのですが。
もし表示可能な場合は、上の作業はそのまま進めてよいのでしょうか?

>別名保存については、説明が長くなりますので別途改めて質問させていただきます。かわりといってはなんですが、ここで使われているフォントを教えていただきたいんですが…とても、読みやすいです(とくに欧文)。

接続不安定のため、返信が遅くなってしまいました、申訳ないです。
どうぞ、よろしくお願いいたします。
| さいもん | 2004/06/25 3:42 PM |
>>コード部分に全角スペースは入れないで下さい
>これはどの部分のことを言われているのでしょうか?
指定されたところだと、varの前ですね。Webのソースコードを見ると分かりますが、半角スペースはそのまま出ますけど、全角スペースはEUCのため、化けて出ます。スクリプトなどは、同じスペースでも、全角スペースはスペースと判断しないため、エラーになります。あちらの方々が作った物だからしょんぼり

>●「LATEST」から「ALL」に・・・
PhotoJUGEMはテストにちょっと使っただけですので、そこら辺はよく分かりません

基本的にこの記事の話でしたらOKですけど、別名保存は助け合い板に書いた方が良いかもしれませんね。

フォントは、このテンプレートのデフォルトをそのまま使用していますよ。
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅", sans-serif;
となっています。まぁ、文字サイズは少し大きめにしましたけど嬉しい
| まめ | 2004/06/25 4:42 PM |
さっそくありがとうございます。

関数追加・スペース修正したうえで、テンプレートにペーストする前の段階でチェックしていただけれると助かるのですが、いかがでしょうか?

>PhotoJUGEMはテストにちょっと使っただけですので、そこら辺はよく分かりません

はい、了解いたしました。

>基本的にこの記事の話でしたらOKですけど、
別名保存は助け合い板に書いた方が良いかもしれませんね。

そうですね、別名保存がまったくあてにできないので
別の方法でコピーを残すことを考えます。
どう考えても変なので、JUGEMに問合せます。

フォントの件、ありがとうございました。

またおじゃまさせていただきます。
よろしくお願いします。



| さいもん | 2004/06/25 5:27 PM |
とりあえず、PhotoJUGEMを一度落とし直して、公開。
その複製を作成(名前例:カスタマイズ用)して、複製の上で一つずつカスタマイズを実行し、きちんと動いたらそれをまた複製(名前例:公開用)して、それを公開用に使用する。
で、カスタマイズ用でプレビューを見ながら、次の修正して、
 うまくいったら、カスタマイズ用を一度公開→公開用を削除→カスタマイズ用をまた複製(公開用)→公開用を公開に
 失敗したら、カスタマイズ用を削除→公開用をカスタマイズ用に複製
と繰り返して、少しずつ機能アップを図るのがいいかと思います。
手間かもしれませんが、正常に動作しないものを長々と他の人に見せる要理はいいかと思います。
一応、上の方法は私もやっていますよ。
| まめ | 2004/06/27 2:34 AM |
おっしゃるとおりです。

わたしも遅ればせながら、
昨夜やっとそれに気付き
いま、復元完了しました。

さすがのわたしも
こんどばかりは
身にしみて懲りました。

もうコメントは
いただけない…と
あきらめていたのに
ご丁寧な開設をいただき、
恐縮しております。

こちらにお邪魔するのが
はやすぎたようです。

顔を洗って出直してまいりますので
どうぞ、よろしくお願いいたします。

おいそがしいところ、ありがとうございました。
リンクは、
こちらにお邪魔できるようになるまで
封印させていただきます。
| さいもん | 2004/06/27 5:23 AM |
さいもんさん。お気になさらずに。
遅れたのはあくまで気が付かなかっただけです。男汗汗
先にも書いたとおり、PhotoJUGEMは本格的にさわったわけではないので、チェックするとなるとかなり労力も必要になるため、かなり待たせてしまうかと思ったためです。
それであれば、ご自身の勉強のためにも1つずつじっくりと機能アップされた方がよいと思ったため、あのレスを書かせていただきました。
じっくりとカスタマイズ頑張ってください。晴れ
| まめ | 2004/06/27 11:39 AM |
そう言っていただけると、救われます。
かえって、お気を遣わせてしまい、申訳ありません。
掲示板では、またいろいろお助けいただくことと思います。

どうぞよろしくお願いいたします。
| さいもん | 2004/06/27 2:04 PM |
おはようございます、いつも掲示板ではありがとうございます。

前回、身にしみて懲りたはずなのに「フォント変更くらいなら」と思ったのが間違いでした。せっかく復元できたのに、またもや以前の状態に逆戻りしてしまい、今回は再復元も失敗してしまいました。もうデフォルトからすべてやり直そうと思い、ダウンロードしましたが、それすらトップページから他へ飛ぶと現在の不良状態になってしまいます。どう考えても、機能不全としか思えず、IDを新規取り直しました。改めて最初からやっていこうと思っています。まめさんには、御迷惑ばかりおかけし、たいへん申訳ありませんでした。今後ともよろしくお願いいたします。
| さいもん | 2004/06/30 7:46 AM |
まめさん、おはようございます。

たいへんお騒がせしましたが、おかげさまで「サムネイルにマウスオン〜ツールチップ表示」、楽しい無事に設置できました。
いろいろ、ありがとうございました。カレンダーがわりに、とても役立ちます。そこで、お聞きしたいのですが、表示を曜日までとし、時間は非表示ににすることは可能でしょうか?お時間があるときにでも、考えていただけると嬉ししいのですが…よろしくお願いいたします。

話はかわりますが、「えきさいとさいもん」よりリンクさせていただきました。アイコンに置換えたのですが、お気に召さなければ差換えます
(豆を探したのですが見つからず、桃です(^^;)>
タイミングがずれ過ぎですが、トラックバックさせていただきます。
ありがとうございました。

なお、こちらでもあらためてリンクさせていただきたいのですが…
これからも、どうぞよろしくお願いします。
| さいもん | 2004/07/04 5:18 AM |
さいもんさんJUGEM復帰おめでとうございます。

>時間は非表示ににすることは可能でしょうか?
以下の部分を修正してください。
sText = Array( sText, "/", tmp[0], tmp[1], tmp[2], tmp[3] ).join( " " );
  ↓
sText = Array( sText, "/", tmp[0], tmp[1] ).join( " " );

きちんと確認していないので、嘘だったらごめんなさい^^;
| まめ | 2004/07/04 5:37 AM |
申訳ありません、またやってしまいました冷や汗
トリプル・トラックバックになってしまいました、
お手数ですが削除お願いいたします。
| さいもん | 2004/07/04 5:42 AM |
ありがとうございます楽しいやはり、JUGEMのほうが愉しいです。

修正方法、さっそくありがとうございますっ!
完璧に機能します…これ、すごく役に立つのに
PhotoJUGEM使ってるひとって、完全に「作品用」として
わりきっているようで、興味ないんでしょうね…もったいない(^^;

お時間のあるときにでも、またPhotoJUGEM改造を
考えていただけたら、すごく嬉しいです。
| さいもん | 2004/07/04 12:20 PM |
さいもん様
自分では使ってないので汗、要望があれば私も検討はしてみますし、作者のtakkyun様も検討はされるのではないかと思います。
| まめ | 2004/07/05 10:58 AM |
http://www.fitflops-sale.us.com/ fitflop
http://www.pandora-jewelrysale.us.com/ pandora jewelry official site
http://www.birkenstocksandalssale.us.com/ birkenstock shoes
http://www.hermesbirkin-handbags.us.com/ hermes handbags
http://www.katespadepurses.us.com/ kate spade crossbody
http://www.nikeairvapormaxflyknit.us.com/ air max 90
http://www.adidasnmdrunnerr1.us.com/ yeezy boost 750
http://www.curry4-shoes.us.com/ under armour stephen curry boys
http://www.yeezyboost350shoes.us.com/ yeezy 350 v2
http://www.adidasyeezy-350.us.com/ yeezy boost 750
http://www.pumafentyrihannashoes.us.com/ rihanna puma shoes
http://www.jordans11shoes.us.com/ jordan 7
http://www.jordan11spacejams.us.com/ jordan 8
http://www.airmax90shoes.us.com/ nike shoes
http://www.fitflopsshoes.us.com/ fitflop
http://www.louboutinredbottoms.us.com/ louboutin shoes
http://www.pandorajewelryscharms.us.com/ pandora jewelry
http://www.adidas-ultraboost.us.com/ adidas ultra uncaged
http://www.lebron15-shoes.us.com/ kyrie irving shoes
http://www.longchampbag.us.com/ longchamp
http://www.pandorajewelryrings.us.com/ pandora bracelet
http://www.nikeairmax-90.us.com/ air max 95
http://www.salomonspeedcross3.us.com/ salomon speedcross 4
http://www.kyrie-4.us.com/ kyrie 3 shoes
http://www.kd10-shoes.us.com/ nike kd 8
ドリフトliuyuzhen
| air max 90 | 2018/05/26 2:55 PM |
コメントする









この記事のトラックバックURL
http://mamejiro.jugem.cc/trackback/48
トラックバック
やややっとできたあっ!
| Hi,Again! | 2004/07/04 5:23 AM |