Bloggerでホームページ作成

カスタマイズまとめ

bloggerでホームページを作りたい方用に、カスタマイズ方法をまとめます。
このページもbloggerを使って作っています。
下記の項目を全てやると、これと同じページが出来上がります。

はじめに

まずはbloggerで新しいブログを作成し、シンプルテンプレートを選びます。

①サイドバーの必要ないガジェットを消す

"アーカイブ"などのブログ用に配置されたガジェットを削除します

②HTMLガジェットを「ブログの投稿」前に設置

③上記②のガジェットをフロントページだけに表示する

<b:widget id='Text1' locked='false' title='WelcomeMessage' type='Text'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

上記のはtextガジェットの例ですがHTMLに置き換えて見てください。
赤で示した部分を挿入。

④フッターを削除する

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

の「locked='true'」を「locked='false'」に、「showaddelement='no'」を「showaddelement='yes'」に修正し保存すると、ガジェット編集に「削除」ボタンが出現するので、そこから削除。

⑤フッター上部にあるborderを消す

消したければ、
.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}
の部分を削除する。

⑥上部のナビバーを隠す

１．まず、Blogger ダッシュボードから「テンプレート＞ HTML の編集」へ進み、失敗したときにすぐ回復できるように、テンプレートのバックアップを取ります。

２．次に、テンプレートから </b:skin>を見つけます。

３．そして、その行の前に、次のコードを挿入するだけです。
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

参照：クリボウの Blogger Tips: Blogger の Navbar は隠してもいいらしい

⑦固定ページを作成する

⑧ページをリストで並べる

⑨ブログの投稿部分を削除
（※フロントページだけのHPを作る場合）

※この作業をするとページが増やせません
「HTML の編集」画面で「ウィジェットのテンプレートを展開」にチェックを入れずに

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
を
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'><b:includable id='main'></b:includable></b:widget></b:widget>
と書きなおす

参考：Blog Post欄が重複してしまう | Google グループ

⑩各ページタイトル名とブログタイトルの表示順を逆にする

head内のブログタイトルにあたるhtmlを以下のように編集

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

⑪タイトルに画像を貼る

⑫投稿の下に表示される「Feed登録」を削除する

HTML編集内でウィジェットのテンプレートを展開し、ctrl+Fで「feed links」を検索

<b:include name='feedLinks'/>

この2行を削除。

⑬「前の投稿」「ホーム」に移動するナビゲーションを削除

<b:include name='nextprev'/>
の部分を削除

⑭投稿部分に残った色を隠す

<Variable name="post.footer.background.color" description="Background Color" type="color"
default="#f9f9f9" value="#ffffff"/>
<Variable name="post.footer.border.color" description="Shadow Color"
type="color" default="#eeeeee" value="#ffffff"/>

value="#eeeeee"からvalue="ffffff"に変更

⑮imgにデフォルトで指定されたCSSを解除する

デフォルトだとimgにborderやboxshadowが指定されているので
好みによって、外したい方は

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

上記を削除する

⑯SNSボタンをヘッダー内タイトル右に設置（HTML編集）

SNSボタンは「忍者おまとめボタン」を使うと簡単に作れます

HTML編集で、ガジェットのテンプレートを展開にチェック
<h1 class=’title’>を探す
表示させたい内容をh1タグ内の<b:include name='title'/>の直前に貼り付ける