たぬき男の話

ネットの海

  1. ホーム

  2. >> Blogger

  3. >> テンプレート

Bloggerテンプレートの自作方法

2019年12月7日　 2020年2月23日　

Googlebloggerのテンプレートの作り方。

GoogleBloggerを初めてしばらく経ちますが、GoogleBloggerはカスタマイズが面白いのです。初めは文字サイズから初めて、CSSを漁り、HTMLも触れるようになり。。。。欲深い私は、テンプレートを作りたくなってしまいました。ってことで、少しづつテンプレートを作った流れを書きます。

1.googleBlogger空のテンプレートを用意する。

まずは、空のテンプレートを作ります。公式テンプレートの上から三行くらいを残して全部消します。その下にHTMLの基本骨格を入れて、Blogger必須項目の
 <b:skin><![CDATA[/*CSS記載ゾーン*/]]></b:skin>
<b:section id='section name'></b:section>
を入れる。
ちなみに<b:section id='section name'></b:section>と<b:section id='section name'/>は同じ意味で、間にウィジェット入れると<b:section id='section name'/>が<b:section id='section name'>ウィジェット</b:section>になる。


  2. <?xml version="1.0" encoding="UTF-8" ?>
  3. <!DOCTYPE html>
  4. <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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'>
  5. <head>

  7. <b:skin><![CDATA[
  8. /*CSS記載ゾーン*/
  9. ]]></b:skin>

  11. </head>

  13. <body>
  14. <b:section id='section name'></b:section>
  15. </body>
  16. </html>


これでセクションを持つテンプレートができます。

Bloggerのセクションの追加方法

セクションの項目の追加は簡単です。


  1. <b:section id='sectionname_nandemoyoi'>
  2. </b:section>


をコピペするとレイアウトのセクションを追加できる。ウィジェットを追加するとここに表示される。

bloggerのセクションとウィジェットの関係ルール

bloggerのセクションとウィジェットの関係ルールとして


  • <b:section> の中に <b:section> は入れ子不可
  • <b:section> は <b:widget> しか持てない。
  • ウィジェットの追加はレイアウトから可能。


となっている。

2.空のテンプレートにブログ記事部位を入れる

ブログの記事部位は、レイアウトの追加からできないので、HTMLの編集から下のコードを加える。


  1. <b:section class='main' id='main' showaddelement='yes'>
  2. <b:widget id='Blog1' locked='false' title='たいとる' type='Blog' version='1'/>
  3. </b:section>


これで保存すると、記事が見れるようになる。また、公式テンプレートのウィジェットのHTMLごと貼ってもいい。これで最低の機能を持つBloggerが出来上がった。


  2. <?xml version="1.0" encoding="UTF-8" ?>
  3. <!DOCTYPE html>

  5. <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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'>

  7. <head>
  8. <b:skin><![CDATA[
  9. /*CSS記載ゾーン*/
  10. ]]></b:skin>
  11. </head>

  13. <body>
  14. <b:section class='main' id='main' showaddelement='yes'>
  15. <b:widget id='Blog1' locked='false' title='たいとる' type='Blog' version='1'/>
  16. </b:section>
  17. <b:section id='section name'></b:section>
  18. </body>
  19. </html>


これで、Bloggerの基本テンプレートは完成した。セクションを増やせばセクションが増やせる。ウィジェットは、レイアウトの画面から追加できる。

こんな感じ
https://kagakumaniab.blogspot.com/

3.テンプレートをレイアウト画面の編集

レイアウト画面は、直接Bloggerの表示に直接的に関係ないので必ずしも編集の必要はない。もちろん影響はありますが。。。一応、編集の仕方は2つある。

１ 関節的にCSSをセクションに掛ける。

下のようにセクションを<div>で囲ってdivの要素にcssを掛けるとレイアウト画面の編集ができる。


  1. <div class='content-wrapper'>
  2.    <div class='section1-wrapper'>
  3.        <b:section id='section1'></b:section>
  4.    </div>
  5.    <div class='section2-wrapper'>
  6.        < b:section id='section2'></b:section>
  7.    </div>
  8. </div>


2 直接CSSをsectionに掛ける

CSSをセクションにかけてもレイアウト画面の編集は可能である。


  1. <b:section id='mainsectiondayo'>


が実際のブラウザ上では、

  1. <div class="section" id="mainsectiondayo">


このように表示される。そのため、でセクションidに対して、CSSをセットしてもレイアウト画面の位置が編集できる。
これでレイアウトの画面の編集ができる。もちろんこの編集は、ブログの表示にも影響は出る。

ウィジェットがレイアウトのセクション内部に埋まってしまって編集ができない時は、セクションとその親要素にかかるCSSのサイズを編集すると治る。

参考サイト
https://www.compromath.com/2017/07/create-blogger-template.html#-How-to-create-Blogger-Template-from-Scratch%20--%3E




つぎに自作テンプレートにガジェットを導入する方法を紹介して、自作テンプレートをBlogらしくしていきます。

自作テンプレートへのガジェット導入について

ガジェット自体は、多量のHTMLとjavaスクリプトから出来ていて、簡単に作れない気がします。しかし、既存のガジェットは、自作のテンプレートでもレイアウトからガジェットを簡単に導入できます。さらにガジェットを使いこなしたい場合には、ガジェットのHTMLとbloggerのデータタグを編集する必要があります（少し難しめ）。

