どうも、やまたつです。
本日は「ブログのデザイン」、つまりCSSやHTMLという部類になります。
お陰様で、やまブロを定期更新し続けて、早5ヶ月程。
徐々にではありますが、アクセス数も伸びてきて、やりがいをさらに感じられます！
ありがとうございます！
そこで、もっと、「皆さんから愛されるブログにしたい！」「読みやすくて分かりやすい内容にしたい！」という想いが出てきました。
ただ、文字ばかりを書いていてはダメです。
読み手をしっかり意識して、記事内容に見あった画像を選んでみたり、見出しを上手く利用して段階的に説明をしていくことこそ、ブロガー、私やまたつ自身の使命でもあります。
実際にホームページを新しくしました。
白と黒を基調としたデザインで、シンプルさを意識してみました。
(リンク載せてますので、新しくなったホームページ是非見てみてください。)
他にも色々と自分なりに考え、自分のスキル向上の為にも、この記事を書きながらOutputさせて頂こうと思います。
前置きが長くなりましたが、今回は、"ブログの中にキャラクターを登場させる"方法をご紹介致します。
簡単ですので、是非最後まで共に頑張りましょう！！
はじめましての方以外は、既にお気づきとは思いますが、いつものブログと違う箇所ありましたよね笑
そう、一番初めの、「どうも、やまたつです。」がキャラクターによる吹き出しにしてみました。(もちろん、これからはこれでいきますよ)
これって、本当に簡単なの！？
うん、もちろん。おっと、その前に初登場なんだから自己紹介を(笑)
あ、皆さん初めまして、見習いの"えいと"と言います！
たまに見習いのえいと君が登場するので、皆さんよろしくお願いします！
はい、こんな感じで会話を成立させるためにはもう一人登場人物が必要ですね笑
では、実際にどうやって実現できるのか一緒にステップを踏んでいきましょう！
[ステップ1]キャラクターのアイコンを決める
まずは、キャラクターを決めましょう。
なかなか、自分の素顔を載せる人はいないと思いますが。。笑
なので、自分に似たアバターや、今ではネットにフリー素材として色々と画像があります。
自分は使用してませんが、「かぶりっこメーカー」はおすすめです。
そして、使用したいキャラクターが決まったら(ダウンロードしたら)、「はなてフォトライフ」に画像をアップします。
ステップ1-1：メニューから「はてなフォトライフ」を選択
ステップ1-2：「旧アップローダーはこちら」を選択
ステップ1-3：オプションにてフォルダを「Hatena Blog」にする
ステップ1-4：実際に画像をアップロードする
ステップ1-5：Hatena Blogフォルダを選択
先に上の「フォルダを編集」をクリックすると出てくると思います。
ステップ1-6：アップロードした画像のアドレスを取得する
対象の画像上で右クリック→画像アドレスのコピー
※後で使うので一旦、メモかどこかに貼り付けておいてください
[ステップ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(画像アドレス);}
※下箇所は自分で変更する必要があります
キャラクタ名：先頭の文字はアルファベットである必要があります(数字は不可)
画像アドレス：先ほど、ステップ1-6で取得したもの
現状は、キャラクターが1人のみ追加できるコードになってますが、一番下の".キャラクタ名::after {background-image:url(画像アドレス);}"を複数行追加することでキャラクターを追加することが可能なのです。
めちゃくちゃ便利ですよね。
自分でも出来そうです！
それは良かった！もう少し出来るから頑張ろう！
[ステップ3]最後にブログ上でキャラクターの吹き出しを作成してみよう！
皆さんここまで、お疲れ様です。
ようやく、最後にステップですよ！
実際にブログ上で表示させます。
以下のHTMLコードがベースになります
<p class="l-fuki キャラクター名">テキスト</p>
l-fuki：これはどちらの方向に吹き出しを出したいかを決める部分です。
キャラクターが左で吹き出しを右に表示させたい時は、right(右)で"r-fuki"、逆にキャラクターが右で吹き出しを左に表示させたい時、left(左)で"l-fuki"とします。
キャラクター名：ステップ2で設定したアルファベットから始める文字列です。
自分はyamatatsuとしてますね。(画像アドレスと名前がリンクしているので、キャラクター名を指定することで、その画像を引っ張ってくることが可能になります)
テキスト：吹き出しに表示させたい文字です。(こんにちはやこんばんわなど)
HTMLコードの説明としてはこんな感じです。
そして、このHTMLコードを、「HTML編集」に貼り付けましょう。
あとは、上で説明したように自分にあった内容に修正するだけです。
なるほど！面白い！
じゃ、最後に例題でおさらいしてみよう！
例題
条件
"見習いのえいとくん"で"左側"から"出来ました！"と表示
分かりました！自分がやってみます！
お、いいね！お願いしよう。
・
・
・
・(えいとくん、挑戦中)
・
・
・
出来ました！。
合格！！！
やった！出来るようになるって嬉しい！
その感覚とても大事だから、忘れないようにね！(笑) でも、こっちはやまたつの場所だから元に戻って欲しいなぁ...
失礼しました...戻りました💦
って感じになります笑
どうでしょうか？みなさんも、もし出来たら、是非ブックマークよろしくお願い致します！
これから、やまたつ自身、どんどんブログのスキルを向上させていき、皆さんにとって楽しいブログを作り上げたいと考えてます！
最後に、やまブロ＜YAMATATSUBLOG＞をよろしくお願いします！
以上、やまたつでした！笑 次回もお楽しみに^ ^
