2012-07-20

word press 1

wordpressのテーマは公式以外でも色々ダウンロードできる。入れ方は、
wordpressフォルダのwp-content内のthemesに入れるだけ。ダウンロードしたものそのまま入れて大丈夫。

設定について
ダッシュボード内の設定でパーマリンクの設定大事。一番上のデフォルトはダメ。上位表示しない。
なぜなら「？」が使われているから。使われていると検索されない。

2012-07-17

■

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<link href="style.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<ul class="accordion">
<li>
<div>
<h2>特長1</h2>
<p>特長1の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長2</h2>
<p>特長2の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長3</h2>
<p>特長3の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長4</h2>
<p>特長4の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長5</h2>
<p>特長5の詳細</p>
</div>
</li>
</ul>
</body>
</html>

@charset "UTF-8";


* {
	margin:0;
	padding:0;
}


.accordion {
	width: 400px;
	height: 300px;
	margin-left:10px; 
}

.accordion li {
  color: #555;
  background: #fff;
	margin-bottom:5px;
  height:20%;
	overflow: hidden;
	-webkit-transition:all 0.4s ease-in;
	transition: 0.4s all ease-in;
	-moz-transition:all 0.4s ease-in;
	-o-transition:all 0.4s ease-in;
}

.accordion li:hover {
	height:70%;
}

.accordion li h2 {
  color: #333;
  margin-bottom: 10px;
  padding: 5px;
	background: #eee;
	border: 1px solid #ccc;	
}

.accordion li:hover h2 {
	color: #fff;
	background:#81AF86;
	border: 1px solid #ccc;
}

.accordion li div {
	padding-top:12px;
}

これでアコーディオンがCSSで作れる。　.accordion li のところにある↓が
-webkit-transition:all 0.4s ease-in;
transition: 0.4s all ease-in;
-moz-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;

マウスをホバーさせたときの動きの速さを司っている。
数字の所を大きくするとゆっくり。10とか入れるとすごい遅い。0.1だと速い等。一行目の所の数字をいぢれば速さが変わるのが判ったが、残り3段はいまいち不明。

2012-07-17

dream weaverで簡単にアコーディオンとタブ

挿入→spry→タブ付パネル、アコーディオン　でそれらが自動で書かれる。
が、余計なものも色々かかれるので基本それだけはNG
ほかの機能もそんな感じらしい。ただし、大まかなレイアウトを作ってその後に自分で調整する的な使い方はできるらしい。

2012-07-10

actionscript 時間の取得

this.onEnterFrame = function() {
var obj_date:Date = new Date();
this.hour.text = obj_date.getHours();
this.mini.text = obj_date.getMinutes();
this.sec.text = obj_date.getSeconds();
}

.getHoursで時を、.getMinutesで分を、.getSecondsで秒をそれぞれ取得。あとは時間を表示させる欄をダイナミックテキストで作ってそれぞれ名前をつけるだけ。

getFullYearで年　.getMonthで月　.getDateで日　をそれぞれ取得できる。ただし日本基準で月を表示させたいときはgetMonth()+1と１を足す。理由は海外基準での表示であり、海外だと0から始まるので1足さないとズレる。

2012-07-10

■

2012-07-09

html5 課題19・20・23

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>
<body>
<header>
<h1>カフェランチブログ</h1>
</header>

<article>
<h2>7月1週目ランチ</h2>
<p>ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p>
<img src="images/donburi.jpg" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。">

<aside>
<h3>ロコモコ丼の豆知識<h3>
<p>ハワイ島で学生向けのファーストフードとして始まったといわれています。</p>
</aside>
 </article>

<footer>
<address>当ブログに関するご意見等は　cafelunch@xxx.com　までどうぞ。</address>
<small>Copyright (c) 2012 Star Cafe All Rights Reserved.</small>
</footer>

</body>
</html>

まとめ
<article>は大事な所に使う用。本文の中心的な場所で使う感じ？中に<h><p>は必要。
<section>ここにはないが折角なので。階層を作りたい用。とりあえず外枠とか作る用？こっちも<h><p>いる。
<h><p>が入らないようなものcontentとかはdivでいい。
<aside>補足的ななくても内容に影響を受けないものを入れる用=どうでもよさ気な物はasideに。articleの中に入れて大丈夫。

2012-07-05

フォトショップ　ダブルトーン

色調を白黒にする→モード、グレースケール→モード、ダブルトーン。これで黒ともう一色好きな色を追加したり、色味を変えたりすると↓みたいに加工できる。黒以外の2色も可能。