2014-06-13 勉強会
この日の勉強会は、とても有意義な内容でした。内容の一部を自分のサイトにアップしました。
css animationでアニメーションさせる要素のwidthを%指定するとどうなるのか？
manaka designのtipsをご覧下さい。とても為になる事が書いてあります。
manaka design
css animationで要素のwidthを%指定
コメントをどうぞ
作成者別アーカイブ: 真中のぶ
wordpressトップページ(固定ページ)のタイトルを非表示にする
wordpress固定ページでは自動的にページのタイトルが表示されます。固定ページ作成時につけたタイトルが表示されます。トップページ以外はいいんですが、トップページに『TOP』と表示してあるのは、かっこ悪いので消したい！という場合に、content-page.phpを編集します。
参考サイトhttp://www.nishi2002.com/3836.html
twentytwelve デフォルト状態
|
1 2 3 4 5 6 |
<header class="entry-header"> <?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?> <?php the_post_thumbnail(); ?> <?php endif; ?> <h1 class="entry-title"><?php the_title(); ?></h1> </header> |
上記のものを下記のように書き換えます。
|
1 2 3 4 5 6 |
<header class="entry-header"> <?php if(is_front_page()) : ?> <?php else : ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php endif ?> </header> |
以上です。
wordpressの子テーマ function.phpについて(オーバーライドとは？)
wenty twelveの子テーマを作りサイトをカスタム中です。
WPのthemesの中にtwenty-childというディレクトリを作り親からコピーしてきたstyle.cssを設置してそれでcssを上書きをしています。
header.phpとfooter.phpも同じように親からコピーしてtwenty-childというディレクトリに入れました。
念のためfunction.phpもコピーして子テーマtwenty-childに入れました。
function.phpはオーバーライドできませんとあります。
functions.php の使用方法
オーバーライド？….読んでもよくわかりません。ただコピーするだけじゃだめなんですか？
教えて下さい。
/////////////////////////
子テーマfooter.phpをカスタマイズしようとしたら、エラー表示が出てfunction.phpの77行目がおかしいと言ってた（多分）だからfooter.phpは上書きできないと。
だから子テーマのfunction.phpをいったん削除したら、問題なくfooter.phpのカスタマイズが出来ました。
function.phpは他のphoとは違った特別なものっぽい。（多分）
////////////////////////
2014-05-30 の勉強会で謎がとけました。
オーバーライドとは？
例えばfooter.phpやheader.phpは、オーバーライドできます。「オーバーライドできます」と言うことは親テーマに書いてある内容を読み込んで、さらに子テーマに上書きした内容も読み込みます。ということではありません！
オーバーライド「できる」という事は、親のファイルは「読み込まれず無視」されるという事です。
functions.phpがオーバーライドできないと言うことは、親テーマと子テーマに同じ内容のもの（functions.php）があると駄目なのです。どちらも読み込んでしまうから、「あんた同じものがあるじゃないのよ！」と叱られてしまうわけです。叱られないようにするには、子テーマのfunctions.phpには追加した内容だけ書くようにします。まず最初に子テーマのfunctions.php内には親テーマに書いてあることは、削除しておきます。こうしておけば同じものが２つあるわけじゃないので、叱られません。ほっ
下記のものは、親テーマfunctions.phpからコピーした子テーマfunctions.phpです。（親テーマの内容を削除した状態のものです。）
（注意！）コメントアウトの部分は削除しないでください。下記参照。
|
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 |
<?php /** * Twenty Twelve functions and definitions * * Sets up the theme and provides some helper functions, which are used * in the theme as custom template tags. Others are attached to action and * filter hooks in WordPress to change core functionality. * * When using a child theme (see http://codex.wordpress.org/Theme_Development and * http://codex.wordpress.org/Child_Themes), you can override certain functions * (those wrapped in a function_exists() call) by defining them first in your child theme's * functions.php file. The child theme's functions.php file is included before the parent * theme's file, so the child theme functions would be used. * * Functions that are not pluggable (not wrapped in function_exists()) are instead attached * to a filter or action hook. * * For more information on hooks, actions, and filters, @link http://codex.wordpress.org/Plugin_API * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ /** * Twenty Twelve setup. * * Sets up theme defaults and registers the various WordPress features that * Twenty Twelve supports. * * @uses load_theme_textdomain() For translation/localization support. * @uses add_editor_style() To add a Visual Editor stylesheet. * @uses add_theme_support() To add support for post thumbnails, automatic feed links, * custom background, and post formats. * @uses register_nav_menu() To add support for navigation menus. * @uses set_post_thumbnail_size() To set a custom post thumbnail size. * * @since Twenty Twelve 1.0 */ |
これで問題ありません！
子テーマfunctions.phpに何か追加したい場合は、この状態から追加していきます。
2014-05-16 勉強会
svgアニメーションについて。
- 線に効果をつけるには？
- 「css animationが使えないブラウザだと、何も見えず、何も起こらなくなって困る」についての対処法
↑「SVG LINE アニメーション・応用編2014-05-15」に追記しました。参照して下さい。
visibility:hiddenとdisplay:noneの違い
visibility:hiddenは要素の高さをキープする。display:noneは要素の高さをキープしない。まあ、やってみて下さい。違いがわかりますよ。
疑似クラス
疑似要素でデザインに装飾を加えたりしていますよね。そして疑似クラスというのもあります。よく使う「:hover」というのは、疑似クラスにあたります。その他に「:target」というのもあります。今回「:target」を使ってどんな事が出来るのかやってみました。下記のファイル参照
SVG LINE アニメーション・応用編
2014-05-09 の勉強会で「SVG LINE アニメーション part2」というのをやりました。前回の応用編です。
SVG LINE アニメーション・基礎編
svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装！FlashやJavascriptを使わないので軽いのであります。
自分のサイトの備忘録「tips」にアップしました。
manaka design/tips
「SVG LINE アニメーション・応用編 2014-05-15」という記事をご覧下さい。
このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを！
SVG LINE アニメーション・基礎編
2014-05-02 の勉強会で「SVG LINE アニメーション」というのをやりました。
svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装！FlashやJavascriptを使わないので軽いのであります。
自分のサイトの備忘録「tips」にアップしました。
manaka design/tips
「SVG LINE アニメーション・基礎編 2014-05-05」という記事をご覧下さい。
このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを！
日本語のWEBフォントを自作してみました。
サイト内のロゴマークや見出し等の限られた文字だけWEBフォントにしちゃおう。レスポンシヴデザインに最適です。
先週の勉強会でやったやつです。
自分のサイトの備忘録「tips」にアップしました。
http://manakaa.com/tips.html
「日本語のWEBフォントを自作（限られた文字だけ）2014-04-25」という記事をご覧下さい。
このページにも説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。
なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。
どなたかチャレンジを！
CSSでかわいいリストマーク
かわいいリストマークのやり方です。
疑似要素で実装します。
例えば、ul, liのliにリストマークが出ますよね。
あんまりかわいくないので、かわいくしたいなあ〜という時に使えるテクニックです。
画像でも作れますが、リストが増えるたびに毎回画像を作らないといけないので、めんどくさい。それに若干だけど、画像なのでサイトが重くなる。
cssでかわいい疑似要素リストマークを作っちゃいましょう。
マナカデザインの備忘録http://manakaa.com/tips.html
興味のある方は見て下さい。そんなに難しくないので、やってみて下さい。
cssはFireBugで見て下さい。
SEO・検索でトップに表示
今年の2月の後半に自分のサイトmanaka designが出来上がったんですが、問題がありました。（結構な大問題）
地元、地域密着で仕事をしたいという事で、「府中ホームページ制作」というキーワードをメインに内部SEO（マークアップやいろいろ）をしましたが、以外と府中ホームページ制作というのがビッグワードだったのか、「府中ホームページ制作」で検索すると6ページ目に表示されるというとても格好悪い結果になっていました。（人には言えません）
サイト内に「もちろん検索結果が上位に表示される為の対策もいたします。」などと偉そうに書いているのに自分のサイトが出来てないんでは、説得力が0です。（信頼も0でしょう）
どうにかしようと先生に相談してアドバイスをもらったり自分で工夫したりしました。その結果、先日「府中ホームページ制作」で検索すると1ページ目のトップに表示されるようになっていました。とても嬉しかったです。いえーい。
特にインチキSEO対策をしたわけではありません。極めて正統派です。
ありがとうございました。
IE6,7,8でmediaqueries.jsが効かない
headに以下の呪文を入れたが効きません。
|
1 2 3 |
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
メディアクエリは
|
1 |
<link href="css/page.css" rel="stylesheet" type="text/css" /> |
こんな感じでリンクしてあるのですが、これだとダメなんでしょうか？
なんかリンクに問題があるような…..
いろいろやりましたが問題解決に至らずです。
明日の勉強会でお願いします。
jQueryでレスポンシヴ｜画面いっぱいスライダー
jQueryでレスポンシヴ｜画面いっぱいに表示するスライダー
Modernizr/モダナイザーとは？
2014-03-14 Fridayの勉強会の議事録です。
自分のサイトの備忘録ページに「Modernizr/モダナイザーとは？」というのをアップしたので、興味があれば見て下さい。
manaka design
Googleの目指すもの
昨年、大学（ムサビ）のコンピューターリテラシーという科目で検索エンジンについてレポートを書きました。その時のレポートを公開します。（合格しました）WEBデザイナーなら知っておくと良いと思います。というか、しらないとまずい。先生が何度もマークアップの大切さを説明していますが、理解していないメンバーもいると思うので一度僕のレポートを読んでみるといいと思います。
Googleの目指すもの
代表的な検索エンジンであるGoogle は、どのような仕組みでユーザーの求めているページを瞬時に探し出し、ユーザーに返しているのであろうか。そして要求に対して返された結果は、公平なものなのだろうか。そして、それらのサービスからGoogle の目指すものとは何であるのだろうか。
Google の公式サイトに「検索の道のりは、検索キーワードが入力される前に、数兆に及ぶページをクロールしてインデックスに登録することから始まります。」（*1）とある。この記述からユーザーからの要求がある前にGoogle は既にウェブ上にあるたくさんのページを見て回り（クロール）、インデック（索引）を作り更新していることが理解できる。どのようにクロールしているのかと言うと、「Google では、「ウェブ クローラ」と呼ばれるソフトウェアを使用して、公開されているウェブページをクロール（情報を取得）します。最もよく知られているクローラは 「Googlebot」です。クローラは、ユーザーがウェブ上でコンテンツを閲覧する場合と同じように、ウェブページを見て、ページ上のリンクをたどります。」（*1）との記述から、人間が手作業で見て回るのではなくウェブクローラというソフトウェアを使用している事が分かる。クローラは最初にいくつかのウェブページの情報を取得し、次にそれらのページのリンクからリンク先の情報を取得し、そしてさらにそのページのリンク先を辿り情報を取得して行くという作業を繰り返すことで、大きなウェブのかたまりをインデックスするのである。例えば、チューリップという花について知りたい場合「チューリップ 花」と検索ボックスに入力して実行する。するGoogle のソフトウェアはインデックスを検索して、これらの検索クエリを含む全てのページを探しだす。この場合、チューリップと花に関する数えきれない程のページが該当するかもしない。では、Google はどうやって、ユーザーが本当に求めているページがどれなのかを判断しているのであろうか。「Google では、200 以上の「問い」を立てて、そこから判断をしています。例えばキーワードがそのページに何回含まれているか、そのキーワードはタイトルに現れているのか、それともURL か、またキーワード同士隣接して現れるのか、キーワードの類義語が含まれているのか、そのページを所有する品質は高いか、低いか、スパムでかどうか、などの問いを立てて、各ページを評価しています。」（*2）との記述からページ内でのキーワードや類義語の出現率など明確な基準を設け判断している事が理解できる。最終的に、Google はこれら全ての要因を組み合わせて各ページの総合得点を算出して検索結果をユーザーに返しているのである。しかしGoogle の判断基準とは別にお金を出せば検索結果の上位に表示されるのではないか、また広告との区別はどうなっているのだろうか等の疑問が生じる。その疑問に対してGoogleは以下のように述べている。「Google は、公平で役に立つ検索結果を届けることに真剣に取り組んでいます。お金をもらって、あるサイトをインデックスに追加する事や、より頻繁にそのサイトのインデックス上の情報を更新する事、またそのサイトの順位を上げることは決してありません。」（*2）と述べている。すなわちGoogle は、お金で検索順位が変わる様なことはなく極めて公平だという事を言っている。さらに広告に対しては、以下のように述べている。「検索結果の右側や上に広告が表示される事があります。Google は広告事業にも積極的に取り組んでいますが、広告主のためにより適した閲覧者に広告を配信し、ユーザーのためには見たい広告だけを表示するよう努力しています。広告を通常の検索結果と区別できるように表示する事にわたしたちはとても気をつけています。探している情報を見つけるのに役に立つ広告が見つからないときは、広告は一切表示しません。」（*2）との記述から分かる事は、広告と公平な検索結果を表示する場所によって区別し、さらに広告も検索キーワードに関連したページを記載しているようである。
このようにGoogle は、ユーザーがその時々に必要な情報を的確かつ迅速に提供することや公平性を保つことなどで信頼を得てきたのである。「Google は Google 検索を通じてみなさんが見つける情報について、いつも気を配っています。そのため、ユーザーを第一に考えた一貫性のある取り組みを目指しています。」（*3）とあるようにGoogle のポリシーは常にユーザーを第一に考えているのである。世界で代表される検索エンジンになったのは、そのポリシーが世界のユーザーに伝わったからであろう。
参考WEB サイト
府中でホームページ制作
自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない（上を見ている以上）なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。
http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html
2014-02-21 勉強会 デザインとしてのマークアップ
この日の勉強会は、マークアップについてぼんやりなメンバーがいるので基本からやりました。
少々話がそれますが、デザイナーとはなんでしょうか？……..デザインする人のことです。そんなの知ってますよね（笑）
では、デザインとはなんでしょうか？….かっこいいのや可愛いいのを作るのもデザインですが、それだけではありません。便利で使いやすいや伝わりやすいを作るのもデザインです。ユニバーサルデザイン（できるだけ多くの人が利用可能であるようなデザインにすること）なんていうのもありますよね。
意外と前者だけがデザインと思ってしがいがちですが、後者あっての前者な訳です。簡単な例ですが、大人の高級感を出したいなら黒と白を基調にするのがいいでしょう（シャネルとか）。子供の元気さを出したいなら原色をたくさん使うといいですよね（トイザラスとか）。何を伝えたいかによってデザインは変わってきます。なので伝えたい事がないのであればデザインは存在しません。伝えたい事などはさておき、自分が可愛いやカッコいいと思ったものを表現するのもアリですが、それはデザインではなくアートです。（まあ、デザインとアートについて話すと長くなるのでここではそうしておきます。）
使いやすいや伝わりやすいを作るのがデザインという事なら、正しいマークアップでサイトを作るというのは絶対必要な事です。検索エンジンGoogleにサイトの内容を伝わりやすくすることでGoogleの評価は上がります。評価が上がるという事は検索が上位に来るという事です。検索が上位に来るという事は、ユーザーにこちらの伝えたい情報が伝わりやすくなるのです。
今度は見に来てくれたユーザーの気を引く為に見やすいや使いやすいを考慮しながらカッコいいや可愛いを表現していくのです。
ウェブデザイナーとはそんな仕事だと思います。僕もまだまだ未熟ですが、以上の事を知っているのと知っていないのとでは、だいぶ差が出てくるのではないでしょうか。というわけで見た目のデザインだけではなく中身のデザインも頑張りましょう。文字色を赤にしようかピンクにしようか悩むように、ここのマークアップはpかな？それともh2？などと悩んでいきましょう。文字色に答えはありませんが、マークアップには答えがあるので頑張りましょう。
あと、この記事を読んでいて何か違和感を感じませんでしたか？文才がないので読みにくいというのは無しで！（笑）
写真のサイズもそうですが順番が問題です。シャネル、トイザラスの順番で説明がされているのに、写真の順番が逆です。（こういうのはもともと人間工学という分野で研究されてきました。）使いやすさや見やすさを考えるのであれば、説明と写真の順番は同じでなければなりません。
footerで見かける「copyright©hogehoge.com all rights reserved.」のマークアップ
pでやったりaddressでやったりしてましたが、pの方が正しいみたいです。でも、そこが連絡先なのであればaddressがベター。下記サイト参照↓
以上勉強会まとめです。（というか僕なりのデザインの考え方かな w）