Bloggerでホームページ風のサイトを作ってみました-作り方を解説します-

「単純なブログ形式のサイトじゃなく、色々なコンテンツを掲載できるホームページ風のサイトを作りたい」

「トップページを自由に作って、そこからいろんなページにリンクしたい」

 そんな人にピッタリなのが、固定ページを活用してBloggerをホームページ風にカスタマイズする方法です！

私も自分のブログをホームページ風にカスタマイズしてみました→【bloggerで作成した私のホームページ】

今回は、このようなホームページの作成方法を、初心者の方でもわかるように、まとめて紹介します。

 固定ページでトップページを作る

まずは、固定ページでトップページを作ります。

1. Blogger管理画面 →「ページ」→「新しいページ」
2. タイトルを「ホーム」または「Home」に設定
3. 画像・文章・ボタンなど自由にレイアウト
4. 公開して、ページのURLを控えておく（例：ブログ名.blogspot.com/p/home.html）

ここがトップページ（ホーム）になります！

     

ブログのトップURLを固定ページに変更する（リダイレクト）

ブログのトップURL（例：https://ブログ名.blogspot.com/）にアクセスしたときに、先ほど作ったホームページ（例：https://ブログ名/p/home.html）に自動転送されるようにします。

このように設定することで、固定ページをホームページっぽくすることができます。

1. Blogger管理画面 →「設定」→「エラーとリダイレクト」
2. 「カスタムリダイレクトを追加」
• 元のパス： /
• 新しいパス： /p/home.html
• 「永続的」にチェックを入れて保存！

これで、トップURL（例：https://ブログ名.blogspot.com/）にアクセスすると、ホームページ（例：https://ブログ名/p/home.html）が表示されるようになります。

ナビゲーションバー（メニュー）を作る

訪問者が他のページへ移動できるよう、メニューを設置しておきます。 「レイアウト」→「ガジェットを追加」→「ページ」から「ページリスト」を追加する

1. 表示したいページにチェック（例：ホーム、プロフィール、ブログ）
2. 表示順を調整して保存！

この方法なら、HTMLの知識がなくてもメニューが簡単に作れます◎

ブログ記事一覧を表示する方法

「でも、ブログ記事はどこで見れるの？」という疑問も大丈夫！

ブログ名.blogspot.com/search

にアクセスすれば記事一覧ページが表示されます。

ブログ名.blogspot.com/search/label/○○ （○○＝ラベル名）

にアクセスすればラベルを表示することもできます。

これらのURLへのリンクを用いてホームページをカスタムしていきましょう。

リダイレクトを用いる方法はSEOの評価が下がるかもという意見を目にしたので、私のホームページではこの方法を使わない方針にしました。

現在はブログタイトルをクリックした時に飛ぶページをホームページに変更することで、ホームページっぽさを演出してます。

このページの左上にある「P-LIFE.NET」をクリックしていただくと、ブログ記事一覧ではなく、ホームページとして設定した固定ページに飛ぶ設定になっています。

このやり方はこちら↓

SEOが心配な方はこの方法がおすすめです。

固定ページをHTMLビューで編集し、ホームページ風のデザインを作っていきます。

お知らせ欄があるとホームページっぽくなります。

こんな感じ↓

※生成したコードをHTMLビューで貼り付けて使います。

ホームページっぽい見出しを作成するといい感じになります。

こんな感じ↓

見出し例①
見出し例②

このような見出しを生成するジェネレーターを作成したのでよかったら使ってみてください→【見出しデザインジェネレーター】

※生成したコードをHTMLビューで貼り付けて使います。

リンクボタンがあるとホームページっぽくなります。

こんな感じ↓

リンクボタンを作成するジェネレーターも作成したのでよかったら使ってみてください→【大きめリンクボタンジェネレーター】

※生成したコードをHTMLビューで貼り付けて使います。

今回はBLOGGERをホームページ化する方法を紹介しましたが、逆に固定ページをブログ風にすることもできます。

固定ページにこんな感じでリンクをならべるとブログ記事一覧風になります↓

実はこのブログ【P-BLOGGER】もこの方法で作ったブログです。

このやり方はこちらの記事で紹介しています。

よかったらチェックしてみてください。

それでは今回はこの辺で。

最後までお読みいただきありがとうございました。

BLOGGERカテゴリ