【ブログの楽しみ方】ココログをホームページ風にデザインする／通常の記事とウェブページはどう使い分けるの？【cocolog】

この記事は必要に応じて加筆修正する可能性があります。

この記事は、ココログのウェブページを使用すると、こういうこともできるという例です。最初にウェブページについて簡単に説明します。

ウェブページとは／通常の記事との使い分け

ココログにはウェブページという機能があります。記事の作成方法も表示された際の見た目もブログ記事と同じなのに、ブログ記事には表示されません。ブログ上に表示するには、下記の2種類の方法があります。

1. 「ブログ」→「デザイン」→「表示項目を選択」でサイドバーにリンクを表示する。
2. 「マイリスト」（「メモ」タイプ）を使用して、ウェブページへのリンクを作成し、そのマイリストをサイドバーに表示する。
3. ブログのトップページに固定で表示する

1は下図の場所にチェックを入れて、「並べ方を変更」でサイドバーへの表示位置を設定するだけなので簡単ですが、作成順にしか表示できず、余り融通が利きません。

一方、2は簡単なHTMLタグを自分で記述する方法がありますが、それほど複雑なものではないので、パターンを覚えてしまえば簡単で、また、自分でバナー（画像）を作ることができれば、リンクを文字だけでなく画像に貼ることができます。（方法は下記記事に説明しています。）

• 【ブログの楽しみ方】リンク先を別タブまたは別ウィンドウで開かせるには？【ココログ】

3は、少し特殊な表示のさせ方です。ウェブページの一つをトップページに表示するよう指定しておくこともできます。表紙のようなイメージです。　

そもそも『記事作成上「ウェブページ作成」を別に作成するのはどうして？』（リンク先はココログの助け合い掲示板でブログ主が回答したFAQ）という疑問を持つかも知れませんが、ポイントは“ブログ記事には表示されない”ということで、別の言い方をすると、○月○日の記事として表示したくないものをウェブページで作成するといいと思います。（上記リンク先の回答にて、いくつか例を挙げました。）

ウェブページを利用してブログをホームページ風にデザインする

ウェブページを使って、極力ブログらしさを排除すればホームページ風のレイアウトにもできるという例です。

自分の店のHPを作るとなるとHTMLタグの知識も必要になり、修正する場合も、いちいちローカル環境（自分のPC）で作業してからページ全体をサーバー上にアップロードするといった作業が必要で、メンテナンスが面倒なのでややハードルが高いのですが、ブログ（ココログ）なら、ブログの機能だけでこんなことも可能です。

試しに、パン屋のホームページをイメージして、簡単にデザインしてみました。

（ココログではカスタムテンプレートいって、既存のテンプレート＝デザインを使わずに自分でトップ画像を設定したり、背景の色を決めたりすることも可能ですが、この記事では取り扱いません。）

①　トップページには、通常のホームページのトップページのような内容を書いたウェブページを表示しています。

②　ココログに限らず、ブログはブログタイトル（この例ではタイトル画像に表示されている「Lindenbaum」という文字をクリックすればトップページが表示されるのですが、ホームページらしく「TOP」という項目を作ってトップページへのリンクを貼ります。（このブログで言うと、「http://daishi100.cocolog-nifty.com/blog/」というのがトップページのURLです。

③　ココログには「マイフォト」というアルバムのような機能があり、画像とそれに関するコメントや説明を付けることができます。ここではマイフォトへのリンクを貼っていますが、もちろん、ウェブページに扱っているパンの一覧（画像とその説明）を書いて、そのページへのリンクを貼ってもいいかと思います。（マイフォトは上手く使えばブログのアクセントになるのですが、デザインの種類が少ないのと、画像の並び替えが、「日付順」とか「タイトルで昇順」とか融通が利かないのが欠点です。）

④　「アクセス」（住所や店への交通案内、地図）なども、通常のブログ記事でもいいと言えばいいのですが、別に日付を持たせる必要がない情報なので、こういうのはウェブページを使うといいでしょう。

ウェブページの特徴として、もう一つ、公開するときにファイル名（「.html」の前の部分）を自分で付けます。ファイル名とはそのページのURLの最後に表示されるのですが、ご存じのように、通常のブログ記事では、なんだかよく分からないファイル名になり、自分で好きなファイル名にすることはできません。しかし、ウェブページなら、分かりやすい名前、たとえば、「access」などと付ければ、そのページのURLは「http://daishi100.cocolog-nifty.com/blog/access.html」となり、分かりやすくなります。

⑤　ブログ記事の一覧を表示させたい場合、トップページのURLを指定すると①のページが必ず表示されるので、ブログを読むことができません。

ブログには「カテゴリ」を設定できるので、たとえば全記事用に「blog」というカテゴリを作成しておき、記事には必ずそのカテゴリを設定します。記事にはカテゴリを複数設定することもできるので、必要に応じて、たとえば「新製品」などというカテゴリと「blog」の2つを設定することが可能です。

そして、「blog」カテゴリのインデックスページへのリンクをサイドバーに表示するのです。

具体的な例でもう少し説明します。

この記事には「┗ cocologの楽しみ方」というカテゴリを設定しています。初めてこのカテゴリを付けた記事を保存・公開したときに自動的にインデックスページ（htmlファイル）が作成されますが、この時のURLはココログが自動的に命名し、ユーザではコントロールできません。（「http://daishi100.cocolog-nifty.com/blog/cocolog/index.html」の「cocolog」の部分がココログにより命名される。実際はフォルダ名。）このURLはその後記事を追加しても変わりません。

このURLはカテゴリ一覧をサイドバーに表示し、そのカテゴリ名をクリックすれば分かりますが、この要領で、「blog」カテゴリ一覧ページへのリンクをサイドバーに表示すればいいのです。

①～⑤をテキスト（文字）にリンクを貼るのではなく、バナーを使えば、よりホームページ風になります。

その他、“ブログらしさ”を極力排除するするために、役立つ記事

• 【ブログの楽しみ方】サイドバーの「バックナンバー」をすっきり表示する【ココログ】　　

---