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

TureTiru Times

つれづれ「ちる」ままに日常や学問、ライフハックについて書き綴るブログ

はてなブログでサイドバー固定をスマホ時に消しレスポンシブでも活用する方法

あとで読む

スポンサードリンク

f:id:toshitiru:20160216223556j:plain

 

先日、初めて1万字を越えるカスタマイズ記事を書きました。

いろいろまとめてみたので参考になれば幸いです。良かったらどうぞ!

 

www.turetiru.com

  

この中でちょろっと「サイドバーにスクロールして固定できないのかなぁ」と触れたんですが、なんと次の日に見つけました。笑

それがこちらで紹介してくださっています!

 

blog.yutorigoto.com

 

いやー、上手く出来そうになかったので非常にありがたかったです…!

 

 

よっしゃ、早速導入や!→あれ?

というわけで帰宅早々、コピペで一発と言うことでやってみたところとある問題にぶち当たりました。

 

というのも、PC表記なら上手くいくんですがレスポンシブデザインにしているとタブレットの時に他のサイドバーのとこに覆いかぶさって表記されてしまったんです。

 

というのも僕のやつはタブレット時などにサイドバーを二分割して表示してるんです。

 

さらに、レスポンシブでプロフィールをサイドバーに固定するとサイドバーに二つプロフィールが表示されちゃうんです

これはさすがに邪魔だなって思って「display: none」を使って消そうとしたんですが、ここであることに気づきました。

 

「はっ、これだと一番上の「プロフィール」も一緒に消されてしまう…」

 

というわけでちょこっといじってタブレット並びにスマホの時に固定されたサイドバーを消す方法をご紹介します。

部分的に上手く消す方法

まず、人によってプロフィールを固定したいのか記事などを固定したいのか違うと思います。

ですが、ここではプロフィール(だいたいの人がそうすると思うので)でやるのを説明します。もちろんちょこっといじるだけで他のものにも応用可能です!

HTMLにclassを設定してグループ化する

まず、サイドバーでHTMLを選択します。

そこにこのようにします。

 

<div class="profile2">

ここに表示したいHTMLコードを入力する

</div>

 

こうすることでこのサイドバーのHTMLを「profile2」として普通のプロフィールとは別枠にしてCSSを記述することができます

そして以下のコードをCSSに記述します。

 

/*PCを1コラム*/
@media screen and (max-width:968px){
.profile2{
display: none;
}
}
/*スマホ*/
@media screen and (max-width:680px){
.profile2{
display: none;
}
}

既にパソコンやスマホ時に適応するコードを入力してあるならその間に入れてあげてください。

こうすることで、サイドバーに固定したタグはパソコン上だけで表示されます。

おまけ:HTMLで上手にプロフィールを表記する方法

サイドバーのHTMLはプロフィール欄と違って、改行しただけでは上手く反映されません

それと僕の場合だけかもしれないんですけど、HTMLにタイトルを設定してやると変な空きスペースがデカデカと表示されてしまいます。

(誰か教えてくれると助かります…)

サイドバーのHTMLタイトルを空にして見出しを付ける方法 

f:id:toshitiru:20160216221515p:plain

 

というわけで自前の見出しを用意してやらねばなりません。

下の見出しがその成功例。

以下のコードをHTMLの最初に書きます。

 

<div class="profile2"><h6>  ABOUT</h6></div>

 

h6はCSSにサイドバーの見出しと合わせて書いてあります

 

/* サイドバー用の緊急見出し */
h6 { 
border-bottom:
solid #6D4C41 3px;
font-size: 21px;
padding-left: 1px;
margin: 0px 0px 20px 0px; 
}

こうすることで、タイトルに何も書かなくてもサイドバーに見出しを付けることができました。

フォントのサイズも合わせてあります。

改行を上手にする方法

ただEnterを押して改行しても変な風に表示されてしまいます。

 

f:id:toshitiru:20160216222404p:plain

 

こんな感じ。

そこで</br>タグを改行したとこに入れます。以下が例です。

 

ちょっぴり「funny」で「interesting」な面白さを目指して。身近なことから学問的なことまでつれづれっと書いてます。</br>

 

コードの最後にこのように付け足すことでHTMLでもきれいに改行できるはずです。

ちなみに<p></p>だと無駄に一行空いてしまいます。

最後にサイドバーに固定する時のTips的なもの

固定する範囲は決まってるようなのであんまり長くやってしまうとブラウザ環境によってははみ出してしまいます

なので固定するタグは1ページに無理なく収まるようにコンパクトにすることをおすすめします。

 

また、HTMLで<class>として指定したものは好きにいじれるのでプロフィールでなくても好きにカスタマイズすることが可能です

 

というわけでこれでレスポンシブデザインでもタブレット、スマホ表示時に上手く消すことができると思います!

 

では!

 

 

広告を非表示にする