シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。

※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。
※追記あり：デザインのアップデートについて+ 元のデザインに戻す方法

当ブログ「ひつじの雑記帳」を開設して間もなく、フラットデザイン風のおしゃれな自作テーマ「Codomisu Flat」を公開しました。

レイアウト的に少し扱いにくいテーマでしたが、思っていたよりたくさんの方に使ってもらえました。
力こそパワー　+ログ　ゼロから始めるビットコイン さんなど特におしゃれにカスタマイズされているので是非見てみてください。

あれから約2ヵ月経った今、オリジナルのはてなブログテーマ第二弾「Minimalism」を公開しました！

Minimalism（ミニマリズム）の特徴

このテーマは、テーマ名「Minimalism」にある通り、デザインは最小限のみに抑えてあり、「美」をとことん追求しました。

こどみすフラットとは違い、スマホ・タブレットにも対応した、レスポンシブ対応のテーマです。

デモサイトをCheck!

デザイン・見た目

PC・タブレット・スマホから見たそれぞれの「Minimalism」の見た目はこんな感じです。

PC

タブレット

スマートフォン・ミニタブレット

現存のレスポンシブテーマは、スマホからみると文字が少し大きすぎたり、若干バランスがおかしくいものが多いですが、当テーマは「モバイルファースト」に作られているので、スマホからみても本当にレスポンシブテーマなのかっ思われるくらいデザインが整っているかと思います。 

 十人十色  何色を選ぶかはあなた次第

当テーマは、ヘッダーの色を変えるだけでブログの雰囲気を一転できるように設計してあります。ベースはホワイトで出来ているため、基本的にどんな色でも合います。

テーマを導入したらまずやること

導入したら、まず以下のことをやってください。

レスポンシブデザインに設定する

デザイン→スマートフォン→詳細設定の「レスポンシブデザイン」にチェックをつけてください。PCとスマホを別々のデザインにしたいという方はやらなくてもOKです。

もしスマホ・タブレットで上手く表示されなかったら

レスポンシブデザインにチェックを入れても、スマホから見たときにPC表示のままだったり、上手く表示されない場合があります。

そんな時は、はてなブログの設定→詳細設定→headに要素を追加に以下のコードを追加してください。

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

はてなのPROに契約している方は、設定→詳細設定→トップページの表示形式(PC番)で一覧形式にチェックを入れます。

ブログ名が全角（日本語）の場合

ブログ名が全角（日本語）の場合、文字が大きすぎると感じる方も多いと思います。そんなときはデザイン→PC→デザインCSSに下記のコードを追加することで解決します。

上手く表示されたらテーマをカスタマイズしてみよう

ナビゲーションメニューを設置する

このテーマには、

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 で紹介したスライドメニューと同様のものが標準で用意されています。
デザイン→PC→ヘッダ→タイトル下に以下のコードを追加し、アイコンやURL等の任意の部分を書き換えてください。

アイコンにはFontAwesomeを使います。FontAwesomeの使い方が分からない方はこのサイトを参考にしてみてください。

シェアボタンを設置する

このテーマには、シェアボタンのスタイルが標準で記述されています。よって以下のコードをデザイン→PC→記事上・下に挿入するだけで、シェアボタンが完成します。

ヘッダーを好きな色に設定する

上で紹介したように、このテーマではヘッダーを好みの色に設定することができます。
設定するには、デザイン→PC→デザインCSS に以下のコードを追加します。

見出しデザインについて

当テーマはカスタマイズ性を考えて、敢えて見出しデザインをデフォルトのままにしてあります。自分好みの見出しデザインを選びましょう。

見出しデザインを選ぶ際はこちらのサイトが参考になります。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

テーマ配布ページ

Minimalism - テーマ ストア

カスタマイズの質問について

Minimalismに関するカスタマイズの質問ですが、諸事情によりお答えできないことが多くなってしまったためコメント欄自体を閉鎖しました。

大変ご迷惑をお掛けしますが、ご理解ご協力の程お願いいたします。

追記

2018/09/10 デザイン全体の修正及び調整

Minimalism全体のデザインの修正・調整作業を行いました。今回のアップデートによって今まで設定していたデザインが崩れてしまった方、以前のデザインに戻したい方向けに、以前のデザインに戻す方法を紹介します

アップデート前のデザインに戻す方法

• 手順1

設定→デザイン→デザインCSSの欄の

