読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

html要素を移動・置換・挿入させるjQueryコード

design.syofuso.com
はてなブログの公式パンくずリストを記事上、下に移動させるカスタマイズについての記事を書きましたが、
前回では空のdivを用意してその中のhtmlを既に記述されたhtml(サイドバーの関連モジュール)から取得し変更するという方法でした。
(という認識であってますか?)
JavaScript、jQueryはほとんどわからないのですが、コードを眺めているうちに少しだけ法則性がわかってきたので勉強がてらカスタマイズ用のコードを書いてみます。


JQueryを読み込んでいない場合は読み込んで下さい。

<!--jQueryを使用-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

参考:
qiita.com

HTMLの移動

操作* 使用例* 備考*
要素の後にHTMLを移動(同階層) $('A').insertAfter('B'); Bの後に指定した要素Aを移動


応用:はてな公式のパンくずリストを記事下に移動する

<script type="text/javascript">
$(function(){
  $('.page-entry .breadcrumb').insertAfter('.entry-content');
});
</script>

f:id:syofuso:20160809011037j:plain

デザイン的に気になる時は#top-boxのボーダーや.breadcrumbのmarginなどCSSで修正して下さい。

.page-entry #top-box {
border:none;
}
.page-entry .breadcrumb {
    margin-bottom: 0;
}

.insertAfter('.entry-content');を.insertAfter('.entry-footer');にすれば、ページ下部に移動されます。

要素の置き換え

操作* 使用例* 備考*
指定した要素を他の要素に置き換える $('A').replaceWith('B'); A要素をB要素に置き換え
指定した要素を置き換える $(‘A’).replaceAll(‘B’); B要素をA要素に置き換え    


応用:記事個別ページのカテゴリーをはてな公式パンくずリストに置換する

<script type="text/javascript">
$(function(){
  $('.page-entry .breadcrumb').replaceAll('.page-entry .categories');
});
</script>

置換前:
f:id:syofuso:20160809012358j:plain

置換後:
f:id:syofuso:20160809012429j:plain

余白などおかしいところありますが、一応置換できましたね。


特定のURLで指定した要素Aの前に要素Bを挿入する

<script>
$(function(){
    if(location.href=="URL"){
        $("挿入先要素A").before('挿入する要素B');
    } 
});
</script>

澄風荘ブログのあるカテゴリーページのURLでは要素Aに.archive-entries、挿入する要素Bにおすすめしたい記事へのリンクを置いています。
加藤文太郎 カテゴリーの記事一覧 - はまさか日記~澄風荘しょうふうそう~
f:id:syofuso:20160809013901j:plain


いかがでしょうか。はてなブログでもいろいろカスタマイズに応用できそうです。
不勉強で間違ってるところがあったらすみません。
JavaScript、jQueryちゃんと勉強しよう!と思います。