犬猿の仲❓5歳差姉弟の子育て日記

性格の正反対な高1娘(犬❓)と小5息子(猿❓)を飼育中(笑)子供のことや学校、料理のことなど誰かの参考になったら嬉しいなぁと思うことを書いて行きたいと思います♪

広告

はてなブログに吹き出しをスマホで簡単カスタマイズできました♪

今年のGWからブログを書き始めて100日が経ちました。

実は今まで2度挫折した経験があるのですが、3度目の今回は毎日投稿を続けることができていて、私事ですが成長を感じます(笑)

 

けれどもPCに疎いこともあり、単調にしか書けていませんでしたので、やはりブログに可愛げも面白味もなく気になっていました。

なので、ここでもう一度テンションを上げる為、前々から憧れていた吹き出しにトライしたいと腰を上げました。

そんな私が検索し試行錯誤しながらも、無事吹き出しを使えるようになったので紹介したいと思います。

f:id:tetsutylor:20210810161949j:image

作るに当たって参考にさせてもらったのが、このあやぞうさんのブログ。

mamazakki.hatenablog.com

 

分かりやすく、本当に助かりました。

あやぞうさん、ありがとうございました♪

あやぞうさんのブログを見て進める上で、スマホでアイコン画像を作成した私が困った事、更に工夫したことを紹介したいと思います。

 

上記あやぞうさんのブログでは、「アイコン画像はフォトライフにアップロード」と書かれていたのですが、スマホでアイコン画像を作成した私には分かりにくく苦労しました。

 

likecatdogmonkey.hatenablog.com

  

けれども、PCでフォトライフを触らなくても、スマホでも簡単にアイコン画像をアップロードでき、PCは最後に少し触る程度で吹き出しCSSにアイコン画像URLを貼り付けられたのでその方法を紹介したいと思います。

 

前回、吹き出しと一緒に使うアイコン画像を手軽にスマホでかぶりっこメーカーを使って作りましたので、今回はその簡単なアップロード方法とそのURLの貼り付け方法を紹介します。

 

  1. スマホで作成したアイコン画像を
  2. スマホ(iPhone)に保存し
  3. スマホのはてなブログアプリから
  4. 新規記事作成を開いて
  5. カメラマークから先ほどのアイコン画像を呼び出し
  6. 下書きを更新する
  7. PCで上記記事を開きアイコン画像の上で右クリック→画像リンクをコピー
  8. CSSコード内の「画像のURL」を入れる所に貼り付ける
  9. その際、画像を貼り付けるか、URLを貼り付けるか聞かれるのでURLを選ぶ

 

上記のようにすると簡単にアイコン画像のURLを貼り付けることができました。

これならアイコン画像作成からの作業の大半を、PCの使えない外出先や電車の移動時などの空き時間・すき間時間でも、手軽で簡単にスマホで進められます♪

 

吹き出しCSSはあやぞうさんのブログで紹介されているものを使わせてもらい「画像のURL」を入れるところに私の入れたいアイコン画像のURLを貼り付けました。

 

「クラス名」(=任意で付けた画像の名前)と「画像URL」のところだけ書き換え、そのCSSコードをコピーしデザインCSSのところに貼り付けるだけなので本当に簡単でした。

こんなことなら早くやっておけばよかったと思ったのですが、これからアイコン&吹き出しを自由に使える喜びの方が大きく、今からどういう風に使うか楽しく考え楽しく研究していこうと思います。

 


 

広告

プライバシーポリシー お問い合わせ