/* <system section="theme" selected="xxxxxxxxxxxxxxx"> */
@import url("https://blog.hatena.ne.jp/-/theme/xxxxxxxxxxxxxx.css");
/* </system> */

の部分を

@import url("https://codomisu.sakura.ne.jp/minimalism/old.css");

に変更する。(URLの部分も全て変更してください)

• 手順2.

はてなブログの設定→詳細設定→headに要素を追加に以下のコードを追加する。

以上の手順で、元のデザインに戻すことが可能です。

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集

※記事更新から1年以上が経っているため情報が古い可能性があります

当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。

投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。

そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。

当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。

デザイン完成図

使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢献してくれたりもします。

はてなブログ・スマホデザインの最強カスタマイズ集

さて、ここからは当ブログで実践している「はてなブログのスマホデザインを超おしゃれにする最強のカスタマイズ」を淡々と紹介していく。これから紹介する全てのコードはもちろんコピペOK。

ただ全部そのまま使うとこのブログと全く同じデザインになってしまうのでそこは注意です。

まず初めに

これから紹介するカスタマイズを適用する前に、FontAwesomeをブログに導入しましょう。

FontAwesomeを正しく導入しなければアイコンが正しく表示されません。

はてなブログにおけるFontAwesomeの導入方法については以下のサイトで分かりやすく紹介されているので、以下のサイトを参考に導入しましょう。

はてなブログでFont Awesomeを使う - MogHouse

ヘッダー

今回実装していくパーツで一番おしゃれで特徴的なのがこのヘッダー部分かもしれないですね。

コードを挿入する場所

ヘッダー部分のコードは全て デザイン→スマートフォン→ヘッダ→タイトル下に挿入していく。紹介する順番通りに下に追記していけば間違いないと思います。

スポンサードリンク

タイトル・ロゴ部分

コードをみる

背景色を変える際は24・41・55行目のカラーコードを変更すればOK。ロゴ画像が用意できない場合は5行目のimgタグを消してブログ名を記入すれば良いです。ただの文字でもそれなりの整った見た目になるようにしてあります。

スライドメニュー部分

WordPressのテーマでもよく見る横スクロール型のナビゲーション。

ただ、これだけではスライドできるのかどうか分からない人もいるのでページ更新時に自動ですこしだけスクロールさせて、気づかせるようにした。

コードをみる

トグルメニュー部分

タイトルの左のボタンを押すとメニューが開くようになっています。よくある横並びのメニューを採用しているのでスッキリとまとまった見た目になっているかと思います。
※メニューの数は偶数個でないと表示が崩れます。

コードをみる

細いおすすめ記事ラベル

メニュー下の細いラベル。おすすめの記事へのリンクやLINE@へのリンクを貼ったりするのに丁度いいです。

コードをみる

スライダー部分

よく教えてほしいと依頼がくるスライダー。実はこのスライダーは「bxSlider」というjQueryプラグインを使えば簡単に実装ができます。このブログではおすすめ記事の紹介ゾーンとして使っています。
もちろん下のコードをコピペするだけでも使えるが、その他、オプションによっていろいろ機能を設定ことができるので興味がある人はやってみるといいかもしれません。オプションについてはこちらの記事が参考になります。

スポンサードリンク

コードをみる

記事一覧（トップページ）

ヘッダー部分はここまでで、お次は記事一覧(トップページ)のカスタマイズ。タイトル・日付・サムネ・概要の文字の大きさや余白等を見やすいように最適化しています。

コードをみる

記事ページ

コードを挿入する場所

ここから紹介するコードは、デザイン→スマートフォン→記事→記事上(下)にコピペしていく。記事上に追加するか記事下に追加するかは適時指定していく。

タイトル周りの各種調整

デフォルトではタイトルの行間や文字の大きさがいまいちなので見やすいように調整する。

コードをみる

フラットなシェアボタン

フラットでシンプルなシェアボタン。LINEやGooglePlusのボタンも設置しているブログが多くあるが、それらのサービスに共有する場面は滅多にないので必要最低限のボタンのみにした。

※今のご時世fontタグなんて使う奴いるのかと自分でも思っているが面倒くさかったから使った。許して。

下記のコードを記事下+任意で記事上に挿入する。

コードをみる

下記のシェア数取得用スクリプトを記事下に挿入する。(必須)

コードを見る

