【はてなブログ】会話を吹き出しにする方法★スマホで表示されない時の解決法

吹き出しにはしっぽが必要

今回のぷち野望🔥「会話を吹き出しにしたい」

会話を吹き出しにするぞ

他の方のブログを拝見していると、会話の部分が画像付きの吹き出しになっているのをたくさんみかけます。

わかりやすくていいなー。私もやりたい！

吹き出しより、ゲームの記事書いたら。

↑↑コレですね。

というわけで、夫のもっともなツッコミはいつものようにスルーして…私のこれまでのブログ記事の中で会話になっている部分を「吹き出し」にしてみることにしました♪

カスタマイズの前に！

初めてカスタマイズをされる方は、カスタマイズの前に注意事項の確認をお願いします☆⬇︎
 カスタマイズする前の注意事項!※カスタマイズ心得五か条※

はてなブログで会話を吹き出しにする方法

私はPCとiPadで記事を書いているのですが、今回のカスタマイズは「画像アドレスコピー」や「Chrome拡張機能」の面で、PCの方がやりやすいと思います。

私のようにiPadなどを使っている方もおられると思いますので、iPadでの方法もご紹介します☆

参考記事

こちらの記事を参考にさせていただきました☆⬇︎

www.notitle-weblog.com

大まかな手順は３STEP

1. キャラの画像を決める（画像アドレスコピー）
2. CSSコードを編集・コピペ
3. 「Chrome拡張機能」または「HTML編集」で作成

❶キャラの画像を決める（画像アドレスをコピー）

私は、プロフィール画像にも設定している「ツム顔」とIconponさんの「かぶりっこメーカー」で作ってみました。

可愛くて人気なので、使っておられる方も多いです☆⬇︎

www.iconpon.com

❶−１．まず、会話に登場させたいキャラなどの画像を「はてなフォトライフ」にアップロードします。 

「記事を書く」画面で「写真を投稿」した場合も「はてなフォトライフ」にアップロードされるので、すでに「マイフォト」のフォルダに画像があればそのまま使うことができます。

アップロードの方法は過去の記事参照⬇
画像をアップロード（❶−１〜８）

❶−２．「はてなフォトライフ」で画像を右クリックして「画像アドレスをコピー」して、メモ帳などにペーストしておきます。

アップロード完了直後に表示される画像でもアドレスコピーできます。

iPadなどで画像アドレスをコピーする方法

iPadなどでは画像アドレスをコピーすることができないので、「フォルダを編集」➡︎「画像を選択」➡︎「ブログに貼り付ける」で、展開された「HTMLタグ」の中にある画像のアドレス部分をコピーします。

詳しい手順は過去の記事参照⬇︎
画像のHTMLをコピペ（❸−１〜５）

HTMLタグ

<a href="https://f.hatena.ne.jp/otsum/20200314200818">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/otsum/20200314/20200314200818.png" alt="profile otsum 128px"></a>

最初の<a href=〜のアドレスではなく、次の<img src=〜のアドレス、マーカーを引いた部分

「https://cdn-ak.f.st-hatena.com/images/fotolife/o/otsum/20200314/20200314200818.png」

が画像のアドレスです。

❷CSSコードを編集・コピペ

❷−１．編集が必要な部分があるため、下記のリンクに掲載されているCSSコードを一旦メモ帳などにコピペします。 

 【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた | SHIROMAG

❷−２．必要な部分の編集をします。

編集が必要なのは、一番下のこの部分です。

CSS

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

「クラス名」に画像の名前などを入れ、「画像のURL」に先ほどコピーした画像のアドレスを入れます。

「クラス名」は、吹き出しにする度に書く必要があるので、登場キャラの短い名前をつけるのがおすすめです。

なお、クラス名の指定には決まりがあります。

・使用可能な文字：半角英数字・ハイフン（ – ）・アンダーバー（ _ ）
・最初の文字：アルファベット（数字や記号は不可）

私は、自分と夫の呼び名で作りました。

CSS

.otsum::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/o/otsum/20200314/20200314200818.png);}

.suke::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/o/otsum/20200228/20200228233144.png);}

クラス名を変えれば、いくつでも追加可能です。

