BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout：管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout：管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー（▼）の「HTML編集」か「元に戻す」（テンプレートのXMLファイルのアップロード）で書き換えられる。 …
Twitter にサイトのURLを投稿した場合にタイトルや説明文や画像などが自動的に追加される Twitterカード はサイトの設定が必要で、以前、 一般的な方法 と Blogger用の方法 を取り上げたんだ。 Bloggerについては公式テーマならば初期値のOPG設定（ Facebook でのURL投稿のカード表示）と結び付けるのがTwitterカードを表示するための簡単な仕方なんだけれども最近はブログのソースコードに一行を追加するだけでも大丈夫に変わったから改めて取り上げておきたい。 以前は画像なしのページがエラーで止まってしまうために一行を追加するだけという手早い表示方法は可能でもちょっと使い辛かったんだ。 BloggerのTwitterカードの一行追加の手順 ブログのソースコードの編集 Twitterカードの実装の検証 ブログのソースコードの編集 テーマ via Blogger Bloggerのウェブの管理…
YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 Bloggerブログでどうやるか、何よりもデバイスの画面毎のデザインの振り分けが必要だけど、しかしBloggerでのYouTube動画の埋め込みは只単にYouTubeから得られる埋め込みコードを一般的に使うだけではなくて 投稿画面からYouTube動画を検索…
サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索できる最適化）にも有効と考えられるGooglも推奨する JavaScriptのIntersection Observerを使ったサイト作成 を気に入ってブログに実装している。 追記：サイトの画像の遅延読み込みは HTMLのloading属性で簡単に行える ようになった。JavaScriptのIntersection observerも同じように使えるけど、HTMLよりもコードを増やしてしまうので、むしろ画像以外のコンテンツの遅延読み込みやその他の 無限スクロール などの動作に使う方が向いているだろう。 Bloggerでのカスタマイズ…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableでSVGアイコンの共有／シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「 Facebook 」と「 Twitter 」と「 Pinterest 」と「メール」の五種類がデフォルトで表示されて使用可能になっている。 世の中でブログの共有先は他にも数多くあって日本だと僕もやっているけれども はてなブックマーク が人気のソーシャルメディアの一つで、 検索エンジンでのサイト評価を高めるSEO対策を含めてブログのアクセスアップに大きく役立つ と考えられるから共有ボタンになるべく入れておきたい。 以前はブログのテンプレートにBloggerのシンプルテーマを使って共有ボタンは外部の Webサービスの共有ボタンのAddToAnyが便利 で、デザインもSVGアイコン…
Bloggerは無料のブログサービスとして何よりも サーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じる けれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーディングを覚えるのに役立つ情報源 HTML： HTML: HyperText Markup Language 、 HTML5（目的別） など CSS： CSS: カスケーディングスタイルシート 、 CSS3（目的別） など JavaScript： JavaScript 、 JavaScript など Blogger： レイアウト用ページ要素タグについて ／ レイアウト用のウィジェット タグ 、 Les balises Blogger [introduction] など 一般的にサイト作成はHTMLとCSSという構成とデザインのマークアップ言語とその他にJavaScri…
Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズの方法を考えてみたい。 新テーマのContempoとSohoとEmporioは注目とブログと人気の投稿の三つのウィジェット、Notableは注目かブログと人気の投稿の二つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。そしてテーマ毎にデザインも違うので、それぞれにカスタマイズためのソースコードを取り上げる。 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィジェットのスニペットでサムネイル画…