カテゴリー別アーカイブ: 質問と回答

勉強会の議事録をトップページに表示させるには

一番新しい議事録投稿記事のタイトル&本文の最初の30文字位をトップページに、表示させたい。
とりあえず、固定ページのトップページには、その表示させたい場所を作りました。

議事録を投稿したら自動でそこに表示させるにはどうしたらよいでしょうか?

phpを書く。プラグイン。ウィジェット。

2013-04-19の勉強会での勉強の題材として取り上げて下さい。

よろしくお願い致します。

上記の内容を2013-04-19の勉強会でやりました。以下議事録です。

①外観ーテーマ編集ーFront Page Template 固定ページテンプレート(page-templates/front-page.php)を開きます。そこに投稿カテゴリーの最新記事を呼び出して出力するphpを書きます。

コードは以下の通りです。

今回は、「最新の勉強会議事録」「最新の質問と回答」「最新のコメント」の3つの最新情報をトップページに表示することにしたので、asideの中にsectionを3つ作りました。

メモ

numberposts 1は最新の投稿を1つという意味です。
category 4はカテゴリーのID番号です。

カテゴリーIDの調べ方は、投稿ーカテゴリーのページでカテゴリー名にカーソルを持っていくと、画面下に表示されますので記憶して下さい。記憶力に自信がない人はメモをとって下さい。鉛筆でも万年筆でもクレヨンでも結構です。

上記のphpを書く場所ですが、今回はトップページの画像スライドショウのすぐ下に表示させる事になったので、page-templates/front-page.php内の

の下に書きました。

書く場所は、表示させたい場所によって異なります。ご注意ください。

②出力が出来ましたので、今度は適当に見た目を整えていきます。asideやsectionにidで名前を付けたので、そのidをcssでカスタマイズします。今回は、style.cssの一番下に書きました。

以上です。(真中のぶ)

先ほど、iphoneで見たら変な風になってたので、media queryで直しておかなきゃ!誰かやりたい人がいれば、やってくれてもいいですよ。

質問
firebugで見ると、sectionの中にh1が2つある事になっていますが、これは大丈夫なのでしょうか??
(こちらは、解決済です。先生のコメント参照)

—————————————————–
追加情報 2013-04-27 真中のぶ

投稿のアイキャッチ画像のサムネイル表示を以下のスクリプトで実装出来るようです。

wp 2012 google web fontsを指定したらテキストが二重に表示されるは何故か?

制作中のサイト
http://kuulei90.com/
ページタイトル

h1 とh2にgoogle web fontsを使用しています。
デスクトップ(firefox)で見ると問題ないのですが、
iphoneで見ると文字が二重に表示されてます。
試しにデスクトップ(safari)で見たら
文字は二重にはなってないけど、太くなってしまっています。

フォントは、クローンのstyle.cssで指定してます。

何故でしょうか?

WP 2012 トップページに投稿ページの一部を表示させたい

現在制作中のサイトhttp://kuulei90.com/

クライアントさんの希望で、トップページに「次のライブ情報(日にちが近い1回分)」と「pick up(お勧めの1コ)」を載せたいという事です。

「次のライブ情報」は、投稿ページsheduleからと、「pick up」は、投稿ページnewsの一部を抜粋して表示といった感じです。クライアントさんがTopページ(固定ページ)を
いじらなくてもいいようにカスタムしようと思います。りんごのメンバー紹介とか近いのかなあ?

ザ未経験です。

雰囲気的にはPHPを書くんだろうなあーと感じています。
もしかしてプラグインであったらラッキーとも思っています。
視界が、ぼや~っとしています。

アドバイスやヒントを下さいませ。

よろしくお願いいたします!

WP TwentyTwelve ヘッダー画像をトップページにだけ表示させたい。

twenty twelveをカスタマイズ中です。
http://kuulei90.com/

ページによってヘッダー画像を変えたいと思っています。(ランダムではなく)

手順としては、
まず、外観ーヘッダーで設定するヘッダー画像をヘッダーだけに表示させようと思います。
ググッたらこちらのサイトがドンピシャだったのですが、記事の説明にある

が僕のheader.phpに見当たりません。どういうことでしょうか?
参考にしたサイト
http://presentnote.com/header_image-displayed-only-top_page/

教えて下さい。よろしくお願いします。

それができたら、固定ページの各編集画面に直接画像を設置しようと思います。
まだ、外観ーヘッダーで設定するヘッダー画像が残っている状態ですが、こんな感じ。
http://kuulei90.com/?page_id=20

/////////////////////////////////////////////////////////////////////////////////////////////
先生。早速の回答ありがとうございます。
理解しました。header.phpを以下の様に追加しました。

これで、解決しました。
次は各固定ページに、それぞれのページの内容に合った画像を挿入していきます。

この、先生のコメントに対するコメントは、普通に返信でやると、「crayon」が使えないので、ここに追加で書きましたが、
コメントを返信でやった方が、第三者が分りやすいと思うのですが、良い方法はありますか?

