前にも書きましたがSeesaaブログのテンプレートが新デザインに移行された2017年前後から最近まで、パソコンにほぼほぼ触っていませんでした。

持っているSeesaaブログは旧デザインシステムに移行し損なったままの、新デザインシステム難民なのです。

旧デザインシステムだけどレスポンシブだしスマホ版のカスタマイズは制約多い。

それだったらスマホアクセスは強制的にデスクトップ版にリダイレクトしてしまえ、というのが今回のトピックです。

知らないうちにアドセンスに自動広告という仕組みが追加されていて、10年前のようにどこに広告を表示させようかと悩むこともなくなったんですね。

これは流石に嫌なんで「除外エリア」ではじきたかったんだけど、好きな場所を選べるわけじゃないんですね。

なんとなくボーっとある屋根職人さんのブログを見ていたときのこと。暫くしてそのブログがSeesaaだとういことに気がついてある違和感が。

広告が全く表示されていないのであります。

このブログを書き始めたのはかれこれ10年以上前。当時、ちょうどスマホが普及してきた頃で、サイトを見るのはパソコンよりスマホじゃね？という時代。
ところがスマホで見たときの広告がそれはそれは酷かった時代でした。

Seesaaブログが2017年4月17日から順次、テンプレートを新しいデザインシステムに移行を開始しました。

ボクは仕事の都合でほとんどすべてのブログ更新をしていなかったけど、Seesaa広告が消せるのかだけは気になる。

そこで実際に新システムに移行してから広告を消してみました。

結果、なんだかキレイさっぱり全部消えました。広告を非表示にするだけではアレなので、ついでに AdSense 広告を随所に散りばめてみました。そのやり方を一挙公開。

ブログにパンくずリストを設置すると、Google 検索結果に表示される URL がパンくずリストになる。例えば記事の場合、/article/123456789.html ではなく「ブログ URL > カテゴリ名」のように。

ところが他ブログと同じパンくずリストのコードを使っているにもかかわらず、検索結果の表示がずっと /article/123456789.html のパターンのままパンくずリストにならなかったブログがいくつか。

ひょんなことからパンくずリストにならないパターンの手掛かりが掴めてきた予感があります。

Seesaa ブログの HEAD に Canonical（カノニカル）を追加します。

SeesaaブログのPC版テンプレートには何やら handheld があってモバイル版ページへのリンクが指定されます。でも携帯電話アクセスはもういいや。

このブログでのオススメは広告だらけのスマホ版も止めてしまって PC 版に飛ばしましょうという流れですが、自動的に飛んで来たはずなのに Googleアナリティクスを見ていると ?from_sp が結構あります。

だったらやっぱりメタタグに Canonical を追記しておいたほうが良いかしら。

Google Developers にある PageSpeed Insights やモバイルフレンドリーテストなども登場して、どうやら Google はモバイル対応に本気です。

Google の検索結果にモバイルフレンドリーかどうか表示されるようですから、こちらサイドも確りとこの流れに乗っからないといけません。

さて、PageSpeed Insights のモバイル評価項目に「ユーザーエクスペリエンス」がありますが、Seesaa ブログで必ず引っかかるのがタグクラウド。これを 100% とまでは行きませんが、なるべく引っかからないようにカスタマイズしてみます。

レスポンシブ対応のメニューをいくつか試した結果、Bootstrap に落ち着きました。

実装するには Bootstrap.min.js と Bootstrap.min.css を追加しますが、Bootstrap の各種機能の中で今回使うのは nabvar だけ。

HTML に css を追加すればレンダリングブロックがぁーと警告されてさらに読み込みが速度が遅くなる

そこでパフォーマンス向上のため CSS の本数を減らしたいので navbar に使われているセレクタだけ抽出して既存 CSS に１本化しました。

navbar で検索してそこだけピックアップするだけと高を括っていたら全然違って、思っていたよりも結構大変な作業でビックリ。

Seesaaブログのデザイン画面から「何気なく」コンテンツを追加していませんか？

新しい部品を追加するんだからデザインコンテンツを追加するのは当たり前じゃない、と「何気なく」追加しているとブログの表示速度がどんどん遅くなります。

そんなことは言われなくても分かっているけどデザインコンテンツを追加する以外に方法がない、という固定概念は捨てて別のやり方を試してみましょう。

サイトの記事中に文字数が同じではない文字列を並べたとします。

例えば「北海道支社　青森営業所　岩手営業所　宮城営業所　秋田営業所　山形営業所....」のような一覧です。

ベタ打ちしたら文字数によって当然きれいに整列してくれることはありません。たまたま文字数が同じでスペースを駆使して並べたとしても、表示幅や表示フォントが変わるとモザイクと化します。

結局、なんだかんだで１年間考え続けたある日、ふとスタイルシートで出来るんじゃないかなと。やってみたら等間隔に整列させることができました。

Googleのモバイルフレンドリーが2015年4月21日あたりに正式導入になったみたいですね。

スマホやタブレットなどのモバイル端末でGoogle検索をすると、ヒットしたサイトのスニペットに「モバイル対応」と表示されるようになった。聞くところによるとモバイル対応でないと検索順位にも影響が出るらしい。

で、ボクが気になっているのは、このモバイル対応の表示ではなく、以前から表示されていたパンくずリストの表記です。

半年くらい前と仕様が変わったのか data-vocabulary.org でマークアップしていてもパンくずリストが表示されてないんですよね。特に無料ブログ系がおかしくなっていて、Seesaaブログのパンくずリストはほぼ見当たらない。壊滅状態です。

Seesaaで運営している、とある秘密ブログのために Seesaa 用レスポンシブデザインのテンプレートを作りました。つい先日、そのテンプレートをこのブログにも移植してみました。

ご覧の通りこのブログは、いわゆるアイキャッチと呼ばれる画像を貼り付けています。とある秘密ブログでは問題なかったのに、このブログではアイキャッチ画像が思い通りに制御できない。

調べてみるとンプレート側の問題ではなくて、これまで記事中に画像を貼り付けるとき書いていたタグを２パターン作ってしまっていたことが原因でした。

Seesaaブログをスマホで見たときのアンカー広告がヒドい。ボクの設置した広告ではないし、とにかく画面をウロウロ・チョロチョロしてホントにうっとうしい。

そればかりか全画面広告まで出てきて、2年間もブログを放置している間にこんな広告が出るようになっていたとは、放置してはいかんですね。

というわけで、アンカー広告とモバイル全画面広告を消して非表示にしますわ。

Google PageSpeed Insightsのテスト結果を見ながらページの読み込み速度高速化のための最後の切り札として導入したjQuery Lazyload。

このブログでは起きなかったのに何故か別のブログではレンダリングブロックが発生して30ポイント近くもパフォーマンスが悪化。

ページ読み込み速度が向上すると期待した画像遅延読み込みで、パフォーマンスが向上するパターンと下落するパターンがある模様。

昨日メールを頂きまして、その方のブログを拝見しましたところスマホ版をカスタマイズして使った方がいいんじゃないかと。そういうパターンもあるなと。

PC版をレスポンシブにするのがベターですが、時間がなかったり技術的に届かない。仕方なくスマホ版をそのまま使っている。

そういったシーサーブロガーの方にecho風味Seesaaスマホ版テンプレートカスタマイズをご紹介したいと思います。

jQuery.js もしくは jQuery.min.js（minが一般的だと思うので以下 jQuery.min.js に統一）は head に置きなさいと何かで読んでずっと head に置いてました。

jQuery自体サイズが小さいので head でロードさせても処理時間は 30ms 程度。ページの読み込みスピードにはあまり違いはありません。