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ファイルのアップロード）で書き換えられる。 …
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…
写真のソーシャルメディアの Flickr を使い始めたけれどもアカウント登録からアイコンとヘッダー（上段の背景）画像の設定方法に手間取ったので、改めて纏めておきたい。 Flickrはアカウント登録と同時にアイコンとヘッダー画像を設定できないのがソーシャルメディアとしてちょっと珍しいかも知れない。 二つの画像の共通設定 Image selection via Flickr Flickrのアイコンとヘッダー画像はアカウント登録が終了してからログイン（サインイン）した自分のページで設定しなくてはならない。 自分のページは一つではないけれども「About」（要約）や「Photostream」（写真連載）などのどのタイプからでも構わない。 最初のうちは慣れなくて迷い易いけれども自分のページへは当該のURLを使うか、またはFlickrの最上段のメニューのパソコンの「You」（貴方）かスマホ／タブレットのハ…
Twitter にサイトのURLを投稿した場合にタイトルや説明文や画像などが自動的に追加される Twitterカード はサイトの設定が必要で、以前、 一般的な方法 と Blogger用の方法 を取り上げたんだ。 Bloggerについては公式テーマならば初期値のOPG設定（ Facebook でのURL投稿のカード表示）と結び付けるのがTwitterカードを表示するための簡単な仕方なんだけれども最近はブログのソースコードに一行を追加するだけでも大丈夫に変わったから改めて取り上げておきたい。 以前は画像なしのページがエラーで止まってしまうために一行を追加するだけという手早い表示方法は可能でもちょっと使い辛かったんだ。 BloggerのTwitterカードの一行追加の手順 ブログのソースコードの編集 Twitterカードの実装の検証 ブログのソースコードの編集 テーマ via Blogger Bloggerのウェブの管理…
Bloggerでブログのテンプレートは大きく分けて公式テーマと非公式テーマの二種類を使うことができる。動作の仕組みは全く同じで、テンプレートとして根本的に違うものではないけれどもBloggerの管理画面からブログに取り付ける方法が異なる。どう使うか、新しいテンプレートへ変更する方法をBloggerの公式テーマと非公式テーマの二種類に分けて示す。 Bloggerの管理画面で新旧の二つのヴァージョンが使用可能で、新ヴァージョンから旧ヴァージョンへは左上のメニュー（≡）の下段の「以前のBloggerに戻す」のリンク、旧ヴァージョンから新ヴァージョンへは左側のメニューの下段の「新しいBloggerを試す」のボタンを押すと切り替えられる。 公式テーマを新しく使うときの手順 ウェブでBloggerのサイトからログインして管理画面を開く。 新ヴァージョンの管理画面の場合 テーマ via Blogger 左上…
Bloggerのウェブの編集の「レイアウト」からフィードウィジェットを使うとブログの記事に付けられた全てのコメントを対象にコメントのフィードのURLから読み込んで新しい順で直ぐに表示することができてとても便利なんだ。 フィードの設定 via Blogger フィードの設定で入力するブログのコメントフィードのURLはBloggerでは二つ用意されている。 Atomのコメントフィード ドメインの末尾に「/feeds/comments/default」を付けたもの RSSのコメントフィード ドメインの末尾に「/feeds/comments/default?alt=rss」を付けたもの Bloggerの無料版のサブドメインのブログならばドメイン名の「blogspot.com」の「.com」、有料版のカスタムドメインのブログならばそれぞれのドメイン名の次の「.com」や「.net」などのトップレベルドメイ…