見出し3種

お次は記事中の見出し。見出しデザインに関してもコピペするのは問題ありませんが、このサイトでたくさんの種類が見やすく紹介されているのでここで自分の好みにあった見出しデザインを探してみるのもいいかもしれません。

コードをみる

目次部分

コードをみる

フッター

コードを挿入する場所

ここから紹介するコードは、デザイン→スマートフォン→フッタ→ページャ下 に挿入していく。また、ヘッダーと同じように紹介する順番にコピペ(下に追加)していきます。

不要な要素を全て非表示

デフォルトの状態ではフッターにはてなへのリンクやダッシュボードなど不要なものがあるのでそれらを一気に非表示にする。今回はプロフィールの下にフォローボタンを入れたいのでプロフィールも消しておきます。

コードをみる

フッターの見出し部分

コードをみる

プロフィール・フォローボタン部分

デフォルトではプロフィールははてなの設定でしか弄れないが、ここではHTMLコードを後から追記しているので、名前も説明も自由に変更することができる。
フォローボタンは、フラットでちょっとオシャレに仕上げてみた。コピペする際には、コード中のリンク等はしっかりと記入してから使うことに注意です。

コードをみる

検索ボックス部分

検索ボックスの外枠の色を若干変えて太くする謎のこだわり。

コードをみる

注目記事部分

コードをみる

コードを挿入する場所

最後のフッターに関しては、デザイン→スマートフォン→フッタ→フッタに挿入する。

上へ戻るボタン&フッター

上へ戻るボタンは追尾のものを使っているブログをよく見るが、個人的にはこれで十分だと思っている。
フッターは背景色を変えて全体のデザインに合わせたスッキリとした見た目に。

スポンサードリンク

コードをみる

最後に

時間があまりとれず急いで書いたため見づらい点や、日本語がおかしな点・コードの記載ミスなどがあるかもしれないませんが。その際は適時コメントをしてくださると非常に助かります。

おわり。

追記情報

2017/05/05 23:55

• スライドメニュー部分の記述ミス・フォローボタン部分の記述し忘れを修正・追加しました。
• ブログタイトルを文字にした場合に文字色が変わってしまう現象を修正しました。
• トグルメニューを紹介する順序が間違っていたために、上手くメニューが開かないという現象が起きていました。トグルメニューはスライドメニュー(横スクロールのナビゲーション)のコードの後に追加するようにお願いします。
• トグルメニューのCSSコードに関して記述し忘れにより、文字が中央寄せされていなかったためコードを追加しました。

2017/05/06 1:43

• 目次の左に余白ができてしまう問題について修正コードを追記しました。

導入するだけではてなブログをオシャレにできるテーマ「Codomisu Flat」を公開しました。

※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。

このブログも開設してから約３週間が経ちました。今までずっと、はてなブログのオリジナルテーマを作ろうと思っていたのですが、忙しくて中々作れず公式のテーマを使用していました。

さすがに公式のテーマのままでやっていくのも限界を感じてきたため、3日ほど掛けてオリジナルテーマ「Codomisu Flat（こどみすフラット）」を作りました。
最初はこのブログ専用の非公開テーマにする予定でしたが、少し考えてみたところ、せっかく作ったものを独り占めするのは勿体ないという結論にいたったため公開することにしました。

個人的に、はてなブログはPCデザインとスマホデザインは分けた方が美しく表示できると考えているのもあって、当テーマはレスポンシブ非対応ですので注意してください。

ちなみに、はてなブログのスマホデザインのカスタマイズについては後日ひとつの記事にまとめて投稿するので気になる方は読者登録をお願いします。

スポンサードリンク

 こどみすフラットの紹介

前置きはここまでにして、ちゃちゃっとこのテーマについて紹介していこうと思います。

このテーマの主な特徴

• 昨今流行中のフラットデザインっぽい見た目
• 今までのテーマにはなかったタイトル横に並んだメニュー
• おすすめ記事をスライダーで表示（bxSliderを使用）

見た目

デモサイト

レスポンシブ非対応ですのでPCで閲覧してください。

スポンサードリンク

使い方

タイトル横にナビゲーションを設置

デザイン→カスタマイズ→ヘッダ→タイトル下 に下記のコードを設置します。もちろん、タイトルやURL等は自分のものに置き換えてください。

アイコンが上手く表示されない場合

