カテゴリー別アーカイブ: 勉強会

本日の勉強リクエスト(シンタックスハイライターとWPに動画を貼りつける）

■①シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.inの使い方がいまいちわかりません。
参考サイトhttp://kachibito.net/web-service/syntaxhighlight-in.html

一応やってみました。デザインを選んで、それのcssもダウンロードしてリンクさせたのに効いていない。？！
http://nobu-69.com/study/css_packman/css-packman.html

■■②youtubeをwpに貼りつける。http://kuulei90.com/?page_id=20
　５枚貼りつけてます。上の３つはプラグインで下の２つはプラグインではなく、youtubeのサービスの埋め込みコードをコピペ。
プラグインはPCで問題なしですが、スマホ(iphone4s)で縦長の変な表示になる。これを解消したい！
youtubeのサービスの埋め込みコードをコピペの方はpcで再生＆表示、問題なしですが、スマホ(iphone4s)の表示は縦長にならないでちゃんとしてるけど、
再生が出来ない。

ちゃんと表示させて再生するようにしたいです。

—-↓—↓—-↓——勉強会で解決しました。——-↓—–↓—–↓—–

■シンタックスハイライターについて。

①自動で生成されたhtmlのコードをコピーしてhtmlのbodyの中に貼り付けます。
②自動で生成されたjqueryとcssをコピーして自分で作ったファイルに貼り①のhtmlファイルにリンクさせます。
注）jQuery本体を忘れずに！

以上です。

それと、左横の行数を示す番号が必要でなければ、表示させたいコードをpreタグで囲むのが一番簡単です。
preタグはコードを書いたとおりに表示してくれるのでbrとかいりません。
こんな感じ↓。これはpreで囲んだだけです。

body{
background-color:#333;
color:#fff;
}

body{

background-color:#333;

color:#fff;

}

■■youtubeをwpに貼りつけたい！について。
wpのプラグインを使ったりyoutubeのサービスの埋め込みコードを使ったりと試してみましたが、どちらも多少の不具合があるので、一番いいのが
シンプルに動画のアドレス（動画観覧の際に表示されてるアドレス↓）をコピーしてテキストに貼り付ければOKという事になりました。

http://www.youtube.com/watch?v=KCLXy-vSu3o

1	http://www.youtube.com/watch?v=KCLXy-vSu3o

注）動画のアドレスは独立した行に貼りつけて下さい。

と、ここまで議事録を書いてびっくり！確認の為、僕のiphone4sで貼りつけた動画を見ようとしたら、見れません！（デスクトップでは問題ないです）
プラグインで貼りつけたやつはみれるのに。
なぜだ～！アンテナも最高状態です。はあ～。みなさんのスマホで上記の画像再生できますか？

html5で作るWPオリジナルテーマ：1

コメントをどうぞ

以下の構想で5/31から開始しました。一回、1.5時間で、全4回くらいを目処にやる予定。

目的

WordPressのオリジナルテーマを作成することで、WordPressのテーマ、テンプレートの理解を深める。

内容（予定）

index.htmlをhtml5とcssで作成する。
モバイルファースト＆フラットデザインでindex.htmlをレイアウト＆デザイン
index.htmlを最小の構成でWPテンプレート化する
メニュー、ウィジェットなどWPの機能を使えるように拡張

必要な心構え

WPへの理解を深める他にも、

html5、css、phpのコーディングの練習
レスポンシブWebデザインの練習
フラットデザインの練習

などの練習にもなります。各自、自分の目的に照らし合わせて、何か利用できる事があるはずです。その事を常に頭の隅に置いておきましょう。

必要な環境

個人で使えるWordPressを用意しておいて下さい。個人で使えるサーバをロリポップなどで契約してWPをインストールしておくか、XAMPPやMAMPなど、ローカル環境でWPをインストールしておいて下さい。

html5で作るWPオリジナルテーマ:1

5/30の勉強会から全4回の予定でWPオリジナルテーマを作成します。今回の参加者のスキルレベルは個人でWeb制作を仕事にする人から、html要素やcssをリファレンスを見ながらタイプする人までいますが、まあ何とかなるでしょう。各自、自分の現時点の課題を意識して勉強に望んで下さい。

1-1：ドットインストールの動画を見る

学習を始める前に、ドットインストールさんを見て、作業の概要をつかみました。
#07 ゼロからテーマを作ってみよう
次回の予習としてドットインストールを7回目以降くらいから見ておきましょう。初心者の人は最初からどうぞ。

1-2：作業用のフォルダとindex.htmlファイルを作成

新規フォルダ「wptest」を作って、新規に　index.html　を作成します。文字コードはutf-8にしましょう。
ドットインストールさんの手順を参考にindex.htmlを書いていきましょう。ただし、この授業ではマークアップにhtml5の要素も使います。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
</head>
<body>
<div id="top">
	<header>
		<h1><a href="/">はじめてのWordPress</a></h1>
		<nav>
			<ul>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
			</ul>
		</nav>
	</header>
	<div id="main">
		main
	</div>
	<aside>
		sidebor
	</aside>
	<footer>
		footer
	</footer>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>はじめてのWordPress</title>

</head>

<body>

<h1><a href="/">はじめてのWordPress</a></h1>

<nav>

<ul>

</ul>

</nav>

</header>

main

</div>

<aside>

sidebor

</aside>

footer

</footer>

</div>

</body>

</html>

1-2：ブラウザ間の差異をなくす為にnormalize.cssを設置

今回はreset cssを書かずに、normalize.cssを利用します。Downloadをクリックして、開いたページを「wptest」フォルダに”別名でページを保存”しましょう。
normalize.cssについてはコリスさんの記事が分かり易いので、読んでおきましょう。
head要素の最下部に、normalize.cssを読み込んでおきます。

<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
    <link rel="stylesheet" href="normalize.css">
</head>

<head>

<title>はじめてのWordPress</title>

</head>

1-3：style.cssを設置

「wptest」フォルダにstyle.cssを作成します。文字コードはutf-8にしましょう。後で、ちゃんと読み込まれているかを確認し易いように、bodyのcolorを変えてあります。

@charset "UTF-8";
body {
    color:red;
}

@charset "UTF-8";

body {

color:red;

}

head要素の最下部に、style.cssを追加します。

<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>

<head>

<title>はじめてのWordPress</title>

</head>

index.htmlをブラウザで表示して、Firebugなどの開発ツールでnormalize.cssとstyle.cssが読み込まれているか、確認しましょう。

1-4：今回のまとめ

テキストエディタの操作に慣れておこう

学習の際にはテキストエディタを使いこなす事が大事です。Dreamweaver、TeraPad、真魚、mi（Mac）など、なんでも良いのですが、初期文字コードはUTF-8Nにしておきましょう。また、普段から学習に使うテキストエディタをどんどん使って、操作に馴れておくのが良いです。自転車の運転と同じで、どうしても一定の練習時間が必要ですから、それは覚悟しておくように。

高性能な開発環境について

EclipseやAptana Studioなど、高性能な開発環境は、基礎が身に付いた人が効率を上げるために使うものです。html要素やcssプロパティがスラスラ書けるようになってから使うのをお勧めします。

便利なWebサービスについて

また、便利なWebサービスの中には「簡単なドラッグ＆ドロップ操作でWebサイトを構築できる」というものがありますが、これはhtmlやcssを勉強したくない人や、基礎が身に付いた人が仕事などのカンプ制作目的で使うツールです。学習中の人は無視しましょう。
例えば、カップ麺はおいしいくて便利ですが、料理が上手になりたいなら、カップ麺は排除すべきです。食材や味付けの知識や、調理道具の使い方を学ぶ機会を自ら逃してしまうだけです。

2013-5-24 勉強会

2件の返信

今日もランサーしょうじさんはお休みでした。寂しいなー・・・(ﾉ_･｡)
勉強会の概要

kanedaさんからの質問。リスティング広告とはなんですか？
りんごのサイトに入会申し込みフォームを作る。（会員を増やそうキャンペーンを開始!!）
かおりんごさんの提案「1からりんごのオリジナルテーマをつくろう」
真中のぶさんのリクエスト「パックマンをパクパクさせながら画面の右から左に移動させる」

続きを読む →

2013-5-17勉強会

コメントをどうぞ

勉強会の概要は

cssだけで三角を描く方法
cssアニメーションでパラパラアニメを作る方法について
position:absoluteのおさらい
Webデザインのセオリーを学ぼう

続きを読む →

勉強会の提案

2件の返信

これからの勉強会に提案があります。
このサイトのオリジナルテーマを一から作っていきませんか？
題して「html5で作るワードプレスオリジナルテーマ」
なんてどうでしょう？

html5もphpもデザインも制作の流れも学べますし、
チームで作り上げて行くことも良い経験になると思います。
制作過程は、このサイトで連載します。

これを一つの柱に、あとは個人の取り上げて欲しいお題を勉強するのは如何でしょうか？

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

以上

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

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

.pack {
width:300px;/*幅の指定は大事です*/
animation:pack infinite linear 10s;/*10sは10秒で下記のキーフレームアニメーションを行うという意味*/
}
@keyframes pack {
0% {transform:translate(130em,0);}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {transform:translate(-30em,0);}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}