すたすた式
Blogger QooQ
昨年に続いて今年も書いてみました。
[Blogger] ヘッダー下に画像付きのカード型リンクを設置しました。[QooQ]-すたすた式
画像はデザイン作成を無料で簡単に！| Canva（キャンバ）で作成。たぶんはじめてCSS gridをつかってレイアウトしてみました。
画像形式は興味があったのでWebPを採用。
（当初の設置目的は、スクロール発火するアドセンス遅延読み込みを設置したので、広告の読み込み（表示）までスクロール量を稼ぐためでした）
[CSS SVG]外部リンクにアイコンを付けてみました。[Blogger QooQ]-すたすた式
外部リンクにCSSの擬似要素をつかってアイコンを付けてみました。
CSSの:not()をつかって内部リンクを除外するのが肝でした。
また、アイコンはCSSの擬似要素を使ったので、SVG形式をURLエンコードして使いました。
ボタン全体をタップ・クリックできるようにするCSS [Blogger / QooQ]-すたすた式
ラベルウィジェットのリンクをボタンっぽくしたとき、クリックできる範囲が狭かったので導入。
ラベルウィジェットのHTMLを編集することでも実現可能でしたが、今回はCSSのみでおこないました。
[Blogger]特定のページでアドセンスを表示しない（特定のページ以外は表示する）-すたすた式
プライバシーポリシーのページとエラーページにアドセンスを表示させたくなかったので導入しました。
やや理解不足です。
[Blogger]目次を自動作成（生成）するJavaScript【コピペでOK】-すたすた式
目次を自動作成（生成）するJavaScriptはこちら[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）-スケ郎のお話がおそらく有名。
ただ自分にはオーバースペックだと感じたので、JavaScriptの勉強がてら書いてみました。
コードのコピー用にボタンを作成してみました[highlight.js + Copy Button]-すたすた式
希望の動作は、
でした。
常時コピーボタンが表示されるものと、ホバー（マウスオーバー）されたときに表示されるタイプの2種類を書いてみました。
【Blogger用】JSON-LDでgraphを使って構造化データを書いてみました-すたすた式
いま使っているテンプレート（QooQ）は、パンくずリストのみmicrodataでマークアップされていました。
やや寂しかったのでJSON-LDで他のデータを書くことに。せっかく書くのでgraphを使った書き方にしてみました。
パンくずリストについて、Bloggerはラベルの集まりなので処理に苦戦しましたが、QooQのテンプレートにあったロジック（処理のしかた）を参照してなんとか形になりました。
プロパティの追加、削除とかは試行錯誤中。とりあえずエラーや警告がでなければOKという方針。
SEOに効果あるかどうかわかりませんが、少なくともサーチエンジンフレンドリーだとは思っています。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