設定→詳細設定→headに要素を追加 の欄に下記のコードを設置してください。

ヘッダー画像を設置

デザイン→カスタマイズ→ヘッダ→タイトル下 に下記のコードを設置します。タイトル、必要であればヘッダー画像のURLは自分のものに変えてください。

スライダーを設置

スライダーの設置にはbxSliderと呼ばれるライブラリを使用します。

まず、設定→詳細→headに要素を追加 の欄に下記のコードを追加します。

次に、デザイン→カスタマイズ→タイトル下 に下記のコードを追加します。

そして「ここに任意のコードを追加する」の欄に以下のフォーマットでリストを作り張り付けてください。
※張り付ける際は空白をすべて消した１行の状態にすること

その他のカスタマイズについて

当テーマの見出しデザイン・シェアボタンなどはデフォルトのデザインのままとなっています。もしカスタマイズした場合は、個人で自由に改変して使ってください。カスタマイズの紹介記事等を投稿することも許可します。いやどんどん投稿してください。ただし二次配布に関しては禁止とします。詳しくはテーマ配布ページに記載されているライセンス表記を参考にしてください。

テーマ配布ページ

Codomisu Flat - テーマ ストア

追記

2017/05/01

ブログタイトルを日本語(全角)にしている場合、若干下にズレてしまうことがあります。その際は、デザイン→カスタマイズ(PC)→デザインCSSの欄に下記のコードを追加してください。

また、人によってはヘッダー画像上の大タイトル・小タイトルが少し大きすぎるなと感じるかもしれません。その場合は同じ場所に下記のコードを追加して調節してみてください。

関連記事

コピペで簡単！アニメーションを使ってはてなブログを超おしゃれにするカスタマイズ術 - ひつじの雑記帳

全ての人が知っておくべき 見やすい資料をつくるための9つの黄金テクニック

スライドやポスターなどの資料作成において一番重要なものは「内容」です。しかし、それに並ぶくらい「デザイン・レイアウト」も重要となります。見づらいデザインのせいで、せっかく長時間かけて仕上げた資料が台無し...なんてことも十分にあり得ます。
あなたは読み手に優しい「見やすい資料」を作れているでしょうか？

今回は、全ての人が知っておくべき見やすい資料をつくるための9つの黄金テクニックを紹介します。これから紹介することは資料作成だけでなく、Webデザインにも応用できるはずです。ブログやサイトを運営している方もぜひ参考にしてみてください。

スポンサードリンク

---

1.

目線の動きを意識したZNの法則

レイアウトを構成する上で一番最初に考慮すべきものは「見やすさ」です。レイアウトをより見やすいものにするには「ZNの法則」を使うのが効果的です。

ZNの法則とは複数の要素やブロックを構成する上で、横書きのときは「Z」縦書きのときは「N」の順序に並べると見やすくなるというものです。これを使えば、どこをどの順序で読めばいいのかが自然な流れで分かるようになります。

矢印や番号を使うと尚良し

矢印や番号を用いると見る順序がより明確になります。ただし、多少デザインに干渉してしまうので使う場面には注意が必要になります。

---

2.

強弱をつけて読みやすくする

ポスターやスライドなどの資料をつくるときは、重要度に応じて文字や画像の大きさに強弱をつけるとよいでしょう。読み手にどこが大事なのかが直感的に伝わる上、デザインもスッキリして見やすくなります。 

また、強弱のつけ方には文字や画像の大きさのほかに「太さ」「色」「背景」などの手段もあります。

---

3.

適度な余白・行間を持たせる

スライド・ポスターなどのす資料からWebデザインまで、どんなものを作るにしても「余白(マージン)・行間」を十分に取りましょう。十分な余白や行間を取ることによって、読み手に優しいデザインに仕上がり、コンテンツをより引き立てることができます。
ただし、取りすぎても逆に見づらいデザインデザインになってしまうので注意が必要です。

---

4.

見えない線を常に意識する

レイアウトを構成する際、上下左右の「見えない線」を作ってみましょう。見えない線をつくり端をそろえるだけで、全体的にまとまった印象の美しいデザインをつくることができます。

---

5.

彩度の高すぎる色彩は使わない

原色や彩度の高すぎる色は主張の激しく、チープなデザインになってしまいがちで扱いが非常に難しいです。そのため、彩度は中~少し高いくらいの色を選ぶのが無難と言えます。色のチョイスに自信がないひとは、Color Huntを使うといいでしょう。センスのいいカラーパレットが毎日のようにアップされています。

