以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン３の公式テーマ Contempo／コンテンポ Soho／ソーホー …
Bloggerの独自タグのVariableのfontのtypeについてどのように使われるかの内容と公式テーマのソースコードでfontの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name／変数名（半角の英数字とピリオドのみ） description／説明（指定なし） type／種別（決められたもの） default／初期値（type毎に指定あり） value／現在値（type毎に指定あり） fontのtypelではvalue以外が省略できない必須項目となっている。 fontのマークアップ例 <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)"…
Bloggerの独自タグのVariableのurlのtypeについてどのように使われるかの内容と公式テーマのソースコードでurlの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name／変数名（半角の英数字とピリオドのみ） description／説明（指定なし） type／種別（決められたもの） default／初期値（type毎に指定あり） value／現在値（type毎に指定あり） urlのtypeではvalue以外が省略できない必須項目となっている。 urlのマークアップ例 <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default=&…
Bloggerの独自タグのVariableのbackgroundのtypeについてどのように使われるかの内容と公式テーマのソースコードでbackgroundの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name／変数名（半角の英数字とピリオドのみ） description／説明（指定なし） type／種別（決められたもの） default／初期値（type毎に指定あり） value／現在値（type毎に指定あり） backgroundのtypeではvalue以外が省略できない必須項目となっている。 backgroundのマークアップ例 <Variable name="body.background" description="Background" color="$(body.background.…
Bloggerの独自タグのVariableのautomaticのtypeについてどのように使われるかの内容と公式テーマのソースコードでautomaticの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name／変数名（半角の英数字とピリオドのみ） description／説明（指定なし） type／種別（決められたもの） default／初期値（type毎に指定あり） value／現在値（type毎に指定あり） automaticのtypeではdefaultとvalueの二つ以外が省略できない必須項目となっている。 automaticのマークアップ例 <Variable name="startSide" description="Start side in blog language" type="aut…
Bloggerでブログのテンプレートは大きく分けて公式テーマと非公式テーマの二種類を使うことができる。動作の仕組みは全く同じで、テンプレートとして根本的に違うものではないけれどもBloggerの管理画面からブログに取り付ける方法が異なる。どう使うか、新しいテンプレートへ変更する方法をBloggerの公式テーマと非公式テーマの二種類に分けて示す。 Bloggerの管理画面で新旧の二つのヴァージョンが使用可能で、新ヴァージョンから旧ヴァージョンへは左上のメニュー（≡）の下段の「以前のBloggerに戻す」のリンク、旧ヴァージョンから新ヴァージョンへは左側のメニューの下段の「新しいBloggerを試す」のボタンを押すと切り替えられる。 公式テーマを新しく使うときの手順 ウェブでBloggerのサイトからログインして管理画面を開く。 新ヴァージョンの管理画面の場合 テーマ via Blogger 左上…
サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索できる最適化）にも有効と考えられるGooglも推奨する JavaScriptのIntersection Observerを使ったサイト作成 を気に入ってブログに実装している。 追記：サイトの画像の遅延読み込みは HTMLのloading属性で簡単に行える ようになった。JavaScriptのIntersection observerも同じように使えるけど、HTMLよりもコードを増やしてしまうので、むしろ画像以外のコンテンツの遅延読み込みやその他の 無限スクロール などの動作に使う方が向いているだろう。 Bloggerでのカスタマイズ…
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.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィジェットのスニペットでサムネイル画…