バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


スポンサーサイト

カテゴリー:-

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

0
     | - | | | pookmark

    このブログ(JUGEM)のZenback導入方法など

    カテゴリー:ブログいぢり・・・
    先日の記事[Zenbackはそれなりに広がる?]で書いたとおり、相当遅ればせながらもこのブログにZenbackなる、一見したところブログの各記事をソーシャルメディア化してくれる魔法のよなブログパーツを導入いたしました。

    参考にしたページが休止中なので、私の方で手順をご紹介したいと思います。

    参照:Zenback導入記3 -JUGEM | 借金女王の裏日記


    ①まずは本家のサイトで「新規登録」、コードを取得しませう!! 細かい設定は後からでも出来ますので。

    参照:Zenbackであなたのブログに全てのフィードバックを。


    ②次に、取得したコードをテンプレート内に挿入する作業ですが、直接HTMLを編集してもいいんですが、JUGEMではブログパーツとかの定形のスクリプトを容易に挿入できるように「フリースペース」っていうインクルード型のスクリプトをライブラリーのように5つまで保存できるツールが用意されておりやすので、そちらを利用します。

    ※フリースペースについては下記ページなどをご覧あれ。

    参考:フリースペースの使い方(PC) by JUGEM 管理者ページ・マニュアル

    参考:フリースペースの位置を変えたい!! by ブログカスタマイズ講座「ロベルトとポリンのStepUp!JUGEM」

    で、具体的には、フリースペースの編集画面で「内容」のところで、取得したコード
    <!-- X:S ZenBackWidget -->・・・・・<!-- X:E ZenBackWidget -->を入力します。「タイトル」は何でも構いません。『Zenback』とか判りやすいものでいいと思います。


    ③いよいよHTMLとCSSの編集ですが、設定(選択)されてるテンプレートによってもいろいろなので一概にはこのとおりにはいかない可能性もありますのでご了承くださいまし。フリースペースの独自タグ{freespace_contents1}とかの末尾の数字は必ず②で設定したフリースペースのIDナンバーと一致させてくださいねー!
    あと、デフォルトやと多分、本文表示のところじゃなくてサイドバーのところとか、本文表示以外のところに元々埋め込まれてるフリースペース用のタグがあったりすると思うので、その中のどれか一つ(Zenback用として使う分)を移動させてから下記の要領で利用してください。

    <body id="{eid}"> <!-- {eid}は個別の記事ページを表示させた時にURL末尾が /?eid=記事IDになってる場合に有効な独自タグ -->
    
    <div id="zenback">
    <!-- BEGIN freespace1 -->
    {freespace_contents1} <!-- {freespace_title1}は不要なので削除してます! -->
    <!-- END freespace1 -->
    </div>
    
    <!-- END entry -->
    
    /* Zenback */
    #zenback { display:none} /* 各記事ページ以外の時は非表示 */
    body#eid #zenback { display:block} /* 各記事ページの時は表示 */
    #zenback-widget .zenback-module-item { margin:0 !important} /* 基本的に不要〜お好み設定です */
    #zenback-widget .zenback-module-item .zenback-module-item-content { font-size:88% !important} /* 基本的に不要〜お好み設定です */
    
    ※JUGEMの独自タグについてはこちらの公式ページをご参照くださいまし

    とまぁ、こんな感じでございます。

    あと気になったことは、投稿してからその記事ページにアクセスがないままやと一向に「関連する記事」も「関連するみんなの記事」も表示されましぇ〜ん!! なので、投稿後は表示確認も兼ねて、一度自分でその記事ページを表示させて2分〜5分くらい経ってからリロードさせてみませう・・・そうすると少しは機能し始めるよな感じがしますので。
    0
       | ブログいぢり・・・ | | | pookmark

      Zenbackはそれなりに広がる?

      カテゴリー:ブログいぢり・・・
      以前から、いろんなブログやサイトでこんなマーク⇒を見かけてて、同じフォーマットで「関連する記事」や「関連するみんなの記事」なんてのが掲載されてたりしてたので、きっと何かのツールなんやろうとは思ってました。で、実際そのツールの利用登録サイトも見て「へぇ〜、ブログパーツとしては結構面白そな感じかな?」なんて思ってました。

      参照:Zenbackであなたのブログに全てのフィードバックを。

      そしてこの度、遅ればせながら各記事に「関連する記事」や「関連するみんなの記事」が出てくれれば良いな〜なんて欲をかいて『Zenback』を導入してみました!
      如何せん、ソーシャルメディアに疎い私なので、飾り的なものも見えますがそこはご愛嬌。ニュースメディアのよなワクワク感・・とまではいきませんが、それなりな雰囲気が出てくれればと願っている次第でございます。

      ☆導入にあたっては下記ページなどを参考にしました!

      参照:ブログサービスごとのZenback設置方法まとめ by NAVER まとめ

      ここの2ページ目にJUGEMに関する導入記事がいくつかありますが、その中の一番下にある「Zenback導入記3 -JUGEM | 借金女王の裏日記」を見て真似てみました。つい最近のことやったのに、この記事を書いてる時にはもうブログが休止中になってますね〜・・・。

      参照:Zenback導入記3 -JUGEM | 借金女王の裏日記

      ・・・・・また時間がある時に、このブログでの導入方法をツラツラとご紹介したいと思います。


      衝撃やったのがコレ、この記事!!

      参照:Zenback導入してみたら、自分のブログが盗用されまくりで驚く by More Access! More Fun!

      逆にこんな使い方、盗用発見装置としての利用価値もあるツールやったりするんですねー!(って、盗用されて困ることは今のところ無いんやけど、さすがに引用の但書きや出典表示なしに“丸パクリ”掲載はアカンね〜)

      ※zenbackのロゴ画像はZenbackのサイト掲載画像のURLを引っ張らせていただいてますので、そのWebサイト運営会社様の著作物になります。
      0
         | ブログいぢり・・・ | | | pookmark

        投稿日の祝日判定

        カテゴリー:ブログいぢり・・・
        え〜と、いろいろと調べてみるとJavaScriptを作って公開してくださってる方が結構いらっしゃるものです。ありがたい世の中で、私もその恩恵を受けまくってる一人でございます。受けてばっかりでほぼ何も返せずに申し訳なく、情けなくもある未熟者ですが、いつかきっと、必ずや何かの形で・・・!!

        で、今回調べたのはタイトルのとおり『祝日を判定』するプログラム。土曜日と日曜日は何とか自分でスクリプトを作って記事を投稿した「日にち」と「曜日」の色を変更させてみたんですが(あ、カレンダーの方じゃなくて記事本体の上に表示されてる方です)、さすがに祝日判定となるとそれなりのロジックが要りそ〜・・ということで、何か良きものはござりませぬかいなーと。

        ↓↓↓なるほど、ふむふむ・・??? どれも素晴らしいですなー!

        参考:日本の祝日 holiday.js by Amaitorte - その他 - 素材

        参考:JavaScript - 日本の休日を求める(休日判定) by Qiita

        参考:JavaScriptで休日を判定する関数 by You Look Too Cool

        参考:GoogleカレンダーからJSONPで日本の祝日一覧を取得 by GCalendar Holidays [ゼロと無限の間に]


        そんな数あるスクリプトの中から、今回は下記で公開してくださっていたものを利用させていただきました。

        参照:Javascriptで祝日判定 by yoshioblog

        厚く御礼申し上げます!ありがとうございました!!
        0
           | ブログいぢり・・・ | | | pookmark

          アクセスが多い記事・再考中

          カテゴリー:ブログいぢり・・・
          先日、[ブログ内のアクセスが多い記事]でご案内しましたとおり、サイドバーのブログパーツに「ページランキング」というスクリプトを設置したんですが・・ちと考え中。と、いうのも、タイトルこそ【アクセスが多い記事別リスト】→現在は【人気記事順位〜直近30日間集計】とカスタマイズしてますが、元々「ページランキング」として利用することを前提にしてるので、ブログに限らず通常のWebサイトでも簡易ページアクセスランキング表示なんかに利用できたりする訳です。

          で、余程のことがなければ、トップページが最上位にくるのはフツーにあることで、当然ブログでも起こり得ることです。ブックマークやったり、外部からのリンクやったり、その他もろもろで真っ先にアクセスが集中するのがトップページという訳ですな。

          さあ、そこで問題。【アクセスが多い記事別リスト】→現在は【人気記事順位〜直近30日間集計】としただけに、このトップページを“記事別リスト”(ランキング)から除外するべきか否か・・・。

          今も検討中で結論は出てましぇんが、PC版(※)やったらトップページにもちゃんとした記事は掲載されてる訳で、このブログやと最新の10件が常に表示されるようになってます。んで、個人的に「続きを読む >>」っていうのがあんまり好きじゃないんで、なるべく最初から全文が見られるように心掛けてます。
          ということは、トップページといえども、記事を読んでいただいている可能性が少なからずあるので、除外しなくても良いんじゃなかろうか、どうやろう? そうなると、全体の2ページ目、3ページ目、・・以降も同じ理由で除外しなくても良いのでは??

          ※これがスマホ版やとまた違う表示で、ここ(JUGEMさん)の場合、「リスト表示」と「直接記事表示」の2つの形式を選択できるようになってるんですが、「直接記事表示」を選択しても、勝手に途中(PC版でいうと数行程度)で「続きを読む >>」みたいな感じの「もっと読む」っていう表示が出てきて、そこをタップして各記事のページを読み込まないと続きを閲覧できないという、すごーく煩わしい仕様になってるので、現在は「リスト表示」にしてます。3G回線で接続してたりすると断然「リスト表示」の方が情報量が少ない分、表示速度も速いと思われることもあって、今はタイトルのみの10件表示になってるんですなー・・・

          んんー、設置したらしたで、これまた悩ましい問題ですなー。
          0
             | ブログいぢり・・・ | | | pookmark

            このブログ(JUGEM)の画像拡大表示

            カテゴリー:ブログいぢり・・・
            よく仕事でクライアントにおすすめしてた無料のレンタルブログサービスの一つに、exite(エキサイト株式会社)が運営する『エキサイトブログ』がありました。他社のサービスにもあるような有料プラン(ヘッダー広告や記事下広告を非表示にできたり、画像容量が無制限になったりいろいろ)もあるんですが、広告を気にせんかったら無料プランでも充分活用できて、インターフェイスも、クライアント側で更新してもらうことを考えた場合、結構分かりやすい方やと思って利用させていただいておりました。
            その『エキサイトブログ』、少し前までは、デフォルトやと投稿時にアップした画像の拡大(ポップアップ)表示ってかなりしょぼ〜い感じで、“右クリック”で画像やイラストを取得することを禁止する(実際は画面上に表示されてる時点で既に取得されてる訳なんですが・・)という「右クリック禁止ブログパーツ」を導入すると、LightBoxのようなポップアップ表示効果が得られるという裏技があったりして、ちょっとした他言無用の禁じ手的な使い方で得した感さえあったりしました。
            そして時は流れ、写真なんかの記事中の画像をクリックすると、別ウィンドウ表示にこそならないものの、今じぁフツーにギャラリー表示されるような感じになってるんじゃないでしょか?

            で、『エキサイトブログ』のことを熱く語らせていただきましたが、『アメーバブログ』略して『アメブロ』なんか、ずっと前からフツーにギャラリー表示やってまっせー!!

            参照:エキサイトブログ(blog)|簡単作成!使いやすい無料ブログ

            参照:アメーバブログ(アメブロ)|Amebaで無料ブログを始めよう


            それに比べてここ、JUGEMさん・・・ずーっと前からショボショボ〜なままでございます。当然、別ウィンドウ表示なんかにはなりません。自分でせっせと target="_blank" を<a>タグ内に仕込んだところで、真っ黒、正真正銘 #000 の背景画面のど真ん中にリンク先画像が<<ででーん>>と表示されるだけの仕様なのです。 じゃあ、管理画面の【データ管理】→【画像の管理】で「サムネイルを作成」なんて期待させるような機能つけるなよー!ただその分、容量食ってるだけやん!!っていちいち突っ込んでしまう悲しいさが

            は〜、何とかならんかな〜??? せっかくjQueryをGoogle先生んとこのCDNからお借りしてるんやったら、jQueryプラグインの画像表示操作系あたりのパッケージファイル群を適当に外部のサーバーにアップしていろいろ試してみよかいなー!と思ってやってみました。

            しかーし!・・なんと、結果は無残・・・ここ(JUGEM)にアップした画像に対しては一切効果なし! →元の画像自体も外部サーバーにアップして、記事内の<img>要素のsrc属性で呼び出せば何とか言うコトをきいてくれはしましたが・・ううぅー、違う、違うなー、決してこんなことがしたかった訳やないぞー!! もっとスマートにフツーに記事を投稿して画像を(JUGEMに)アップしてLightBoxでも何でもええから見た目のクオリティーをアップできへんのかー! そして更に調査続行・・・

            そして、ようやく見つけました。何と、2009年にLightBoxに対応されてたんじゃあないですか!!これはこれは大変、本当に大変失礼いたしましたー。でも prototype.js+scriptaculous.js 版で稼働するバージョンだった?ようで、2012年には jQuery版の「LightBox2」の最新版を各自で jQuery本体とともに勝手にバージョンアップしていってねーみたいなお知らせも発見してしまいました。あうー。

            参照:<追記あり>javascriptのライブラリを公開いたしました。 by JUGEMお知らせブログ

            参照:JUGEMブログに動的画像拡大表示”Lightbox2”を追加 by 【浦山ダイバーズ】

            そして、何はともあれ“Lightbox2”の本家サイトへ行って最新版をダウンロード。現時点ではv2.7.1です。 早速ダウンロードしたZIPファイルを解凍、そのフォルダの中にある『jsフォルダ』の中の「lightbox.min.js」か「lightbox.js」と、『cssフォルダ』の中の「lightbox.css」、『imgフォルダ』の中の「close.png」「loading.gif」「next.png」「prev.png」の4つの画像を外部サーバーなどにアップしておきます。
            ※『imgフォルダ』の中の4つの画像は、ここ(JUGEM)の管理画面からJUGEMにアップしておいても良いと思います! ただし、その場合は予め、「lightbox.css」の該当箇所をすべて“http://img-cdn.jg.jugem.jp/***/******/********_******.png”などの絶対パスに書き換えておいてください!!

            実際のソースは次のよな感じです。
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
            <script src="http://外部サーバーなどのディレクトリーパス/lightbox.min.js"></script>
            <link rel="stylesheet" href="http://外部サーバーなどのディレクトリーパス/lightbox.css">
            
            そして、<a>タグ内にrel属性を[rel="lightbox"]と追加すれば基本的には動作します。具体的なソースは次のよな感じになります。
            <a href="http://img-cdn.jg.jugem.jp/***/******/********_******.jpg" rel="lightbox"><img src="http://img-cdn.jg.jugem.jp/***/******/********_******_t.jpg" alt="○○○○○" title="クリックで拡大表示" width="300" height="200"></a>
            

            グループ化して、ギャラリー表示(PREVマーク「<」や、NEXTマーク「>」で、LightBox内で連続表示)したい場合は、rel属性じゃなくてdata-lightbox属性を使います。グループ化したい画像リンクの<a>タグ内に[data-lightbox="group-1"]と同じグループ名をつければ良いみたいです。
            ※"group-1"のグループ名は任意でご自由にお好みの名前で良いですよ。
            <a href="http://img-cdn.jg.jugem.jp/***/******/********_******.jpg" data-lightbox="group-1"><img src="http://img-cdn.jg.jugem.jp/***/******/********_******_t.jpg" alt="○○○○○" title="クリックで拡大表示" width="300" height="200"></a>
            

            ブログなんかの場合、全部同じグループで良いから一括で自動的にグループ化してギャラリー表示したいな〜なんていう人は下記ページをご覧あれ!

            参照:Lightbox2の使い方 by Webエンジニアブログ

            ↑途中あたりに「data-lightboxを自動的に追加」っていう見出しで参考になるスクリプトを公開してくれておりますよー! まあ、実際はすべての<a>タグにdata-lightbox属性を追加するのは、上記ページにも書かれてるようにテキストリンクもあることを考慮すると、ちと現実的じゃないので、最後のやつが一番実用的かも知れません。 あ、ちなみに上記には書かれてませんが、<body>要素内、それも出来るだけ最後の方、</body>の前あたりに記述する方が良いかもしれましぇん。

            ↓JUGEM用に少し補足版を私の方から。
            <script>
            // ページ内のすべてのa要素に繰り返し処理
            $("a").each(function() {
                if( $(this).find("img").length) { // a要素内にimg要素があるかどうかを判断し、
                    $(this).attr("data-lightbox", "group-1"); // 拡大表示の画像リンクの場合は属性を追加
                }
            });
            <script>
            

            そしてそして、画像から単に拡大表示だけじゃなくて、知り合いのWebサイトや外部の情報サイト、あるいはAmazonなんかへリンクさせてる場合は、そいつらも「data-lightboxを自動的に追加」から除外しないといけないので、次のよに改変。
            <script>
            // ページ内のすべてのa要素に繰り返し処理
            $("a").each(function() {
                if($(this).find("img").length) { // a要素内にimg要素があるかどうかを判断し、
                   if($(this).attr("href").match(/amazon|pid/)) { //且つhref属性にamazon等の文字列があれば、
                   $(this).attr("target", "_blank"); // └→ target属性に_blankを設定
                   } else {$(this).attr("data-lightbox", "group-1");} // それ以外で拡大表示の画像リンクの場合は属性を追加
                }
            });
            <script>
            

            もちろん、すべてグループ化じゃなくて単独ポップアップで良いという場合は"data-lightbox"を"rel"に、"group-1"を"lightbox"にそれぞれ置き換えれば良いだけです。
            あと、条件設定で文字列を含むかどうかの判定には、正規表現のmatchメソッドを使った方が無難かもです。match(/****/)が基本的な書式で、半角の縦罫線「|」で区切れば条件式になる文字列を増やせますよ!
            実は最初、indexOfメソッドを使うという方法を思いついたものの、Internet Explorer(以下IE)のバージョン「8」以前ではサポートされていないということを途中で知り断念。またしてもIEの壁・・・何やらIE8でもindexOfが使えるように別にスクリプトを用意すれば良いらしいんやけど、それはそれでまた面倒な気がする。

            参照:indexOf メソッド (Array) (JavaScript) by Microsoft Developer Network

            参考:IEでのindexof使用する際の注意 by かえでBlog
            0
               | ブログいぢり・・・ | | | pookmark

              ブログ内のアクセスが多い記事

              カテゴリー:ブログいぢり・・・
              かなりズボラをかましてたこのブログですが、7月頃から割と自分なりにはリハビリも兼ねて結構まめに更新してきた甲斐あって、ぼちぼちアクセスも増えてきたよな気がします。あ、あくまで気がする程度です。Google先生のログ解析も利用させていただいてますが、ぐうーーんと右肩上がりな訳じゃございません・・

              ポツポツと訪問していただける方が少〜しずつ増えていってくれたらなーという願望も込めて、いろんなWebサイトやブログで利用可能な ACR WEB さん提供の「ページランキング」というスクリプトをブログパーツに利用させていただきました!
              タイトルは【アクセスが多い記事別リスト】→現在は【人気記事順位〜直近30日間集計】とカスタマイズして設置いたしました。まだ設置したばっかりで集計が全っ然追いついてましぇん・・が、今後、少しずつでも増えていって変動が見られれば嬉しい限り、感謝感激の至りでございます。

              なかなか便利で秀逸なこのスクリプトの設置方法とかの詳しい説明は配布元の下記をどぞ。

              参照:ACR WEB ページランキング紹介

              もちろん利用料は無料で登録も不要です!最初に必要なのは、メールアドレスの登録と管理画面用のユーザー名とパスワード(どちらも任意で決定)の設定だけです。後は利用に必要な設定を管理画面から行って、スクリプトとカウンター用のソースを張(貼)り付けるだけ!

              結構、細かく設定方法とかを説明してくれてるページがあるので、気になる方は下記ページをどぞ。

              参考:FC2ブログで人気記事ランキングを表示する by 0822の奇跡

              ↑FC2のブログで利用されてるんですねー!!良いですねー。
              「タイトル自動設定」と、その次の「置換設定」のくだりですが、このブログ(JUGEM)だとRSSの配信件数がユーザー側で設定できない上に、無料プランのユーザーだと固定で30件っていう制限があったりして、かなり融通きかないんですよね、ううぅー。FC2ほどじゃないにしても、それなりに利用者多いはずなのに、便利な面があるかと思いきや、何かと不便な面が目立つJUGEMさんでございますなー。
              0
                 | ブログいぢり・・・ | | | pookmark

                このブログ(JUGEM)のファビコン設定

                カテゴリー:ブログいぢり・・・
                気にはなってたんです。『J』のアレ。アレですよー!
                そうそう、ブラウザーの端っこんトコに出現する JUGEMファビコン画像 ←こいつです。フェイバリット・アイコン、略してファビコン。思い立ったが機知、いや、既知、あいや吉日。くどーい! 早速何とかしませう!!

                参照:Favicon Wikipedia

                で、ですね、まず【HTML編集画面】で下記のソースを<title>タイトル</title>の下あたりに放り込んだんですよねー。
                <link rel="icon" href="別に用意したサーバーのURIなど/favicon.ico">
                
                ※予めソースの編集が可能な部分はHTML5に書き換えてます。
                ※別に用意するサーバーは無料のレンタルサーバーやDropboxとかの無料ストレージサービスの共有リンクでも良いと思います。
                ※ファビコン(favicon.ico)はPhotoshopやIllustratorで作ることもできたんですが、以前プロフィール用に作ってあった(が、結局プロフィールには使わず・・)180px四方のPNG画像が手元にあったんで、それをもとにPhotoshopで48×48px、32×32px、16×16pxのそれぞれ3パターンのPNG画像を書き出して、何とも便利な下記サイトを使ってオンラインで作ってしまいました。

                参照:favicon.icoを作ろう!

                ・・・うまくいきません。まだ JUGEMファビコン画像 が出てきます。うぅ・・
                一筋縄ではいかないんやね、箱物って。そして調べることに。

                参照:ファビコンの表示やOGP対策に今までJUGEMブログで設定していたこと by My First JUGEM Template!

                ふむふむ、何々、非常に小難しいことが書かれているではありましぇんかー!! そこまでせんでも、もう少し何とかなるんでないかい?と直感的に、何の根拠もなく(プログラマーでもないくせに失礼な話ですみません)そう思った私は更にWebの糸をたぐり寄せ続け・・・重たくなる瞼・・ほぼ線のような視界、もはや限界かと思われたその時、か・い・が・んー!「海岸」じゃなくて「開眼」です。もうエエって?!

                参照:jugemブログでfaviconを表示する方法(JavaScriptは使わずに) by 悪あがきプログラマー

                結局のところ、↑ここにも書かれてるように[rel="shortcut icon"を含む<link>タグの有無]を判別しているようですねー。なければ</head>の上あたりに自動的に出力してくれてるんですねー!なので私も同じ方法を取りつつ、少し変えてみました。rel="shortcut icon" の href=" " にもオリジナルのファビコンのURLを指定しました。そしたら何が違うか・・Firefoxでしか確認してませんが、rel="icon" の方だけやとタブのアイコンしか制御できへんみたいなんですね〜、何故か私の環境では。rel="shortcut icon" の方で本来のブックマークリストのアイコンも制御できるみたいです!
                で、改めて下記のソースを<title>タイトル</title>の下あたりに放り込みました。
                <link rel="shortcut icon" href="別に用意したサーバーのURIなど/favicon.ico">
                <link rel="icon" href="別に用意したサーバーのURIなど/favicon.ico">
                <link rel="apple-touch-icon" href="別に用意したサーバーのURIなど/apple-touch-icon.png">
                
                ↑ついでに rel="apple-touch-icon" も同じファイル名で書き換えてしまえ!多分スマホ用じゃろ?って思ってやってみました。が、悪あがきプログラマーさんも書かれてる(上記リンク中↑)ようにiPhoneのブックマークアイコンはぴくりともしませんでした。
                そうでした。JUGEMのスマホデザインはXHTML仕様でユーザー側では全く弄れないんでした・・

                参照:【iPhone】SafariでHTMLのソースコードを確認する方法 by SBAPP

                ↑この方法で再確認しましたが、ソース自体が編集可能なPC版と全く異なってるので、(適用されるテンプレートのHTMLとCSS自体が別物なんやから当然と言えば当然か・・)悲しいかな編集前のソースがそのままでございました。

                <link rel="shortcut icon" href="http://imaging.jugem.jp/portal/img/favicon.ico" />
                <link rel="apple-touch-icon" href="http://imaging.jugem.jp/portal/img/apple-touch-icon.png" />
                

                **********

                今のところはコレで良しとして、スマホのブックマークアイコンは今回は諦めるとしますか〜・・・
                0
                   | ブログいぢり・・・ | | | pookmark

                  画像表示の不具合修正

                  カテゴリー:ブログいぢり・・・
                  このブログを先月あたりに【デザイン編集】でHTMLの編集画面からHTML5に書き換えたんですが、その後すぐに、jQuery(JavaScript(以下JS)ライブラリーの一つ)のプラグインで、ページのスクロールに合わせて画像を遅延読込させてページ全体の初期表示の高速化ができるという『Lazy Load』というプラグインを導入しました。が、どうもInternet Explorer(以下IE)の一部で画像自体が表示されないという不具合があることが判明いたしました。IEでアクセスしていただいたみなさん、大変申し訳ございませんでした。

                  参照:Lazy Load Plugin for jQuery

                  原因は、ズボラして上記のプラグイン公式サイトに設置されているJSファイルを直接読み込ませるようにしてたためでした。ちゃんとダウンロードして自分が利用してるサーバーに設置して、そいつを読み込ませるように書き換えると何とか表示されるようになりました。

                  **********

                  あと、iPhoneでも画像が表示されないということが判り早速調査。こっちは何となく『Lazy Load』自体が動作してない気がしましたが、ビンゴ〜!でした。iPhoneやAndroid端末でアクセスすると、スマートフォン用のテンプレートが適用されるみたいで、ブログ自体のデザイン設定ではHTML5として設定を書き換えたのに、勝手に弄れないスマートフォン用のテンプレートは何とXHTMLになっておりやした(iPhoneのSafariですが、下記の方法でHTMLソースを確認しました)・・しかも文字コードがEUC-JPにも関わらず先頭にXML宣言が無いという仕様でした。

                  参照:【iPhone】SafariでHTMLのソースコードを確認する方法 by SBAPP

                  当然、こちらで編集できるブログのデザイン設定から編集したHTMLやCSSはPC用ということで完全に無視されてて、『Lazy Load』プラグインは読み込まれておらず、『Lazy Load』が読み込まれてたとしても、HTML5の独自データ属性(data-original="abcdefg.jpg")を使って動作するプラグインなので、自動的に適用されるXHTMLテンプレートだと意味がないという何ともお粗末な状況でございました。

                  とりあえずそのままの形(img src="abcdefg.jpg")で画像は表示されるようにしましたので、今のところは良しとしていてください・・
                  0
                     | ブログいぢり・・・ | | | pookmark

                    Button of Go to Home

                    Button of Back to Top