Bloggerでホームページ作り
更新のしやすさなどから好まれている、ブログを使用したホームページ作り。
もしや、Bloggerでも同じようにHPを作ることができるのではないかと思い、実際にやってみました。
コーディングはほとんどしていないので、基本的なWebサイトの作り方です。
凝りたい方は、コレを基本に装飾していけば、しっかりとしたサイトを作ることができるでしょう。
簡単なサイトでいいならBloggerで十分だと思います。
独自ドメインの設定もできますし、広告も表示されず、アフィリエイトも自由。
何より２時間もあればそれなりのものができあがります。
どうやって作ったかの流れをサンプルとともにご紹介します。
カスタマイズまとめ＆サンプル
サンプルはコチラ
あまりにも簡単に作りすぎて恥ずかしいので、後々しっかりデザインするかもしれません！とりあえずこの形になるまでを説明します。
はじめに
まずは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編集）
１．テンプレートから </b:skin>を見つけます。参照：クリボウの Blogger Tips: Blogger の Navbar は隠してもいいらしい
２．そして、その行の前に、次のコードを挿入するだけです。
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
⑦固定ページを作成する（ページ）
⑧ページをリストで並べる（ガジェット）
⑨タイトルに画像を貼る（テンプレート）
⑩投稿の下に表示される「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内にい書けば適用されます。
工夫すれば色んな事ができますね。
ココに書いた以外のカスタマイズはサンプルページに追記します。
スポンサーリンク
スポンサーリンク