レイアウトからガジェットを追加する

セクションの追加方法で紹介した様にBloggerには、Sectionを追加することができます。そして、これらのセクションへはガジェットを追加することができます。
『レイアウト』の仮面からガジェットを追加するから追加をすると、自動でガジェットのスクリプトが挿入されます。そのため誰でも簡単にガジェット追加が可能です。

下の図を参考に追加をしてみだください。




ガジェットの構成について

以前も紹介しましたが、Googlebloggerのガジェットは、必ずセクションの内部にあります。また、セクションはガジェット(ウィジェット）しか、内部に持つことが出来ません。つまり、HTMLは <b:widget>と  </b:widget>の間に書いてあります。



  1. <b:section id='Sidebar'>
  2.   <b:widget id='FeaturedPost1' locked='false' title='注目の投稿' type='FeaturedPost'>

  4. ここの内部にHTMLがあり！

  6.   </b:widget>
  7. </b:section>

外部のCSSをウィジェットに適用する場合は、 <b:widget >の内部を編集していきます。

まとめ

Bloggerの自作テンプレートを作るためには、ある程度な手間と時間がかかりますが、HTMLを勉強するための方法としてはなかなか優れています。また、完全無料なのにこれだけの拡張が可能なプラットフォームは他にないでしょう。




ー記事をシェアするー
B!
タグ
投稿者: にゃんこ

コメント

コメントを投稿
登録: コメントの投稿 (Atom)
Youtube

Translate

人気の投稿
  • サブレディット（subreddit）とは

    Subredditって何？ サブレディットとは、Redditの中のカテゴリーのこと。ツイッターで言えば、ハッシュタグみたいなモノ。基本的にSubredditの趣旨にあった投稿をするというルールになっている。 subredditは、r/＊＊＊＊ と表記されて、自分が今どこのsubr...

  • ブログにファイルをアップロードする方法-Google Blogger・はてなブログ・ライブドアブログ・FC２ブログでもOK-

    今日は、 Google Bloggerにファイルをアップロードする方法 を紹介します。 ブロガーは、写真と動画をアップロードすることは可能ですが、ファイルを載せる方法がわかりませんでした。 少し調べて見たところ、bloggerにファイルをアップロードできる様になったので、解説兼ま...

  • 誰でも分かる『Redditの登録方法と使い方』

    時々耳にするReddit。アメリカの２ちゃんねるとも言われている。最近だとゲームストップの騒動の主犯となっていることがニュースになっていた。それほどの力を持つアメリカの掲示板サイトである。日本では、まだまだ利用者が少ないが、せっかくだし初めてみたいと思っている人は、今初めて見ると...

  • カルマポイント(Kruma)のため方

    カルマポイント(Kruma)とは Redditは、カルマポイントという制度を導入しています。カルマとは、Facebookの「いいね」に相当するポイントを指します。賛成票（アップボット）ごとに約1ポイントのカルマを受け取り、反対票ごとにカルマ（ダウンボット）の約1ポイントを失います...

  • 『オーロックス』読みやすいBloggerの日本語テンプレート【無料】

    可読性の高いBloggerテンプレート Blogger は、広告無しの無料ブログとして非常に優れています。ブログに文章を書くと考えると、本来なら第一選択として名前が挙がって良いレベルです。しかし、実際のところはてなブログやnote, ライブドアブログの方が書きやすく、読みや...

  • イケメンとシケメンの言葉の意味

    イケメンとシケメン 但しイケメンに限る。という名セリフニコニコや2chで利用されている。またシケたメンズのことを示す言葉であるシケメンも2chやニコニコ界隈では知られている。 イケメンとは イケてる男のことを示す言葉 『イケメン』 という言葉は、誰もが知っていますよね！暗くてジメ...

  • 「ラクーンドッグ Raccoon dog」オシャレな日本語テンプレート：部活・会社のサイトにも使えます

    ワードプレスみたいなお洒落Bloggerテンプレート オーロックス、オーロックスII、ゴート山羊のGoogleテンプレートを作ってきましたが、視差背景つきのテンプレートは無いと思いましたので、視差背景付きのテンプレートを作りました。ベースはオーロックスIIで、それに視差背景を入れ...

  • アメリカ掲示板サイト『Redditの使い方』〜登録から読み方まで（初心者向け）

    Redditとは、アメリカの掲示板サイトでニュース記事、画像のリンクやテキストを投稿してコメントをつけることが出来る。日本で言えば、5ちゃんねる（旧2ちゃんねる）の様なものだ。利用者数は、非常に多く米国で5番目に多く訪問されたサイト、世界では13番目に多く訪問されたウェブサイトと...

  • アリの飼い方

    アリ飼育の魅力 　アリはとても魅力的な生き物です。地球上のすべての生き物の中で、人間社会に匹敵する社会構造を持つ数少ない生き物がアリです。蟻は仲間と協力して、餌をを備蓄し、戦争を繰り広げたりしています。種類によっては、奴隷を使役したり、家畜を飼ったり農業を行ったりしています。ま...

  • Bloggerテンプレートの自作方法

    Googlebloggerのテンプレートの作り方。 GoogleBloggerを初めてしばらく経ちますが、GoogleBloggerはカスタマイズが面白いのです。初めは文字サイズから初めて、CSSを漁り、HTMLも触れるようになり。。。。欲深い私は、テンプレートを作りたくなってし...