テケオは眠くても頑張るぞ!

便利なサービスや製品紹介、スマホゲームや動画視聴のレビュー、ブログのカスタマイズ方法などを書く雑記ブログ

【jQuery】はてなブログで吹き出しの挿入をもっと楽にしてみたかったので、超簡単なjQueryを書いてみた

f:id:tektekeo:20170516213454p:plain

こんにちは。テケオです。

書くことも特になかったので、最近書いたjQueryについて...

以前にCSSを編集してめっちゃ簡単に吹き出しをブログに挿入してみました。

 

www.kouritsu30.com

 

そこで、簡単に吹き出しができました!と締めているが、右側に写真、左側にコメントをの場合、全体を右寄せする必要がある。

右寄せの度にHTMLに<div aling="right"></div>と書くのがめんどくさいので、JQueryを使って、うまく表示させようとした。

 

やりたいこと

左側の吹き出しでコメントした時、勝手に右寄せにしてくれるもの

HTML:

<p class="yuzinA left-fukidashi">左の吹き出しでコメントしてみた!</p>

 

出力結果:

左の吹き出しでコメントしてみた!

ほんの少しだが編集が楽になるw

jQueryで記述する

長々説明するのも面倒なので、以下のコードをヘッダのタイトル下にでも書けばいい。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

$(function (){
$('.left-fukidashi').wrap('<div align="right"></div>');
});
</script>

1行目のjQueryの読み込みはブログのカスタマイズしてたら他で読み込んでるかも。

出力結果がコチラ

左の吹き出しでコメントしてみた!

きっちり右に寄ってくれた。

まとめ

左コメントの吹き出しが勝手に右に寄ってくれて、ほんの少し楽になりました。

まあ、吹き出しのCSS公開してないから、誰得?って感じの記事だけどね...

 

終わり