Blogger でウェブサイトを作成する #1 初期テーマの設定とウィジェットレイアウトの完成
今回は Blogger を使ってオリジナルのウェブサイトを作ります。ここでいう内容はいわゆるプロの方法ではなく、ウェブサイトコーディングの経験が乏しい初心者にも優しい方法ですので、予め断っておくものとします。
Blogger がどのような特徴をもった CMS であるかは、https://www.wappalyzer.com/technologies/blogs/blogger?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer をご覧いただくとお分かりいただけます。.digital が Blogger を用いた開発を初期に取り上げるのは、費用対効果が非常に高いことが一因です。
なお、本掲載内容に関する誤りの指摘は本サイトの然るべきフォームからの指摘のみによって訂正することとしますが、全てが訂正できるわけではありません。また、日本文の誤字脱字等、読者にとって軽微の誤りは、訂正の趣旨にあわないので全て対応はできません。
技術に明るい読者は、本ページ末尾のコメントフォームから Google アカウントにログインし、副次的な方法を紹介することを期待されています。
#1 はコーディングを始めるまでの内容を記載します。予め調べておくべきリファレンスはありません。この手順では、実施する順番が違うことによって異なる結果を生じることがあります。では、始めましょう !
1. Blogger で新たなブログを作成し、テーマへ進みます。
HTML を編集の画面からコードエディタを開き、もとの内容を全て消し、この内容をそのままコピーします。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
b:templateVersion='1.3.0'
b:layoutsVersion='3'
b:defaultwidgetversion='2'
b:css='false'
expr:lang='data:blog.locale'
expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[]]></b:skin>
</head>
<body>
<b:section id='main'/>
</body>
</html>
2. レイアウトへ進みます。
ここで、あなたのページがどのような構成（レイアウト・ページ構造）であるか、考えなければなりません。はじめてデザインの要素が入るわけです。中級者は、ここでどの UI Framework を選択するか考慮に入れるべきです。ここでは、現在 ddigi.org のウェブサイトにも利用している簡素な UIkit をもとに進めます。
確認すべき事項があります。main と表示された枠の中に "ガジェットを追加" というボタンが設置されているか確認してください。
次に、あなたが必要なガジェット全てを展開します。この際順番を気にしません。
*1 AdSense ガジェットを追加するには予め「収益」から AdSense を有効にしておく必要があります。
*2 一部のウィジェットを使う為には "投稿" 及び "ページ" が必要になる場合があります。このときは、仮の投稿やページを予め準備しておくと良いでしょう。
*3 「サイトにこんな機能や表示をしたいが、どのガジェット（ウィジェット : widget ）が最適 ? といった ご相談 を承ります。お気軽にお問い合わせください。
3. コードエディタに戻り、セクション構造を変更します。
四角形が 4 つ組み合わさって右上が傾いたアイコンを選択すると、先程追加したウィジェットが一覧表示されますので確認してみましょう。ここからの編集は基本的にこのアイコンから行ないます。
例）FeaturedPost1, BlogSearch1, HTML1,...
次に、先程ペーストしたシンプルなコードが拡張され、複雑になっていることが確認できます。このコードの中から、
<b:section id='main'>
<b:widget
を探し出します。ここまで手順通り進めた場合は、
<body>
の真下にあります。この記述を発見したら、
<b:section id='main'>
の次の行に、
<b:section id='main'>
<b:widget id='Blog1' type='Blog' visible='true'/>
をこのように追加します。ここで一旦保存します。すると、type: Blog ウィジェットに必要なコードが Blogger から自動的に展開され、コードが書き換えられます。ここまでで構造的な準備は終わりです。次に、レイアウトの準備をしていきましょう !
ここでも、一般的なデザインである "ナビゲーション" - "ヘッダ" - "メイン" - "フッター" という構成を踏襲します。それぞれに global であるか（全てのページに表示するか）を指定する id を割り振っていきます。
<b:section id='main'>
が表示されている行の左側に行番号を示す列があり、その数字の右側に下向き三角形のボタンがあります。これをクリックすると、コード全体が短縮されます。今からはこの状態の画面を使います。
<b:section id='nav'/>
<b:section id='globalnav'/>
<b:section id='globalheader'/>
<b:section id='header'/>
<b:section id='main'> ←→ </b:section>
<b:section id='footer'/>
<b:section id='globalfooter'/>
短縮した状態で、このように表示されるように編集してください。ここまでくれば、ok です。
お疲れさまでした !
#2 レイアウトを再編成・UI を設定
次回
コメント
コメントを投稿