はてなブログ 大見出し CSSカスタマイズ スマホにも対応 - きゅうりの王様
はてなブログ コードを使用したスマートフォン表示の不要な項目の削除方法 - きゅうりの王様
はてなブログ スマホページ カテゴリー一覧を自動生成するカスタマイズ - きゅうりの王様]
はてなブログ コードを使用したスマートフォン表示の不要な項目の削除方法 - きゅうりの王様
はてなブログ スマホページ カテゴリー一覧を自動生成するカスタマイズ - きゅうりの王様]
参考サイト
下記サイトを参考にさせてもらいました！
会話形式の吹き出し
いや〜、シロマティさんすごいっす。
先日もはてなブログのカスタマイズで参考にさせてもらいましたが、今回はかんたん会話の吹き出しカスタマイズを参考にさせてもらいました。
設定さえしておけば、あとは超かんたんに吹き出しの会話でブログを書くことができます。
幾つかの注意事項と複数人の会話もできるかなと思って追加でカスタマイズしました。
カスタマイズをする際の注意事項
必ず、PCとスマホで表示されるか確認して下さい。
デスクトップPC用CSSコード
下記のコードをデザイン→カスタマイズ→デザインCSSにコピペするのですが、コードの一番下にある項目は、ユーザー自身で書き換える必要あり。
/* 吹き出しの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;
}
}
.クラス名1::after {background-image:url(画像のURL);}
.クラス名2::after {background-image:url(画像のURL);}
スマホ用コード
下記のコードをデザイン→スマホカスタマイズ→ヘッダ→ページ下にコピペ。
デスクトップ用のコードの前と後ろに＜style type=“text/css＞〜</style＞と記述する。
<style type="text/css">
/* 吹き出しの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;
}
}
.クラス名1::after {background-image:url(画像のURL);}
.クラス名2::after {background-image:url(画像のURL);}
</style>
「画像のURL」はてなフォトライフに
シロマティさんの説明にもありましたが、吹き出しに使用する画像は「はてなフォトライフ」にアップロードしたのを使用した。
はてなフォトライフにアップロードした画像を選択すると右上に「リンク」という項目がある。
＜img src＞から始まる<http~png>のコードを"画像のURL"に入れる。
.クラス名1(sample1)::after {background-image:url(http://~.png);}
吹き出し会話の実際の使用方法
HTMLの直接編集での使用方法の紹介。
クラス名は使用しやすいようにわかりやすい英数字を入れておく。
「クラス名」を入れて、テキストのところが吹き出しになる。
<p class="l-fuki クラス名1">テキスト</p>
<p class="r-fuki クラス名2">テキスト</p>
「Markdown」や「はてな記法」でも下のタグを使える。 確認済み。
複数人での吹き出し会話
このコードはクラス名が重複しなければ、いくら増やしてもOK。
試しにキャラクターを4つ追加してみた。
危うく打つところでしたよ(⌒▽⌒)
気をつけてくださいよ
（＾◇＾）
お経をあげにきたのに無駄足でしたね（＾＿＾）☆
こっちの世界に来てくれると思ったのに(￣▽￣)
みたいな感じで複数人の会話もできる優れものです。
まとめ
以上、会話形式の吹き出しでした。
これを使ってもっと面白い記事をいっぱい作っていきます！！
カスタマイズは自己責任で行ってください。 何かトラブルが起きても責任は負い兼ねます。
との注意書きがありました。 もちろんです。
そして、これを参考にする方も自己責任でお願いします。