❷−３．はてなブログ管理画面から「デザイン➡︎カスタマイズ（スパナアイコン）➡︎｛｝デザインCSS」に編集後のCSSをコピペ。

❸「Chrome拡張機能」または「HTML編集」で作成

今回使わせていただいている吹き出しのCSSを作ったシロマさんが開発された「Chrome拡張機能」がとても使いやすく、吹き出し以外の時にも多用しています。

特に、「h２タグ」「背景をグレーに」「書式を初期化」などはとても便利なので、「見たままモード」で記事を書いておられる方におすすめです。

ダウンロードがまだの方はこちらから⬇︎
Chrome Add-on for Hatena - Chrome ウェブストア

使い方の説明はこちら⬇︎
はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） | SHIROMAG

Chrome以外のブラウザを使っておられる方やiPadなどの方は、「Chrome拡張機能」が使えないので、「HTML編集」で作成します。

それぞれ分けて説明します。

⑴「Chrome拡張機能」を使う方法

⑵「HTML編集」を使う方法

⑴「Chrome拡張機能」を使う方法

「見たままモード」画面での方法です。

❸-⑴-①まず、吹き出しにしたいテキストを選択した状態にします。

❸-⑴-②ブラウザ右上のアイコンをクリックして、ポップアップを出します。

❸-⑴-③「クラス名を入力」の欄に入力します。

例：右吹き出しでクラス名otsumの場合

入力欄

r-fuki otsum

※「r-fuki」と「otsum」（クラス名）の間は半角スペース

❸-⑴-④「Add Class」ボタンをクリック。（またはEnterキー）

「見たままモード」画面では変化がわかりませんが、「プレビュー」で見るとこのようになります。⬇︎

わかりやすくていいなー。私もやりたい！

【入力例】

「左:画像、右:吹き出し、クラス名:suke」

入力欄

r-fuki suke

みぎ（right）に吹き出しは「r-fuki」

「右:画像、左:吹き出し、クラス名:otsum」

入力欄

l-fuki otsum

ひだり（left）に吹き出しは「l-fuki」

⑵「HTML編集」を使う方法

「HTML編集モード」画面での方法です。

HTMLコードを下記のように記述

HTML

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

※「r-fuki」と「クラス名」の間は半角スペース

【記述例】

「左:画像、右:吹き出し、クラス名:otsum」

HTML

<p class="r-fuki otsum">画像の「みぎ側」に吹き出し</p>

画像の「みぎ側」に吹き出し

「右:画像、左:吹き出し、クラス名:suke」

HTML

<p class="l-fuki suke">画像の「ひだり側」に吹き出し</p>

画像の「ひだり側」に吹き出し

吹き出しで漫才も！

おかんが、最近お気に入りのブロガーの名前忘れたらしいねん。

どんなブロガーか特徴言うてみて。

おかんが言うには、ゲーム実況ユーチューバーになる野望を抱く、ものぐさ主婦らしいねん。

そら、おつむやないかい。

そう思うねんけど、おかんが言うには、読者がぎょうさんおるインフルエンサーらしいねん。

ほな、おつむちがうかー。
おつむの読者は４人やし、世間に何の影響も与えてへんからなー。

このHTMLは下記のようになっています。

HTML

<p class="r-fuki suke">おかんが、最近お気に入りのブロガーの名前忘れたらしいねん。</p>
<p class="l-fuki otsum">どんなブロガーか特徴言うてみて。</p>
<p class="r-fuki suke">おかんが言うには、ゲーム実況ユーチューバーになる野望を抱く、ものぐさ主婦らしいねん。</p>
<p class="l-fuki otsum">そら、おつむやないかい。</p>
<p class="r-fuki suke">そう思うねんけど、おかんが言うには、読者がぎょうさんおるインフルエンサーらしいねん。</p>
<p class="l-fuki otsum">ほな、おつむちがうかー。<br />おつむの読者は４人やし、世間に何の影響も与えてへんからなー。</p>

注意事項

先ほどの最後のセリフのように、「吹き出し内で改行」する場合は、「Enter」キーではなく、「Shift＋Enter」キーを使ってください。HTML編集では「<br />」と記述。

「Enter」キーを使うと、別の吹き出しができてしまいます。

また、吹き出し内のテキストの装飾（太字・文字色変更など）も可能ですが、装飾済みのテキストを選択してChrome拡張機能を使って吹き出しにした場合、吹き出し以外の書式がリセットされてしまいます。

ですので、装飾は、吹き出しにした後に行ってください。

スマホの設定

スマホでの表示をレスポンシブに設定していない場合は、以下の設定が必要です。

「デザイン➡︎スマートフォン➡︎ヘッダ➡︎タイトル下」または、

「デザイン➡︎スマートフォン➡︎記事➡︎記事下」

のどちらかにCSSを記述します。

<style>〜</style>で囲ってその間にCSSを記述

CSS

<style>
この中にCSS
</style>

スマホでうまく表示されない場合の解決法

私はいまだにiPhone SEの第１世代を使っています。

最近出た第２世代ではなく、古いほうですね。笑

はじめ、参考にさせていただいたCSSをそのままコピペしたところ…

iPhone SE画面（左:縦、右:横）

縦向きだと、吹き出しとテキストは表示されているけど白い丸が見えているだけで画像が表示されておらず、横向きにすると画像も表示されることから、

「幅」の設定が関係しているのではと思い…

iPhone SEの画面サイズを調べて、画面の最小幅を指定するCSSの部分を「478px」から「320px」に変更してみたところ、ちゃんと画像も表示されました☆

CSS

@media screen and (min-width:  320px)

iPhone SE縦画面

これで、じゃんじゃん吹き出し使えるで〜

使いすぎは「うざい」らしいよ。

・・・・・・。

皆さんも、ぜひ使ってみてくださいね♪

会話を吹き出しに変更してみた記事を一部ご紹介

otsum.com

otsum.com

★今回の成果★

おつむは、ぷち野望🔥「会話を吹き出しにしたい」を叶えた！

🔙前回のぷち野望🔥「ディズニーランドに行きたいPart. 5」

otsum.com

【はてなブログ】コピペで簡単!画像を角丸にする方法★画像一つに複数デザイン設定可

おつむ愛用ツム顔メーカー

今回のぷち野望🔥「画像を角丸にしたい」

カスタマイズの前に！

初めてカスタマイズをされる方は、カスタマイズの前に注意事項の確認をお願いします☆⬇︎
 カスタマイズする前の注意事項!※カスタマイズ心得五か条※

画像は大きくなったけど…

前回、プロフィール画像の表示サイズを大きくすることに成功しました。↑↑

前回の関連記事はこちら⬇

otsum.com

でも…画像は大きくなったけど、角丸になってない…

デフォルトのプロフィール画像は角丸になってるのに…

角丸にしたい!!

というわけで、角丸にしてみました♪

画像を角丸にする方法

コード例はいろいろあるようですが、シンプルで簡単なものにしました。

参考記事

こちらの記事を参考にさせていただきました☆⬇︎

www.web-officer.com

基本の手順は２STEP

1. CSSをコピペ（最初の一度のみ）
2. 画像のHTMLに「class="effect"」を追加（使う時その都度）

❶CSSをコピペ

はてなブログ管理画面から「デザイン」⇒「カスタマイズ（スパナアイコン）」と進み、「｛｝デザインCSS」に下記のCSSをコピペ。

CSS

/* 画像を角丸に */
.effect {
border-radius:15px;
}

参考：「15px」の部分の数値を大きくするほど角が丸くなります。

★「/* 画像を角丸に */」（コメントアウト）の部分も一緒にコピペしておくと、デザインの内容がわかりやすいのでおすすめです。

❷画像のHTMLに「class="effect"」を追加

角丸にしたい画像のHTMLに「class="effect"」を追加。

HTML

<img src="images/sample.jpg"class="effect">

今回の手順

前回、プロフィール画像として既にHTMLをペーストしているので、

「プロフィール」の「編集」を開き、①ペーストしてあるHTMLに「class="effect"」を追加 ②「適用」③「変更を保存する」

できあがり！⬇︎

無事、プロフィール画像が角丸になりました☆

「角丸」と言えば、事務の仕事でテプラを使う時よく角丸にしてたなーと思い出しました。

ウィーン…カチャッっていうカットする音がなんとも心地いいんですよねー♪

補足

他の画像も角丸にしてみようと思ったら、既に別のclassが指定されていました！
(>_<)

こういう場合はどうすればいいのか検索したところ、答えが見つかりましたので補足します☆

複数指定可

画像に既にclassが指定されている場合でも、複数指定が可能なので大丈夫です！

方法は、

「半角スペースを空けてclass名を複数記述するだけ」です。

参考記事

こちらの記事を参考にさせていただきました☆⬇︎

beginners-high.com

はてなフォトライフの例

例えば、はてなブログの編集サイドバーの「写真を投稿」機能から画像をアップロードして貼り付けたものを「HTML編集」で見ると、「class="hatena-fotolife"」となっています。

この指定があることによって、

①画像をポイントした時(マウスオーバー時)に画像の周りにグレーの影が現れて画像が浮き上がったようになり、

②クリック(タップ)した時に元のサイズの画像がポップアップで開く(元のサイズが貼り付けたサイズより大きい場合は拡大される)

ことはわかったのですが、別の効果も設定されているのかはわかりません！
（またわかりましたらお伝えします…。）

…で、この画像を角丸にしたい場合、先ほどのclass名「effect」を半角スペースを空けて追加すればOKです。

HTML

class="hatena-fotolife effect"

※コロン（ , ）やカンマ（ . ）では区切らない。

これで、ポップアップもする角丸の画像ができました☆

クリック(タップ)してみてください♪

⇊

ちなみに、一応、指定できる数に制限はないようです。

★今回の成果★

おつむは、ぷち野望🔥「画像を角丸にしたい」を叶えた！

🔜次回のぷち野望🔥「ディズニーランドに行きたいPart. 4」

otsum.com

🔙前回のぷち野望🔥「ディズニーランドに行きたいPart. 3」

otsum.com

【はてなブログ】プロフィール画像を大きく表示できる!★画像サイズ変更方法

今回のぷち野望🔥「プロフィール画像を大きく表示したい」

カスタマイズの前に！

初めてカスタマイズをされる方は、カスタマイズの前に注意事項の確認をお願いします☆⬇︎
カスタマイズする前の注意事項!※カスタマイズ心得五か条※

通常の設定方法

皆さんご存じのとおり、プロフィール画像は「アカウント設定」の「基本設定」の中にある「プロフィール画像」で簡単に設定できます。

