PHPが超苦手な私でもWordPressをゴニョ×2できる7つの理由 * prasm（プラズム）

ホーム » Webと技術 » wordpress » PHPが超苦手な私でもWordPressをゴニョ×2できる7つの理由

PHPが超苦手な私でもWordPressをゴニョ×2できる7つの理由

2012-4-24
wordpress
2
by shintarowfresh

パフォーマンスとか、サーバーサイドとか、ソレウメエノ状態です@shintarowfreshです。

追記・注意：JAVAとJavaScriptは別物だとご指摘をいただきました。
私が上記二つの違いを説明しようとするとにわか知識になるので、控えますが、下記記事で私がJAVAと表記しているところに関しましてはお手数ですがJavaScriptとと読み替えていただきたいと思います。
よろしくお願いします。

ごくごく個人的なコトを書きますが、昨日「男子ハック」さんの日刊記事に載ってしまいまして。相当嬉しかったです、ありがとうございます。
こんな世界の端っこにあるブログまで目を通しているなんて、情報収集とはまっこと恐ろしいですね。感謝します。

さて、本題に戻ります。知らない人は知らないことですが、この「frasm」はYOKO（結構有名なテーマです）というレスポンシブなWPテーマを当てています。

レスポンシブデザインとは超平たく言って、見る側の環境に合わせて表示がダイナミックに変わるwebデザインの方法です。
試しにこのブログのウインドウを狭くしてみて下さい。表示が変わるはずです。sidebarとか消えるはずです。

PC用やモバイル用にテーマをいちいち変えなくてもいいので、便利ですが、モバイル端末だろうとなんだろうと同じ画像、同じCSSをゴリゴリとブラウザに読み込ませるので、それまずいんじゃねーのと賛否両論なわりに、デファクトスタンダードになりかけている不思議なウェブデザインの方法です。

YOKOもともとはこういうテーマです

Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko | Smashing Magazine

トップの大きなバナーと、ブランディングロゴはテーマの機能で差し込んでいます。ありがたい。細部をかなりゴニョってあります。おかげでそこそこ重たくなっています。本当にありがとうございます。

しかし冒頭でも書いてあるとおり、私はPHPという言語はほとんど扱うことはできません、し、あまつさえというか、Javaとかjquery(JavaScriptライブラリ)もよくわかりません。
おそらくWordPressカスタマイズの本を読めば、デフォルトテーマの解説からはじまり、PHPの基礎とかを通過して、それからオリジナルテーマや欲しい機能を実装するんでしょう。

いや、僕も一応持ってますよ。カスタマイズ本。すぐ放り投げましたけど。誤解を避けるために言っておきますが、本が悪いんじゃなくて、僕の頭が悪いんです。

では、そんな頭が悪くて、ぽっちゃりで、なおかつひげの濃い私がどうしてWordPressの見た目ををゴニョゴニョできるのか、お知らせしたいと思います。

WordPressをゴニョ×2 出来る7つの理由

それはなぜなら

フロントエンドはばっちこい。HTMLとCSS3はある程度わかるから
jqueryとJava関係、それからfunctions.phpは全部コピペだから
レスポンシブデザインというものについて少しは理解があるから
バックエンドの大抵のことはプラグインでどうにかなるから
恐ろしく為になるwebサイトがたくさんあるから
Twitterを眺めていたら大抵の情報は手に入るから
最終的にはテーマをクリーンインストールしたら元に戻るから

と、こんな感じで楽勝なんです。

なんだよってなりましたか？そうなんです、べつにPHPを知らなくたって、いいんだよ。いや、よくはないけど、見た目の修飾はほぼCSSで出来るんだよ。
なので、機能じゃなくて見た目をゴニョりたい貴方は、いまからCSSを勉強したらいいよ。

フロントエンドの道はそれなりに険しい（し、コリ出したら歯止めがきかないw）

見た目の部分、こればっかりはCSSというモノを理解しないとかなりきついです。

