あひるの化粧品と戯れる日記

化粧品開発者が化粧品やそれに関する知識、情報などを発信していくブログです。たまに無関係なことも書きます。

【はてなブログカスタマイズ】トップ画面をホームページへ変える方法

スポンサーリンク

 

 

どうも、あひるです。

カスタマイズ系の記事がよく読まれますので、カスタマイズ系の記事を書いていきましょうかね。

なんか悲しいな(笑)

 

今回は、固定ページ活用、その2です!

その1は、「【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方」という記事で書いています。

何度も言いますが、おそらく誰にでもできます(笑)

だって、私にできたんですからね。

トップ画面、ホームページ風に変えたくないですか?

はてなブログだと、みんなほぼ同じく、トップ画面は記事一覧ですからね・・・。

少しは自分の色、好みを出してもいいかと思います。

ではでは、どうやってやるのか、ご説明します。

 

 

 

当ブログのホームページ

当ブログのホームページ、トップページをご覧になられた方は、お気づきかと思いますが、通常のものとは違っています。

はてなブログの通常のホームページは、記事一覧がホームページになっているかと思います。

下記画像のようなかたちですね。

通常のはてなブログのトップページ

記事が新しい順に並んでいる状態かと思います。

 

しかし、当ブログのトップページでは、違うかたちを取っています。

ブログのトップページ改良版

新着一覧、カテゴリーと、全く別のかたちを取らせてもらっています。

あひるの化粧品と戯れる日記のトップページ」を見てもらえれば、よりわかりやすいかと思います。。 

さて、通常とは異なるトップページをどう作るのか?

答えは、固定ページの活用です。

固定ページで作ることによって、いくらアクセスされても、注目記事にならないのが良いんですよね。

プロフィールや、お問い合わせも固定ページを活用するのが良いかと。

なお、固定ページは、はてなProでのみ使用可能です。

無料版の方だと、作ることは可能ですが、注目記事にランクインしてしまうので、ご注意を。

 

 

 

固定ページをブログのホームページ風へ

固定ページの作り方

では、作り方を説明していきます。

【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方」でも説明しましたが、

 

ダッシュボード ⇒ 固定ページ

で、固定ページを作ります。

URLは、何でもOKです。私は、「home」としています。

 

サイドバーを消す

通常、固定ページでは、サイドバーが表示されます。

ところが、サイドバーは削除、表示されないようにすることが可能なんです!

固定ページのサイドバーをなくす方法

固定ページの作成画面です。

作成ページの編集オプションの、固定ページレイアウトで、サイドバーをなくす選択をすることが可能です。

もちろん、サイドバーの表示するしないは、個人の自由ですので、お好みで行ってください。

 

タイトルと日付も消そう!

このままだと、サイドバーは消すことができますが、固定ページのタイトル、公開した日付が表示されてしまうんですよね。

ホームページに、記事タイトルや日付っていらないですよね・・・。

ということで、消すコードが必要なんですよね。

コードは、下記の通り。

サイドバー、日付を消すコード

<style><!--
/* サイドバー・日付を消す */
#box2,
.entry-header,
.entry-footer {
display: none;
}

/* 以下トップページ用のデザイン向けのhtmlを書く */
--></style>

 

上記のコードを固定ページのHTML編集にコピペすれば、記事タイトルや、日付が非表示になります。

便利なコードですね。

あと他に、グローバルメニューの非表示や、固定ページの横幅などの調整も一緒にしてしまいましょう。

サイドバー、日付、グローバルメニューを消すコード

<style><!--
/* サイドバー・日付を消す */
#box2,
.entry-header,
.entry-footer {
display: none;
}
/* テーマによって調整 */
#main {
max-width: 1200px;
width: 100%;
float: none;
margin: 60px auto 30px;
}
/*グローバルメニュー非表示*/
#gnav {
display: none
}
/* 以下トップページ用のデザイン向けのhtmlを書く */
--></style>

これで、固定ページがまっさらのきれいなデザインとなります。

あとは、ご自由にです。

まっさらのページに何を描くかはご自身で見つけてください。

グローバルメニューを消したくなければ、そこのコードを消して貼り付けてください。

一応、下記に私がホームページを作成するにあたり使用したHTMLやCSSを載せておきます。

 

 

 

 

ホームページのボックスカスタマイズ

当ブログでは、ホームページに、PC画面からだと、4つのボックスが横並びに、スマホだと2つのボックスが横並びで表示されているかと思います。

これは、HTMLとCSSで作成可能です。

下記のHTMLコードをコピペし、色を変えてある箇所を変更の上、固定ページのHTML編集に貼り付けてください。

それで、当ブログと同じようなかたちになります。

ボックスカスタマイズのHTMLコード

<div class="article-area">
<div class="article-container">
<div class="article-box">
<div class="article-img"><a href="記事URL1"><img src="画像URL1" alt="画像名称1" /></a>何かしらの名称1</div>
</div>
<div class="article-box">
<div class="article-img"><a href="記事URL2"><img src="画像URL2" alt="画像名称2" /></a>何かしらの名称2</div>
</div>
<div class="article-box">
<div class="article-img"><a href="記事URL3"><img src="画像URL3" alt="画像名称3" /></a>何かしらの名称3</div>
</div>
<div class="article-box">
<div class="article-img"><a href="記事URL4"><img src="画像URL4" alt="画像名称4" /></a>何かしらの名称4</div>
</div>
</div>
</div>

記事URLは、飛んでもらいたい記事のURLやカテゴリURLを、

画像URLは、その記事に合う画像URLを、

画像名称は、alt属性と呼ばれているもので、特に記載がなくてもOKです。

何かしらの名称は、記事の名前を記載するもよし、カテゴリーの名前を記載するも良し、自由です。