最近、「もっと、（信長の）野望っぽい画像にしたい」と思って通常のこの方法で変えてみました♪
(ブログタイトルのパロディ元ですね。笑）

プロフィール画像のサイズと画質がイマイチ…

…で、以前の画像の時も気になっていたのですが、

サイドバーに表示されるプロフィール画像が、サイドバーの横幅に対してだいぶ小さい。

しかもなんかぼやけてるし…。むう。

デフォルトのプロフィール画像のサイズは、たぶん64×64ピクセルぐらいですね。

ぼやけるのは、自動的にリサイズされることが原因のようです。

というわけで、プロフィール画像が大きく表示されるようにサイズを変更してみることにしました♪

はてなブログプロフィール画像表示サイズ変更方法

検索すると、求めているそのものズバリの方法がみつかりました！

参考記事

こちらの記事を参考にさせていただきました☆⬇︎

buono-buono.net

私の行った手順

私はPCとiPadで記事を書いているのですが、今回iPadで試してみましたのでその方法をご紹介します。

おおまかな手順は３STEP

1. 画像をアップロード
2. 画像のサイズ等編集
3. 画像のHTMLをコピペ

❶画像をアップロード

画像を「はてなフォトライフ」にアップロードします。
（「記事を書く」画面で「写真を投稿」した場合も「はてなフォトライフ」にアップロードされます。）

❶－１．ヘッダにある小さい四角が並んでいる部分（利用中のサービス）をタップ。

❶－２．展開される項目の中の「はてなフォトライフ」をタップ。

下記の方法でも「はてなフォトライフ」を表示できます。

（１．Hatena Blogのヘッダ右端にある「Hatena」をタップ。）

（ ２．左サイドの項目の中にある「フォトライフ」をタップ。）

❶－３．はてなフォトライフが表示されたら、

Hatena Fotolifeヘッダにある「アップロード」をタップ。

❶－４．フォルダは、「Hatena Blog」（公開設定：自分のみ）を選択。

（他のフォルダでもアップロードできるのですが、今回はこちらのフォルダで説明します。公開設定等、フォルダについての詳細はまた記事にする予定です。）

❶－５．破線枠の中をタップ。

❶－６．「フォトライブラリ」をタップ。

❶－７．①画像を選択（複数選択可）して、②「完了」をタップ。

❶－８．下に画像が全部表示されたら、アップロード完了。

❷画像のサイズ等編集

「はてなフォトライフ」で画像のサイズ等を編集します。

❷－１．右上の「フォルダを編集」をタップ。

❷－２．新しくアップロードした画像が先頭に表示されているので、画像をタップ。

❷－３．「選択」、「編集」という項目が表示されるので、まず右の「編集」をタップ。

❷－４．①任意の「タイトル」を入力（空欄でも可）、②「画像サイズ」で希望の大きさにピクセル（長辺）を変更し、③左下の「この内容に変更する」をタップ。

★私は、長辺を通常サイズ64ピクセルの2倍の長さの128ピクセルにしてみました(大きさは4倍になる)が、もう少し大きくてもいいかもしれません。お好みでどうぞ。

プロフィール画像用でサイズもわかるように「profile otsum 128px」とタイトルを付けました。

❸画像のHTMLをコピペ

画像のHTMLをコピー・編集・ペーストし、デフォルトのプロフィール画像が表示されないよう設定します。

❸－１．「写真を編集しました。」というメッセージの下にサイズ変更後の画像とタイトルが表示されるので、

右上の「フォルダを編集」をタップ。

❸－２．サイズ変更後の画像が先頭に表示されているので、画像をタップ。

（隣の画像は編集前の元の画像）

❸－３．「選択」、「編集」という項目が表示されるので、次は左の「選択」をタップ。

❸－４．チェックが入った状態で、すぐ上にある「▼ブログに貼り付ける」をタップ。

❸－５．展開された「HTML」を全てコピー。

❸－6．編集が必要な部分があるため、一旦メモ帳などにペースト。

重要

HTMLの先頭にある <a href=”https://～“> の下線部分は、プロフィール画像をタップした時のリンク先を表しており、このままだと「はてなフォトライフ」のページに飛んでしまうため、この部分を「https://自分のブログURL/about」に変更して自分のaboutページに飛ぶようにする必要があります。

（通常の方法でプロフィール画像を設定した場合は、自動的にaboutページに飛ぶようになっています。）

❸－７．①リンク先を自分のaboutページに変更したら、②HTMLの先頭から最後まで（<a ～ </a>）枠内全てコピー。

❸－８．はてなブログ管理画面①「デザイン」⇒②「カスタマイズ（スパナアイコン）」⇒③「サイドバー」と進み、④「プロフィール」の「編集」をタップ。 

❸－９．①コピーした編集後のHTMLを「自己紹介」の枠内にペースト、②「プロフィール画像」の「表示する」のチェックをはずし、③「適用」をタップ。

（すでに自己紹介文が入っている場合は、その上か下の表示させたい位置にペースト。）

★私は、自己紹介文の上に画像が表示されるように、上にペーストしました。

❸－１０．画面左上の「変更を保存する」をタップ。

できあがり！⬇︎

サイズ変更前⬇︎

これで、ひそかにゲームのコントローラーを持っているのもわかるようになったかな⁉
（この形・色は、スーファミですね。www）

画像をタップしたら、ちゃんとaboutページに飛びました♪

でも…画像は大きくなったけど、角丸になってない…

角丸にしたい!!

というわけで、次のカスタマイズで「画像を角丸に」する方法をご紹介したいと思います♪

otsum.com

★今回の成果★

おつむは、ぷち野望🔥「プロフィール画像を大きく表示したい」を叶えた！

🔜次回のぷち野望🔥「ディズニーランドに行きたいPart. 3」

otsum.com

🔙前回のぷち野望🔥「ブログをカスタマイズしたい」

otsum.com

【はてなブログ】カスタマイズ集★注意事項も※カスタマイズ心得五か条※

2020-03-21

おつむ愛用ツム顔メーカー

今回のぷち野望🔥「ブログをカスタマイズしたい」

カスタマイズするぞ

カスタマイズより記事書いたら。

という夫の指摘はいつものようにスルーして…。

私は、自他ともに認める「形から入るタイプ」です！

せっかく記事を書くなら、やっぱり読んでくださる方が見やすいようにしたいですよね♪

「ユーザビリティ」ってやつです☆

まあ、ほぼ自己満足ですが。笑

やりすぎ注意です★

というわけで、さっそくカスタマイズに挑戦するで～♪

…の前に、

カスタマイズする前の注意事項！

私もプログラミングのことはさっぱりわからず、仕組みをしっかり理解しているわけではないのですが…。

まず大前提として、私が失敗から学んだことも含め、皆さんが注意喚起しておられることをお伝えしておきます。

※カスタマイズ心得※

「～カスタマイズ心得五か条～」

一、カスタマイズは自己責任で！
当サイト及び当サイトで紹介した他のサイトに記載の情報によってトラブルが生じても両運営者共に責任を負いかねます。

二、バックアップをとっておく
カスタマイズ前(現在の設定）のコード記述欄の内容全てをメモ帳などに保存しておくと、不具合が生じた場合に元に戻せる。
（カスタマイズごとに「コードを追加した日付」「コード参照元」「追加した欄」「デザインの内容」「コード自体」などをメモしておくのもおススメ。）

三、追加するコードは一旦メモ帳などにコピペ
書き換えの必要がある部分は、メモ帳などで編集してからペーストすること。
（コード記述欄では編集しにくい上、誤って他のコードを消してしまう可能性もあり。）

四、ペーストする位置も重要
ペーストする位置によっては他の設定がくずれたり反映されなくなる可能性あり。
うまくいかない場合は、ペーストする位置を変えてみよう。
（コードが指定する内容が競合する場合、複雑な優先順位があるが、強いコードが勝つ。同じ強さなら下の行のコードが勝つ。）

五、プレビューは、PCとスマホでそれぞれ確認
スマホで見てる人多いです。

※追記※最初に記事を書いた時点では誤解している部分がありましたので、修正しました。
（2020年3月19日）

カスタマイズ計画

すでにちょこちょこカスタマイズしており、うまくいったものもあれば反映されないもの、失敗したものもあります。

いろいろと試行錯誤していますので、その過程をご紹介していきたいと思っています☆

カスタマイズリスト

記事に掲載済みのものには、リンクを貼っています。

掲載済み

otsum.com

otsum.com

otsum.com

予定リスト

☑️プロフィール画像の表示サイズ変更
☑️画像を角丸に
☑️会話を吹き出しに
★サイドバーにHTMLモジュール追加
★目次デザイン変更
★リンク文字色設定
★ブログタイトルデザイン変更
★見出し詳細設定
★記事タイトル背景色変更
★引用デザイン変更
★トップページをカード型に
★aboutページ内の表示変更
★ページャの表示を左右逆に
★読者になるボタンデザイン変更
★ソーシャルボタンデザイン変更
★パンくずリスト設定
★ページトップへ戻るボタン設置
★斜体表示を蛍光ペン風に
★グローバルナビゲーション設置
★ボトムナビゲーション設置
★「トップ」を「ホーム」に変更

etc…

結構ありますね。笑

「こんなのあったらいいなー」

「このブロガーさんのこれいいなー」

って感じで、あれこれ取り入れたくなっちゃうんですよね
(๑˃̵ᴗ˂̵)

でも、ちょっとずつ良くなっていると思うので、今の状態は結構気に入っています♪

まだまだ手を加えたり直したいところはたくさんありますが。www

今後、記事にしたものはリンクを貼っていく予定です☆

というわけで、次回の記事では「プロフィール画像の表示サイズ変更」方法をご紹介したいと思います♪

★今回の成果★

おつむは、ぷち野望🔥「ブログをカスタマイズしたい」を叶えていく予定！

🔜次回のぷち野望🔥「プロフィール画像を大きく表示したい」

otsum.com

🔙前回のぷち野望🔥「ディズニーランドに行きたいPart. 2」

otsum.com