WordPress投稿設定、投稿記事を各固定ページに振り分けたい

バンドのサイト制作中。WPのtwenty twelveをカスタマイズ中。
http://kuulei90.com/
固定ページをいくつか作り、グローバルナビの設定もしました。試しにライブ記事を投稿するのですが、LIVEというカテゴリにチェックを入れてもそこには行かず、デフォルトの場所(BLOG)に行ってしまいます。

任意の名前で、カテゴリーって作れますよね。LIVEというカテゴリーを作った事と、メニューのLIVEは別物なんですかね?カテゴリーで作ったLIVEは、メニューのLIVEですよ!と関連づける何か設定が必要なんでしょうか?

教えて下さい。

cssで画像をクロスフェード&レスポンシブデザイン

4/5の勉強会でcssで画像をクロスフェードやりました。先生の記事を読んでも理解力が無く上手く出来なかったので、実際に説明してもらいました。

家で実際にやってみました。トップページです。http://nobu-69.com/manakaa/sample2/

①画像をレスポンシブデザインにする。

今まで画像の親要素に高さを指定しないと、画像の領域が確保できないので、高さを指定してましたが、それだと、画面の横幅をせばめた時に画像の下に余白でできてカッコ悪かった。それのカッコ悪さを少なくするために、メディアクエリで細かく段階に分けて高さの指定をしていましたが、以下の方法でその必要は無くなりました。

対処として1枚目の画像はposition:absoluteしない!です。それにより、1枚目は常に表示されている状態になるので高さがキープされます。その上で1~4枚目をクロスフェードします。
高さの指定は、どこにもしてはいけません。

②cssでクロスフェード
animation:overwrap 12s ease infinite; アニメーションの名前(任意)overrap 全体の長さ12秒  easeイージングです。  infinite永遠に繰り返し

.slider h1 img:nth-of-type(2) {animation-delay:3s;} 2枚目の画像はキーフレームがスタートして3秒後にアニメ―ションが始まる。何が始まるかは、以下の指定です。最初は見えない、全体の5%になった所で見える。100%になるまで見え続ける。
@keyframes overwrap {
0% {opacity:0;}
5%,100%{opacity:1;}
}

ポイント1:opacity:0は、何にも見えない。opacity:1は丸見え。opacityとは日本語で不透明。opacityは、0から1で指定。その間は、0.1,0.2,0.3,0.4,…….。
ポイント2:ベンダープレフィックスを書くときに、何にも無しのやつは、1番下が良い。

animation-delayプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションがいつ始まるかを指定する際に使用します。
———————————————–
先生。
①画像をレスポンシブデザインにする。は上手く出来ました。
②cssでクロスフェードですが、上手くループしません。4枚目の画像表示まではGoodですが、それ以降が変な感じです。

何故でしょうか?

wp テーマインストール 子テーマについて

大変な事をしてしまいました。
今まで、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を新しくインストールしなおすんですか???

wordpressインストールの場所とテーマのクローンcssについて

新しいお仕事が入りまして、
低予算で、スマホ対応で、自分たちでニュースやブログを更新したいとの事ですので、
ワードプレスで制作する事にしました。
デザインはシンプルでよいとの事なので、twenty twelveをカスタマイズしようと
思います。テーマを使わず100%オリジナル(フルスクラッチというんでしたっけ?)だと予算オーバーだし。

質問①
サーバーと独自ドメインを取得しました。今まで、自分のサーバーにWPをインストールする時は、
nobu-69.comというサイトとは別のサイト制作だったので、nobu-69.comのルートに別サイトのフォルダを作り
そこにWPをインストールしてましたが、今回の様な場合は、これからインストールするWPがメインサイトに
なるので、サーバーのルート(一番上の階層)にインストールすればいいんですよね?フォルダとか作らずに。

質問②
twenty twelveをカスタマイズする際に、clubringoの場合はttcloneというクローンcssをいじってますよね。
クローンってどうやって作るのですか?

wpで初仕事。ちょっとドキドキ。

WP CSS3フルスクリーン背景スライドショーについて-Fullscreen Slideshow

CSS3で、スライドショーを背景にしたサンプルをみつけました。
ちょっとやってみたくなって、
http://st-neverland.com/
でやってみました。
写真は仮です。

wpの、front-page.php (固定ページ)に
demoサイト
から、コピペ(^_^;)して、やってみました。
表示は出来るのですが、背景に指定できません。
コンテンツもきちんと表示できません。
スマホもグチャグチャです。

Demo1のように表示して、新着ブログも背景の中に表示したいのですが。
どこにスタイルを指定すれば良いのか、、、困っています。(~_~)

ヘッダー含め、修正箇所が沢山あると思いますが、どうしたら良いですか???。。。

front-page.php

div id=”page” は元々body id=”page” でした。
bodyはおかしいと思って。divに変更しました。
これだと、bodyには指定できてない気がします。。。
すみません。長いですがこんな感じです。

スマホ対応のデザイン

先生に質問

media queryでスマホ対応にしようと思い、作業中です。

