ひつじの雑記帳

身近な豆知識ネタからちょっとギークなプログラミングネタまで

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

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

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

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

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

Minimalism(ミニマリズム)の特徴

f:id:codomisu:20170618130726p:plain

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

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

デモサイトをCheck!

デザイン・見た目

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

PC

f:id:codomisu:20170618134639p:plain

タブレット

f:id:codomisu:20170618134831p:plain

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

f:id:codomisu:20170618133919p:plain

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

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

f:id:codomisu:20170618142149p:plain

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

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

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

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

f:id:codomisu:20170618144049p:plain

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

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

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

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

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

f:id:codomisu:20170618200835p:plain

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

ブログ名が全角(日本語)の場合

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

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

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

f:id:codomisu:20170618150620p:plain

このテーマには、

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

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

シェアボタンを設置する

f:id:codomisu:20170618145211p:plain

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

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

f:id:codomisu:20170618145438p:plain

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

見出しデザインについて

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

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

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

テーマ配布ページ

Minimalism - テーマ ストア

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

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

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

追記

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

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

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

f:id:codomisu:20180910125828p:plain設定→デザイン→デザイン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に要素を追加に以下のコードを追加する。

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

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

f:id:codomisu:20170607215906p:plain

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

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

 

 

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

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

 

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

 

 

デザイン完成図

f:id:codomisu:20170506080225p:plain

f:id:codomisu:20170506080241p:plain

f:id:codomisu:20170506080246p:plain

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

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

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

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

まず初めに

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

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

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

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

ヘッダー

f:id:codomisu:20170506080252p:plain

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

コードを挿入する場所

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

f:id:codomisu:20170506080300p:plain

スポンサードリンク

 

 

タイトル・ロゴ部分

タイトル・ロゴ

コードをみる

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

 

スライドメニュー部分

スライドメニュー

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

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

横スクロールナビゲーション

コードをみる

 

トグルメニュー部分

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

トグルメニュー

コードをみる

 

細いおすすめ記事ラベル

おすすめ記事ラベル

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

コードをみる

 

スライダー部分

スライダー部分

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

スポンサードリンク

 

コードをみる

記事一覧(トップページ)

記事一覧

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

コードをみる

記事ページ

記事ページ

コードを挿入する場所

コード挿入場所

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

 

タイトル周りの各種調整

各種調整

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

コードをみる

 

フラットなシェアボタン

シェアボタン

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

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

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

コードをみる

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

コードを見る

 

見出し3種

記事中の見出し

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

コードをみる
目次部分

目次

コードをみる

 

フッター

f:id:codomisu:20170506080521p:plain

コードを挿入する場所

コード挿入場所

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

不要な要素を全て非表示

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

コードをみる

 

フッターの見出し部分

フッターの見出し

コードをみる

 

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

フォローボタン

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

コードをみる

 

検索ボックス部分

検索ボックス

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

コードをみる

 

注目記事部分

注目記事

コードをみる

 

コードを挿入する場所

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

f:id:codomisu:20170506080622p:plain

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

フッター

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

スポンサードリンク

 

コードをみる

最後に

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

 

おわり。

 

 

追記情報

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

 

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

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

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

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

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

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

スポンサードリンク

 

 こどみすフラットの紹介

f:id:codomisu:20170422172702p:plain

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

このテーマの主な特徴

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

見た目

f:id:codomisu:20170422160533p:plain

f:id:codomisu:20170422160716p:plain

デモサイト

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

スポンサードリンク

 

使い方

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

f:id:codomisu:20170422163138p:plain

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

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

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

ヘッダー画像を設置

f:id:codomisu:20170422164242p:plain

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

スライダーを設置

f:id:codomisu:20170422164800p:plain

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

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

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

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

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

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

テーマ配布ページ

Codomisu Flat - テーマ ストア

追記

2017/05/01

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

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

関連記事

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

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

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

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

スポンサードリンク

 

 


1.

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

f:id:codomisu:20170407225400p:plain

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

f:id:codomisu:20170407192833p:plain

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

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

f:id:codomisu:20170408114607p:plain

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

 


2.

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

f:id:codomisu:20170407225410p:plain

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

f:id:codomisu:20170408122640p:plain

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

 


3.

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

f:id:codomisu:20170407225417p:plain

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

 


4.

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

f:id:codomisu:20170407232435p:plain

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

 


5.

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

f:id:codomisu:20170407224728p:plain

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

 


6.

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

f:id:codomisu:20170407233732p:plain

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

色が持つイメージの例

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


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


7.

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

f:id:codomisu:20170408000247p:plain

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

 


8.

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

f:id:codomisu:20170407230618p:plain

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

f:id:codomisu:20170408125625p:plain

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

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

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

 


9.

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

f:id:codomisu:20170408151210p:plain

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

f:id:codomisu:20170408143229p:plain

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


参考にした本

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

f:id:codomisu:20170330112917p:plain

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

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

スポンサードリンク

 

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

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

 

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

 

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

f:id:codomisu:20170329025550p:plain

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

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

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

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

導入方法

その1

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

その2

f:id:codomisu:20170330123314p:plain

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

これで導入は完了。

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

下記の基本コードのアニメーションの名前の部分、必要であればオプションの部分を書き換えて記事の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を進んだら動かす

スポンサードリンク

 

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

f:id:codomisu:20170330103933p:plain

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

基本コード

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

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

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

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

コピペする場所

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

f:id:codomisu:20170330123314p:plain

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

 

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

f:id:codomisu:20170330133200g:plain

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

 

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

f:id:codomisu:20170330134533g:plain

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

 

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

f:id:codomisu:20170330120110g:plain

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

 

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

f:id:codomisu:20170330140611g:plain

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

まとめ

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

 

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

関連記事

hitsuzi.hatenablog.com