制作中のサイト
http://kuulei90.com/
ページタイトル
|
1 2 3 4 5 6 |
<hgroup> <h1 class="site-title"> <a rel="home" title="kuulei" href="http://kuulei90.com/">kuulei</a> </h1> <h2 class="site-description">official web site</h2> </hgroup> |
h1 とh2にgoogle web fontsを使用しています。
デスクトップ（firefox）で見ると問題ないのですが、
iphoneで見ると文字が二重に表示されてます。
試しにデスクトップ（safari）で見たら
文字は二重にはなってないけど、太くなってしまっています。
フォントは、クローンのstyle.cssで指定してます。
何故でしょうか？
今日もお菓子をありがとう!
勉強会の概要は、
です。 続きを読む
Q.WP プラグイン all-in-one-event-calendar （イベント管理）ってどんなもの？
A.カスタム投稿タイプを利用したwordpressのpluginです。(plug me inではありません)
「パソコン倶楽部りんご」サイトのトップページにある「勉強会の予定」とメニューの「calender」というページの表（カレンダー）がそうです。（２つは同期してるので便利）イベントやスケジュールを管理するのに便利そうです。
ではやってみます。ちなみに僕も初挑戦。
①まずは、all-in-one-event-calendarというプラグインをインストールして有効化する。有効化すると自動的にダッシュボードのメニュー（画面左に縦に並んでいる）にEventsという項目が追加されます。
②メニューのeventsのsettingsで色々と設定します。最初に大事なのは、どのページにカレンダーを表示させたいか
です。カレンダー専用のページが必要なら、その表示させたいページをあらかじめ固定ページで作っておく必要があります。settingsで「どのページにカレンダーを表示するの～？」という項目があるので、あらかじめ作って置いた固定ページを選択。
これで、ページにカレンダーが表示されました。そしたら適当にAdd Newで予定をいくつかアップしてみましょう。英語だけど良く読めば難しくないです。
③次は、トップページに予定の一部分を表示させます。これは、外観ーウィジェットで設定します。upcoming eventsというのが画面左にありますよね。それを画面右にドラッグする。トップページならフロントページウィジェットエリアだと思います。（人によって設定が違うと思うので「思います」としました。）ドラッグしたのをクリックすると、ちょっとした設定が可能です。何件表示させるとか。
大まかには、こんな感じです。色などはCSSとかで変えられると思います。（まだやってないけど）。
設定も色々あるので、これからやってみます。
こんな感じhttp://kuulei90.com/
これは、2013-04-12の勉強会で学びました。
——————————————–
先生。
これで大丈夫ですよね？
制作中のサイトhttp://kuulei90.com/
クライアントさんが、ライブの写真をを自分たちで更新したいと希望が出たので、
投稿ページのカテゴリーに「Photo」を追加しました。
投稿記事にたくさんの写真を直接掲載すると、カッコ悪いし、記事が長くなって
見づらいので、サムネイル表示にして、lightbox的な感じにしたいと思いました。
NextGen Galleryというプラグインでやる事にしました。
みなさん使っているようで評価も良いです。
これなら、htmlやcss,jQuery等の専門知識が無いクライアントさんにも都合がいいですね！
説明が英語なので、日本語にしてくれるファイルもあるので、ダウンロードして
FTPでアップロードしました。
参考になったサイト
http://kinome.biz/2013/01/nextgen-gallery.html
記事に載せるには、以下のサイトで説明してあります。
http://kinome.biz/2013/01/nextgen-gallery.html
親切に説明してくれる方々が世の中にはたくさんいて、便利になりましたね。ホントに助かります。
みなさん、ありがとうございます。
現在制作中のサイトhttp://kuulei90.com/
クライアントさんの希望で、トップページに「次のライブ情報（日にちが近い１回分）」と「pick up（お勧めの１コ）」を載せたいという事です。
「次のライブ情報」は、投稿ページsheduleからと、「pick up」は、投稿ページnewsの一部を抜粋して表示といった感じです。クライアントさんがTopページ（固定ページ）を
いじらなくてもいいようにカスタムしようと思います。りんごのメンバー紹介とか近いのかなあ？
ザ未経験です。
雰囲気的にはPHPを書くんだろうなあーと感じています。
もしかしてプラグインであったらラッキーとも思っています。
視界が、ぼや～っとしています。
アドバイスやヒントを下さいませ。
よろしくお願いいたします！
真中さん、
Faviconの画像のアップありがとうございます。
画像はサイボウズのと同じか..？ちょっとハートに見えた..
プラグインall-in-one-faviconのおかげで、
画像のアップロードをするだけでセットできるんですね。
働いている all-in-one-favicon.phpのほうを見ると、行数は結構長いですね。
index.html内に
|
1 |
<link href="images/favicon(1).ico" type="image/x-icon" rel="icon"> |
と書いていた頃が懐かしい!!
twenty twelveをカスタマイズ中です。
http://kuulei90.com/
ページによってヘッダー画像を変えたいと思っています。（ランダムではなく）
手順としては、
まず、外観ーヘッダーで設定するヘッダー画像をヘッダーだけに表示させようと思います。
ググッたらこちらのサイトがドンピシャだったのですが、記事の説明にある
|
1 |
<div id="header-img">ヘッダー画像</div> |
が僕のheader.phpに見当たりません。どういうことでしょうか？
参考にしたサイト
http://presentnote.com/header_image-displayed-only-top_page/
教えて下さい。よろしくお願いします。
それができたら、固定ページの各編集画面に直接画像を設置しようと思います。
まだ、外観ーヘッダーで設定するヘッダー画像が残っている状態ですが、こんな感じ。
http://kuulei90.com/?page_id=20
/////////////////////////////////////////////////////////////////////////////////////////////
先生。早速の回答ありがとうございます。
理解しました。header.phpを以下の様に追加しました。
|
1 2 3 4 5 6 |
<?php if(is_front_page() ): ?><!--2013-04-09追加、これで囲むとヘッダー画像がTOPにだけ表示されます。--> <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a> <?php endif; ?> <?php endif; ?><!--2013-04-09追加のとじタグです。--> |
これで、解決しました。
次は各固定ページに、それぞれのページの内容に合った画像を挿入していきます。
この、先生のコメントに対するコメントは、普通に返信でやると、「crayon」が使えないので、ここに追加で書きましたが、
コメントを返信でやった方が、第三者が分りやすいと思うのですが、良い方法はありますか？
内容は記事のタイトルそのまんまです。
footer.phpを編集します。
|
1 2 3 4 5 6 7 8 9 |
<footer id="colophon" role="contentinfo"> <div class="site-info"> <?php do_action( 'twentytwelve_credits' ); ?> <!--コメントアウト<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"> <?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>--> <!--下の一文は、新たに足した2013-04-08--> <?php printf( __( 'Copyright © %s All Rights Reserved. ', 'twentytwelve' ), 'Kuulei90.com' ); ?> </div><!-- .site-info --> </footer> |
4,5行目をコメントアウト。
7行目を追加。追加したら表示させたいテキストを入れる。テキストを入れる場所は、kuulei90.comと書いてある所。
That’s All….so easy
今日もお菓子が充実してます!
勉強会の概要は、
です。 続きを読む
バンドのサイト等で、
ブログ等の投稿記事に「コメントをする」というのがあっていいと思うけど、ディスコグラフィーやメンバー紹介のページを固定ページで作った場合、「コメントする」というのは、いらない。いかにもブログサイトです！みたいでカッコ悪いし。でもそれってデフォルトで表示されちゃうんですよね。
非表示にする方法
管理画面の「固定ページ」から「固定ページ一覧」で非表示にしたいページの編集画面に入って、右の上の方にある「表示オプション」をクリック！
「画面に表示」にある「ディスカッション」をチェックする。
すると、ページの下に「ディスカッション」の設定欄が現れるので、「コメントの投稿を許可する。」のチェックを外します。
たったこれだけで固定ページのコメントを非表示にすることが出来ます。
今回、僕はこれでやりました。
その他にもPHPの一行をコメントアウトするだけで、全部の「コメントする」を非表示に出来るみたいです。
参考にさせて頂いたサイト
http://webshufu.com/remove-comment-form/
http://researchnote.net/2012/05/wordpress9.html
バンドのサイト制作中。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を新しくインストールしなおすんですか？？？
新しいお仕事が入りまして、
低予算で、スマホ対応で、自分たちでニュースやブログを更新したいとの事ですので、
ワードプレスで制作する事にしました。
デザインはシンプルでよいとの事なので、twenty twelveをカスタマイズしようと
思います。テーマを使わず100%オリジナル（フルスクラッチというんでしたっけ？）だと予算オーバーだし。
質問①
サーバーと独自ドメインを取得しました。今まで、自分のサーバーにWPをインストールする時は、
nobu-69.comというサイトとは別のサイト制作だったので、nobu-69.comのルートに別サイトのフォルダを作り
そこにWPをインストールしてましたが、今回の様な場合は、これからインストールするWPがメインサイトに
なるので、サーバーのルート（一番上の階層）にインストールすればいいんですよね？フォルダとか作らずに。
質問②
twenty twelveをカスタマイズする際に、clubringoの場合はttcloneというクローンcssをいじってますよね。
クローンってどうやって作るのですか？
wpで初仕事。ちょっとドキドキ。
cssのanimationでクロスフェイドをさせる際には、各要素で同じ@keyframesを使いつつ、nth-of-type(n)セレクタで、animation-delayをずらしてあげると、効率がいいです。 続きを読む