確かにコピペで実装出来る機能はたくさんありますが、どこに何を当てればいいのか、クラスとかIDとか表記の順番とか、知らなければもうどうしようもないことがいっぱいです。わかってしまえばそう難しくはないですが、理解するためにはCSS独特のそしてブラウザ独特のクセがたくさんあって、それなりに経験が必要かもしれません。

ブラウザにCSSをデバッグする機能がくっついているので（firefoxならfirebugとか）ゴリゴリいじりながら覚えるのも手だと思います。ちょっと前にそれについて書いたので、よければどうぞ。

もう少し書きます。
CSSで必ず意味がわからなくなるいくつかのことがあります。大別して「float要素」「インライン・ブロック要素」「position要素」です。

こいつらは特にやっかいです。ですのでやっかいなことから料理していくのはどうでしょうか？

それなりの経験があったとしても、絶対理解していないことがあります。私の目から鱗が800枚ぶっ飛んでいった記事を張っておきます。
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 …
これは死ぬほど参考になった。
webデザインと行かないまでも見た目をゴニョるなら@WebDesignRecipeさんの記事は全記事読んだ方がいいです。記事にこもる親切さと熱量が他のブログとは比べものにならないからです。そしてご本人の見目が麗しいからです。肉眼で捕らえたことはまだありません。これからもないでしょう。

ちょっとはwebデザインやコーディングに興味がわいてきましたか？

ブラウザを閉じたくなりましたか？

まだ閲覧を続けている皆さんは、こちらのブログをオススメします。

現在webデザイン界ではどういうモノが流行っているのか、死滅しているのか、これが一発で把握できるブログです。

バンクーバーのWEB屋

バンクーバーのWEB屋さんは@onepercentdsgnさんが運営される生きた情報しかないブログです。
すべての情報が生きてます。そして惜しげもなく教えてくれます。教えてくれるものはカルボナーラの作り方でも何でもすすんで教えてもらいましょう。

CSS3って知ってますか？

たとえばこのボタン

push me!

立体感があって、なかなかよく出来てますが、実は画像は一枚も使われていません。

コードを見れば
<a href="#" style="background: #4162A8;border-top: 1px solid #38538C;border-right: 1px solid #1F2D4D;border-bottom: 1px solid #151E33;border-left: 1px solid #1F2D4D;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;-moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;color: white;padding: 10px 0 12px 0;text-align: center;text-shadow: 0px -1px 1px #1E2D4D;width: 180px;-webkit-background-clip: padding-box;margin-bottom: 10px;font: bold 20px "helvetica neue", helvetica, arial, sans-serif;line-height: 1;">push me!</a>
こんな感じになっています。グラデーションや透明度、影なんかをCSSで装飾しています。CSS3を知れば、こんなコトが至る所に盛り込めるのです。画像もいりません。
もちろんこの「frasm」も至る所にCSS3が満載です。透明になったり、ドロップシャドウがかかったりしてるところは大抵CSS3です。

知ってましたか？知りませんでしたか？
知らないと出来ないことはたくさんあるのです。

さて、他人任せすぎるのもさすがにちょっとアレなんで、デザイナー的なアドバイスも。

CSS3を使えばど派手なコトが出来ます。どばっとシャドウを出したり、グラデーションで色をつけたり、派手にしようと思えば思うほど出来てしまいます。

やめましょう。

機微というやつです。微に入り細に入り、魂は細部に宿るのです。気がつかれなかったらないのと同じ？

100％間違いです。

気がつかれなくていいんです。別にいいんです。赤と青どっちが好きですか？どっちだっていいんです。青が好きな人が青だねって気がついてくれる。素敵な青だねって言ってくれる、それがデザインというモノです。

赤が好きな人に青の良さをわかってもらおうというのは横暴で暴力的でさえあります。ごり押しなプレゼンは腕利きセールスマンと企画開発部の人に任せておきましょう。

少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

1pxにこだわるWebデザイナーになるために読んでおきたい記事まとめ – NAVER まとめ

気がついていましたか？この１pxに。これが機微です。

