BloggerブログのテーマのHTML編集／テンプレートのソースコードの基本構造と使用可能な独自タグについて 結城永人 - 2019年4月2日 (火) Bloggerは無料のブログサービスとして何よりもサーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じるけれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーディングを覚えるのに役立つ情報源 HTML：HTML: HyperText Markup Language、HTML5（目的別）などCSS：CSS: カスケーディングスタイルシート、CSS3（目的別）などJavaScript：JavaScript、JavaScriptなどBlogger：レイアウト用ページ要素タグについて／レイアウト用のウィジェット タグ、Les balises Blogger [introduction]など 一般的にサイト作成はHTMLとCSSという構成とデザインのマークアップ言語とその他にJavaScriptなどのデータを扱うプログラミング言語で成り立っている。 Bloggerの独自タグは他のサイト作成ではあり得ないほどに性能が充実していて普通にブログサービスが利用者のためにマークアップを簡略化するだけのものではなく、一つのプログラミング言語としてまるで小さなJavaScriptと呼べるくらい色んなことができるようになっているのが凄いんだ。 独自タグでコンテンツのマークアップだけではなくて簡単なプログラミングもできてしまうBloggerのサイト作成は正しく面白い。 ところが覚えるまでが反対に大変というか、Bloggerの独自タグはブログのメインの記事の作成には使えなくて関係ないけれどもテーマ／テンプレートのカスタマイズにおいて初心者にはサイト作成に必要な知識が増える分だけ難しいといわざるを得ないので、取りかかって混乱しないようにBloggerブログならではのHTML編集／ソースコードの基本構造を明らかにして予め知っておくと良いと思う。 目次BloggerのHTML編集／ソースコードの基本構造の見本HTMLのhead内にのみ記載される独自タグHTMLのbody内にのみ記載される独自タグHTMLのhead内とbody内の両方に記載される独自タグ BloggerのHTML編集／ソースコードの基本構造の見本 A white pendant lamp by Pierre Châtel-Innocenti / Unsplash <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html> <head> HTMLのhead内の通常の領域 <b:skin>（独自タグ／CSSとVariableタグとGroupタグのみ含む） <![CDATA[ CSSのstyle内の通常の領域 <Variable/>（独自タグ） <Group>（独自タグ／Variableタグのみ含む） <Variable/>（独自タグ） </Group> CSSのstyle内の通常の領域 テーマデザイナーの「CSSを追加」の領域 ]]></b:skin> <b:template-skin>（独自タグ／CSSとb:variableタグのみ含む） <![CDATA[ CSSのstyle内の通常の領域 <b:variable/>（独自タグ） CSSのstyle内の通常の領域 ]]> </b:template-skin> HTMLのhead内の通常の領域 <b:defaultmarkups>（独自タグ／defaultmarkupタグのみ含む） <b:defaultmarkup>（独自タグ／includableタグのみ含む） <b:includable>（独自タグ） HTMLのbody内の通常の領域 </b:includable> </b:defaultmarkup> </b:defaultmarkups> HTMLのhead内の通常の領域 </head> <body> HTMLのbody内の通常の領域 <b:section>（独自タグ／widgetタグのみ含む） <b:widget>（独自タグ／widget-settingsとincludableタグのみ含む） <b:widget-settings>（独自タグ／widget-settingのみ含む） <b:widget-setting> レイアウトの「ウィジェット編集」の領域 </b:widget-setting> </b:widget-settings> <b:includable>（独自タグ） HTMLのbody内の通常の領域 </includable> </b:section> HTMLのbody内の通常の領域 <b:template-script/>（独自タグ） </body> </html> ※head内の通常の領域に使用可能なstyleタグを記載するときはtype属性の「text/css」を追加しないとエラーになる。scriptタグはそのままでもエラーにならず、記載することができる。 ※必須ではないdefaultmarkupsなどの一部の独自タグは使われない場合もある。そして見本に取り上げた独自タグが全てではなくて他にも数多く使われ得る。 HTMLのhead内にのみ記載される独自タグ b:skin／スキンブログではstyleタグの<style type="text/css" id='page-skin-1'><!-- （CSS） --></style>のHTMLに置き換えられる。CSSは<![CDATA[（マークアップ）]]>によって出力される。必須の独自タグで、ブログに一回しか使えない。Variable／ヴァリアブルskinタグのマークアップのCSSの値の変数（$）を定義する。テーマデザイナーで変更できる文字のサイズや色などに対応している。さらに定義された値はskinタグの外側でも<data:skin.vars.name/>（nameはVariableタグの項目の一つで、半角ピリオドがあれば半角アンダースコアに変えたもの）で呼び出すこともできる。Group／グループ複数のVariableタグを一つに纏める。テーマデザイナーで変更できるブログの全体や部分の区分けに対応している。そしてVariableタグの項目を表示して操作できるようにする。b:template-skin／テンプレートスキンブログではstyleタグの<style type="text/css" id='template-skin-1'><!-- （CSS） --></style>のHTMLに置き換えられる。CSSは<![CDATA[（マークアップ）]]>によって出力される。skinタグと性能は殆ど同じだけれども必須ではなくて何回でも使えるのが全く違う。b:variable／ヴァリアブルtemplate-skinタグのマークアップのCSSの値の変数（$）を定義する。Variableタグと性能は同じだけど、ただし纏めるGroupタグに相当するものがないので、テーマデザイナーで表示されてCSSのデザインの項目を操作できるようにはならない。b:defaultmarkups／デフォルトマークアップスdefaultmarkupタグのマークアップを配置可能にして機能させる。b:defaultmarkup／デフォルトマークアップincludableタグのマークアップをブログのウィジェットを表示するHTMLのbody内のwidget内へ送り込む。一旦、テーマ／テンプレートを保存するとブログ全体のCommonのtype以外は所定のwidget内に必要なincludableタグのマークアップが実際に 追加されるので、同様に変更したいブログのウィジェットが多いほどにカスタマイズの手間を省く。 HTMLのbody内にのみ記載される独自タグ b:section／セクションブログのレイアウトのヘッダーやページの本文やサイドバーやフッターなどのウィジェットを含んだ仕切りを作り出す。b:widget／ウィジェットBloggerで使える投稿や検索やメールなどのブログのウィジェットを個々に表示する。b:widget-settings／ウィジェットセッティングスwidget-settingタグのプログラミングを配置可能にして機能させる。b:widget-setting／ウィジェットセッティングレイアウトから変更 できるブログのウィジェットの様々な項目を設定する。 HTMLのhead内とbody内の両方に記載される独自タグ b:includable／インクルーダブルブログのマークアップやブログラミングを示す。idを持っていてnameを持っているincludeタグと一緒に動作する。前者の内容が後者でテーマ／テンプレートに記載されてブログにwidgetタグを通じて表示される。使うかぎり、includableタグはウィジェット毎に記載された全てを表示するかどうかを決定するmainのidを少なくとも一つは持たなくてはならない。HTMLのhead内に記載される場合はdefaultmarkupsタグとdefaultmarkupタグで囲まなくてはエラーになってしまう。HTMLのbody内に記載される場合はsectionタグとwidgetタグで囲まなくてはエラーになってしまう。b:include／インクルード付けられたnameと同名のidを持つincludableタグが示すマークアップやプログラミングを実行する。ブログにコンテンツを表示するための最終的な役割を担った独自タグといって良い。HTMLのhead内でもbody内でもincludableタグに囲まれて記載される場合が大半を占める。例外としてブログのメタ情報の<b:include data='blog' name='all-head-content'/>のようにサーバー側の内容を呼び込みながらincludable外で動作する場合もないわけではない。data／データBloggerのサーバーに保存されているブログ自体のデータ：記事、著者名、日付、等々を出力する。b:if／イフブログのページの種類やデータの状況によってマークアップやブログラミングを振り分けるために使う。b:elseif／エルスイフif内で使われてifの他の振り分けの条件を与える。b:else／エルスif内で使われてifの振り分けの反対の条件を与える。b:switch／スイッチブログのページの種類やデータの状況をcaseタグで個別に捉えながらマークアップやブログラミングを相応に振り分けるために使う。b:case／ケースswitch内で振り分けの個別の条件を付ける。b:default／デフォルトswitch内でcaseタグと共に使われて最後に全てのcaseタグに該当しない条件を付ける。b:loop／ループ一定の条件から同様のマークアップやプログラミングを繰り返すために使う。b:with／ウィズ変数を作って内側のプログラミングに限定して活用できる。b:eval／イヴァル（イヴァリュエイション）条件に応じてデータを出力する。dataタグと結果は同じだけれども目的が違う。evalタグはifタグやswitchタグとdataタグを組み合わせて使うのと等しく、条件式の演算を組み込める。 b:comment／コメントHTMLのコメントアウトの<!-- （内容） -->を記載する。b:class／クラス直前のHTMLの何等かのタグにclass属性と値を追加する。b:attr／アトル（アトリビュート）直前のHTMLの何等かのタグに特定の属性と値を追加する。b:tag／タグHTMLの何等かのタグを記載する。b:message／メッセージマークアップやプログラミングにBloggerの既成のメッセージを記載する。b:param／パラム（パラメータ）message内で使われて記載する項目を詳しく追加する。 レイアウトヴァージョン３／htmlタグの「b:layoutsVersion='3'」の公式テーマのContempoとSohoとEmporioとNotableで有用な独自タグ b:template-script／テンプレートスクリプトブログのテーマ／テンプレートを表示するためのBloggerがホストするjsファイルを取り込むscriptタグが生成される。 レイアウトヴァージョン２／htmlタグの「b:version='2'」の公式テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行まででサポート終了の独自タグ macro／マクロレイアウトの段組に特化した独自タグの接頭辞、通常の「b」の代替として例えばmacro:includableやmacro:includeのように記載されて同様に機能する。 b:section-contents／セクションコンテンツレイアウトの段組に特化した独自タグの一つ、widgetタグを含んでブログのサイドバーなどに、順次、ウィジェットを配置するために使う。 Bloggerの独自タグは専ら接頭辞の「b」から始まる。これはhtmlタグの「xmlns:b='http://www.google.com/2005/gml/b'」で示されるxmlの名前空間の「b」から来ていると思う。なぜ「b」なのかはたぶんBloggerの頭文字の「B」を取って小文字にしているせいかも知れない。 逆にいうと接頭辞の「b」がないBloggerの独自タグはhead内のskin内のVariableとGroupとbody内でも大丈夫なdataの三つと代替の接頭辞のmacroの一つ（レイアウトヴァージョン３以降は使わない）だけだから覚えるのは想像されるよりも大変ではない。 残りはコード毎に接頭辞の「b」があるかないかでBloggerの独自タグかサイト作成の汎用タグ――最も紛らわしいのは他のタグで括られずにどこにでも素のままに記載されるHTMLだ――かを識別できるからブログのカスタマイズで混乱しなくなる。 コメント 新しい投稿 前の投稿
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
アドセンスの個人のアメリカの税務情報／W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
若者たちがFacebookよりもTwitterを多く始めるというソーシャルメディアの利用者数の変化について 僕は Twitter をやって Facebook をやらないので、近年の特に日本の若者たちが似通って来ているのが面白いと思った。 「現在利用しているSNSサービスや動画サイト」について質問したところ、「LINE」の利用率が98.2％、「Twitter」の利用率が81.5％と前...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
後藤浩輝と抑鬱傾向による突発的な自殺 中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン （ゲーム）に熱中していて後藤浩輝...
There is / are a lot / number / variety ofの単数と複数の使い分け どうも単数か複数か分かり難い英語の表現があって熟語の「a lot of」（沢山の）や「a number of」（多くの、幾つかの）や「a variety of 」（様々な）なんだけれどもそれぞれがそこにあるというときに単数扱いの「There is」か複数扱いの「There are...
結城永人
結城永人
コメント