ブログにキャラクターを登場させたい！ | はてなブログ版

どうも、やまたつです。

本日は「ブログのデザイン」、つまりCSSやHTMLという部類になります。

f:id:HBByamatatsu:20210328161614p:plain

お陰様で、やまブロを定期更新し続けて、早5ヶ月程。

徐々にではありますが、アクセス数も伸びてきて、やりがいをさらに感じられます！

ありがとうございます！

そこで、もっと、「皆さんから愛されるブログにしたい！」「読みやすくて分かりやすい内容にしたい！」という想いが出てきました。

ただ、文字ばかりを書いていてはダメです。

読み手をしっかり意識して、記事内容に見あった画像を選んでみたり、見出しを上手く利用して段階的に説明をしていくことこそ、ブロガー、私やまたつ自身の使命でもあります。

実際にホームページを新しくしました。

白と黒を基調としたデザインで、シンプルさを意識してみました。

(リンク載せてますので、新しくなったホームページ是非見てみてください。)

他にも色々と自分なりに考え、自分のスキル向上の為にも、この記事を書きながらOutputさせて頂こうと思います。

前置きが長くなりましたが、今回は、"ブログの中にキャラクターを登場させる"方法をご紹介致します。

簡単ですので、是非最後まで共に頑張りましょう！！

はじめましての方以外は、既にお気づきとは思いますが、いつものブログと違う箇所ありましたよね笑

そう、一番初めの、「どうも、やまたつです。」がキャラクターによる吹き出しにしてみました。(もちろん、これからはこれでいきますよ)

これって、本当に簡単なの！？

うん、もちろん。おっと、その前に初登場なんだから自己紹介を(笑)

あ、皆さん初めまして、見習いの"えいと"と言います！

たまに見習いのえいと君が登場するので、皆さんよろしくお願いします！

はい、こんな感じで会話を成立させるためにはもう一人登場人物が必要ですね笑

では、実際にどうやって実現できるのか一緒にステップを踏んでいきましょう！

[ステップ1]キャラクターのアイコンを決める
[ステップ2]CSSコードをコピペ
[ステップ3]最後にブログ上でキャラクターの吹き出しを作成してみよう！
- 例題
  - 条件

[ステップ1]キャラクターのアイコンを決める

まずは、キャラクターを決めましょう。

なかなか、自分の素顔を載せる人はいないと思いますが。。笑

なので、自分に似たアバターや、今ではネットにフリー素材として色々と画像があります。

自分は使用してませんが、「かぶりっこメーカー」はおすすめです。

www.iconpon.com

そして、使用したいキャラクターが決まったら(ダウンロードしたら)、「はなてフォトライフ」に画像をアップします。

ステップ1-1：メニューから「はてなフォトライフ」を選択

f:id:HBByamatatsu:20210328172700j:plain

ステップ1-2：「旧アップローダーはこちら」を選択

f:id:HBByamatatsu:20210328172850j:plain

ステップ1-3：オプションにてフォルダを「Hatena Blog」にする

f:id:HBByamatatsu:20210328172953j:plain

ステップ1-4：実際に画像をアップロードする

f:id:HBByamatatsu:20210328173052j:plain

ステップ1-5：Hatena Blogフォルダを選択

先に上の「フォルダを編集」をクリックすると出てくると思います。

f:id:HBByamatatsu:20210328173144j:plain

ステップ1-6：アップロードした画像のアドレスを取得する

対象の画像上で右クリック→画像アドレスのコピー

※後で使うので一旦、メモかどこかに貼り付けておいてください

f:id:HBByamatatsu:20210328173314j:plain

[ステップ2]CSSコードをコピペ

以下のCSSコードを、「デザイン」→「カスタマイズ」→「{} デザインCSS」コピペしてください。

※このコードはやまたつが書いたものではありません(ネットに公開されております)

/* 吹き出し */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% - 82px);
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #ddd;
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
background-color: #fff;
z-index: 1;
box-sizing: border-box;
}
.entry-content .l-fuki {
margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 60px;
height: 60px;
top: -6px;
border-radius: 50%;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
box-sizing: border-box;
}
.entry-content .l-fuki::after {
right: -82px;
}
.entry-content .r-fuki::after {
left: -82px;
}
@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 80px;
height: 80px;
}
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}
.キャラクタ名::after {background-image:url(画像アドレス);}