はてなブログでもできる!吹き出しブログのやり方!
HTMLをいじるだけで出来る!画像の貼り付けではなかった!初心者でも簡単(正直ちょっとだけ難しかった。でも、これに従えば大丈夫!)なやりかたをマスターしました!
目次はこちら
まずは吹き出し用のアイコンを作る
まずは、吹き出し用のアイコンを作ります。
いろんな人のブログなんかで見かけるこういうやつです。
これですね!
顔だしの人
自分の写真を丸く切り取ってCOOLに加工できるアプリなどをつかいます!
PCの人はソフトを使うみたいです。
顔だしNGの人
キャラクターや自作の絵、そのほかの写真を使います。
ちなみに、風景画等は印象に残りにくく、小さい画像では見にくいので適さないそうです!
実際使ったアプリ
これひとつでアイコン作成と写真の丸型加工が可能でした!無料です!
参考にしたブログ
ここでのポイントは
これから使うアイコンをあらかじめ複数作っておくことです!
私は、3つくらい作りました!家族の分です☆
作ったアイコンをはてなにアップロード
それではいよいよ、作ったアイコンをブログに吹き出し付きで貼り付けたいと思います!
はてなに写真をアップロードするには
はてなフォトライフで編集・画像のURLコピー
今気づきましたが、英語のパソコンでしかあまり参考にならないかも・・涙
吹き出しの設定をするよ!
いよいよ、画像と吹き出しを一緒に出すための最終プロセスです!
CSSを貼り付ける
(設定、デザイン、カスタム、CSSをペースト)の順です!
ここで、先ほどコピーしたURLをURLのところに貼り
自分で変えなければいけない部分を変えます!
変えなければいけない部分や、貼る付けるCSSは下記ブログが参考になります!
多くのブロガーがこのサイトを使っているみたいです!
参考にしたブログはこちら(CSSコピーできるよ)
吹き出しの枠を出すHTMLを設定する
これで、ブログ作成時にHTMLをいじくると、アイコンと吹き出しを出す準備が整いました!
ちなみに、私は<p class="r-fuki クラス名">言いたいこと</p>を使っています!
他にも使えるHTMLがあるみたいなのですが参考までに。
参考にしたブログがこちら
ふう、かなり難しかった・・HTMLを勉強しながら書くと楽しいけど大変なんだね!・・できてるかな?みなさんもできましたか??
しかもr-fukiのRをLに変えるだけでこんなことも!私ってHTMLの才能あるかも!w
次は、吹き出しではなくて、囲みの枠の中の言葉を勉強します!