フロントエンドの最後に、もちろんズルする技も伝授します。これを知っておけば3年は時間が短縮出来ます。
Chromeと過ごした3年間！日英共に様々な情報を参考にしまくったWEB屋の厳選エクステンション27選！ | バンクーバーのWEB屋
この記事を見たとき、ほんとに泣きました。自分の無能さとか、モノを知らなかったことに怒りの涙を流しました。
泣いてばかりもいられませんので、ご紹介しておきます。最高に使えます。

レスポンシブデザインについての走り書き

レスポンシブデザインも大枠言ってしまえばCSSです。
ブラウザの横幅で＜div＞やらをけしたりフロートを解除したり、文字の大きさを変えたりしているだけです。

スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。スマートフォンサイトの最適化とは違い、CSS3のメディアクエリ機能を使って、デバイスのサイズごとにCSSの読み込みを変更することによって、1ソースでマルチデバイスに対応したサイトを制作することができます。しかし、その分ソースや読み込むCSSが多くなってしまったり、構成をしっかりと考えないとデバイスによって整理されていないレイアウトになってしまう恐れがあります。
via.ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう

リキッドデザイン（px指定を止めてフレキシブルで相対的な指定emとか%とか）とメディアクリエ（ブラウザ・デバイスの横幅でCSSをダイナミックに変更する）技術の合わせ技がレスポンシブデザインです。
PC用の＜h2＞とiPhone用の＜h2＞を別にする当、全く別のCSSを一つのファイルに書き込んで読み込むことが出来ます。

これさえ知っていれば、クリエごとに見た目をゴニョることはたやすいのです。
あなたもレスポンシブテーマに当て変えますか？

Photoshop VIP ☞ iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)

どれも無料のテーマです。ゴニョりがいのあるシンプルなモノばかりですよ。
レスポンシブじゃなくてもシンプルなモノがお好きならこちらもオススメですよ。テーマ当てるだけで最高にお洒落さんになれます。もちろん多少ゴニョッたほうが愛着1000倍増しですけど。

20 New and Free Minimal WordPress Themes

では、WPブログの機能面はどうすればいいのか？

コピペしたまえwww

わからないものはわからないんだから、もうコピペしたまえ。面白いモノで、コードから学ぶモノもあるんです。

後これだけは言えます。

WordPressで欲しい機能は大抵、ほぼ間違いなく、プラグインが存在します。

たとえばこんなのがあります。
プラグインの新規追加からではなく、Dashboardから直接プラグインを検索して当てることができるプラグイン複数同時にプラグイン挿入も可能

Plugin Central | Prelovac.com

プラグインを有効化した後、すぐさまプラグインのオプションページへのリンクを出現させてるプラグイン

Show Me Options | Prelovac.com

こんなのがあるって想像つきますか？想像がつく訳はないんです。す考えつく限りのWordPressを便利にするためのプラグインは人類の英知によってもうすでに編み出されているんです。

私の場合95％位の確率で発見できてます。のこり5％はプラグインが存在しないのではなくて、私の探し方が悪いんです。プラグインが探せないのは探し方が悪いんです。

最終的にプラグインがなくともfunction.phpでかならず誰かが実装してくれています。

たとえば、定型文の入力の手間を省きたい。あります。続きを読むに広告を自動でいれたい。あります。googleアナリティクスのコードをヘッダーに埋め込むのがめんどくさい。あります。リンクやカテゴリーを任意の順番に並べ替えたい。あります。画像を任意のサイズにリサイズして、さらに容量を減らしたい。あります。特定のキーワードに自動的にリンクを張りたい。あります。すべての記事のタグ付けを自動で行って欲しい。あります。

とにかく、あります。リンクはあえて張りません。ぜひ目的のプラグインまでたどり着いてみてください。ほぼ間違いなくあります。

恐ろしく為になるwebサイト

これらサイトをRSSに放り込むだけで、300年は時間をはしょることが出来ます。

かちびと.net

