Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するかは二つの方法があってBloggerの独自…
Bloggerの 2017年の新テーマ から導入されているメニューや検索や共有などのSVGアイコンは全てのBloggerブログに追加されたSVGファイルから取得されている。 ブログアドレス/responsive/sprite_v1_6.css.svg Bloggerの無料版の「blogspot.com」のサブドメインからでもカスタムドメインの有料版の独自ドメインからでもトップページのアドレスの末尾に「responsive/sprite_v1_6.css.svg」を付けるとSVGアイコンが用意されている。データだけなので、アクセスしても何も表示されないけれどもソースコードを調べたり、ダウンロードしてファイルを開けばSVGアイコンのデータが分かる。色んなものが含まれていて何れも公式のものとして全てのBloggerブログで利用できる。 ブログでどのように表示するかは二つの方法があってBloggerの独自…
BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout：管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout：管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー（▼）の「HTML編集」か「元に戻す」（テンプレートのXMLファイルのアップロード）で書き換えられる。 …
以前、 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の管理画面が更新されて「設定」の「公開しています」に新しく追加された項目にフォールバックサブドメインがある。 フォールバックサブドメインとは何か 設定｜Blogger カスタムドメインの登録と関連してメインとなるドメインの他に（共通する独自ドメインから）一つだけ同じようにブログのサーバーに接続することができるようにする。 フォールバックサブドメインは通常のサブドメインを読み込む間のサーバーの障害への予防策として追加されるサブドメインです。ドメインに一つ以上の使用できるサブドメインがある場合にはドメインの登録済みのサーバーにサブドメインを設定するとメインとなるドメインはフォールバック――無視できるものの微細な低速度状態の閲覧を得られるようになります。 原文 A Fallback subdomain is a subdomain added as a precursive measure …
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の管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次 四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像のサイズ毎の圧縮の目安 画像URLで投稿画像のサイズを変更する方法 Bloggerの投稿画像のサンプルのソースコード Bloggerのimgタグのサンプルのソースコード Bloggerの画像URLのサイズ指定のパターン 画像URLでWebPファイルに変更する方法 webpファイルとその他の振り分けの仕方 四種類の投稿の仕方とそれぞれの最大幅 投稿画像の選択 via Blogger パソコンからアップロード：デバイス（パソコン、スマホ、タブレットなど）から掲載する フォト：Googleフォトのギャラリーかアルバムから掲載する Blogger：Blogger（Bloggerに以前に取り込んだ画像）かGoogleアルバムアーカイブ（Blogg…