Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【js】ムリやり#Box2(サイドバー) を記事内にねじ込んでみた結果w

はてなブログの記事ページを、他のTech系サイトの様なレイアウトにしてみては!? とふと思い立ち実行してみました。

ただ、はてなブログのHTMLの構造上、サイドバー(#box2)を記事内に入れるのは、CSSではレイアウト調整が面倒くさくなるだろうなと思い、JavaScriptで何とかできないか、コードをイジイジしてみましたw 試行錯誤の末、CSSのpositionプロパティをいじる事なく、何とか達成できました(੭ˊ꒳​ˋ)੭✧

 

↓デモ画像↓( 1270px以上の幅の場合 )

 

f:id:DDramonQ:20161210020244p:plain

 

 

ただ、問題が一つ。CSSではなく、JavaScriptで実現しているので、

ページオープン時 → window幅 : 1270pxで作動しますが、その後ウィンドウ幅を小さくすると、サイドバー部分(#box2部分)は、CSSのルールに従いません。

この場合だと、サイドバーが記事下にそのまま移動してしまい、レイアウトが大層に崩れますw

 

Javascriptで、その点もいじれるのですが、今の所もうお脳がアップあっぷ::(っ`ω´c)::💦なのでw この辺にしておきますw 🌟('、3_ヽ)_

 

まぁでも、途中でウィンドウ幅を変える事はあまり無いと思いますので(他の方もそうであると願いたい😅w) 、個人ブログとしてなら、ギリギリ実用性クリア、といった所でしょうかね。。( ¯∀¯٥)w

 

 

 

コード</>

●記事ページ( body.page-entry )

且つ

●window幅が1270px以上

 

の場合にのみ、作動する様になっています。

 

JavaScript

if( document.body.className.includes('page-entry') ) {
 
    if ( window.innerWidth > 1270 ) {
    
        var box2 = document.getElementById('box2');
        var entry_in = document.getElementsByClassName('entry-inner')[0];
        entry_in.insertBefore(box2, entry_in.children[2]);
        
        
        var entry = document.getElementsByClassName('entry')[0];
        var entry_con = document.getElementsByClassName('entry-content')[0];
        var efooter = document.getElementsByClassName('entry-footer')[0];
        
        entry_con.style.float = "left";
        box2.style.float = "left";
        efooter.style.clear = "both";
    
    }
    
    
}

 

 

 

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️