作成者別アーカイブ: 真中のぶ

真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

学習履歴: WAVE立川校

職業: フリーのウェブデザイナー

SNS :

2013-5-24 勉強会リクエスト

勉強会でやって欲しい事をリクエストします。

①動画挿入用プラグイン「Viper’s Video Quicktags」を先ほどインストールしました。
 簡単に出来て特に問題ないのですが、iphoneで見るとサムネイル画像が縦に伸びてしまっています。
 クリックして別画面が開き動画を見る際には問題ありません。

②先週のcssアニメを自分なりにアレンジしてやってみました。それについての質問です。
 こちらを見て下さい。
 http://nobu-69.com/study/css_packman/css-packman.html
パックマンがパクパクやっているのは上手く出来ました。
「パックマンをパクパクさせながら画面の右から左に移動させる」
という所で、つまずいています。

勉強会用にzipファイルも用意しました。
http://nobu-69.com/study/css_packman/css-packman.html

以上

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

②について勉強会でやりました。ありがとうございました!

こんな感じで実装できました。

WP 動画挿入用プラグイン「Viper’s Video Quicktags」

動画挿入用プラグイン「Viper’s Video Quicktags」を入れてみました。

「YouTube」というボタンを押せばダイアログボックスが出てきますので、画像のurlを入れて下さい。
サイズも変えられるよ!
[youtube]http://www.youtube.com/watch?v=DC6J1kUd-64[/youtube]

参考サイト
http://wp-site.biz/4618

画像スライド アニメーション

下記のサイトのトップページ中央の画像スライド?アニメーション?
http://www.chanterelle.jp/index.html

これは、どのように実装しているのか教えて下さい。
jQueryかな。css3でも出来そうな気もします。(分らないけど)

出来たら本日の勉強会のお題としてお願いします。

—————————————————————-
2013-05-10 fri 勉強会でやってみました。jQueryではなく、css3で実装しました。
いい感じにできましたよ。タカハシ先生ありがとうございます!

僕のサーバーに作ったものをアップしたので見て下さい。
http://nobu-69.com/study/20130510_anime/green.html

html,cssは以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。

①家pngファイル 1000×86
home

②雲pngファイル 703×25
cloud

キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。

画像が重なっているのは、
position:absolute;
z-index
が効いているからです。

もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。

レッツ チャレンジ!

※ie9.ie8.ie6では動きません。

WP画像プラグイン nextGen gallery サムネイルがIEだと、ちゃんと表示されない事についての対処法

この記事のアイキャッチ画像を見て下さい。多分この文章の上に表示されてるかな。
上段のサムネイルがieによるものです。横幅が狭く、写真がつぶれちゃってますね。FireFoxで見ると下段の様にきれいに表示してくれます。

どうしてieはこんなにも意地悪なんでしょうか?

などと、愚痴を言っていてもサムネイルはつぶれたままなので、以下の記述をテーマのスタイルシート(style.css)に書くと直ります。

参考サイト
http://wordpress.org/support/topic/plugin-nextgen-gallery-ie-8-issue-with-image-lists

Twenty Twelve のデザインをIE8に適応させる

clubringo.comをie8で見た所、いろんな所が正しく表示されていませんでした。

これをなるべく正しく表示させるには、どうするのが最適でしょうか?
ちょっとした角丸くらいは、別にいいけど、大きなレイアウトの崩れは直したいと思います。
(完全にじゃなくてある程度は)
だからポリフィルじなくて、プログレッシブ・エンハンスメントかな?

普段html5でサイトを作成する場合、以下の記述をhtmlのheadの中に入れています。

clubringo.comもその方法で良いかな?だとしたら、この記述をどこにいれたらいいでしょうか?

また、以前サイトを制作した下際に下記の記述をheadにしてie8専用のcssファイルを作り
そこに色々書きました。こういうファイルも作った方がよいかな?

よろしくお願いします。

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

