ズボラ応援ブログ始めました

はてなブログのトップページカスタマイズ-ブログっぽさを無くす

ブログ運営

はてなブログのトップページに施したカスタマイズをまとめました。できる限りオシャレっぽく、はてなブログ感を薄める感じのコンセプトです。

f:id:niketcha:20190908190452p:plain

今の当サイトのトップページはこんな感じです。

トップにおすすめ記事を表示

トップページにおすすめの記事を固定表示しています。はてなモジュールを使って人気記事やブックマーク数が多い記事を表示することもできますが、サイトが重くなるのが嫌なのでhtmlにしました。人気記事を自動表示したい場合は「はてなブログで人気記事を任意の場所に表示する方法」も合わせて参照してください。読んでほしい記事や、アナリティクスで調べた人気記事を載せると良いと思います。

html

トップページに記事を固定表示するhtmlです。下記の例では6件表示しています。お好みで修正してください。

私のサイトではアイキャッチに文字を入れているので、タイトルは省きました。シンプルな画像を使っているサイトでしたら、画像の上にタイトルを重ねてもおしゃれです。

<div class="recommend-wrap">
<p class="recommend-heading">Pick Up</p>
<div class="recommend">
<a href="URL">
<div class="recommend-box">
<img src="アイキャッチURL" />
</div>
</a>
<a href="URL">
<div class="recommend-box">
<img src="アイキャッチURL" />
</div>
</a>
<a href="URL">
<div class="recommend-box">
<img src="アイキャッチURL" />
</div>
</a>
<a href="URL">
<div class="recommend-box">
<img src="アイキャッチURL" />
</div>
</a>
<a href="URL">
<div class="recommend-box">
<img src="アイキャッチURL" />
</div>
</a>
<a href="URL">
<div class="recommend-box">
<img src="アイキャッチURL" />
</div>
</a>
</div>
</div>

css

cssのポイントとしては、recommend-wrapを非表示にして、page-index(トップページ表示時にbodyに設定されるクラス)のときに表示させることです。

どのページにどのクラスが設定されるのかは「はてなブログでページによって異なるコンテンツを表示する方法」を参照してください。

あとは画面幅によって3列→2列→1列と変化していく点や、マウスオーバーで画像が拡大される装飾も付けました。

/* トップレコメンド記事 */
.recommend-wrap{
display:none;
}
.page-index .recommend-wrap {
display: block;
padding: 0 20px 10px;
margin: 0 auto;
max-width: 1200px;
}
.recommend-heading {
font-size: 20px;
font-weight: bold;
text-align: center;
position: relative;
}
.recommend-heading:after {
content: '';
position: absolute;
bottom: -10px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #8AC4C8;
border-radius: 2px;
}
.page-index .recommend {
width: 100%;
margin: 20px auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-wrap: wrap;          /* Safari etc. */
-ms-flex-wrap    : wrap;          /* IE10        */
flex-wrap        : wrap;
}
.page-index .recommend a{
flex: auto;
text-decoration: none;
border: 2px solid #fff;
width: 30%;
}
@media (max-width: 700px) and (min-width: 500px){
.page-index .recommend a{
width: 45%;
}
}
@media (max-width: 499px){
.page-index .recommend a{
width: 100%;
}
}
.page-index .recommend-box {
height: 180px;
padding: 0;
overflow: hidden;
}
.page-index .recommend-box img {
object-fit: cover;
width: 100%;
height: 100%;
}
.page-index .recommend-box img:hover{
opacity: .5;
transition: all 0.4s;
transform:scale(1.2);
}



新着記事の見出しを追加

新着記事一覧の上部にも、おすすめ記事とお揃いの見出しを付けました。下記のcssを追加すると表示できます。

.page-index .archive-entries {
padding-top: 60px;
position: relative;
}
.page-index .archive-entries:before {
content: 'New Post';
color: #444;
font-size: 1.3rem;
font-weight: 900;
position: absolute;
margin-top: -40px;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.page-index .archive-entries:after {
content: '';
position: absolute;
top: 40px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #8AC4C8;
border-radius: 2px;
}

サイドバーを非表示に

このサイトはスマホからのアクセスが7割を超えていることもあり、サイドバーを廃止しました。私自身があまりサイドバーを見る習慣がないという理由もあります。

サイドバーを非表示にするには下記のcssを追加します。#wrapperの部分はテーマによって変わるかもしれません。これはUnderShirtの例です。

aside#box2 {
display: none;
}
#wrapper {
margin: 0 auto;
}



ナビゲーションメニュー

ナビゲーションメニューの実装については別の記事に書いています。「ハンバーガー廃止⇒画面幅でメニュー数が増減するナビゲーション」を参照してください。

コメント

タイトルとURLをコピーしました