また、4つも必要ないって方は、消せば数が減らせます(当たり前)。

私も全部4つにしてませんし。

 

あとは、下のCSSコードを、

ダッシュボード ⇒ デザイン ⇒ カスタマイズ ⇒ デザインCSS

に貼り付ければ、OKです。

ボックスカスタマイズのCSSコード

/*=== article window ===*/
.article-area{
background-color:;/*背景色*/
}
.article-container{
width: 90%;/*画像表示の幅*/
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
box-sizing: border-box;
margin: 0px auto;
padding:0px;
text-align:center;}
.article-box{
box-sizing:border-box;
border:5px solid #fffaf3;/*画像の枠色*/
width:25%;
padding:0px;
margin:30px 15px;/*画像周りの空白*/
overflow:hidden;}
.article-img img{
width:100%;
display:block;
object-fit:cover;
transition-duration: 0.5s;/*ゆっくり戻る*/}
.article-img:hover img{/*マウスオーバーで拡大表示*/
transform: scale(1.1);/*1.1倍に表示*/
transition-duration: 0.5s;/*ゆっくり拡大*/}

/*=== smartphone 2列表示 ===*/
@media(max-width: 767px){
.article-container {
width:100%;
flex-wrap: wrap;/*折り返し表示(2列)*/
justify-content:space-between;
padding:8px;}
.article-box {
width:43%;
padding:0px;
margin:8px;}
.article-img img{
width:100%;
padding:0;
object-fit:cover;}}
.page-entry .article-area{display:none;}
/*=== end of article window ===*/

これで同じようなものが作成可能です。

コピペだけなので、簡単かと思います。

色や文字の大きさは自由に変更してもらえればと思います。

上記コード、参考にした記事があるのですが、見当たらない・・・。

ごめんなさい。見つけたら、リンク貼ります。

見つかりました!

というか、参考にした作者さんから、直々にご連絡を頂き。大変ありがとうございます。

こちらが、参考にさせて頂いた記事になります。

www.bambi.pro

とてもわかりやすいので、私のでわかりにくければ、参考ページを参照してもらえたらと思います。

私なんかより、カスタマイズにお詳しく、記事も色々ありますので、カスタマイズに困っておられたら、上記ブログを参考にしてみてください。

 

 

 

固定ページへのリダイレクト

これで固定ページをホームページへと変更する準備が整ったかと思います。

ただ、このままではダメですよね?

固定ページは、独立した島みたいなものです。通常では、アクセスできないので、繋げてあげる必要があります。

使用するコードは、下記になります。

貼り付ける先は、

ダッシュボード ⇒ 設定 ⇒ 詳細設定 ⇒ headに要素を追加

リダイレクト用コード

<script type="text/javascript"><!--
if(location.href === "ブログURL") {
location.href = "トップページにしたいブログURL"
}
// --></script>

赤字、青字を変更し、貼り付ければOKです。

上記コードは、トップページを変更するためだけのコードではありません。

例えば、NotFoundとかが出る場合でもリダイレクトをかけて上げれば簡単解決です。

まぁ、記事の場合はサチコで消すのが手っ取り早いですけど、記事でなければ、上記コードが簡単かもですね。

 

他にもカスタマイズ系の記事は書いていますので、良ければ読んでもらえると幸いです。

グローバルメニューについては、「【Minimalismカスタマイズ】グローバルメニューの設置方法

文字サイズ変更、マーカーなどは、「【はてなブログカスタマイズ】文字サイズ変更、マーカー、見出しの変更方法

ボックスデザインについては、「【はてなブログカスタマイズ】ボックスデザイン、ボタンの設置方法

サイドバーの色、アイコンなどは、「【Minimalismカスタマイズ】サイドバーの色変更、アイコンの設置

固定ページの活用方法は、「【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方

参考になれば、幸いです。

 

 

 

最新記事一覧はどこへ?

固定ページで、ホームページを作成すると、最新記事一覧が行方不明になります(笑)

さすがに困りますよね。

なので、ホームで最新記事一覧へ飛べるように、URLを設置しておいた方が良いです。

設置の仕方は何でもOKです。

上記のボックスにURLを紐付けするも良し、ボタンに紐付けするも良しです。

グローバルメニューを残す方は、グローバルメニューに表示させるのも一つの手ですね。

最新記事一覧のURLは、自分のブログURLに「/archive」が付いたかたちとなります。

当ブログの場合、「https://www.ahiru-nonnbiri-blog.work/archive」となります。

自由に見れるように、ホームページに設置しておくのがよいでしょう。

 

 

 

最後に

固定ページを用いて、ホームページを作成する方法について、書いてみました。

やや工程が多いですが、一つ一つは簡単ですので、時間をかければ、誰でも簡単に使用できるかと思います。

上記のカスタマイズ程度なら、サイトが重くなることはないです。

よく見かけるのが、カスタマイズのしすぎ、AdSense貼り過ぎで、表示スピードがものすごく下がっているブログ。

ものすごく見ずらいです。

あと、トップページに記事本文が何個も並んでるのも、読み込むのに時間がかかり過ぎなので、読みにくいです・・・。

何かしら対処しないとですよね。

とか言いながら、私のブログもそこまで早くないのが痛いところ・・・。

 

他にも、カスタマイズに関して、記事を書いています。良ければ参考にしてみてください。

 

また、オススメのアイテムについても書いていますので、良ければ参考程度に。

【これで決まり!】Macbookキーボードカバー( moshi clearguard MB)

【オススメの良品】シャトルデイパックスリム(ノースフェイス)

【モバイルバッテリー】Anker PowerCore 13000

 

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

 

 

 
ホームへ戻る