• まだ見ぬ世界

  • 晴れた雪空

  • 誰も知らない水溜り

  • 海底要塞

  • 越鳥南枝

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

2014年4月28日月曜日

ブログの何が楽しいって

ブログ更新するだけで少なからず知らない人が見に来てくれるこの構って精神がもっと!もっと!といってるんですよ……。(何言ってんだこいつ)
多分だと思いますが、ブログを継続して更新し続けられる人って誰かに構ってほしいから更新してるのだと勝手に思い込んでます(*‘ω‘ *)

会話がなくとも訪問者1人でも誰かが自分のブログを見てくれたと考えるだけでものすごく嬉しく感じるんですよね…。

そう思ってるのは俺だけかもしれませんけども(汗)


アクセス解析を利用してると熟そう感じてしまう自分が居ますね(。・ω・)
GoogleAnalystや忍者Analyzerを使用してみるとどこからどんな人が自分のブログを見てくれてるのか丸見えで結構面白かったりしますww

もしブログをやってる方が居ましたら自ブログに設置してみるのも案外面白かったりするかもしれませんよ(*‘ω‘ *)!

Read More

2014年4月15日火曜日

【HTML/CSS/Javascript】ブログデザイン ブログアイコンを自分で作成、設置してみる

Bloggerではファビコンを自動で設置してくれる有難い仕組みがありますがそういった便利な仕組みがない場合どう設置すればいいのか気になりませんか(´・ω・`)

そう些細な疑問がきっかけで今ではまだまだハイパーひよっこですがブログデザインをカスタマイズできようにまでなりました(*‘ω‘ *)



それで本題のファビコンをどう設定すればいいのか。
答えは簡単 キリ

テンプレートのHTML部分の<head>~</head>に以下を書き加えるだけで簡単にファビコンが設定されます。

<ink rel="shortcut icon" href="画像のURL" />

たったこれだけで自分のブログアイコン、ファビコンが変更できちゃいます(*‘ω‘ *)
それぐらいの画像サイズなのかは様々ですが16x16や32x32とかで大丈夫かと思います(適当)

更に詳しく知りたい方はこちらをどうぞ(*‘ω‘ *)

ブログアイコンやファビコンと表現してますが意味は一緒です(*‘ω‘ *)
特に深い意味はありません(*‘ω‘ *)
Read More

【HTML/CSS/Javascript】ブログデザイン リンクの色を少しずつ変化させる

これは本家ブログにも書きましたが、自分の往復勉強として更新しようと思います(*‘ω‘ *)

まず最初にdiv要素とlink固有IDで自分がどの場所のリンクの色を少しずつ変化させたいかを決めて囲います。



<div id="link">
・ 
・ 
リンクを変化させたいコンテンツ 

・ 
</div>


次にCSS部分を書き込んであげれば完璧!!

/*トップメニューリンクの色をゆっくり変化させる*/
div#link { 
   color#ccc;    
  text-decorationnone;    
  -webkit-transition0.8s  
  -moz-transition0.8s;    
  -o-transition0.8s;   
   -ms-transition0.8s  
  transition0.8s
 
div#link a:hover {    
  color#0000cc 
} 
/*トップメニューリンクの色をゆっくり変化させる*/

たったこれだけで反映できちゃいますので皆さんもお気軽にカスタマイズしましょ!
※バックアップは必ずとってね・・・!

けれどBloggerの場合HTMLとCSSが一緒に書かれてるのでどこがどの位置なのかしっかり見極めておく必要がありますけどねw

BloggerじゃCSSをskinとして扱ってますし初心者には物凄く手強いです(・_・;)
尚最初だけ理解してしまえばあとは自由自在なのでバックアップをしっかりとってから作業に移って下さいね(*‘ω‘ *)

参考ブログ
Read More

2014年3月28日金曜日

【HTML/CSS/Javascript】ブログデザイン 記事の「続きを見る」部分をかっこ良くしてみた

ブログホームから記事下部分のRead Moreがかっこよくなってますやん!
自分でも驚愕モノですよ…www
出来上がった瞬間のこの高揚っぷりがたまりませんな!

Read More


ブログタイトルを一度クリックして全体を見て下さいよ!!
次々と進化を遂げるこのブログ…果たしてどこまでいくのか…。

他にも色々できるそうですよ(。・ω・)
あなたもお試しあれ参考URL
Read More

2014年3月27日木曜日

【HTML/CSS/Javascript】ブログデザイン 右側の画像枠に影を入れてみる

うむ…中々の上出来じゃないですか…。
情弱な割にはなんとか設置できて嬉しい限り。

検索すればある程度無知でも誰でもできちゃうものなんですねぇ…。

といっても、ブログデザインがどれだけ良くなろうとこのブログをリピートしてくれる人に一体何のメリットがあるのだろうかと考えたら全く無いっていう…。

磨く所が明後日の方向に行ってるような気がしてならない…部分もありますが身に付けて実行すること身に付けないで実行もしないよりは遥かにマシ。

そう思って淡々とCSS、HTMLを熟知しようと日々眺めてます。色んなブログ。
そう考えると皆さんって結構凄いですよねw

僕は独学でブログデザインをカスタムしてますけど、この元…ブログそのものを作成してる人達ってかなり楽しそうなネットライフ送ってると思うんですよ。
リアルで言うところの家を作ってるようなものですから…。

しかも自由自在に考えた通りにブログを作れるって憧れます。

画像枠に影を入れてみる参考URL



Read More