BloggerのTwitterカードの手早い表示方法 Twitter にサイトのURLを投稿した場合にタイトルや説明文や画像などが自動的に追加される Twitterカード はサイトの設定が必要で、以前、 一般的な方法 と Blogger用の方法 を取り上げたんだ。 Bloggerについては公式テーマならば初期値のOPG設定(...
BloggerブログでYouTube動画の埋め込みをレスポンシブに表示するCSSコーディング YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに...
BloggerブログでIntersection Observerの画像の遅延読み込みをかけるカスタマイズ サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策(検索...
BloggerのSVGアイコンの共有ボタンにはてなブックマークなどのデフォルト以外の共有先を追加する方法 Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableでSVGアイコンの共有/シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「 Facebook 」と「 Twitt...
BloggerブログのテーマのHTML編集/テンプレートのソースコードの基本構造と使用可能な独自タグについて Bloggerは無料のブログサービスとして何よりも サーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じる けれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーデ...
Bloggerの画像なしの投稿のスニペットに専用のサムネイル画像を表示する方法 Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズ...
BloggerのContempoとSohoとEmporioのテンプレートで記事/追加ページにハンバーガーメニューを出す Bloggerの 2017年の公式テーマ はブログの最上段にフローティングバー(固定/スティッキーのメニューバー)が付いている。 ところがNotableを除いてContempoとSohoとEmporioはデザインが一般的ではない。トップやアーカイブなどのインデックスページ...