スキップしてメイン コンテンツに移動
ラベル(Blogger)が付いた投稿を表示しています すべて表示

Bloggerで利用可能なSVGアイコンのインラインSVGによるマークアップ

イメージ

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で利用可能なSVGアイコンの独自タグによるマークアップ

イメージ

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の管理画面のレイアウトのカスタマイズについて

イメージ

BloggerのテンプレートのCSSでbodyのセレクターに#layoutを使用すると管理画面のレイアウトに表示されるガジェットのデザインをカスタマイズして付けることができる。 目次 body#layout:管理画面のレイアウトへの指定 背景色のサンプルのソースコード CSSのカスタマイズに適した領域 ガジェットのデザインのためのセレクター 公式テーマのガジェットの主なセレクター ガジェットの位置取りを変えるためのヒント 公式テーマのセクションの親ボックスの主なセレクター 位置取りのサンプルのソースコード レイアウト用のCSSをブログから除外する方法 body#layout:管理画面のレイアウトへの指定 BloggerのテンプレートのCSSは管理画面のテーマのカスタマイズのの詳細設定の「CSSを追加」やメニュー(▼)の「HTML編集」か「元に戻す」(テンプレートのXMLファイルのアップロード)で書き換えられる。 …

Bloggerで投稿画像を横並びで表示する方法

イメージ

以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン3の公式テーマ Contempo/コンテンポ Soho/ソーホー …

BloggerのVariableタグのfontの内容と公式テーマの変数名

イメージ

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の内容と公式テーマの変数名

イメージ

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の内容と公式テーマの変数名

イメージ

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の管理画面が更新されて「設定」の「公開しています」に新しく追加された項目にフォールバックサブドメインがある。 フォールバックサブドメインとは何か 設定|Blogger カスタムドメインの登録と関連してメインとなるドメインの他に(共通する独自ドメインから)一つだけ同じようにブログのサーバーに接続することができるようにする。 フォールバックサブドメインは通常のサブドメインを読み込む間のサーバーの障害への予防策として追加されるサブドメインです。ドメインに一つ以上の使用できるサブドメインがある場合にはドメインの登録済みのサーバーにサブドメインを設定するとメインとなるドメインはフォールバック――無視できるものの微細な低速度状態の閲覧を得られるようになります。 原文 A Fallback subdomain is a subdomain added as a precursive measure …

BloggerのVariableタグのautomaticの内容と公式テーマの変数名

イメージ

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の投稿画像の種類とサイズ/容量と画像URLについて

イメージ

Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次 四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像のサイズ毎の圧縮の目安 画像URLで投稿画像のサイズを変更する方法 Bloggerの投稿画像のサンプルのソースコード Bloggerのimgタグのサンプルのソースコード Bloggerの画像URLのサイズ指定のパターン 画像URLでWebPファイルに変更する方法 webpファイルとその他の振り分けの仕方 四種類の投稿の仕方とそれぞれの最大幅 投稿画像の選択 via Blogger パソコンからアップロード:デバイス(パソコン、スマホ、タブレットなど)から掲載する フォト:Googleフォトのギャラリーかアルバムから掲載する Blogger:Blogger(Bloggerに以前に取り込んだ画像)かGoogleアルバムアーカイブ(Blogg…