参考にと思いhttp://www.malebranche.co.jp/
を見ました。画面横幅をせばめるとメニューが縦並びになります。その際にスマートフォン対応サイトへと出てきます。
それをクリックして見る(PCで)のと、実際スマホで見るのとでは、レイアウトが違います。PCで見ると、左側にサイドメニュー的なものがあります。

これは、どういうことでしょうか?

スマホ用に、別にサイトを作り、modanizerとかで
分岐して表示させてるのですか?

cssで画像をクロスフェードに挑戦

先生のを参考にやってますが、うまくいきません。手書きしてましたけど上手くいかないので、
とりあえず、一回コピペで試してみましたが、うまくいきません。
http://nobu-69.com/manakaa/sample2/
3枚目の画像の後に謎の空白時間があります。

現在の理解度

/*cssでスライドショー*/

クロスフェードするものの大外枠です。widthを切れば画面いっぱいに表示されます。
#bg_header{
margin:0 auto;
width:900px;
}

高さ指定は必須。指定しないと、場所が確保されないので。
画像は縦に3つ並びます。overflow:hidden;であふれた分を隠します。
.slider{
height:400px;
position:relative;
overflow:hidden;
}

各画像をabsolute the butcherで同じ位置に重ねる。
.slider img {
position:absolute;
width:100%;
}

opacity:0;で完全に透明にする。キーフレーム名(必須)をつける、overwrapとする。(任意の名前でいい)
24sは24秒という意味。何が24sなのでしょう?easeはイージング。infiniteは永遠に。
.slider img {
opacity:0;
animation:overwrap 24s ease infinite;
}

nth-of-type(1)は一枚目という意味かな?一枚目のディレイが0なのは、
すぐに表示させたいから。2枚目は4秒後に出現。3枚目は8秒後に出現。
.slider img:nth-of-type(1) {
animation-delay:0;
}
.slider img:nth-of-type(2) {
animation-delay:4s;
}
.slider img:nth-of-type(3) {
animation-delay:8s;
}

overwrapと名前をつけたキーフレームに色々と指定を書く。
ここが良く分からないです。
スライドショーの柿のやつの黒板の説明みたけど、?です。
難しいです。
@keyframes overwrap {
0% {opacity:0;z-index:10;}
5%,30% {opacity:1;}
44% {opacity:0;z-index:-1;}
45%,100% {opacity:0;z-index:-1;}
}

よろしくお願いします。

html5 audio

html5 audioトライしてみました。クロームとFireFoxは大丈夫ですがIEがダメです。

ちなみにクロームとFireFox、それぞれ用に拡張子の違う音源を用意する必要があります。

IE用のjavascriptがあるようなのでトライしましたが、上手く出来ないので、戻しました。

これを今度の金曜のライブ授業でお願いします!!

「どのブラウザでも視聴できる裏技」

ちなみに僕が参考にしたサイト

http://www.html5-memo.com/audio/player001/

http://coliss.com/articles/build-websites/operation/javascript/js-audio-js.html

http://kolber.github.com/audiojs/

興味のある人は見てね。

The B.B.Boogieのサイトを仮でアップしました。トップページの一番下に

「視聴」があります。

http://nobu-69.com/study/new_bb/index.html

 

音楽編集についての質問

マイスペースにバンドの曲をアップしようと思います。各曲、全部ではなく、1曲につきワンコーラスで30秒~1分位に編集したいのですが、こういうのって何で編集するか知ってますか?Flash?

音楽やってるのに、こういう事全然しりません。

よろしくお願いします。

 

 

スクロールバーカスタマイズ

パソコンのデフォルトのスクロールバーってダサいですよね。変な青いやつ。
コンテンツ内にoverflow-y:scroll;などとしてスクロールバーを表示させた時
あの青いのが出てくるとデザインが台無しです~。

jQでいいのがないか探してみたら
http://kachibito.net/web-design/tiny-scrollbar.html
が良さそうなんですが、使い方がいまいちわかりません。
本サイトのダウンロードボタン押しても????だし。
http://baijs.nl/tinyscrollbar/

今度の新年会の授業でお願いしまーす。 続きを読む

「ワードプレスで外部JS、cssを読み込ませる」について

11/2の授業の「ワードプレスで外部JS、cssを読み込ませる方法」について、未だ四苦八苦しています。
下記が現在の状況です。改善点があれば教えて下さい!

◆子テーマのフォルダに新しく***.jsというファイルを作り、これに自分用の設定を書いていく事にしました。
(※この子テーマのフォルダには、子header.php、taketori.jsとtaketori.cssも入っています)

◆その***.jsには

とだけ、記述しました。ちなみに↓

(new Taketori()).set({設定項目:値,設定項目:値}).element(‘縦書き対象要素ID’);

が、竹取の説明書きにある指定方法です。(竹取の説明はこちらです)

.element(‘縦書き対象要素ID’)には、自分のサイトをfirebugで見て、縦書きにしたい「投稿記事」に当たる部分の継承元が
div.post_contentでしたので、これを指定しました。
続きを読む