トップ > ブログカスタマイズ > はてなブログ無料版: トップページを魅力的にカスタマイズする方法⑧
最終更新日

はてなブログ無料版: トップページを魅力的にカスタマイズする方法⑧

ブログカスタマイズ TOPページ はてなブログ Webデザイン ブログ管理

⑧ブログ名周りの装飾と
タイピングアニメーション

はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの８回目です。

以下、今回の内容となります。

  • Typed.jsライブラリを利用したタイピングアニメーションの実装
  • タイトル部分の装飾に関するカスタマイズ

Typed.jsは、テキストをタイピングするように表示するJavaScriptライブラリです。これを使用すると、文字が一文字ずつアニメーションされるように表示され、まるで誰かがキーボードを使って入力しているかのような効果を得ることができます。

affordable design product
https://pixabay.com/users/geralt-9301/

振り返り

はてなブログ無料版でトップページをカスタマイズする方法について、これまで以下の内容を紹介して参りました。

① 基本設定、見出しの装飾、コンタクトへのリンクボタン
② Animate.cssによるスライドアニメーションとホバー効果1
③ Animate.cssによるスライドアニメーションとホバー効果2
④ Flickityによるカルーセルスライダーの導入
⑤ Animate.cssを使ったフリップアニメーションとポートフォリオのディスプレイ
⑥ GSAPによるカルーセルの実装
⑦ カウントアップアニメーション


引き続き、トップページのカスタマイズについて、今回はブログ名のテキストや背景画像の装飾と、タイピングアニメーションに関するカスタマイズを紹介します。

トップページのデモ

デモページを見る

今回のカスタマイズ部分

デモページを見る

カスタマイズのポイント

以下、主な演出部分です。

  • 背景画像にマスク画像をかぶせ、矢印を想起させる形状に加工
  • Typed.jsライブラリを用いた、人がタイピングしているようなアニメーション効果
  • 背景画像下部に、マウスホイールのスクロール操作を連想させるアニメーション効果

ライブラリのCDN

以下のCDNコードをheadなどに配置することによって、それぞれのライブラリが利用可能になります。CDNとは、Content Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。

Typed.js

<script src="//unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

cdnjs.com

jQuery

<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>

Font Awesome

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">


Typed.jsはタイピングアニメーション、jQueryはJavaScriptコードの簡素化に利用しています。

ソースコード

HTMLの構造

コードはこちら（GitHubサイトへ）

コードの解説

以下、HTMLコードの詳細な解説です：

解説が開きます

<section>
  <div class="fix-back-image"></div>
  <div class="welcome">
    <p>メッセージ</p>
    <div class="header-logo-desc">
      <span>タイピングの見出し</span>
      <span class="typed-cursor"></span>
    </div>
    <ul id="social">
      <!-- ソーシャルメディアのリンク一覧 -->
    </ul>
  </div>
  <span class="pointer"></span>
</section>

  1. <section>: セクションの開始タグ

  2. <div class="fix-back-image">: 背景画像を表示するためのdiv要素。具体的なスタイルや画像はCSSで指定されています。Typed.jsやカーソルの、タイピングアニメーションには直接影響のない箇所です。

  3. <div class="welcome">: ウェルカムメッセージとその他の要素を含むdiv要素

    • <p>: "メッセージ"と表示されるテキストを包む段落要素
    • <div class="header-logo-desc">: タイピングアニメーションと見出しを包むdiv要素
      • <span>: "タイピングの見出し"と表示されるテキストを包むインライン要素
      • <span class="typed-cursor"></span>: Typed.jsによって生成される、テキスト右のカーソル要素。このカーソルがテキストの右端に表示され、アニメーションの一部として点滅します。
    • <ul id="social">: ソーシャルメディアのリンク一覧を表示するための、順序なし（<ol>）リスト。省略した部分には各ソーシャルメディアのリンク要素が入ります。

  4. <span class="pointer"></span>: マウスドラッグをイメージした、ポインタアニメーションを表示するための要素。Typed.jsやカーソルの、タイピングアニメーションには直接影響のない箇所です。

以上が、Typed.jsとその他の要素が組み合わさって構成されたHTMLコードの主要な部分です。Typed.jsによって生成されるテキストおよび右のカーソルは、Typed.jsの内部ロジックによって制御されています。

CSSスタイル

コードはこちら（GitHubサイトへ）

コードの解説

以下にCSSコードをコード内表記を交えて、詳細に解説します：

解説が開きます

  1. 全体のコンテナ要素と背景画像:
* { box-sizing: border-box }

全ての要素に対してボックスモデルを指定。box-sizing: border-box;は、要素の幅や高さがボーダーやパディングを含む形で計算されるようにするためのものです。

div.fix-back-image {
    background: url(背景画像のＵＲＬ);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(2px) brightness(.6);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 99%;
}

