• Technique
  • Database

Tips

  • Technique
  • Database

Blogger でウェブサイトを作成する #2 レイアウトを再編成・UI を設定

Written by .digital 日付: , Posted in Tips.

 Blogger の投稿編集画面がどのように機能するかご存知ですか ?

主見出し

見出し

小見出し

準見出し

段落

標準

というセレクタがあります。フォントサイズを個別に設定することはデザイン上ナンセンスなので、TT のアイコンのフォントサイズ選択画面はほとんど使いません。なので、この 6 つのテキストがどのようなコードに変換されるか理解しておきましょう。

この中で唯一異なるのは "標準" です。テキストが <div> によって囲まれます。その他は、class の指定されていない h1 - 主見出し, h2 - 見出し, h3 - 小見出し, h4 - 準見出し, p - 段落 という構造です。これはこのページの後半で重要になります。純粋な h1 ~ h4 には余計なクラスを指定しないという意識をしておきましょう。

では、今回のご案内です。

#2 はコーディングしか行ないません。Material Design 3 のテーマを導入し、レイアウトしていく段階です。予め調べておくべきリファレンスのリストです。

  1. Material Design 3 (https://m3.material.io/develop/web)
  2. HTML, CSS に関する基礎知識

Blogger の独自タグ <b: はそのうち理解していくことになります。では、始めましょう !


1. Body: わかりやすい HTML を記述します。 

<!-- before -->
<body>
<b:section id='nav' ... 中略
</body>
<!-- after -->
<body>
<nav>
<b:section id='nav'/>
<b:section id='globalnav'/>
</nav>
<header>
<b: section ... 中略

</body>

あとから見やすいように html5 のリファレンスに沿って nav, header, main, footer, section, aside などのコンテンツ区分を明示化しておきます。なお、この作業とは関係ありませんが、少し Blogger について勉強した方なら、Google 独自の css を反映 "しない" 為に b:css='false' を指定すると思いますが、ここで b:js='false' と同様にしてはなりません。

これは、Blogger のウィジェット管理画面 "レイアウト" の編集を不可能にする操作で、複雑なスクリプトを用いる構造である場合を除き、このレベルでのウェブサイトにおいては保守の簡単さを失います。

2. Body: Blogger の基本機能を整えます。

このレベルは複雑な作業を伴います。基本機能を整えると、記事一覧や記事単独ページ、ラベル検索ページ（インデックス）等が表示されるようになります。レイアウトを抜きにしてここまでが目標です。

まずは、Blogger の Url 構造に着目しましょう。

この画像は Blogger 編集画面 左下「ブログを表示」を展開したものです。
作業者の手法や進捗により異なりますが、概ねスタイルシートの適用されていない似たような風情のページが閲覧できるでしょう。ここが、homepage です。
次の（初歩的）URL 構造表を覚えてください。（応用的に、慣れた開発者は Blogger の正しいエンティティ関係を理解するために Blogger API References を参照してください。）

ホームページ 検索結果 ラベル検索結果 404 投稿（単一記事ページ） アーカイブ ページ
出力 data:blog.homepageUrl data:blog.searchUrl - - - - -
相対位置 / /search?q={hogehoge} /search/label/{hogehoge} - /YYYY/MM/{hogehoge}.html /YYYY/MM/ /p/{hogehoge}.html
説明 ホームページ、通常のとき、例えばユーザは Google 検索でこのページに着地する。 投稿の検索結果 ラベルの検索結果（特定のラベルをもつ投稿の一覧） 上記 URL の規則に反して、存在しないページという応答 単一の投稿の表示画面（ページとは異なる） YYYY 年 MM 月の投稿の一覧 独立しているページ
data:blog.pageType index index index error_page item archive static_page
data:view.type feed feed feed error_page item feed item
data:view.isMultipleItems true true true false false true false
data:view.isSingleItem false false false true true false true

特徴的な同値の条件記述や出力コードの記述

  • data:blog.url ⇔ data:view.url
  • data:blog.homepageUrl == data:blog.url ⇔ data:view.isHomepage == true
  • data:blog.searchUrl == data:blog.url ⇔ data:view.isSearch == true ⇔ data:view.search.query == data:blog.searchQuery ⇔ data:blog.url == data:blog.homepageUrl path "/search" params { q: data:blog.searchQuery }
  • data:blog.pageType == "archive" ⇔ data:view.isArchive == true ⇔ data:blog.url == data:blog.homepageUrl path (data:view.archive.year + "/" + data:blog.archive.month + "/")

NOTE あまりにも明らかなものは除いています。data:view の小要素が取り得る値の Prototype については、Blogger Code PE は非常に卓越して編纂されています。フランス語によるページですが、Google Translate や Deepl による翻訳で簡単に読破できます。

3. Material Design 3 を導入します。

Material Design 3 は Google が 2021 年に公開した UI Framework です。GitHub の内容から必要な css, js を Blogger の仕様に合わせて構成していきます。

3-1. npm によってパッケージを取得

かんたんに、npm は Node.js によるパッケージ管理システムです。 Node.js はサーバーサイド（コンピュータ）に動作する JavaScript の実行環境のひとつで、github.com/nodejs/node のコード群によって構成されています。
Material Design 3 (Material Web) はパッケージングされているので、これからそのパッケージを取得し、分析、編集、再統合（これらを纏めてプログラミングや開発といいます。）をして、必要とされる css, js のソースコードを deploy（作成）します。

実は、screen capture をご覧いただきわかるように、この連載は iPad によって行っていますから、App Store より Node.js が実行できる開発環境を整備する App を取得しました。Mac OS, Windows ユーザは Visual Studio 等の IDE, Chromebook ユーザには Flutter による開発をおすすめします。 CodeSandbox

「iPad, Node.js」などと Google 検索すれば、環境構築に関するヒントはたくさん得られます。私と全く同じように支度する必要はありません。

3-2. CodeSandbox で Node.js の Sandbox を作成

2022 年 10 月現在、"New Sandbox" > "Node.js" を押下し、次のような画面に到達します。

右下の Shell（コマンド入力画面）に次のように入力します。

4. Head: 作成した css, js を導入します。

<!-- before -->
<head>

    <b:skin><![CDATA[]]></b:skin>

</head>
<!-- after -->
  <head>
    
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>
		<b:if cond='data:blog.pageType == &quot;index&quot;'>
			<data:blog.pageTitle/>
		<b:else/>
			<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
				<data:blog.pageName/> - <data:blog.title/>
			<b:else/>
				404 - <data:blog.title/> 
			</b:if>
		</b:if>
    </title>

    <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css' integrity='sha512-MQSeeHVtBZ+FnVbcJbGKYk4Clc5A2e0bqWg+yiSMROJsnzyIfe9nivRWhmlOBAoh+NOqVOPPL7AaLUq/rSXL5w==' referrerpolicy='no-referrer' rel='stylesheet'/>

    <script crossorigin='anonymous' integrity='sha512-52x9jxRlpg4HFObOpmnst5aeTZxf3nqEAk0E0MRwP5mOQwWgIr9BydMAQyeIWhHiMZN/nvEpoStVS97oLrCg7A==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.js'/>

    <b:skin><![CDATA[]]></b:skin>

  </head>

これで Material 3 が導入されました。公式のリファレンスでは body の末尾に js を追加することを推奨していますが、予め入れておくことにします。タイトル部分に何が挿入されたかは後にわかります。"-" ハイフンで繋いでいますが、"｜" でもいいですし、" > " でも構いません。

3.

タグ :

コメント

コメントを投稿

登録: コメントの投稿 (Atom)
  • Report issue
  • Get help