Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに

ついに、はてなブログでトップページの一覧表示機能ができましたね!最近はてなブログはどんどん便利な仕様が追加されててカスタマイズ好きにとっては嬉しい限りです。
staff.hatenablog.com
今まで一覧表示にするにはCSSでなんとかそれっぽくしたり、/archiveページにJavaScriptでリダイレクトさせたりと無理矢理感があったのですが、これで簡単にトップページを一覧表示で多くの記事をスッキリと表示させることができるようになりました。(ただし、はてなブログProのみ)
f:id:syofuso:20170610165847j:plain
このブログにも一覧表示を使ってトップページをカード型レイアウトにするカスタマイズをしました。今回ははてなブログで難しいと思われたカード型レイアウトにするカスタマイズをご紹介します。

トップページを一覧形式にする

f:id:syofuso:20170604144826p:plain
まずは管理画面→設定→詳細設定でトップページの表示形式(PC版) にチェックを入れて保存して下さい。トップページの記事数はここでは14にしました。

CSS

CSSのコピペです。以下のコードを管理画面→デザイン→カスタマイズ→デザインCSSに追記して下さい。PC版のみカード型になるように変更しました(スマートフォンでカード型は見づらいため)。

/* トップページカード型 */
@media (min-width: 768px){
.page-index .archive-entries {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.page-index .archive-entry {
  margin-bottom: 20px!important;
  padding-bottom: 20px;
  box-sizing: border-box;
  width: calc(50% - 20px);
}

.page-index .entry-thumb {
  float:none;
  display: block;
  width: 100%;
  height: 200px;
  background-position: center center;
  background-size: cover;
  border-radius: 8px;
}
.entry-thumb-link:hover {
  opacity:0.7;
}
}

.page-indexをつけているのはトップページのみでカード型レイアウトを適用させるためです。アーカイブページは元のデザインのままです。
ブレークポイントはここでは767pxにしていますが、テーマに合わせて適宜調整して下さい。

また本文の抜粋文が長くて気になる場合は非表示にして下さい。以下のCSSを追記。

.page-index .entry-description{
  display:none;
}

追記:記事タイトルをサムネイル画像の下に配置する


記事タイトルをサムネイル画像の下の位置に変えたいときは以下のCSSを更に追加して下さい。

f:id:minimalgreen:20180330010527p:plain

@media (min-width: 768px){
.page-index .archive-entry {
    position: relative;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.page-index .entry-thumb-link {
    order: 1;
    height: 200px;
}
.page-index .archive-entry-header {
    order: 2;
}
.page-index .categories {
    order:3;
}
.page-index .archive-entry-body {
    order:4
}
}

サムネ画像をアイキャッチ画像に置き換える

追記:2017年07月11日以降、はてなブログの仕様変更のため、以下のScriptは不要になりました!
staff.hatenablog.com
はてなブログの改善のお陰でScript無しでもサムネ画像はボケずに表示されます。ありがたい!

サムネイル画像見切れ対策

但し画像が正方形に切り取られているので、見切れることがあります。トップページのサムネイル画像の見切れが気になる場合は以下の記事の「オリジナル画像に変更する Javascript」のscriptコードをフッタに追加してください。その下のCSSは既に記述済みなので追加しなくて大丈夫です。

www.imuza.com


追記:カード型レイアウト別の方法

つばさのーとさんもカード型のカスタマイズ記事書かれています。こちらの方がscriptスッキリしてて表示速度的にも良いかもしれません。(速度パフォーマンス的にこちらの方がおすすめ
是非ご参照下さい。
www.tsubasa-note.blog

はてなブログのスマートフォン版をカスタマイズするとき役立つ記事

f:id:syofuso:20170610170219j:plain
先日読んだid:codomisu さんの記事が素晴らしかったので、自分も本業ブログのリデザイン、スマホ版のカスタマイズしました。
f:id:syofuso:20170506181555p:plain
スマホ版のデザインもPC版とあわせてリニューアルしました。
f:id:syofuso:20170506181837p:plain
夏らしさを意識しましたがいかがでしょうか?

スマホ版もPC版と同様、class指定を調べてカスタマイズしていくんですが、先人の知恵を借りたほうが楽に素早く完成できます。今回は自分では記事を書かず、人様の役立つ記事を紹介します。

はてなブログのトップページをWordPressの固定フロントページっぽくし、ホームページとして活用する方法

Twitterでちょろっと書いたのですが、はてなブログでもWordPressの固定フロントページっぽくビジネスサイト風のトップページを作ることができます。これではてなブログをビジネスサイトやホームページのように活用することができます。
まずはDEMOページをご覧ください。(PC向け)


DEMOページ
f:id:syofuso:20170610170444j:plain

※このカスタマイズはdisplay:noneを多用しているため、SEOの観点からはあまりおすすめはできません。どうしてもはてなブログから移転したくなくてはてなブログでホームページが作りたい方向けです。出来れば普通にWordPressでやりましょうw
seopack.jp

別のやり方を書きました。
blog.minimal-green.com

 

トップページ用の記事を作る

ポイント
①日付を9999年にする、1ページ1記事にする
②固定記事のカスタムURLをhomeにする
③記事内にHTML/CSS全部直接書く 。
④デザインCSSでサイドバーとアーカイブページのトップページへのリンクを消す(できればページャーも)

まず「管理画面→設定→詳細設定」からトップページの記事数(PC版)を1記事にします。
トップページ固定用の記事のカスタムURLをentry/homeとなるようにします。

このカスタマイズのポイントはトップページ用のデザインためのCSSをstyleタグで囲って直接記事内に書くことです。こうすることでトップページにのみ適用させたいCSSをデザインCSSに書かずに済みます。.page-indexをつけてデザインCSSに書くと個別記事ページやアーカイブページなどの他のページでも読み込むことになり無駄に重くなります。

トップページのデザインを作るには、普通にサイトを作るときのように記事内にHTMLを書いていくだけです。
※ちなみに↑の黒板のCSSは以前記事にしています。
design.syofuso.com

トップページからサイドバー・日付などを消してシングルカラムにする

サイドバーを消す必要は無いのですが、サイドバーを消したほうがより”ビジネスサイト風”になりますね。
以下のようにstyleタグで囲ってトップページ用の記事内に書きます。

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

#content や#mainの幅はテーマによって調整が必要となります。

サイドバーの最新記事やアーカイブページページからトップページを消す

f:id:syofuso:20170430232111p:plain
トップページ用の記事は普通の記事と同じなのでサイドバーの最新記事やアーカイブページに表示されます。問題ないと言えば問題ないですが、最新記事にずっと固定ページが出て来るのは不自然なので消してしまいましょう。
このアイデアは主にid:ausnichtsさんの以下の記事を参考にしています。
www.imuza.com

以下のCSSをデザインCSSに記述します。

/* 月間アーカイブから9999年を消す */
.archive-module-year[data-year="9999"] {
    display: none;
}
/* アーカイブページから特定の記事を消す */
.archive-entry[data-uuid="10328749687241678111"] {
    display: none;
}
/* 最新記事の一番目の要素を消す */
.recent-entries-item:first-child {
    display: none;
}

トップページ用の記事固有のdata-uuidの数字をアーカイブページのソースから調べます。9999年のトップページ用の記事のところに以下のような記述があるので数字をメモして上記のCSSに入れます。

<section class="archive-entry autopagerize_page_element" data-uuid="10328749687241678111">

これでトップページ用の記事をアーカイブページから消すことが出来ました。
f:id:syofuso:20170430232915p:plain
サイドバーの最新記事や月間アーカイブからも9999年の記事は消えましたね。
f:id:syofuso:20170430232057p:plain

最新記事をトップページに表示する方法

トップページに最新記事一覧がないと、やはりブログとしては困りますね。RSSを読む込むなどの方法もあるのかもしれませんが、ここでは単に「サイドバーの最新記事」を記事内移動させるscriptを置くだけです。
サイドバーの関連記事を記事下に移動させるのと同じです。
はてなブログで記事下に関連記事を出すカンタンな方法 - ボクココ

トップページ用の記事内の最新記事一覧を表示したい場所に以下の記述をします。

<div id="recentArticle"></div>
<script>
var timer = setInterval(function() {
if (typeof jQuery != 'undefined') {
$("#recentArticle").html($(".hatena-module-recent-entries").html());
clearInterval(timer);
}
}, 1000)
</script>

後は3カラムで横並びになるようCSSを書きます。ここはテーマやトップページのデザインによって調整してみて下さい。

トップページの記事へのページャー(次へ)を消す

最新記事(ほんとは2番め)の個別記事にはトップページ用の記事へのページャーが表示されてしまいます。これを消すには
はてなブログのトップページを固定して企業サイト風にする方法 - IMUZA.com
この記事の「ページャーのトップページへのリンクを消す」をご参照下さい。

はてなブログのビジネス活用や企業のオウンドメディアに

はてなブログには企業向けにオウンドメディア構築サービス「はてなブログMedia」というサービスがあります。「それどこ」や「SUUMOタウン」「みんなのごはん」など人気メディアで活用されています。
とても自由度の高い良いサービスですが、お値段も相応でしょうし、個人事業主や自営業の方にはちょっと厳しいかもしれません。
そういうとき、はてなブログで手軽にビジネスサイトが構築できれば、ビジネスサイトやオウンドメディアを始めるきっかけに良いのではと思います。

まとめ

ここまで書いてなんですが、こんな面倒なことをするならWordPressでやれと自分でも思いますwでもはてなブログでずっとブログ書いてて離れたくない!というはてな愛の強い方には良いかもしれません。
ちなみにDEMOページのテーマは最近テーマストアに投稿されたid:codomisu さんの『Codomisu Flat』をインストールして使っています。
hitsuzi.hatenablog.com
フラットデザインでオシャレなテーマですので是非是非。スライダーの付け方も詳しく書いてくださっています。

カスタマイズサービスの宣伝

やっぱりよくわからない、自分でやるのは面倒くさいという方は有料のカスタマイズサービスもやっていますのでご依頼いただければ幸いです。
ブログカスタマイズ依頼
トップページの固定フロントページ化のお見積目安は10,000円~18,000円(トップページカスタマイズのみの場合)となります。

はてなブログのAMP用CSSを書くときの注意点

f:id:syofuso:20170610170544j:plain
はてなブログのAMP版のCSSを記述出来るようになりましたね。おかげで今までAMP対応を見送ってた方も見直してAMP対応始めた方も多いと思います。カスタマイズ依頼案件でもAMP対応を依頼されることが多くなりました。
基本的にはPC版のデザインCSSと同じように書けばよいのですが、AMP用CSSには制約があったり、元々デフォルトで指定されてるCSSがあるためうまく表示されないことがあります。

サイドバーの最新記事にリボンラベルを付ける方法【変数を用いた高度なカスタマイズ】

f:id:syofuso:20170610170627j:plain
先日はてなブログのサイドバーモジュールに新しい機能が追加されましたね。
staff.hatenablog.com
何か出来ないかなあと、カスタマイズを試してみました。

色々な表現が出来ると思うのですが、今回は以下の2点を取り入れたデザインを作ります。


サイドバーのカスタマイズ・サムネイルにリボン(帯)を付ける
・2列表示にする(段組み)
続きを読む

はてなブログのサイドバーに画像を貼り付ける方法

f:id:syofuso:20170610170910j:plain
最近Adobe CCを導入してIllustratorを使っています。なんだかんだ言って有料のソフトウェアは使いやすいですね。解説もネットに多いですし。
印刷物を作る機会が増えて、無料の画像編集ソフトでは限界がありましたが、Adobe CC導入して良かったです。まだ全然使いこなせてませんが…

続きを読む

数字表記におすすめのGoogle Font はてなブログの日付にどうぞ

f:id:syofuso:20170408210311j:plain
このブログではブログタイトルと日付にGoogle FontのJosefin Sansを指定しています。全体にWeb Fontを指定すると見出しやタイトルなど一部分にフォント指定すると、デザインのアクセントになりおすすめです。今回は日付の表示、数字の表示に最適なGoogle Fontについて書いていきます。

はてなブログテーマMinimal Greenでは日付は

    .entry-header .date {font-family: Helvetica, Arial, sans-serif;}

と指定しています。 Arialではこんな感じ。
f:id:syofuso:20170318171503p:plain
Helvetica, Arialもとても見やすいフォントなのでこのままでも良いんですが、ちょっとデザインを印象的に見せたい時にはディテールに変化を付けると良いと思うので、日付のデザインを変えてみましょう。