.fix-back-imageクラスのdiv要素に関するスタイル。背景画像を全画面に表示し、ぼかし効果と明るさの調整（filter: blur(2px) brightness(.6)）を加えています。

div#blog-title-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: url(マスク用画像のＵＲＬ) no-repeat center;
    right: 0;
    background-size: cover;
    z-index: 1;
}

#blog-title-innerIDを持つdiv要素の後に疑似要素::afterがあります。この疑似要素は、背景画像の下部を矢印のような形状に見せるためのマスク画像のためのものです。

div.welcome {
    position: absolute;
    top: calc(50% - 100px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    line-height: 1.4em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 50px;
    font-family: 'Righteous';
}

.welcomeクラスのdiv要素に対するスタイル。この要素はウェルカムメッセージを表示し、位置やスタイルを指定しています。

.welcome>p {
    margin: 0;
}

.welcomeクラス内のp要素に関するスタイル。余白0に設定

  1. タイピングアニメーションの要素:
.header-logo-desc {
    width: calc(100vw - 20px);
    font-size: .5em;
    font-family: Montserrat;
}

.header-logo-descクラスに関するスタイルです。幅やフォントサイズを指定しています。 ここの要素内でTyped.jsと連携し、タイピングアニメーションが構成されます。

.header-logo-desc p {
    display: inline-block;
    margin: 0 0 0 20px;
}

.header-logo-descクラス内のp要素に関するスタイル。要素を横並びにして左側に余白を持たせています。

display: inline-blockは、display: inlineとdisplay: block双方の利点を活かせるプロパティ値です。

saruwakakun.com

.header-logo-desc span {
    color: #ffbd2f;
}

.header-logo-descクラス内のspan要素に関するスタイル。文字色を指定

  1. SNSアイコン要素:
#social {
    margin: 0;
    display: inline-flex;
}

#socialIDを持つ要素に関するスタイル。マージン0に設定し、インラインフレックスボックスとして表示

#social li {
    display: inline-block;
    padding: .05em;
}

#socialID内のli要素に関するスタイル。要素をインラインブロックとして表示し、少量のパディングを追加

#social a {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 100%;  /* 要素を円形に */
}

#socialID内のa要素に関するスタイル。要素をブロック要素として表示し、固定の幅・高さやフォントサイズ、ボーダーなどを指定

#social a:before {
    font-family: 'font awesome 6 brands';
    font-weight: 400;
}

#socialID内のa要素のbefore疑似要素に関するスタイル。Font Awesomeを指定

#social .twitter {
    background: #00aced;
}

#social .twitter:before {
    content: "\f099";
}

#socialID内の.twitterクラスに関するスタイル。

同様に、他のソーシャルメディアのアイコンにも対応するスタイルが続きます。これによって各ソーシャルメディアのアイコンが適切にスタイリングされます。

#social a:hover {
    color: #ffbd2f;
}

#socialID内のa要素にホバー時のスタイルを指定し、文字色を変更

  1. マウスポインタ―のアニメーション:
span.pointer {
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: 1.8em;
    height: 2.8em;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: .9em;
}

マウスをイメージした.pointerクラスのspan要素に関するスタイル。位置やサイズ、ボーダーなどを指定

span.pointer::after {
    content: '';
    position: absolute;
    top: .4em;
    left: 50%;
    width: .24em;
    height: .24em;
    margin-left: -.12em;
    border-radius: 50%;
    background-color: #fff;
    animation: scroll 1.5s -1s cubic-bezier(.68, -.55, .265, 1.55) infinite;
}

.pointerクラスspan要素のafter疑似要素に関するスタイル。ポインタの先端に表示されるアニメーション効果（マウスホイールをイメージ）を指定

@keyframes scroll {
    10% {
        transform: translateY(0) scaleY(1.2) scaleX(1.2) translateZ(0);
        opacity: 1;
    }

    100% {
        transform: translateY(20px) scaleY(2.5) scaleX(.5) translateZ(0);
        opacity: .01;
    }
}

scrollアニメーションに関するキーフレームを定義。ポインタが10%から100%までの間で変化するアニメーションを指定

  1. ブログタイトル要素:

ここから下は、デフォルトで設定されたはてなブログのブログタイトルのclass要素です。

header#blog-title {
    height: 100vh;
}

header#blog-titleセレクタに関するスタイル。ヘッダータイトル領域の高さをビューポートの100%に設定

h1#title {
    position: absolute;
    z-index: 1;
    top: calc(25% - 60px);
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: .07em;
    font-family: 'Marcellus';
    font-weight: 500;
    text-shadow: 1px 2px 2px rgb(0, 0, 0, .9);
}

h1#titleセレクタに関するスタイル。タイトルテキストの位置や影、文字間隔、フォントなどを指定。ここのclassネームも、はてなブログのデフォルト要素です。

h1#title a {
    color: #fff;
}

