カテゴリー別アーカイブ: マークアップ

「bxSlider」見つけました!

bxSlider

これはいいですね!

レスポンシブ、スマフォでのタッチ操作にも対応しています。

機能も充実していて、いいです。

詳細
英語サイトなんですが、なんとなくわかると思います。
http://bxslider.com/

<div id="itemView">
	<div class="itemImg">
		<ul class="bx-Slider">
			<li><img src="img/image1.jpg" /></li>
			<li><img src="img/image2.jpg" /></li>
			<li><img src="img/image3.jpg" /></li>
			<li><img src="img/image4.jpg" /></li>
		</ul>
	</div>
	<div class="bx-pager">
		<a data-slide-index="0" href=""><img src="img/image1.jpg" /></a>
		<a data-slide-index="1" href=""><img src="img/image2.jpg" /></a>
		<a data-slide-index="2" href=""><img src="img/image3.jpg" /></a>
		<a data-slide-index="3" href=""><img src="img/image4.jpg" /></a>
	</div>
	<div class="bxNav-next"></div>
	<div class="bxNav-prev"></div>
</div>
$('.bx-Slider').bxSlider({
	auto: false,
	pagerCustom: '.bx-pager',
	nextSelector: '.slider-next',
	prevSelector: '.slider-prev',
	nextText: '',
	prevText: ''
});

RSSで読み込み、1件目とその他を分ける新着情報を作る

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1"); //APIを読み込みます

function initialize(){
	
	var feed = new google.feeds.Feed("読み込むRSSのURLを指定");
	
	feed.setNumEntries(5); //記事を読み込む件数を設定します
	feed.load(dispfeed);	
	
	function dispfeed(result){

		if(!result.error){
			var container_new = document.getElementById("newsFeed"); //HTMLに書き出す対象のIDを指定します
			var container = document.getElementById("newsFeedList"); //HTMLに書き出す対象のIDを指定します			
			for (var i = 0; i < result.feed.entries.length; i++) {

				var entry = result.feed.entries[i];

				var entryDate = new Date(entry.publishedDate); 
				var entryYear = entryDate.getYear();
				if (entryYear < 2000){
					entryYear += 1900;
				}
				var entryMonth = entryDate.getMonth() + 1;
				if (entryMonth < 10) {
					entryMonth = "0" + entryMonth;
				}
				var entryDay = entryDate.getDate();
				if (entryDay < 10) {
					entryDay = "0" + entryDay;
				}
				var date = entryYear + "." + entryMonth + "." + entryDay;

				if ( i == 0 ){
					container_new.innerHTML += '<li>' 
					+ '<a href="' + entry.link + '">'
					+ date + '<br />'
					+ '<span>' + entry.title + '</span>'
					+ ' </a></li>';	
				} else {
					container.innerHTML += '<li>' 
					+ '<a href="' + entry.link + '">'
					+ date + '<br />'
					+ '<span>' + entry.title + '</span>'
					+ ' </a></li>';
					
				}
				
			}
		} else {
			//エラー
			読み込み中
		}
	}
}
google.setOnLoadCallback(initialize);
</script>

<ul id="newsFeed"></ul>
<ul id="newsFeedList" class="closeBox"></ul>

参考サイト
ブログのRSSを読み込んで新着記事を表示!Google AJAX APIを使ってみました
http://kana-lier.com/javascript/google_ajax_rssfeed/

「もっと見る」を作成

scriptを作成

$(".closeBox").hide();
var flg = "close";
$("#newsBloc .btnBloc").click(function(){
	$("#newsBloc .closeBox").slideToggle();
	if(flg == "close"){
		$("#newsBloc .btnBloc span").text("閉じる");
		$("#newsBloc .btnBloc span").toggleClass("closeBtn");
		flg = "open";
	}else{
		$("#newsBloc .btnBloc span").text("もっと見る");
		$("#newsBloc .btnBloc span").toggleClass("closeBtn");
		flg = "close";
	}
});

htmlの作成
最初から表示させるリストと、「もっと見る」ボタンとボタンを押してから表示するリストを作成

<div id="newsBloc">
  <ul>
     <li>aaa</li>
     <li>aaa</li>
  </ul>
  <ul class="closeBox">
     <li>bbb</li>
     <li>bbb</li>
  </ul>
  <div class="btnBloc"><span class="btn1">もっと見る</span></div>
</div>

参考サイト
jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え)
http://jump-up.info/jquery/jquery_toggle.html

レスポンシブ対応のCycle2

メインのスライドは基本こればかり使っていましたが
http://jquery.malsup.com/cycle/
レスポンシブが必要になりcycle2を使い事に
http://jquery.malsup.com/cycle2/

組み込み方も今までにない感じでしたが設置できました。

<div id="mainVisual">
	<ul class="cycle-slideshow"
		data-cycle-fx="fadeout" data-cycle-speed=1500
		data-cycle-timeout=7000 
		data-cycle-prev=".prev"
		data-cycle-next=".next"
		data-cycle-slides="> li"
		>
		<li><a href="#"><img src="/images/main_bnr-1.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/main_bnr-3.jpg" alt=""></a></li>
		<li><a href="#"><img src="/images/main_bnr-2.jpg" alt=""></a></li>
	</ul>
	<div class="nav next"></div>
	<div class="nav prev"></div>
</div>

IE10をハックしたくないんだけど、どうしようもなくての時

ASPカートなどを使用してサイトを作成する時
IEが互換表示で作成という事があります。

単純にHTML宣言の問題でそうなっているんですが、設定できない

こんな時は
今の所この対応をしています。

body {
 position: fixed;
 position: absolute\9; /* IE9 and below */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body {
 position: fixed;
}
}/* IE10 */

参考サイト
http://dx.24-7.co.jp/ie-hack/

IEハックについて色々書いてあるサイト
http://www.aveit.biz/column/detail1381811428.html

サイトに雪を降らすjavascript

サイトに雪を降らすjavascript
いつか使ってみたい

<script src="hoge/jquery/1.8.3/jquery.min.js"></script>
<script src="hoge/snowfall.min.js"></script>
<script>
    $(document).ready(function(){
        snowFall.snow($("section"),{
                minSize: 1,
                maxSize: 8,
                round: true,
                minSpeed: 1,
                maxSpeed: 3,
                flakeCount: 120
                });  
        });
</script>

androidのchromeだけの対応

androidのchromeだけ文字のサイズ等を調整したいと悩んでいた時に

下記のサイトを見つけ調整することができました!助かります!

http://www.rainorshine.asia/2013/06/03/post2422.html

<script>
    var ua = window.navigator.userAgent;
    if (/Chrome/.test(ua) && !/Version/.test(ua)) {
         document.getElementsByTagName("body")[0].setAttribute("class","chrome");
    }
</script>

クラスをつけるよう設定して完了

HTMLメルマガの作成について

バックグラウンドカラーなど「#fff」ではなくて、「#ffffff」で
需要がどのくらいあるかわからないけど、「Becky!」だと色がでくれません。

HTMLメルマガの作成について
まとめていただいている参考になる記事
参考サイトhttp://dounokouno.com/2010/01/29/html%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AA%E3%83%A1%E3%83%AB%E3%83%9E%E3%82%AC%E3%82%92web%E3%83%A1%E3%83%BC%E3%83%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AE%E3%83%A1%E3%83%A2/