2012年6月13日水曜日

BloggerでブログじゃないWebサイトを作る方法【サンプルあり】

Bloggerでホームページ作成

ブログでホームページ作り

WordPressやMovableTypeでWebサイトを作る企業が増えています。
更新のしやすさなどから好まれている、ブログを使用したホームページ作り

もしや、Bloggerでも同じようにHPを作ることができるのではないかと思い、実際にやってみました。

コーディングはほとんどしていないので、基本的なWebサイトの作り方です。
凝りたい方は、コレを基本に装飾していけば、しっかりとしたサイトを作ることができるでしょう。

簡単なサイトでいいならBloggerで十分だと思います。

独自ドメインの設定もできますし、広告も表示されず、アフィリエイトも自由。
何より2時間もあればそれなりのものができあがります。

どうやって作ったかの流れをサンプルとともにご紹介します。



カスタマイズまとめ&サンプル


http://homepagebloggertest.blogspot.jp/ サンプルはコチラ

あまりにも簡単に作りすぎて恥ずかしいので、後々しっかりデザインするかもしれません!とりあえずこの形になるまでを説明します。


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

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

HTMLをいじる前には必ずバックアップを取ってください。
最悪の場合全て消える可能性もあります。

①サイドバーの不要なガジェットを消す(テンプレート)
"アーカイブ"などブログ用に用意されたガジェットをテンプレートから削除します。

②HTMLガジェットを「ブログの投稿」前に設置(テンプレート)
テンプレートの「ガジェットの追加」より"HTML"を追加し、「ブログの投稿」の上部分に配置します。

③上記②のガジェットをフロントページだけに表示する(HTML編集)
<b:widget id='Text1' locked='false' title='WelcomeMessage' type='Text'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<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ガジェットに置き換えて見てください。
赤で示した部分を挿入します。

④フッターを削除する(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を消す(HTML編集)
消したければ、
.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}
の部分を削除する。


⑥上部のナビバーを隠す(HTML編集)
1.テンプレートから </b:skin>を見つけます。

2.そして、その行の前に、次のコードを挿入するだけです。
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
参照:クリボウの Blogger Tips: Blogger の Navbar は隠してもいいらしい

⑦固定ページを作成する(ページ)
⑧ページをリストで並べる(ガジェット)
⑨タイトルに画像を貼る(テンプレート)
⑩投稿の下に表示される「Feed登録」を削除する(HTML編集)
HTML編集内でウィジェットを展開し、ctrl+Fで「feed links」を検索

<!-- feed links -->
<b:include name='feedLinks'/>

この2行を削除。

⑪「前の投稿」「ホーム」に移動するナビゲーションを削除(HTML編集)
<!-- navigation -->
<b:include name='nextprev'/>
の部分を削除

⑫投稿部分に残った色を隠す(HTML編集)
<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"に変更

⑬ファビコンを作成しアップロード(テンプレート)

おわりに

今回は取り急ぎ、先ほど作ってみたサンプルの手順をまとめてみました。
本気で作るならもっとやることは沢山ありますが、基本のカタチまではいけていると思います。

HTMLを直接編集するのもいいですが、Bloggerは何かを追加したい時、HTMLをガジェットで追加することができます。CSSを分けることはできませんが、HTML内にい書けば適用されます。

工夫すれば色んな事ができますね。
ココに書いた以外のカスタマイズはサンプルページに追記します。