一番新しい議事録投稿記事のタイトル&本文の最初の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 プラグイン all-in-one-event-calendar (イベント管理)を設置してみようぜ!の巻

Q.WP プラグイン all-in-one-event-calendar (イベント管理)ってどんなもの?
A.カスタム投稿タイプを利用したwordpressのpluginです。(plug me inではありません)
「パソコン倶楽部りんご」サイトのトップページにある「勉強会の予定」とメニューの「calender」というページの表(カレンダー)がそうです。(2つは同期してるので便利)イベントやスケジュールを管理するのに便利そうです。

ではやってみます。ちなみに僕も初挑戦。

まずは、all-in-one-event-calendarというプラグインをインストールして有効化する。有効化すると自動的にダッシュボードのメニュー(画面左に縦に並んでいる)にEventsという項目が追加されます。

メニューのeventsのsettingsで色々と設定します。最初に大事なのは、どのページにカレンダーを表示させたいか
です。カレンダー専用のページが必要なら、その表示させたいページをあらかじめ固定ページで作っておく必要があります。settingsで「どのページにカレンダーを表示するの~?」という項目があるので、あらかじめ作って置いた固定ページを選択。

これで、ページにカレンダーが表示されました。そしたら適当にAdd Newで予定をいくつかアップしてみましょう。英語だけど良く読めば難しくないです。

次は、トップページに予定の一部分を表示させます。これは、外観ーウィジェットで設定します。upcoming eventsというのが画面左にありますよね。それを画面右にドラッグする。トップページならフロントページウィジェットエリアだと思います。(人によって設定が違うと思うので「思います」としました。)ドラッグしたのをクリックすると、ちょっとした設定が可能です。何件表示させるとか。

大まかには、こんな感じです。色などはCSSとかで変えられると思います。(まだやってないけど)。
設定も色々あるので、これからやってみます。

こんな感じhttp://kuulei90.com/

これは、2013-04-12の勉強会で学びました。
——————————————–
先生。
これで大丈夫ですよね?

WP 画像ギャラリープラグインとして優秀なNextGen Gallery

制作中のサイト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

親切に説明してくれる方々が世の中にはたくさんいて、便利になりましたね。ホントに助かります。
みなさん、ありがとうございます。

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」が使えないので、ここに追加で書きましたが、
コメントを返信でやった方が、第三者が分りやすいと思うのですが、良い方法はありますか?

WP TwentyTwelve フッターの”Proudly powered by WordPress”を「Copyrightほにゃらら」に変更する

内容は記事のタイトルそのまんまです。
footer.phpを編集します。

4,5行目をコメントアウト。
7行目を追加。追加したら表示させたいテキストを入れる。テキストを入れる場所は、kuulei90.comと書いてある所。

That’s All….so easy

WP twenty twelve 固定ページのコメントを残すを削除

バンドのサイト等で、
ブログ等の投稿記事に「コメントをする」というのがあっていいと思うけど、ディスコグラフィーやメンバー紹介のページを固定ページで作った場合、「コメントする」というのは、いらない。いかにもブログサイトです!みたいでカッコ悪いし。でもそれってデフォルトで表示されちゃうんですよね。

非表示にする方法
管理画面の「固定ページ」から「固定ページ一覧」で非表示にしたいページの編集画面に入って、右の上の方にある「表示オプション」をクリック!
「画面に表示」にある「ディスカッション」をチェックする。
すると、ページの下に「ディスカッション」の設定欄が現れるので、「コメントの投稿を許可する。」のチェックを外します。

たったこれだけで固定ページのコメントを非表示にすることが出来ます。

今回、僕はこれでやりました。
その他にもPHPの一行をコメントアウトするだけで、全部の「コメントする」を非表示に出来るみたいです。
参考にさせて頂いたサイト
http://webshufu.com/remove-comment-form/
http://researchnote.net/2012/05/wordpress9.html