h1#titleセレクタ内のアンカーリンクに関するスタイル。アンカーリンクの文字色を指定

h1#title>a::after {
    content: '';
    width: 50px;
    height: .3em;
    display: block;
    margin: .2em auto;
    border-radius: 2.5px;
    background: #a5f430;
    box-shadow: 0px 1px 2px rgb(24, 41, 67);
}

h1#titleセレクタ内、アンカーリンクのafter疑似要素に関するスタイル。アンカーリンクテキストにアンダーラインを引いています。

h2#blog-description {
    position: absolute;
    z-index: 1;
    top: calc(25% - 15px);
    left: 50%;
    transform: translateX(-50%);
}

h2#blog-descriptionセレクタに関するスタイル。ブログの説明部分です。

各要素は大きく「背景画像」、「ブログタイトル」、「メッセージ」、「タイピングアニメーション」、「ソーシャルアイコン」、「マウスポインタ―のアニメーション」という６つのブロックで構成されています。

JavaScript

コードはこちら（GitHubサイトへ）

コードの解説

このJavaScriptコードは、jQueryとTyped.jsを使用して、ページにタイピングアニメーションを追加するためのものです。以下に、各部分の詳細な解説を行います：

解説が開きます

$(document).ready(function() {
  /* 中略 */
});

この部分は、jQueryを使用してドキュメントが読み込まれたときに実行される関数を定義しています。$(document).readyは、HTMLドキュメントの読み込みが完了したときに関数内のコードが実行されることを保証します。

var typed = new Typed('.header-logo-desc p', {
  strings: ["テキスト１", "テキスト２"],
  typeSpeed: 35,
  backSpeed: 35,
  backDelay: 2000,
  startDelay: 1000,
  loop: true
});
  • var typed = new Typed('.header-logo-desc p', {…}): {…}内で指定するオプションで新しいTypedオブジェクトを作成し、.header-logo-desc pに対してタイピングアニメーションを適用します。

具体的には、以下のオプションを指定しています：

  • strings: 表示するテキストの配列。クォーテーションマーク（"）でテキスト要素を囲い、カンマ（,）で区切って繋げます。
  • typeSpeed: タイピングの速さ（ミリ秒）
  • backSpeed: バックスペースの速さ（ミリ秒）
  • backDelay: テキストを全て表示した後、バックスペースが始まるまでの遅延時間（ミリ秒）
  • startDelay: アニメーションが開始されるまでの遅延時間（ミリ秒）
  • loop: アニメーションをループさせるかどうか。（true、false）

これにより、指定された文字列が順番にタイピングされ、バックスペースされることが繰り返されます。

このコードはウェブページにおしゃれでダイナミックなタイピングアニメーションを追加するためのものであり、ユーザーに対して視覚的な魅力を提供する役割を果たします。

アレンジ

Typed.jsオプションのバリエーション

Typed.jsのオプションに以下のプロパティを追加することにより、それぞれの表示を指定した値に変更することができます。

var typed = new Typed('.header-logo-desc p', {
/*前略*/
  strings: ["テキスト ^1000 テキスト"]  // タイピングの途中に停止する時間を追加
  cursorChar: "[]",  // 点滅するカーソル文字を変更できる
  contentType: 'text'  // テキストをhtmlかtextか指定
/*前略*/
});
  • ^1000: 単位はミリ秒
  • cursorChar: デフォルト値は「|」
  • contentType: 値が「html」の場合、文字列内に<strong>、<br>などHTMLの記述が可能です。ただデフォルト値がhtmlなので、敢えて追加して指定する機会は少ないかもしれません。


github.com

おさらい

コードのまとめ

  • Typed.js CDN: <script src="//unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
  • jQuery CDN: <script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
  • Font Awesome CDN: <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  • HTML: （GitHubサイトへ）
  • CSS: （GitHubサイトへ）
  • JavaScript: （GitHubサイトへ）

おわりに

以上、ブログ名周りの装飾について、とくにTyped.jsライブラリを利用したタイピングアニメーションに焦点を当て、解説しました。これらのテクニックを取り入れることで、ブログやサイトのビジュアル体験を向上させ、読者との魅力的なインタラクションを築くことができます。

今後のブログ運営において、より魅力的でユーザーフレンドリーなページを作り上げる一助となれば幸いです。

次回も引き続き、トップページのカスタマイズを紹介します(^^♪

これまでの記事

はてなブログ無料版: トップページを魅力的にカスタマイズする方法

① 基本設定、見出しの装飾、コンタクトへのリンクボタン
② Animate.cssによるスライドアニメーションとホバー効果1
③ Animate.cssによるスライドアニメーションとホバー効果2
④ Flickityによるカルーセルスライダーの導入
⑤ Animate.cssを使ったフリップアニメーションとポートフォリオのディスプレイ
⑥ GSAPによるカルーセルの実装
⑦ カウントアップアニメーション