バンドのサイト制作中。WPのtwenty twelveをカスタマイズ中。
http://kuulei90.com/
固定ページをいくつか作り、グローバルナビの設定もしました。試しにライブ記事を投稿するのですが、LIVEというカテゴリにチェックを入れてもそこには行かず、デフォルトの場所（BLOG）に行ってしまいます。
任意の名前で、カテゴリーって作れますよね。LIVEというカテゴリーを作った事と、メニューのLIVEは別物なんですかね？カテゴリーで作ったLIVEは、メニューのLIVEですよ！と関連づける何か設定が必要なんでしょうか？
教えて下さい。
4/5の勉強会でcssで画像をクロスフェードやりました。先生の記事を読んでも理解力が無く上手く出来なかったので、実際に説明してもらいました。
家で実際にやってみました。トップページです。http://nobu-69.com/manakaa/sample2/
|
1 2 3 4 5 6 7 8 |
<div class="slider"> <h1> <img src="img/index/900315logo.gif" alt="manaka design"> <img src="img/index/900315flower.jpg" alt="manaka design"> <img src="img/index/900315rain.jpg" alt="no rain, no rainbow"> <img src="img/index/900315only.gif" alt="たかがデザイン"> </h1> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.slider{ position:relative; overflow:hidden; background-color:#000; } .slider h1 img { z-index:1; width:100%; } .slider h1 img:nth-of-type(n+2){ z-index:10; opacity:0; position:absolute; top:0; left:0; -webkit-animation:overwrap 12s ease infinite; -moz-animation:overwrap 12s ease infinite; animation:overwrap 12s ease infinite; } .slider h1 img:nth-of-type(1) { -webkit-animation-delay:0s; -moz-animation-delay:0s; animation-delay:0s; } .slider h1 img:nth-of-type(2) { -webkit-animation-delay:3s; -moz-animation-delay:3s; animation-delay:3s; } .slider h1 img:nth-of-type(3) { -webkit-animation-delay:6s; -moz-animation-delay:6s; animation-delay:6s; } .slider h1 img:nth-of-type(4) { -webkit-animation-delay:9s; -moz-animation-delay:9s; animation-delay:9s; } @-webkit-keyframes overwrap { 0% {opacity:0;} 5%,100% {opacity:1;} } @-moz-keyframes overwrap { 0% {opacity:0;} 5%,100% {opacity:1;} } @keyframes overwrap { 0% {opacity:0;} 5%,100% {opacity:1;} } |
①画像をレスポンシブデザインにする。
今まで画像の親要素に高さを指定しないと、画像の領域が確保できないので、高さを指定してましたが、それだと、画面の横幅をせばめた時に画像の下に余白でできてカッコ悪かった。それのカッコ悪さを少なくするために、メディアクエリで細かく段階に分けて高さの指定をしていましたが、以下の方法でその必要は無くなりました。
対処として１枚目の画像はposition:absoluteしない！です。それにより、１枚目は常に表示されている状態になるので高さがキープされます。その上で１～４枚目をクロスフェードします。
高さの指定は、どこにもしてはいけません。
|
1 2 |
<!--２枚目以降はアブソルートという意味、したがって１枚目はアブソルートしない！--> .slider h1 img:nth-of-type(n+2){position:absolute;｝ |
②cssでクロスフェード
animation:overwrap 12s ease infinite; アニメーションの名前（任意）overrap 全体の長さ12秒 easeイージングです。 infinite永遠に繰り返し
.slider h1 img:nth-of-type(2) {animation-delay:3s;} ２枚目の画像はキーフレームがスタートして3秒後にアニメ―ションが始まる。何が始まるかは、以下の指定です。最初は見えない、全体の５％になった所で見える。１００％になるまで見え続ける。
@keyframes overwrap {
0% {opacity:0;}
5%,100%{opacity:1;}
}
ポイント１：opacity:0は、何にも見えない。opacity:1は丸見え。opacityとは日本語で不透明。opacityは、０から１で指定。その間は、0.1,0.2,0.3,0.4,…….。
ポイント２：ベンダープレフィックスを書くときに、何にも無しのやつは、１番下が良い。
animation-delayプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションがいつ始まるかを指定する際に使用します。
———————————————–
先生。
①画像をレスポンシブデザインにする。は上手く出来ました。
②cssでクロスフェードですが、上手くループしません。４枚目の画像表示まではGoodですが、それ以降が変な感じです。
何故でしょうか？
大変な事をしてしまいました。
今まで、twenty eleven でサイトをカスタマイズしてましたが、
試しに、Twenty Twelveでやったらどうなるかftpで見てました。
Twenty Twelveの小テーマを作って・・・。
そしたら、元々のttchild（小テーマ）を削除してしまいました。（ー..ー;）
サイトも表示できなくなりました。
テーマを見ると何も入ってませんでした。
新しいテーマを追加しても
パッケージを展開しています…
→→→→テーマをインストールしています…
ディレクトリを作成できませんでした。
/home/users/2/pupu.jp-micco/web/st-neverland/blog/wp-content/themes/twentyeleven/
テーマのインストールに失敗しました。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
と表示されてしまいます。
テーマのインストールも出来なくなりました。
どうしましょう（>_<）
こうなってしまったら、Twenty Twelveでやりたいと思っています。。。。
テーマ編集を見ても、選択したテーマはありません。としか表示されません。
ダッシュボードの現在の状況の部分に、
エラー: テーマディレクトリが空か、存在しません。インストールを確認してください。
と表示されています。
wpを新しくインストールしなおすんですか？？？