作成者別アーカイブ: タカハシ先生

タカハシ先生

タカハシ先生 について

顧問と講師をやってます。本業はweb designerでマークアップ原理主義者の傾向があります。好きな要素は::before、::afterの疑似要素。好きなcssはanimationです。

学習履歴: 独学。元WAVE立川校講師

職業: フリーランス

SNS :

大雪だから仕方が無い

2014.2.14の勉強会は大雪予報のため中止します

2014.2.14に柴崎学習感で開催予定の勉強会は大雪予報のため中止します。
以下、注意点です。

  • レギュラー参加者の皆さんは、これを読んだら、この投稿にコメントしてください。
  • 各自、安全な場所にて勉学に励んでください。タカハシはSNSやFaceTimeで質問は受け付けます。
  • いつものcodeshareも利用してね。
  • バレンタインのチョコレートは自分で食べてしまわずに、来週まで保管してね。
wordpress

WordPressのユーザー一覧ページ用のテンプレート

「WordPressのユーザー一覧ページを作る」の記事の続きです。
「メンバーが多いのでページ送りをしたい」という旨のご質問コメントをいただいたので、実装してみました。お使いのWPのバージョンやテーマが違う場合は、適宜、読み替えて参考にしてください。 続きを読む

wordpress

WordPressのプロフィール欄を拡張してTwitterやFaceBookページへのリンクを追加しました

パソコン倶楽部りんごのテーマを編集して、プロフィール欄を充実させました。メンバー紹介のページの、各メンバーの情報欄に表示します。こんな感じです。
authors-prof
ついでにメンバーの表示順を投稿数の多い順にもしました。

管理者連絡先情報の変更点

prof-edit

  • Twitterアカウントを登録可能にしました。IDだけ入れると、そのIDのTwitterページへのリンクを生成します。
  • FaceBookアカウントを登録可能にしました。同上。
  • 学習履歴を入力できる欄を追加しました。
  • 職業を入力できる欄を追加しました。
  • AIM、Yahoo IM、Jabber / Google Talkの入力欄を削除しました

パソコン倶楽部りんごサイトのアカウントを持っているメンバーは、ダッシュボード/ユーザー/あなたのプロフィールをひらいて、確認してみて下さい。
各項目の入力は任意です。Twitterや、FaceBookで、個人的に連絡を取ってもらって構わないよ、というメンバーは、そのIDを入力して下さい。
入力した内容は、メンバー紹介 の他に、「○○の全ての投稿を見る」というリンクから行ける、各自の作者ページ(私の場合はこのページ)でも、表示されます。

管理者連絡先情報の拡張の方法

WordPressのテーマ編集で、functions.phpに以下の内容を追加します。

必要ならば、その他にも色々と項目を追加できますね。

テンプレート内で出力する方法

追加した連絡先情報のデータは、get_user_metaで取り出せます。$uidという変数にユーザーのIDが入っているとして、Twitterのページへのリンクは以下のように作成できます。

サイトのメンテナンスを行いました

2013-7-21に、以下の変更を行いました。

  • SNSボタン用のShareBarを重さ故に停止したので、その代わりに WP Social Bookmarking Lightを導入。重くないです。
  • 固定ページでもアイキャッチが使えるように、content-page.php に the_post_thumbnail() を追加。アイキャッチを登録すれば、固定ページでも表示されます。アイキャッチ登録がない場合は、これまで通り、横長のheader_imageが表示されます。
  • 各自のプロフィール欄を拡張する為に Twitter、FaceBookの入力欄を追加中。使えるようになったらお知らせします。
flat-multi-color

流行に終わらないフラットデザインのポリシー

フラットデザインって何?

最近のブームのはじまりはWindows8の「モダンUI(Metro UI)」あたりから。見た目の特徴としては、

  • 平面的:ドロップシャドウなどの3次元的な処理はしない
  • ミニマルな表現。グリッドや形状は正方形、長方形、正円などで構成され、角丸もグラデーションもほとんど使わない。
  • カラフルな色使い
  • タイポグラフィーを重視

ということ。ただし、見た目だけなら、似たデザインはありました。

続きを読む

dainashi

デザイニングインブラウザでFirebugを使う時のTips

FireBugであれこれやって、変更箇所をコピペする前に、「あれ、こっちのページではどうかな?」とリンクをクリックしてしまい、全ての編集がなかった事になり、うぉおおおおおおおおおとなった事がありますよね?
勉強中の場合は「ああ、神が練習する機会を与えて下さった」と悟りを開くのもアリですが、急ぎの仕事の場合はそうも言ってられません。
そんなFirebugの事故を未然に防ぐ方法を思いつきました。(既に誰かが思いついているでしょうが気にしません。)

方法1:全てのaタグにtarget=”_blank”を書いておく

こんな感じです。

これで、不用意にリンクをクリックしても、新しいタブが開くので「やっちまった!」事故が防げます。
もちろん、作業が終わった後で、「 target=”_blank” 」は置換して消しておきましょう。

方法2:jQueryで新しいタブでリンクを開くようにしておく

jQueryでちょろっとコードを書いておくと、上記の方法のように、後でaタグを掃除しなくても済みます。

この場合は、デザイン後に上記のscriptの記述を削除すればOKです。
それでは良いデザインライフを!(なんだそれ?)

html5-wordpress

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

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

目的

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

内容(予定)

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

必要な心構え

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

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

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

必要な環境

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

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

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

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

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

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

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

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

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

1-3:style.cssを設置

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

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

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

1-4:今回のまとめ

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

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

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

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

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

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

2013-4-19

2013-5-24 勉強会

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

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

続きを読む