作業場経営日誌

お金を払って他人の畑を耕し知らん家の掃除をし謎の店を経営してる 1つのゲームに時間かけるので全く最新情報ではない

【解決】はてなブログでキャラが吹き出しで会話するヤツが上手くいかず悪戦苦闘したので備忘録

ブログの運営は今までもやっていたが

コレ

を使うのは今回のブログが初めてで超悪戦苦闘しました…

私はコッテコテの文系なのだ…

 

HTMLを開発する気ははなから0なので検索してコピペOKのサイトを探します

そうやって今日まで生きてきた

コピペで簡単!のはずなのにうまくできない

調べると大体のサイトが紹介している「こちらのサイト様のおかげで出来ました!」と行きつくサイトがあった

…がその参考サイトが封鎖されている

幸い他の方がそこから引っ張ってきたコピペOKのCSSを張ってくれていたのでその通りにやってみたが上手くいかない

吹き出しは表示されないし画像が何故か記事の外に表示されてしまう…

 

しかも調べても他のやり方がなかなか出てこない

やっと見つけた別の方法、headに入れるというのもやってみたがheadに呪文が表示されただけで効果がなく…

やっと見つけた

そして色々試すこと2時間……

やっと成功したのがこちらのサイト様

kayoko-cafe.hatenablog.com

こちらのサイトの通りにコピペetcでなんとか出来ました…

本当にありがとうございます;;

吹き出しの色も変えられました!

 

こちらで紹介しているのは失敗した方法と違って記事に直接画像URLを張る模様

拡散されている情報で上手くいかなかった方はこちらのサイトを参考にすると上手くできるかもしれません

ちなみに
HTMLなんていちいち打ってらんないッス

ですよね

 

はてなブログには「定型文貼り付け」という機能があるのでそちらを使うと一発で張れるようになります

(サイドバーに定型文貼り付けがない場合は+を押して追加)

 

HTMLを登録しておくと見たまま編集でも張り付けるだけで使えます

chromeの拡張を使う方法もあるようですが個人的には定型文登録して使う方がボタン一つなので楽だと思う

合わせて是非お使いください

 

ということでこれからもよろしくお願いします

 

追記・スマホで見た時、画像がクソデカ表示されてしまう件

…上手くいったかと思いきやスマホ版で確認したら吹き出しが表示されず画像もサイズが上手く調整されていないことが判明

こちらも検索して解決方法を探してみたが…分かんなかった!!!!!

理系の皆さんにおんぶにだっこでここまで来た駄目文系は先人の記事がなければ当然無理である

 

とはいえこのままだと記事の途中に謎のネコミミガスマスク野郎がドアップで通過することになってしまうのでスマホでもPC版と同じ画面を表示することで強制解決した

 

…したのか?解決

 

そんなわけでスマホでも吹き出しがちゃんと表示されるようになりました

 

デザイン設定→スマホ→詳細設定→レスポンシブデザインON

で無事出来ました

使用しているデザインによるかもしれないが多分これでみんなイケる…と思う

ちなみに私が使わせてもらってるデザインはFlatBoxです

blog.hatena.ne.jp

こちらをほんのすこーしだけカスタマイズして使っています

このデザインほんと素敵だし気に入ってるので変えたくなかった…

 

 

他に方法あったら教えてください…