30代サラリーマン節約ブログ

貯蓄、節約、子育てに奮闘するサラリーマンブログ

MENU

【はてなブログ】コピペでふき出しを使い始めました。

おかげ様で読者数が200を越えました。

こんばんわ、しんふぁぶです。

 

f:id:shinfab:20190417145441j:plain
 

雑記ばかりが目立ってしまってますがそれでも読んで頂ける方がいる事は嬉しいですね。ありがとうございます。

 

登録して頂いている所を中心に足を運んでいるのですが

やはり皆さん色々とブログ初心者としては勉強になる事が多いです。

サブブログでは息子と娘をイメージして導入していましたが、今回メインでも導入したので紹介したいと思います。

 

 

 まずはふき出しに使用する画像から準備

 はてなフォトライフのマイフォト

f:id:shinfab:20190417150035j:plain

 

ふきだしに使用したい画像を選びます。

f:id:shinfab:20190417150119j:plain

 

 

画像アドレスをコピーして準備完了。

メモ帳に仮で置いておきます。

f:id:shinfab:20190417150135j:plain

 

コードはSHIROMAG様の所から使いました。

www.notitle-weblog.com

 

 

 

 

/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
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: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

 

 

 

 

ダッシュボード⇒デザイン⇒カスタマイズのデザインCSSの最後に貼り付け

f:id:shinfab:20190417150208j:plain

 

 

 

 

 

.クラス名::after {background-image:url(画像のURL);}

 

 クラス名は画像の種類が分かる単語が良いでしょうね。

追加する事も可能です。

 

 

使い方はHTML編集で

 

「 <p class="l-fuki クラス名">テキスト</p>」

 

を入れるだけです。

クラス名は先ほどの画像の単語、テキストはふき出し内の本文です。

f:id:shinfab:20190417150139j:plain



毎回打ち込むのも面倒なので自分はふき出し用の文章を下書きにしてます。
 

  

 

 

 

家族全員分のふき出しを作成しました。

 

しんふぁぶ

プロフィール画像でも使用しているのでわかりやすいと思います

 

息子

 サブブログで使用しています

 

同じくサブブログにて使用しています

 

なんで私だけ絵柄が違うの?

 

しんふぁぶ視点はこう見えるんよ

 

 

 

ふきだしがあると個人の気持ちがより強調出来るので便利ですね!

リライトにも使っていきたいと思います。

個人情報の保護について

「https://www.shinfab.work」(以下、当サイト)を利用される方は、以下に記載する諸条件に同意したものとみなします。

個人情報の収集について

利用者は匿名のままで、当サイトを自由に閲覧する事ができます。お問合せ等、場合によっては、利用者の氏名やメールアドレスなどの個人情報の開示をお願いする事があります。しかし、利用者の個人情報を利用者の許可なく、当サイトから第三者へ開示・共有する事はありません。

広告の配信について

当サイトはGoogle及びGoogleのパートナーウェブサイト(第三者配信事業者)の提供する広告を設置しております。その広告配信にはCookieを使用し、当サイトを含めた過去のアクセス情報に基づいて広告を配信します。 DoubleClick Cookie を使用することにより、GoogleやGoogleのパートナーは当サイトや他のサイトへのアクセス情報に基づいて、適切な広告を当サイト上でお客様に表示できます。 お客様はGoogleアカウントの広告設定ページで、パーソナライズ広告の掲載に使用される DoubleClick Cookie を無効にできます。また aboutads.info にアクセスして頂き、パーソナライズ広告の掲載に使用される第三者配信事業者のCookieを無効にできます。 その他、Googleの広告における、Cookieの取り扱いについての詳細は、Googleのポリシーと規約ページをご覧ください。

ウェブサーバの記録

当サイトのウェブサーバは、利用者のコンピュータのIPアドレスを自動的に収集・記録しますが、これらは利用者個人を特定するものではありません。利用者が自ら個人情報を開示しない限り、利用者は匿名のままで、当サイトを自由に閲覧する事ができます。

免責事項

利用者は、当サイトを閲覧し、その内容を参照した事によって何かしらの損害を被った場合でも、当サイト管理者は責任を負いません。また、当サイトからリンクされた、当サイト以外のウェブサイトの内容やサービスに関して、当サイトの個人情報の保護についての諸条件は適用されません。 当サイト以外のウェブサイトの内容及び、個人情報の保護に関しても、当サイト管理者は責任を負いません。

初出掲載:2019年1月14日