とりあえず機能強化を考えるならかちびとさんです。僕はびっとさんと呼んでいます。勝手に。
一日中見ていても飽きないくらい濃い情報が盛りだくさんです。
ちなみに、記事の上部の控えめな関連記事はビットさんで発見したテクニックを改良しました。コピペ最高。
お手軽WordPress Tips：コンテンツをサクッと表示させるショートコードを作る & 超絶便利プラグインAddQuicktag – かちびと.net

Webクリエイターボックス

惜しくも更新を停止されてしまいましたが、情熱の塊がそこに存在します。僕がWordPress弄りで、いや、webデザインをすると言うことで最も影響を受けました。言葉通り一日中読んでました。

Webデザインレシピ

現在webデザインブログの中ではおそらくトップの位置にあるのがWebデザインレシピです。初心者から超上級者まで、絶対に目から鱗がとまりません。

バンクーバーのWEB屋

webデザイン全般に、そしてセンス系、流行系に特化しているのがweb屋さんです。ほんとうにこちらの記事と、sennaさんのfacebookの投稿だけ見てれば今のニーズが手に取るようにわかります。

デザインどや！？

更新頻度は落ちてしまいました。リアルが忙しすぎるのでしょうか。コアなネタが満載です。コーディング中級者向けだと思いますが、サイトパフォーマンスや、デザインの考え方のチップスがモリモリ。

ホームページを作る人のネタ帳

ネタ帳さんは、プロ中もプロブロガーです。すべてがいいです。僕は全記事、過去記事の過去記事まで、すべてに目を通してあります。これはなんていうか、ブログ運営にさえ関わります。

コリス

コリスさんは、コリス様と呼んでいます。海外直輸入な最新のCSSやwebサービス、テーマ、あらゆるお洒落パーツがそろっています。コリス様です。様です。

ウェブル

かゆいところに手が届くチップスが満載です。はっとする瞬間がいくつもあります。知っておいてそんはないです。

ウェビメモ

サムシンググッドなとびきりのネタがきらりと光ります。コーディングを知り尽くした観点で、優しくいろいろ教えてくれます。上のサイトが難しければ、是非一度訪れてみてください。

そして僕が愛してやまない

IDEA*IDEA

田口さんはデザインから、考え方から、もう、プロです。びっとさんと、ネタ帳の山田さんと100shikiの田口さんは、マジで日本の宝です。

バックエンドが甘めですが、それは僕がエンジニアではなくデザイナーだからなので許してください。

必要な情報はTwitterの中にある

最後に今最も一番ホットなWPゴニョをお知らせしておきます。
しかもコピペで実装OKです。

こちらのブログを参考に、当frasmもアイキャッチ（各記事のタイトルの横にある丸い画像）にRT数を表示することが出来ました。@kuroji1987さんありがとうございました。
そしてwpブロガー界のカスタマイズ王として君臨しつつある@knk_nさんのこちらの記事が、カテゴリーページでも個別記事ページでもトップページでもサムネリスト最大のパフォーマンスを引きでしてくれます。

この記事読んで、危うく（ウチのブログにはサムネリストは邪魔だから）frasmもまねしようかと思ったくらいです。それくらい機能性・完成度は高いです。

カスタマイズの際、こちらの記事も併せて読んでもらえるとサムネリストの威力、デザインの力をわかってもらえるのではないかと思います。
なぜ和洋風◎のサムネイルリストが優れているのかの５つの理由*frasm

私は一応ブロガーです（ブログを書いている人という意味で）。ブロガーはブロガーに影響を受けます。あなたがWordPressをカスタマイズしたくなったのも、どこかの誰かのブログの影響ではないでしょうか。
このブログfrasmのデザインの根本姿勢は、完全にWebクリエイターボックスから派生しています。どことなくパーツが似ている（パクってはいない、断じて、僕はMANAフォロワーなだけ）のはその性だと思います。一番読みやすく、情報が咀嚼しやすかったのが、Webクリエイターボックスだったんです。

さいごに、カスタマイズに挑む皆さんに、Webクリエイターボックスより、最高のプレゼントがあります。