Bell Life USA

国際結婚・子育て中!アメリカ生活ブログ

移転しました。

約3秒後に自動的にリダイレクトします。

はてなブログでもできる!吹き出しブログのやり方!

f:id:bellmamakell:20190226233236p:plain



 

 HTMLをいじるだけで出来る!画像の貼り付けではなかった!初心者でも簡単(正直ちょっとだけ難しかった。でも、これに従えば大丈夫!)なやりかたをマスターしました!

 

 

目次はこちら

 

 

まずは吹き出し用のアイコンを作る

まずは、吹き出し用のアイコンを作ります。

いろんな人のブログなんかで見かけるこういうやつです。

 

これですね!

 

顔だしの人

自分の写真を丸く切り取ってCOOLに加工できるアプリなどをつかいます!

PCの人はソフトを使うみたいです。

顔だしNGの人

キャラクターや自作の絵、そのほかの写真を使います。

ちなみに、風景画等は印象に残りにくく、小さい画像では見にくいので適さないそうです!

実際使ったアプリ

play.google.com

これひとつでアイコン作成と写真の丸型加工が可能でした!無料です!

 

参考にしたブログ

www.zubora-tsuma.com

www.kininarumiyajin.com

ここでのポイントは
これから使うアイコンをあらかじめ複数作っておくことです!
私は、3つくらい作りました!家族の分です☆

作ったアイコンをはてなにアップロード

 それではいよいよ、作ったアイコンをブログに吹き出し付きで貼り付けたいと思います!

はてなに写真をアップロードするには

f:id:bellmamakell:20190225122451p:plain

1.ここをクリック!

f:id:bellmamakell:20190225122914p:plain

2.アップロードをクリック!

 

はてなフォトライフで編集・画像のURLコピー

f:id:bellmamakell:20190225122659p:plain

フォルダ編集をクリック!ここからは画像の情報を手に入れます

f:id:bellmamakell:20190225123505p:plain

取り入れたい画像の編集をクリックする!でてきた大きい画像をクリック!

f:id:bellmamakell:20190225123510p:plain

最終的に出てきた画像を右クリックで、画像のURLをコピーをクリック!

今気づきましたが、英語のパソコンでしかあまり参考にならないかも・・涙

吹き出しの設定をするよ!

いよいよ、画像と吹き出しを一緒に出すための最終プロセスです!

CSSを貼り付ける

f:id:bellmamakell:20190225125123p:plain

ここに、吹き出しとアイコンを出すためのCSSを貼り付けます!

(設定、デザイン、カスタム、CSSをペースト)の順です!
ここで、先ほどコピーしたURLをURLのところに貼り
自分で変えなければいけない部分を変えます!
変えなければいけない部分や、貼る付けるCSSは下記ブログが参考になります!
多くのブロガーがこのサイトを使っているみたいです!

 

参考にしたブログはこちら(CSSコピーできるよ)

www.notitle-weblog.com

吹き出しの枠を出すHTMLを設定する

これで、ブログ作成時にHTMLをいじくると、アイコンと吹き出しを出す準備が整いました!

ちなみに、私は<p class="r-fuki クラス名">言いたいこと</p>を使っています!

他にも使えるHTMLがあるみたいなのですが参考までに。

参考にしたブログがこちら

 

www.manmaru441.net

ふう、かなり難しかった・・HTMLを勉強しながら書くと楽しいけど大変なんだね!・・できてるかな?みなさんもできましたか??

しかもr-fukiのRをLに変えるだけでこんなことも!私ってHTMLの才能あるかも!w
次は、吹き出しではなくて、囲みの枠の中の言葉を勉強します!