江のブログ

より良い世の中・人生に向け,意見・ライフハック・アフィリエイト・便利アイテム・語学について発信します

【実例紹介】はてなブログで『”ブログに見えない”ホームページ風のサイト』を作ってみた

 はてなブログ(Hatena blog)で3つ目のサイトを作成してみました。今回は,ブログではなく「ホームページ」としたく,保有しているはてなブログProの機能をうまく利用して,機能の制約がある中で頑張って作成してみました。いろいろ考えて調べてみたら,ほぼ意図したブログに見えない”ホームページ風のサイトができたので紹介します。

 

HP作成準備:はてなProの固定ページ機能は必須

はてなブログProが必須です。

はてなブログProは,独自ドメインを持てるはてなブログの有料オプションです。

今回は,その中の「固定ページ機能」がマストですが,他にも広告を消せたり有用な機能が多数あるのと,かつ運営する複数のブログ10個まで特典を全て適用できるので,とても便利です。

\最もお得な2年コースがおすすめ/

 

はてなブログでホームページ風のサイトを作ってみた

はてなブログでホームページ風のサイトを作るときの最大の問題は,一番重要なサイトのトップページが,「はてな」だと煮ても焼いてもブログ風にしかならないことです。

 

一方,今回作ったサイトはこちらです。

funa-taku.hateblo.jp

 

デザインセンスは好みがあるのは置いておいて、、、結構ホームページ風に自然な感じに仕上がっていると思います。

こちらがトップページ(随時更新しているので少し変わっているかもしれませんが)のキャプチャ画像に,ホームページ風に見せるための実施した工夫を赤字(*後で詳しく説明します)で加えたものを示しています。

 

図1.作成したオリジナルのトップページ
https://funa-taku.hateblo.jp/home

やっていることは非常に単純ですが、1つずつ説明していこうと思います。

*一応,以下の項目番号と上画像中の番号は対応していますので,併せてご確認ください。

 

 

⓪サイトのトップページを『固定ページ』で作る~リダイレクトは不要!

 まず最初のポイントです。サイトのトップページは,扱いずらいブログトップページ(http://abc.com など)ではなく,固定ページ機能(はてなブログPro機能)を使って別につくります(http://abc.com/home など)。

 

固定ページの設定


今回は,固定ページ(https://funa-taku.hateblo.jp/home)を作成しました。

この固定ページをトップページとして扱うことで,トップページに”ブログ記事”のサムネイルが追加されるようなことが無くなります

また固定ページは,記事アップしても公開されないので,実験的にサイトづくりができるのもおおきなメリットです。

もしかしたらCSSの追加など回避できるのかもしれませんが,そのようなものを見たことはありません。

 

 ちなみに元々のブログトップをリダイレクトとして,新しいホームページに飛ばすこともできますが(この場合,元々のブログトップは実質的に閲覧不可となります。),やっていません。

理由はブログのトップページはブログ記事集として活用するからです(サイトにブログ記事がいっさい不要な場合はその限りではないですが)。

ホームページ風サイトでブログ「も」作成する場合,結局『ブログ記事集』が必要になりますが,正に元々のブログトップがその『ブログ記事集』となっています。ですので,後でブログへのリンク先にブログトップを設定しています。

 

ポイント

・固定ページ(はてなブログPro機能)で,ブログのトップページ(ex. http://abc.com)とは別に,ホームページのトップページ(ex. http://abc.com/home)を作成する

\最もお得な2年コースがおすすめ/

①ヘッダ画像を作成,マニュアルで作ったトップページにリンクを貼る

サイトのトップページと,ブログトップページから固定ページにすることで,だいぶホームページっぽくなりますが,まだ問題があります。

はてなの仕様で,「ヘッダ画像」にブログトップ(ex. http://abc.com)へのリンクが張られているため,これらを解除した上で,サイトトップにリンクを貼りなおす必要あります。でないと,すぐに離脱されたり,一旦離れるとせっかく設定したトップページから戻りにくくなってしまいます。

 

・ヘッダ画像リンクの無効化

 はてなの仕様でヘッダ画像のリンク先はブログトップと決まっているので(CCSとかで買えられるのかもしれませんが。。)まずはこれを無効化します。

これは単純にヘッダ画像を削除するだけで良いです。(*このあと,オリジナルのヘッダ画像設定を行いますが,その際に自動で画像が上書きされるのでこの作業は必須ではありません。)

 

ブログタイトル下

 

・ヘッダ画像を”マニュアル”で設定

 次に,マニュアルでヘッダ画像の設定を行います。先の『ブログタイトル下』に下記の記述を追加します。

<style type="text/css">
   .header-image-wrapper {display:none;}
   #blog-title{display:none;}
   .headernew img{
       max-width:100%;
       margin: auto;
       display: block;
   }
   .headernew a{
       display:block;
       background-color:#fde6ff;
   }
   .headernew{
       margin:0px!important;
   }
  
</style>

<h1 class="headernew"> 
     <a href="https://funa-taku.hateblo.jp/home"> 
        <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/e/enokichi07/20230108/20230108094851.png" alt="大船De卓球クラブ" width="100%">
     </a>
</h1>

 

カスタマイズは,赤字を「自分のサイトのトップページのURL」,青字を「自分の新しいヘッダ画像のリンク」に書き換えるだけです。

マニュアルで作成したヘッダ画像。
固定ページで作成したホームページトップへのリンクを埋めこむ

こうすることで,「ヘッダ画像」のリンク先を(「ブログのトップページ」から)固定ページで作成した「サイトのトップページ」(今回は,https://funa-taku.hateblo.jp/home)に変更することができます。

 

ポイント

・はてなの仕様であるヘッダ画像の設定は無効化,マニュアルでヘッダ画像とホームページトップへのリンクを設定する

 

②グローバルナビゲーション

グローバルナビゲーション

 グローバルナビゲーションにある「🏠トップページ」のリンク先も,ブログトップではなく,固定ページで作ったホームページをリンク先に指定します。

 グローバルナビゲーション自体の作り方は,「はてな グローバルナビゲーション」でググればたくさん出てきますので,割愛します。

 

③トップページ用画像

トップページ用の画像

 

 ホームページのトップ(https://funa-taku.hateblo.jp/home)にサイト全体のイメージに合う画像を貼り付けました。作業は,「固定ページ*はてなブログPro専用」の編集で行えます。

\最もお得な2年コースがおすすめ/

 

④リンク

ボタンっぽい画像で各ページへのリンクを作成

各種のサイト内コンテンツへのリンクを”ボタン”っぽく画像リンクで設定しました。

今回のサイトでは,ブログ”ボタン”に,ブログトップページ(https://funa-taku.hateblo.jp/)のリンクを設定しました。

 

 ブログトップページは,ホームページの中のブログコーナーにある『ブログ記事集』的な位置づけです。こうすることで,主役はサイトのホームページであり,ブログはあくまで脇役と意図した通りに見せることができます。

 

funa-taku.hateblo.jp

まとめ

 いかがだったでしょうか?ホームページ風のブログを作成にチャレンジしてみて,どこにも情報がなかったので苦労しましたが,思った以上に良いサイトができたので,せっかくなので紹介してみました。個人的な感想として,①趣味で特化ブログを収益,②意見を言うための本ブログ,③今回紹介した趣味を広げるためのホームページ的なブログ,と三種三様ででブログが出来てとても楽しいです。