ブログの見栄えをもう少し上げたいって思うときない？
あります。人気のブログと私のブログでは見栄えが全然違います。特に会話形式で記事が書かれているものは凄く読みやすいなって思います。
あーわかるわかる。確かにブログの見栄えが悪いと、読む気にすらならないよね。君もやってみればいいんじゃない？
えーでも難しそう。。。山下さん、教えてくださいよ。
ははは。実はとても簡単にできるんだ。猿でも、いや君でもできるんじゃないかな。
とまあ、上のような感じで吹き出しをつけて会話形式にすると、ブログっぽくて見栄えがいいですよね？
今回私は他の解説ブログで勉強させていただいたので、それを見て実施した内容を記録しておこうと思います。
本当に簡単にできました。
参考にしたブログは以下のものになります。
(助かりました！！！)
手順1.はてなフォトライフを開く
マイページの右上の正方形が9分割されているデザインのところにマウスをスクロールし、「はてなフォトライブ」をクリックします。
手順2.画像をアップロードする。
画面右上に「アップロード」というところがあるのでクリックすると上のような画面になります。
ここで、会話する人物画像2人をアップロードします。
アップロードが終わるとこんな感じになります。
画像のところで右クリックし、画像のURLを控えておきます。
手順3.CSSコードを貼り付けます。
ここに以下のコードを追加します。
ただし、注意しておくことは、いま2人を設定しているので2人の画像を呼び出すときの名前とURLだけ変更しておいてください。変更箇所は一番下の赤字部分です。
.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;
}
}
.1人目の名前::after {background-image:url(1人目の画像URL);}
.2人目の名前::after {background-image:url(2人目の画像URL);}
手順4.記事の「HTML編集」でコードを入力します。
左側に表示する場合
<p class="l-fuki 1人目の名前">書きたいこと</p>
書きたいこと
右側に表示する場合
<p class="r-fuki 1人目の名前">書きたいこと</p>
書きたいこと
下のコマンドで可能です。
<p class="左側なら「l」(エル)右側なら「r」-fuki 1人目の名前">書きたいこと</p>
めっちゃ簡単！！！これぐらいできなきゃ猿以下だね！！！。