---

6.

色が持つ意味を考えて使う

色はそれぞれ意味や効果、イメージを持っています。デザインでは「色数を減らす」ことも重要ですが、必要な場面でのみその制限を無視して色の特性を効果的に使っていくと、ワンランク上のデザインを作り上げることができます。

色が持つイメージの例

• 赤系の色...「情熱・高温・禁止・停止」
• 黄系の色...「緊張・注意・苛立ち」
• 緑系の色...「許可・安全・正常」

色がもつ意味やイメージについてもっと知りたい方は、色と意味の本 〜明日誰かに話したくなる色のはなしを読むのをおすすめします。デザイナーには必ず読んでもらいたい良本です。

---

7.

極端な大きさの文字を使ってみる

極端に文字を大きくして読み手にインパクトを与えるテクニック。フォントを「創英角ゴシック」などのゴシック系フォントにするとよりインパクトを演出することができます。
中途半端な大きさの文字からインパクトは生まれません。75px以上の「これでもか」というくらいの大きさがベスト。強く伝えたいメッセージがある場面で思い切って使ってみましょう。

---

8.

場面によって書体を使い分ける

資料をつくる上で「書体」はかなり重要な役割を果たしてきます。書体はそれぞれ「目的」があって作られています。

例えば「見やすい資料」に着目した場合は、筆書体・ポップ体は避け、明朝体・ゴッシク体を使うべきです。

豆知識 「フォントと書体の違い」

• 書体
  ある字形の特徴に基づいて分類されるもの
• フォント
  ある書体を表現した個々の製品

---

9.

グループ化を意識したレイアウト

「グループ化」を意識してレイアウトを構成すると、きれいにまとまった見やすい資料に仕上げることができます。グループ化の作業を通すだけで資料の見易さは見違えるほど向上します。

上で紹介した「余白」と「強弱」を上手くつかえばより見いものに仕上がります。グループ化をする際はできるかぎり「枠」を使わずに、余白と強弱でまとまりを表現しましょう。

---

参考にした本

• 伝わるデザインの基本-よい資料を作るためのレイアウトのルール
  社会人から学生まで非デザイナーも絶対に読んでおくべき、デザイン・レイアウトのにおける定番の本

• 一生使える見やすい資料のデザイン入門
  プレゼン資料に焦点を置いた本。スライド作成における細かいテクニックが網羅されている。

• 学生・研究者のための伝わる! 学会ポスターのデザイン術
  研究の発表等のポスター発表でのデザイン・レイアウトに特化した本。多くのレイアウト例が載っており、大学生にぜひ読んでもらいたい一冊。

コピペで簡単！アニメーションを使ってはてなブログを超おしゃれにするカスタマイズ術

今まで様々なブログを見てきて、はてなブログはWordPressのブログに比べてアニメーションを使っているものが少ないなと感じる場面が何度かありました。おそらく、「必要性を感じてないから使ってない」わけではなく、「やり方がわからないから使ってない」ひとがほとんどだと思います。場面によってアニメーションはものすごく重宝されるものであるのに、「知らないから」で済ませてしまうのはすごく勿体なく感じます。

そこで今回は、誰でも簡単に文字や画像にアニメーションをつける方法とアニメーションを使ったはてなブログの応用カスタマイズ例を紹介しようと思います。後者については、実践しているひとを滅多にみないので自分のブログにオリジナル性を出したいという方は是非参考にしてみてください。

スポンサードリンク

そもそもアニメーションとは

これといった説明は得にありません。

これがアニメーションです。

すでに導入しているブログもいくつかあると思いますが、見る人によってはとても新鮮なものだと思います。
もちろん、こんな風に画像にもアニメーションをつけることができます。

見ての通り、アニメーションひとつつけるだけでかなりのインパクトを出すことができます。

はてなブログで誰でも簡単にアニメーションをつける方法

普通、文字や画像にこのような動きをつけるには何十行ものコードを書かなければいけませんが、ネット上に公開されている「ライブラリ」を使えば、誰でも簡単に短いコードで実装することができるようになります。

今回使うのは、Animate.cssというアニメーションライブラリとwow.jsというアニメーションに細かい設定をすることができるライブラリ。結構有名なものなので聞いたことがある人もいるかもしれません。

