スキップしてメイン コンテンツに移動

些細な日常

ラベル(テーマ)が付いた投稿を表示しています すべて表示

Bloggerブログに目次の自動生成のJavaScriptプログラムを実装する

イメージ

一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-javascript-program-t…

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

イメージ

Bloggerの独自タグのVariableのstringのtypeについてどのように使われるかの内容と公式テーマのソースコードでurlの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) stringのtypeではvalue以外が省略できない必須項目となっている。 stringのマークアップ例 <Variable name="widget.title.text.transform" description="Widget Title Text Transform" type="string"…

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

イメージ

Bloggerの独自タグのVariableのlengthのtypeについてどのように使われるかの内容と公式テーマのソースコードでlengthの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) lengthのvalue以外が省略できない必須項目となっている。 lengthのマークアップ例 <Variable name="body.background.height" description="Background height" type="length" min="420px&…

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

イメージ

Bloggerの独自タグのVariableのcolorのtypeについてどのように使われるかの内容と公式テーマのソースコードでcolorの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name/変数名(半角の英数字とピリオドのみ) description/説明(指定なし) type/種別(決められたもの) default/初期値(type毎に指定あり) value/現在値(type毎に指定あり) colorのtypeではvalue以外が省略できない必須項目となっている。 colorのマークアップ例 <Variable name="body.text.color" description="Color" type="color" default="#757575" value=…

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)" va…