このブログの内容
bloggerのテーマZELOで吹き出しを使いたい
吹き出しというのは、これですね↓
引用：文系VBプログラマーのIT教育
- bloggerでWebアイコンフォントを使用したい：テーマZELO
URL：https://bunkeivbpgmama.blogspot.com/2023/02/bloggericonfont.html
このブログでも使っているbloggerのテーマZELOでは吹き出しが設定されています。
ですので簡単に吹き出しを利用することができますよ！
さっそくやりかたを紹介しますね。
吹き出しを設定しよう
吹き出しを記事に出すコードを確認します。
コードの確認
まずは吹き出しのコードを確認しましょう。
テーマをHTMLを編集で開き、コード部分をクリックします。
キーボードの「Ctrl」と「F」を押すと、検索窓が表示されます。
検索窓に「フキダシ」と入れましょう。
下記のようなコードが表示されます。
これが吹き出しを設定しているコードになります！
「.entry-content」というのは、ブログ記事を指しています。
「.f-l」と「.f-r」が吹き出しのことです。
それぞれ「.f-l」は吹き出しが左向き(left)、「.f-r」は吹き出しが右向き(right)を表します。
「.entry-content .f-l」はブログ記事内の吹き出し、という意味になります。
左向きの吹き出しと右向きの吹き出しについて、デザインをCSSで設定しているのですね！
私のブログでは色とサイズを変更したりしています。
ひとまずここではデザインはこのまま使ってみましょう！
記事にコードを書いてみよう
ブログ記事の中に吹き出しを出す方法は、簡単です。
「.f-l」と「.f-r」を<div class=" ">のclassに指定してあげればいいのです。
<div class="f-r">
吹き出しが右向きに出るよ
</div>
<div class="f-l">
吹き出しが左向きに出るよ
</div>
実行することうなります。
めっちゃ簡単！！！
ちなみに画像の位置はここになりますね。
画像欲しいね！！！
画像を設定しよう
そうです、画像を出すことができます！
まずはアイコン画像をご用意くださいね！
画像を未公開ページに貼る
画像をページを使ってbloggerにアップします。
あとで使うのでページは公開せずに、いったん閉じます。
後ほど使う際は、画像リンクだけをコピーします。
画像リンクはグレーの部分です。
長いです！
コードを確認
アイコンが用意出来たら、テーマのHTMLを編集です。
最初に確認しておいた、「フキダシ」のコードを開きましょう。
「フキダシ」のコードの一番下に、画像設定コードがあります。
ここです。
ここに画像を設定します。
では早速使ってみましょう！
テーマのコードを直す
「後で使う文字」の部分を、任意の分かりやすい文字に変えます。
半角小文字です。先頭に数字は駄目です。
例えば私のブログでは、「myicon-nikori」とか、「nezumiicon-shock」とかにして、
どんな画像かを分かりやすくしていますよ！
nikoriはsmileとかの方がセンスがいいですよね、分かってますよ←
nezumiはmouseとかの方がセンスがいいですよね、分かってますよ、ﾊﾊﾊ←
でもね、コードを書くのは自分なので、自分が覚えやすく書きやすいのをお勧めしますよ！
こんな感じにします。
.myicon-nikori::after {background-image:url(画像URL);}
前にあるドット「.」や後ろのコロン「::」も必要なものなのでつけておいてくださいね。
次に画像URLのところに、画像を設定します。
これを複数コピーして「myicon-nikori」の部分と「画像URL」の部分を変えたら、複数の画像が使えますよ！
記事のコードを直す
実際の記事で画像を出してみましょう！
「f-l」や「f-r」の後ろに、半角スペースをはさんで「myicon-nikori」と書きます。
<div class="f-r myicon-nikori">
吹き出しが右向きに出るよ
</div>
実行してみよう！
できた！
「f-l」もやってみてね！
ぜひ複数画像も用意して、ブログを楽しくしてみましょう！
おわりに
お友達のあまえちゃんというのは、私が参加しているオンラインサロン「SUNidea」のメンバーで、
私の講座を受けてbloggerを始めてくれたあまえさんです。
SUNideaの公式Webサイトはコチラです。
引用：あまえがたり コスパ良く機嫌よく暮らす
URL：https://cospa-and-mood-good.blogspot.com/
とても楽しく読めるし、ためになる内容ばかりだし、ぜひ一度読んでみてください！
しかも毎日更新されてて、
現在（2023/4/7）で15日目！
いや、すごい、ほんとに。
軽快な書き出しで引き込まれちゃう！
↓
【自分を褒める】たった1000円で自己肯定感が爆上がりする方法
ブログの最後にはお勧め本も！
↓
中村憲剛さんのレッスンでの教えが、人生でも役に立つ
ゆる～い記事も楽しいよ♪
↓
「ごきげんよう」のお話し
何を隠そう、あまえさんがこんなに頑張ってブログを書いてくださっているのに、
吹き出しの使い方も教えてあげられていないポンコツ講師は私でして、
あまえさんのために、この記事をささげなければ！と重い腰をあげたわけです。
お待たせしてごめんね。
やっと書いたよ！
皆さんのbloggerブログで画像吹き出しができたら教えてね！
無料で自由なbloggerを楽しみましょう！
0 件のコメント :
コメントを投稿