導入方法

その１

設定→詳細設定→headに要素を追加 の欄に下記のコードを追記する。

その２

次に 設定→デザイン→スマホ→ヘッダ→タイトル下 に下記のコードを追記する。

これで導入は完了。

アニメーションをつける方法

下記の基本コードのアニメーションの名前の部分、必要であればオプションの部分を書き換えて記事のHTML編集の任意の場所に張り付けるだけでOKです。

アニメーション名一覧はAnimate.cssから、オプション一覧はwow.jsから確認できますが、所々見にくかったりするため下に見やすくまとめてみました。

アニメーション一覧

アニメーションに関しては種類が多すぎるため代表的なもののみ挙げています。

アニメーション名	動き
bounce	テストモーション
flash	テストモーション
pulse	テストモーション
rubberBand	テストモーション
shake	テストモーション
swing	テストモーション
tada	テストモーション
wobble	テストモーション
jello	テストモーション
bounceIn	テストモーション
bounceOut	テストモーション
fadeIn	テストモーション
fadeOut	テストモーション
flip	テストモーション
slideInUp	テストモーション
slideOutUp	テストモーション
zoomIn	テストモーション
zoomOut	テストモーション
hinge	テストモーション
rollIn	テストモーション
rollOut	テストモーション

オプション一覧

オプション	意味	記述例
data-wow-duration	動かす時間	data-wow-duration="2s"
data-wow-iteration	繰り返し回数	data-wow-iteration="10"
data-wow-delay	スクロールが要素に達してから動くまでの時間	data-wow-delay="5s"
data-wow-offset	スクロールが要素に達してから動くまでの距離	data-wow-offset="10"

複数のオプションを組み合わせて使いたいときは空白置きに記述すればOKです。

記述例

・スクロールが要素に達したら2秒後に5回動かす

HTML初心者さんのためにコピペで使えるサンプルコードもまとめてみました。

サンプルコード一覧

・ページ更新時に一回だけ動かす

・何度も繰り返し動かす

・ページ更新時に3秒かけて動かす

・動きを3回だけループさせる

・スクロールが要素に達してから3秒後に動かす

・スクロールが要素に達してから距離3を進んだら動かす

スポンサードリンク

アニメーションを使ってはてなブログをおしゃれにしてみよう

WordPressには、テーマ自体にアニメーションが施されたものがよくあります。有名どころでいえば「ハ〇ングバード」とかとか。カスタマイズに制限があるはてなブログではできないと思われがちですが、実はJQueryを使えば簡単に実装できてしまいます。上手く使えばWordPress顔負けのデザインにすることだって可能になるかもしれませんね。

基本コード

JQueryのaddClass関数を使います。これを使えば動的に要素にクラスを追加することができるようになります。具体的な使い方は以下の通り。

つまり、"追加するクラス" の部分に上で紹介したアニメーションを付加させるためのクラスを記述すればいいのです。ちなみに複数のクラスを追加させたいときは空白置きに記述すればOKです。

アニメーションを使った具体的なカスタマイズ例

多分使いどころとかあまりピンと来なかった方もいると思うので、コピペで実装できる、アニメーションをつかった具体的なカスタマイズ例を紹介していこうと思います。

コピペする場所

設定→デザイン→スマホ→ヘッダ→タイトル下 に以下のコードをコピペ。

コード中の「ここにコードを追加していく」の場所に、これから紹介する中の好みのものを張り付けていくだけOKです。

スクロールと同時に記事をフェードインさせる

スクロールと同時に記事が浮かび上がるようなアニメーション。

プロフィールを左からフェードイン

スクロールがプロフィールに達したらニックネームとはてなIDを左からフェードイン。

 記事タイトルにわずかな動きをつける

記事にアクセスするとタイトルが一度だけ鼓動するようなアニメーション。

記事中の画像をスライドダウンさせる

画像までスクロールすると、上から降りてくるようなアニメーション。

まとめ

以上、Animate.cssとwow.jsを用いたはてなブログでのアニメーションの使い方を紹介ました。うまく使えば、読み手により内容を伝えやすいものになったり、ブログそのものをオシャレに仕上げることができるようになるのでぜひ参考にしてみてくださいね！

追記 (2017/4/2 8:28)
wow.jsは商用利用のみ有料となったようですのでその辺は注意が必要になります。

関連記事

hitsuzi.hatenablog.com