2019-12-10

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

ブログブログ-カスタマイズ

宜しければ、読者登録、お願いしますm(_ _)m

当サイトの記事には、広告・プロモーションが含まれます

どうも、化粧品開発者のあひるです。

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

なんか悲しいな（笑）

今回は、固定ページ活用、その２です！

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

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

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

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

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

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

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

当ブログのホームページ
固定ページをブログのホームページ風へ
ホームページのボックスカスタマイズ
固定ページへのリダイレクト
最新記事一覧はどこへ？
最後に

当ブログのホームページ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

固定ページの作り方

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

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

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

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

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

サイドバーを消す

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

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

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

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

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

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

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

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

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

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

コードは、下記の通り。

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

<style></style>

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

便利なコードですね。

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

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

<style></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="記事URL１"><img src="画像URL１" alt="画像名称１" /></a>何かしらの名称１</div>
</div>
<div class="article-box">
<div class="article-img"><a href="記事URL２"><img src="画像URL２" alt="画像名称２" /></a>何かしらの名称２</div>
</div>
<div class="article-box">
<div class="article-img"><a href="記事URL３"><img src="画像URL３" alt="画像名称３" /></a>何かしらの名称３</div>
</div>
<div class="article-box">
<div class="article-img"><a href="記事URL４"><img src="画像URL４" alt="画像名称４" /></a>何かしらの名称４</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 ２列表示 ===*/
@media(max-width: 767px){
.article-container {
width:100%;
flex-wrap: wrap;/*折り返し表示（２列）*/
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 ===*/