2014年6月26日木曜日

【HTML/CSS/Javascript】ブログデザイン スムーズにページ内をスクロールさせる

トップスクロールのようにブログ内全てをスムーズにスクロールしてみたいな…そんな想いからスムーズスクロールと検索してみたところしっかり方法があるらしいのでその方法を折り返し勉強も兼ねて更新しようと思います(*‘ω‘ *)

まず手順としてはhead内にjavascriptを入れるだけで、HTML全体に<a href="#"></a>と<div id ="#"></div>と記述してあげるだけで簡単に設置できる仕組みになってます。

<head>~</head>内に入れる
<!--スムーズススクロール-->
<script type="text/javascript" src="http://blog-imgs-69.fc2.com/b/a/r/barasa88888/20140611194712c3f.js"></script>
<script type="text/javascript">
   $(function(){
    $("a[href^=#]").click(function() {
     var myHref= $(this).attr("href");
     var myPos = $(myHref).offset().top;
     $("html,body").animate({scrollTop : myPos}, 1200);
     return false;
    });
   });
  </script>
<!--/スムーズススクロール-->




後はa要素でクリックさせてdiv要素でスクロールさせる場所を設定してあげるだけです。

<a href="#down">a要素でクリックさせ下までスクロールさせます</a>
クリックして下までスクロールしてみる












































<div id="down"></div>
div要素でスクロールされる場所を指定してあげます。


方法はたったこれだけです。
自分で作成したサンプルページもあるので暇だったら見てあげて下さい。
可愛い褐色娘がいます(*‘ω‘ *)
Read More

2014年6月20日金曜日

【HTML/CSS/Javascript】ブログデザイン 要素を隠したり・・・ 要素をゆっくり表示/非表示させる

何だかんだで本家ブログで実装させたい内容をこちらで試さずに直接作ってるここ最近・・・。
こっちで色々実験するまえに誤操作したら後戻りできない本家ブログで実験しちゃうここ最近・・・。

本家ブログでRSSを表示させたり非表示にしたりする試みが上手くイケたので更新しようと思います(。・ω・)
なんか順序が逆になってたりしますが気にしてはいけない(*´σー`)(鼻ホジ)
いつかは自ブログにも施したい思いがついに叶ったと言っても過言ではないと思いました(`・ω・´)

中学からブログを始め記事を更新するだけで頭の中が一杯だったのに今ではブログをある程度カスタマイズできるまで成長して・・・お母さん嬉しいよ(自演)




それではさっそく手順を書こうと思いますが、まず最初に参考にしたデモページ


まず最初にHTML部分に表示/非表示を設定できるボタンを作ります。

<div class="checkbox">    <label>
         <input id="check" type="image" src="画像URL"  onclick="hideToggle($('.hide_area'));"
    </label>
</div>



次に表示/非表示させる隠したいコンテンツを指定します。

<table class="table table-bordered table-hover">
  <tr class="hide_area"><!--隠すエリア-->
   <td class="example">

  隠したいコンテンツ


   </td>
  </tr><!--隠すエリア--> 
</table><!--隠すエリア--> 


<head>~</head>内にこれを入れてます。

 <!--隠すエリア-->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>
// 初期表示
$(function(){
    // 初期表示でチェックボックスが空だったら非表示エリアを隠す
    if ($('#check').val() != '1') {
        $('.hide_area').hide();
    }
});
// 表示/非表示
var speed = 500; //表示アニメのスピード(ミリ秒)
var stateDeliv = 1;
function hideToggle(hidearea) {
    hidearea.toggle(speed);
}
</script>
          <!--/隠すエリア-->


次にCSSでデザインを指定させます。

.table {
  width960px;
  display:block;
  margin:auto;
  padding:auto;
  position:relative;
}
.table table-bordered table-hover {
  overflowscroll;
  width960px;
  height510px;
  background-colorglay;
  text-align:left;
  border:1px #CCCCCC solid;
  background-color:696969;
  text-color:#000000;
}



本家ブログではたったこれだけで反映できちゃいました(`・ω・´)!!
デモページを見て自分で理解するまで少々時間がかかったので、独学なりにお勉強しようと思います(。・ω・)
Read More