WordPressのオリジナルテーマでブログを作る方法②

この記事は、WordPressのオリジナルテーマでブログを作る方法①の続きです。

目次

テーマの編集

ではいよいよテーマの編集になります。
私のやり方になっちゃうんですけど、流れとしては

  • 1 パスを書き換える
  • 2 ページを分解する
  • 3 ループを理解する
  • 4 テンプレートタグを埋め込む
  • 5 必要ファイルを作成・複製する

こんな感じです。

1 パスを書き換える

最初に、画像などのパスをWordPress用の書き方に修正していきます。
こちらが、パスの書き方です。

もともとの記述

<img src="images/sample.jpg" />

修正後

<img src="<?php bloginfo('template_directory');?>/images/sample.jpg" />

twentyelevenの中にも、画像なんかはこの記載でかかれてますので、この部分をコピーしてきて、画像パスなどを全置換、してください。

header部分の、style.cssの読み込みの記載方法だけ、ちょっと違うのでご注意ください。
こちらもtwentyelevenのheader.php内に記述がありますので、
参考にこぴぺしてください。

もともとの記述

<link rel="stylesheet" href="style.css" type="text/css" />

修正後

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

一応、追加資料のほうにもこの辺、書いてますので、よろしければ参考にしてください。
「初めてのWordPress!オリジナルのテーマでブログを作る方法」追加資料【pdf】

2 ページを分解する

WordPressでは、各ページの共通部分を、「テンプレートファイル」にしてしまって、読み込むことができます。


たとえば、上の画像のデザインで言うと、このindexページの、header部分、右カラム部分、フッター部分は、他のページでも全く同じ内容です。

そのようなファイルを
header部分はheader.phpに
右カラム部分はsidebar.phpに、と新しいファイルを作ってしまいます。

index.phpのソースには、
ヘッダーがあったところに、phpの「header.phpをよみこんでくださーい」という記述を書いておきます。

<?php get_header(); ?>


同じように、右カラムがあったところに、

<?php get_sidebar(); ?>

フッターがあったところに、

<?php get_footer(); ?>

と記述。

index.phpはソースがスッキリなるはずです。

3 ループを理解する

php、が苦手でも、これだけは理解しておいたほうがいい記述です。

ブログでは、投稿の内容を複数件、表示することが良くあります。
例えば、最新記事の5件表示、同じカテゴリーの記事5件表示、など。

上の↑感じで同じレイアウトの箱を5回表示させたい!
そんな時の書き方がこちら。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		~ここに表示したい一つの箱のソースが入るよ~
	<?php endwhile; ?>
<?php else : ?>
~ここは記事が1件もなかった時の表示内容~
<?php endif; ?>

図で書くとおそらく下のような感じ。

「もし投稿があったら、投稿内容を表示させましょー」、というphpの記述を書いて、
その中身は、投稿内容の、ひとつの、ボックス分の、ソースが入ってきます。
投稿内容がないときは、記事はありません、といったような表示をだす、っていう記述です。

※ループに対してたくさんの条件を設定することもできます。
例えば「カテゴリー3の記事だけを5件表示」とか。
そんなときは、「WordPress 特定カテゴリ」とかわかりやすい言葉で検索すると、たっくさん参考、解説サイトが出てきます!

4 テンプレートタグを埋め込む

ループ部分の記述が終わったら、テンプレートタグを埋め込んでいきます。
日付やタイトルなど、テスト用に、ソースにテキストをじかがきしてる部分に投稿内容を反映させるため、テンプレートタグを埋め込んでいきます。
このタグについてはWordPressのCodexにタグ一覧が載っています。

たとえばtitle、上の画像の「斜めフレンチ・・・どうのこうの」の部分は、Codexの中から必要なtitleタグを見つけて詳細を見てみると、

Codexに答えが載ってます。
記述方法まで詳しく紹介されています。

ここ以外でも、たくさんのブログでよく使われる、テンプレートタグは紹介されてますので、ぜひ、いろんな参考サイトを調べつつ、タグを埋め込んでいってください。

5 必要ファイルを作成・複製する

次に、必要なテンプレートファイルを作っていきます。
WordPressをインストールした時にもともと入っているテーマにはもりもりとphpファイルがあります。
ですが、自分で、テーマを作るときに、まねして、全部準備することはありません。
もりもりある中でも、ブログ制作時によく利用されて、最低限抑えておきたいテンプレートファイルは少しだけです。

こちらは、ブログの構成を考えたときの図。

ここから必要ファイルを考えた場合、以下のようなファイルを作ることになります。

今回の構成では、最新5件表示のデザインは、トップページもカテゴリーも全部、同じなので、ほぼ、複製するだけで、すみます。

他にも、Codexには、カテゴリーやタグ以外でも、色んなファイルが紹介されていますので、追加したい機能に対する、該当ファイルを使ってオリジナルブログを作っていくことができます。

私はだいたいこんな感じで、Codex、Twentyeleven、参考になるブログなどをいったりきたりしながら、ブログを制作しました。
この内容は、ほんとに最小のページ数でブログを作る方法を、ご紹介したのですが、もし、ここまでできたら、機能を追加したり、ページを追加したりすることにも、調べ方が、慣れてきてますので、サクサクと、比較的簡単に、できるようになってるんじゃないかな、と思います。

目次へ

WordPressで制作した「ブログ」でよく使うプラグイン

「プラグイン」はWordPressの拡張機能です。
プラグインはWordPressの大きな魅力の一つで、phpなどを一生懸命記述するのではなく、そのサイトに合った機能を簡単に追加していくことができます。
プラグインは無料のもの、有料なものとありますが、「なんでこんな高機能で無料!!」とびっくりするほど充実した手の込んだ大盤振る舞いの機能がさくっと追加できたりします。
追加方法も簡単、直接、管理画面の「プラグイン」⇒「新規追加」から、インストールすることができます。

Contact Form 7

Contact Form 7
コンタクトフォームを、一発で、実装することができます。
日本語もOKだし、デザインもカスタマイズできます。

WPtouch

WPtouch
スマートフォンに最適化させるプラグインです。
デフォルトのままでなんかかっこいいインターフェイスになります。
利用者がすごく多いので同じデザインをよく見かけてしまうのですが、簡単なカスタマイズも可能です。

SNSプラグイン

最近はFacebookやtwitterからの、ブログの訪問者さん多いと思います。
たくさんの方に見てもらいたいって方は、ぜひ、こういったソーシャルネットワーク系の、アイコンを、設置されるといいかと思います。

SexyBookmarks

このプラグインはこのブログでも使ってるのですが、ぴょこっとでてくるデザインがかわいいです。

WP Social Bookmarking Light

ブログに限らず多くの色んなタイプのWordPressのサイトで使われています。

WP-PageNavi

WP-PageNavi
ページ番号を並べた、ナビゲーションリンクを、表示させることができます。
今どこのページにいて、あとどくらいページがあるのか、直感的に分るので、訪問者には便利です。
デザインもカスタマイズすることができます。

目次へ

最後に。WordCamp Tokyoが開催されるよー!

最後に、なんども申し上げていますとおり、WordPressはたくさんの参考サイトがあります。
勉強会やコミュニティもたくさんあります。

私が今までお世話になって、これからもお世話になるであろう、親切な「WordPress上級者」の方々にはとっても感謝しております。

そして、、、
2012年9月15日にWordCamp Tokyoが開催されます。
もうすぐ1000枚用意してあったチケットがなくなる勢いなのだそう。。。(ΦωΦ)すごいです。

WordCampではたくさんのデザイナーさん、プログラマーさん、ブロガーさん、などなどと交流ができて、WordPressのことを知ることができる無料のお祭りみたいな感じです。
私も今からとっても楽しみで、どのセッションに行こうかと、タイムテーブルとにらめっこしてます!
当日はそのへんうろちょろしてると思うので、是非、みなさん名刺交換&仲良くしてくださいヽ(´ー`)ノ☆

デザイナーさんにとってプログラム書いたりって、とっても難しいですが、こういった機会にお友達を作って同じ悩みを共有、相談できる人ができると、きっと楽しいはず!
と思います。WordPressにご興味ある方、こういった機会を大事にしてぜひ、参加してみて下さい。

また、今回、ジョブボードとやらが用意されるらしく、参加者が働く先を、企業が一緒に働く仲間を探す場が提供されるそうな。
(詳しくはWordCampで仕事を探せ!WordCampで仲間を探せ!!で。)
今、まさに一緒に働く仲間募集中なので、いい出会いがあるとうれしいです(ΦωΦ)♪

WordPressのオリジナルテーマでブログを作る方法①

目次

はじめに

昨年9月、WordCamp KOBEで「初めてのWordPress!オリジナルのテーマでブログを作る方法」というお題でスピーカーをやらせていただいてもうすぐ1年。。。
終了後のスライド公開時に「しゃべった時のカンペもそのうち公開します」とか言ってそのままズルズル、ずーーっと気になっておりました。

ググればこの手の情報はきっちりまとめてくださってるブログなどがわんさかあって、今更、需要無さそうですが、もうすぐWordCamp Tokyoも開催されますので、「行ってみようかしら(・∀・)」と思う方ちょっとでもいたらうれしいなぁ、と思い、まとめてみました。

約1年前のスライドとカンペをもとに、変わった部分(WordPressのバージョン的にも私の知識的にも)を織り交ぜつつオリジナルテーマでブログを作る方法を書いてます。
全スライドはこちら WordCamp KOBE「初めてのWordPress!オリジナルのテーマでブログを作る方法」スライドと追加資料です
※でもこのスライド約一年前のなので情報が古い部分もあります。。。
「PHPよくわかんないけど、html、cssはおっけーでWordPressにちょっと興味があるWebデザイナーさん、またはWebデザイナー目指してる人」など、初心者向けの内容です。
コレ見たらブログが作れたよ!っていう内容ではないですが、今後WordPressに触れる上で参考になるサイトや調べ方などをざっと紹介できたらと思います。

目次へ

WordPressをおススメする理由

WebデザイナーでSNSなどを利用して情報を収集している方多いかと思います。
そうやって情報集めまくってると、それをメモっといたりするアウトプットをする場が欲しくなってきます。
そのひとつの方法として「ブログ」があり、私は最初アメブロやらFC2やらでブログをやってたのですが、Webデザイナーなりたいんだからやっぱオリジナルのデザインで、好きなレイアウトで、好きな構成のブログ作りたいなぁーと思いはじめたのでした。
その頃ちょうど、転職も考えていたので、ポートフォリオの一つになるといいなぁとも思ってました。


そこでPHPもよくわからないまま、WordPressのブログ制作に挑戦しました。
が、わからないなりにもなんとかできました。

今、ほんとにWordPressって大人気で、
WordPressに興味がある人がたっくさんいるので、
ちょっと調べると情報が満載です。
上級者の方からたくさんの情報を得ることができます。

たとえば、

WordPress Codex
こちらは、WordPressの公式オンラインマニュアルで、
初心者の方が欲しい情報はほぼ書いてある教科書のような存在です。

Codexに載ってないような、、もっと具体的な質問も、
WordPressフォーラムに投稿すると、答えてくれるWordPress上級者さんがいらっしゃいます。

あと、今回のWordCampのような、無料のイベントも各地でたくさん開催されてます。
この他にも、ちょっと検索すると、参考になるブログがたくさんあふれています。
こんなかんじで、WordPressは初心者のために色々と教えてくれる先輩もたくさんいて、わからないことがあっても情報量が多いので調べやすいです。

私の場合は、こうやってWeb上でいろいろと調べながら、WordPressにふれていって、今ではお仕事でもWordPressを使ったサイトを制作できるようになりました。

PHPの知識が浅くても、WordPressのおかげで動的なページが制作できるようになります。
また、WordPressに慣れることで逆にちょっとだけPHPが理解できるようになります。

WordPressに慣れていくためには、まずは最初にブログを作って、いろいろとテストしていくのがすごくいい練習になると思います。

目次へ

ブログの構成を考える

まずはブログのデザインに入る前に構成を考えます。

ブログと一言で言っても、いろんな種類があると思うんですけど、内容や目的、ターゲットなどをよく考えてどんなコンテンツやページが必要なのかを考えてみます。
そのためには、私の場合はいろんな既存のブログを見て、構成とか参考にさせていただきました。

今更な感じですが、Webデザイナーさんにとっては有名ドコロ、デザインがステキでWordPressで作られているサイト。

こういう素敵なブログを見て、
「ほぉ~2カラム構成で、サムネイルを豊富に使ってて、、、」とか研究してました。
(よそ様のブログを研究した時に書いた記事⇒4つの人気ブログのデザインを研究。しつこいですが、またブログリニューアルしました

ちなみに、こちらのサイトWPデザインギャラリー

WordPressを使用した国内外のWebサイトを収集したWebデザインギャラリーで、カテゴリーで「個人の日記」など選ぶことができるので、WordPressで作られているたくさんのブログを参考にすることができます。

WordPressの「投稿」と「ページ」

WordPressのブログの構成を考える上で、「投稿」と「ページ」っていうのがとても重要になってきます。

WordPressでは、コンテンツを作成する時に「投稿」または「ページ」という方法でページを作成します。
(※カスタム投稿タイプという投稿方法もあるのですが、これは初めてWordPressをさわる方はまだふれないほうがいいかなぁ~と思います(;・∀・)
今後慣れてきて機能を追加したい時なんかに挑戦してみたらいいかと!
ちなみに私はコーポレートサイトなんかを制作するときはカスタム投稿タイプをモリモリに利用するものの、自分用のブログ、今まで3つ作って来ましたが、全てカスタム投稿タイプは使っていません。)

その「投稿」と「ページ」2つの違いなんですけど、

画像の左側は、管理画面の「投稿」の画面、右側は「ページ」の画面です。
すごく似ているんですけど、
「投稿」の方は、カテゴリーを選択したり、タグを設定することができます。

ですが、右側の「ページ」の方ではそれができません。

カテゴリーやタグでソートできるのも、「投稿」で、作ったページなので、まさに「投稿」は、「ブログ」向きの機能だと思います。

で、「ページ」の方は、時系列には影響せずに、恒久的、半固定的な情報を掲載する際に適していますので、たとえば「このサイトについて」とか「お問い合わせのページ」なんかが向いてる機能だと思います。

「投稿」でどんなカテゴリー、どんな構成にするか、また、「ページ」でブログとは別の、どんなページを追加するか、それぞれ考えます。

最近よく見かける、ブログのページ構成

こちらは、最近よく見かける、ブログのページ構成です。

まず、トップページで最新の記事数件をタイトルやサムネイル のみで 表示させます。

そこから、記事の個別のページにリンクする、そう行った作りのブログが、最近よく見るなーと、思います。

さらに、この、トップページと同じようなレイアウトで、タグとかカテゴリーでソートされたタイトルだけ、数件表示のページから、個別記事へリンク、そういった感じの構成です。

私のブログもそうなんで、具体的なページを見てみるとこんな感じなんですけど、

イメージ画像で、ぱっと見で視覚的な情報を得ることができたり、おっきなフォントサイズでざーーっとタイトルを確認できたり、、、などなど、自分なりの見せ方を追求できるのがオリジナルデザインのブログをつくる醍醐味だと思うので、ぜひ、その辺も研究して、オリジナリティあふれるレイアウトを工夫してみてください!

今回はこの構成でのブログ制作についての流れを考えてみたいと思います。

構成が出来上がったところでデザインに入っていきます。

目次へ

デザイン~コーディング

デザイン

準備するデザインとしては、先ほどの構成を元に、5件表示用のレイアウトがひとつ、あと個別記事のデザインが二つ目、

この2つだけで最初に挑戦してみるブログであれば、十分なんじゃないかなーと思います。

あと、必要があればっと書いてるんですけど、、「このサイトについて」や「お問い合わせ」のページも、あるといいかもしれません。
ブログによっては、フッターの部分に自己紹介がしてあったり、お問い合わせフォームが右カラムにあったり、とその辺も自分にあったいろんな形にできますので、工夫してみてください(・∀・)

具体的なデザインをご紹介します。
これ、5件表示のページ。

細かく見ていくと、先ほどの構成案のとおりで、右カラムにカテゴリー別のリンクを設置。
あと、「キーワード」という形にはしてますが、タグのリンクになってます。

それぞれ、タグやキーワードで絞られた、最新5件表示のページ(レイアウトは全て同じ)にリンクするような構成になっています。

次に、各記事のページ。

先ほど例に上げたような見やすい素敵なブログは、見出しのデザインとか段落ごとの十分な余白とか、そういったことがすごーく考慮されている感じがします。

一つの記事内でも、いろんなスタイルを用意しているようです!

そのほかにも、訪問者に長時間見てもらうために、一つの記事の最後に関連する記事へのリンクを表示したり、人気のある記事をランキングで表示したり、と、色んなブログで色んな工夫がなされています!

また、訪問者に、再度、遊びにきてもらうために、RSSやtwitterアイコンを設置したり、アフィリエイトを考えている方は、バナーの設置場所とか、それに合わせたカラムサイズ、効果的な広告の位置を考える、といいのかも。

せっかくオリジナルデザインのブログなので、いろいろ工夫したデザインを作ってみてください♪

コーディング

デザインが終わったら、コーディングです。
あとからワードプレスの機能を加えていきますので、
まずはWordPressことは考えずに、いつもどおりモリモリコーディングします。


作ったデザイン2種類のPHPファイルとcss。あと画像フォルダ。

目次へ

WordPressをインストール

サーバーについて

WordPressを設置するには、PHPとMySQLが使えるサーバーが必要なんですけど、レンタルサーバーによって特徴や規制があります。

データベースを作ったりとか、サーバの知識とかあまり無くて初めて体験する方にとっては、ちょっとだけめんどくさい工程があります。(慣れちゃったらダイジョブなんですが!)
ここでつまづいてしまう方多いと思います、私もくじけました(;・∀・)
ローカル環境でWordPressを動くようにしたり色んな方法があるかと思いますが、最初は思い切ってWordPressを自動インストールできるサーバを契約してしまった方がいいと思います!

インストールするときに、心折れてしまっては、どうしようもないので、初めての方は一番簡単な方法で、やってみるのを私はオススメします。。。
参考サイト
WordPress Codex レンタルサーバ情報

レンタルサーバの説明どおりに作業して自動インストールが完了したら、管理画面とサイト側のページが確認できます。

これは、WordPressに最初に入ってるテーマです。これから、いよいよ、自分のデザインを反映させていきます。

自分のオリジナルテーマと合体!

で、この自動インストール後の全ファイルをのぞいてみると、膨大な量のファイルがあります。
あまりの量で、けっこう、気持ちはなえてしまいそうなんですけど、実際、使うファイルは、ちょびっとだけなので、ダイジョウブです!

WordPressを、インストールしたフォルダ直下の、wp-contentフォルダ、themesフォルダと中に入っていきます。
このthemesフォルダの中が、自分のオリジナルのテーマを入れる場所になりますので、このthemesフォルダの中に自分でコーディングしたテーマをフォルダごと入れちゃいます。


※ちょっと内容が古いですね、ゴメンナサイ。でもやることは変わらないです。。
このnails-parkっていうのが今回作ったオリジナルテーマで、まるごとUPします。

themesフォルダの中に既に他のテーマがもう入ってます。(WordPressのバージョンによって、入ってるテーマは違います。)
これが先ほどサイト側の画面で見えてたテーマです。
こういったもともと用意されているテーマは、これから自分のテーマを編集していく上で、すごく参考になりますので、私は参考ソースとして、一応、とっておきます。

では、まずは、サイト側で自分のテーマが表示されるように、設定します。

管理画面の、外観テーマのページを見てみると、
twentytenが現在のテーマとして、設定されているのがわかります。
※情報が古いです、スイマセン(´・ω・`) 2012年8月現在、最新のWordPressをインストールすると、「twentyeleven」というテーマが入ってるかと思いますがどちらも参考にする部分は同じです!

もともと用意されているテーマの中のstyle.cssを開いてみると、一番最初の部分にテーマの名前とか、URLとかの記述があります。
これがこのテーマの情報です。

管理画面内でテーマを選ぶときに表示される情報がここになります。

なので、もともと用意されているテーマのstyle.cssの記述を参考にして、「自分の」オリジナルテーマ内のスタイルシートを編集してください。
自分のテーマに沿った情報に、記述を修正していきます。

修正したファイル、をまとめてアップすると、ちゃんと、管理画面外観テーマに、自分のテーマ情報が、表示されるようになります。

ここで自分のテーマを有効化させると、なんとなく、自分のテーマの内容が表示されるようになります。
この時点ではcssや画像が反映されてなくて、予定してたものと違うのでドキドキしてしまいそうですが、これから自分のテーマを、WordPress仕様に書き換えていきますので、この時点ではこの表示でダイジョウブです!

WordPressのオリジナルテーマでブログを作る方法②へ続きます。

出ているボタンは押される。


押すか押さないか。

買うか買わないか。

勝負の瞬間。

様々なサイトを見ていて、時々本当に食べたくなるようなおいしそうなアクションボタンと巡り合います。理由は分からないがなぜか押したくなるようなボタン… 押してしまった、購入してしまったというようなボタン。魅力的なボタン…。

ボタンを変えるだけでCVRが上がる??

「冗談でしょう」と思われる方を責めることはできません。

でも冗談ではありません。国内・海外を問わず、ボタンの変更だけでCVアップしたという事例が数多くあり、また当社がこれまで行ってきたテストにおいても、「ボタン変更のテスト」を行うと、CVが上がります。中にはCVRが数10%リフトアップするというケースも珍しくありません。これはボタンを変更した場合だけの数字です。

考えてみれば、そんな不思議な話とかではありません。営業の世界にもよく「ASK FOR THE SALE」の重要性が強調されています。お客様にはっきりと「買って下さい」と言う営業マンの方が売れると言われています。ボタンはWEB上の営業マンの声ですので「買って下さい」を堂々とアピールしないと誰も買ってくれません。
「私たちの商品は素晴らしい。是非買って下さい」と。

さて、ボタンを変更する際にはどのようにボタンを変更すればいいのでしょうか。 主に三つの軸があります:

①   文言                     【例】 「購入」というテキストのボタンを「今すぐ購入!」に変更

②   ボタン色              【例】 現在の灰色のボタンを目立つような赤色に変更

③   ボタンスタイル   【例】 現在の四角いボタンを少し丸いボタンに変更

また、ボタンの位置も重要です。ユーザーの目線に入るかというところがポイントになります。画面の真ん中にあった方が良いか、右側か左側かどちらに置いた方が良いか。etc

この間、ある海外サイトから得た裏情報を共有させていただきます。

それは。。。

『ボタンに関してはオレンジ色がよく勝つ。テキストリンクに関しては紺色がよく勝つ。』

日本は海外と違うから参考にならない?

そうかもしれません。そうではないかもしれません。国内においても、大阪の人の好みと東京の人の好みは違うかもしれません。是非いくつかの色、文言などをテストしてみて下さい。意外な結果が出るかもしれません。予想通りの結果が出るかもしれません。テストしてみないと分かりません。

当社のDLPOで同時に数10パターンのボタンテストが可能です。是非お試しください。9月末までにお申込いただければ30日間無償です。

↑ ほら!えらいでしょう?僕。 (ASK FOR THE SALE)

YouTube Post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque ornare metus nec scelerisque. Proin convallis vehicula arcu id scelerisque. Aenean at velit at purus gravida auctor. Nulla non neque odio. Nam pulvinar dui quis leo suscipit elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla velit metus, ornare vitae malesuada in, fermentum ac turpis. Vestibulum convallis pulvinar tellus eget ultricies. Sed sollicitudin, sem vitae elementum euismod, velit arcu mattis diam, in scelerisque purus lorem eget elit. Sed vitae nunc in metus semper hendrerit. Curabitur metus felis, interdum quis sodales at, aliquam eu eros. Proin ac lacus urna, vel pulvinar ante. Integer posuere, sapien ut iaculis molestie, justo quam ultrices orci, eu laoreet nisl libero vel elit.

Fusce egestas enim nec nulla aliquam ut sodales neque cursus. Integer eleifend, enim id ultrices consequat, libero arcu posuere ante, ac commodo nisi neque in justo. Integer sed lectus vitae nibh facilisis euismod. Aliquam elit dui, molestie id laoreet ac, sollicitudin vitae velit. Morbi sapien sem, vestibulum in iaculis sed, semper vel risus. Praesent augue tellus, iaculis et semper id, pellentesque nec diam. Cras malesuada, dolor at blandit dignissim, ligula lectus tincidunt tellus, lobortis dignissim metus libero quis lorem. Morbi fringilla turpis id odio interdum eu volutpat orci dignissim. In euismod dui eu massa tincidunt ut porta neque gravida. Praesent vel dui nulla. Suspendisse ultricies vulputate urna, a consectetur mi laoreet in. Curabitur placerat pulvinar eros scelerisque condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla velit metus, ornare vitae malesuada in, fermentum ac turpis. Vestibulum convallis pulvinar tellus eget ultricies. Sed sollicitudin, sem vitae elementum euismod, velit arcu mattis diam, in scelerisque purus lorem eget elit. Sed vitae nunc in metus semper hendrerit. Curabitur metus felis, interdum quis sodales at, aliquam eu eros. Proin ac lacus urna, vel pulvinar ante. Integer posuere, sapien ut iaculis molestie, justo quam ultrices orci, eu laoreet nisl libero vel elit.

Fusce egestas enim nec nulla aliquam ut sodales neque cursus. Integer eleifend, enim id ultrices consequat, libero arcu posuere ante, ac commodo nisi neque in justo. Integer sed lectus vitae nibh facilisis euismod. Aliquam elit dui, molestie id laoreet ac, sollicitudin vitae velit. Morbi sapien sem, vestibulum in iaculis sed, semper vel risus. Praesent augue tellus, iaculis et semper id, pellentesque nec diam. Cras malesuada, dolor at blandit dignissim, ligula lectus tincidunt tellus, lobortis dignissim metus libero quis lorem. Morbi fringilla turpis id odio interdum eu volutpat orci dignissim. In euismod dui eu massa tincidunt ut porta neque gravida. Praesent vel dui nulla. Suspendisse ultricies vulputate urna, a consectetur mi laoreet in. Curabitur placerat pulvinar eros scelerisque condimentum. Fusce egestas enim nec nulla aliquam ut sodales neque cursus. Integer eleifend, enim id ultrices consequat, libero arcu posuere ante, ac commodo nisi neque in justo. Integer sed lectus vitae nibh facilisis euismod. Aliquam elit dui, molestie id laoreet ac, sollicitudin vitae velit. Morbi sapien sem, vestibulum in iaculis sed, semper vel risus. Praesent augue tellus, iaculis et semper id, pellentesque nec diam. Cras malesuada, dolor at blandit dignissim, ligula lectus tincidunt tellus, lobortis dignissim metus libero quis lorem. Morbi fringilla turpis id odio interdum eu volutpat orci dignissim. In euismod dui eu massa tincidunt ut porta neque gravida. Praesent vel dui nulla. Suspendisse ultricies vulputate urna, a consectetur mi laoreet in. Curabitur placerat pulvinar eros scelerisque condimentum.

出版した書籍を10倍売るためのプロモーション戦略 って勉強会に行ってきた

7月27日、ソフトバンク クリエイティブ株式会社で開催された、出版した書籍を10倍売るためのプロモーション戦略 ~『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』に見るWordPressとSEO、SMO、Amazon対策~という、勉強会に参加してきました。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書」は、WordPress勉強中、利用中の方なら、きっともうお手元にお持ちの方いっぱいいらっしゃるかと!
WordPressの書籍で売れに売れまくってる本です。

本に関して、最初の感想はとにかくサンプルサイトがきれいです。
デザインのクオリティが高くてワクワクします!
私、実は書籍の中身よりも結構前にサンプルサイトを拝見いたしまして、きれいなデザインだなー(゚ω゚=)と、だいぶジロジロ見てしまいましたw
この本読むとこれと同じWordPressサイト作れるよ〜♪っていう流れで手取り足取り制作の流れを教えてくれる、タイトルどおりの教科書的な作りになってます。
私的にはぜひぜひ、デザイナーさんが読むとすごくためになるんじゃないかなぁ〜と思います!
(本自体のデザインも技術書なのにキレイで見やすくまとめられてて好きです。)

この書籍での一番すごいなーと思うポイントは、書籍の内容についての質問に答えてくれるんです〜
こちらで⇒『WordPressの教科書』FAQ
私だけでしょうか。。。普通、質問ってビクビクしますよね(・Θ・;)
「その質問既出なんだから全部確認してから来てよ」
「ちょっと、その質問的がずれてんだけど」
なんて言われたらこえー、すみません、すみません、ごめんなさい、と思って。

でも今回の勉強会でお話しされてたんですが、そういった質問も丁寧にお答えしているそうです。
多分、お答えする側からしたら結構手間なんじゃあ?と思うんですが、FAQページは一つ一つ丁寧に答えられてるため、どんどん長くなってます。
すごい。
なんか、最近、WordPressを勉強しやすい環境がたくさんあってほんとにありがとうございます、です。

今回の勉強会に参加しまして、本の「親切丁寧さ」が、制作前・制作中・出版後本を手に取った読者へのフォローまで徹底しているのが伝わってきて、そりゃ売れるよなー、なんて思ってしまいました。
(同時に、売れる本って、やっぱ手間かかるんだなーと思いました(^▽^;))
勉強会の内容については株式会社コミュニティコムの星野邦敏さんのブログで詳しくご紹介されてます。

で、私今回初めて知ってほぉ~!と思ったのですが著者陣の中のお一人が、以前、国語の先生をされてたそうですよー。
きれいな日本語のプロが文章を書かれていて、@imura_designさんがデザインしたサンプルサイト、さらにWordPress界のアノ人@jim0912さんがソース書いてる本ってなんかすごいですね(・・;)
勉強会の後の懇親会は残念ながら都合で参加できず、で残念。。

じっくり時間かけてこの本読んでくと、かなりWordPressの知識が深まる一冊で、WordPress初級・中級の方にオススメです。
私ももっとじっくり読まなきゃー。

※ちなみに、会場までの道順、だいぶ迷って六本木をさまよいました。
GoogleMAPで吐き出される結果がどうもおかしいようで、六本木一丁目からすぐなのに麻布十番付近に行かされるウロウロする人が数名いらしたようで、、
GoogleMAPに対してプリプリしてたのですが、実は私は六本木一丁目から向かったにもかかわらず徒歩7分のところを35分かけてやっとたどり着いたので、便乗してGoogleMAPに切れてる場合じゃないな、と反省してます。ゴメンナサイ。

新しいiPad(第3世代)のRetinaディスプレイに使える壁紙まとめ

16日に新しいiPadが発売されましたね。 フルHDよりも更にデカい解像度なので壁紙を探すのが大変です。 写真系はそこそこあるので、写真以外で個人的に気に入ったものを集めてみました(写真っぽい奴も入ってるけど気にしない) [...]

WordPressってなに?WordPressで作るサイトのサンプルいろいろ。

WordPressってなに?
全然違うお仕事してる友人から聞かれます。

制作者向けのWordPressのお話って、ちょっと調べるとわかりやすいまとめがわんさかあって毎日毎日感謝でいっぱいです。
で、制作者のためのお話しではなく、WordPressってなんなのか、WordPressでどんなサイトが作れて、他のWebサイトとどんな違いがあるのか、
ディレクション経験0の私が、「Web制作者ではない」人向けに、上手にわかりやすく説明できるようになりたい、、、と思い、まだまだ勉強中で悪戦苦闘してる身ですが、考えてみました。

「WordPressって最近よく耳にするので、WordPress勉強始めるぞっ!でもWordPressってなんじゃいっ!」って初心者の制作者様にもちょっと参考になりますように。。。

目次

1、ホームページの更新作業について

最近私のまわりでも、会社のホームページほしい、とか、
自分で作ってるんだけど、なかなか更新していくのがむずかしいよう、という話をちょろちょろ聞きます。

例えばこういうサイト。
どシンプルなコーポレートサイトを例に。

この中の、この部分。

最近のWebサイトってTOPページにこういう表示、良くありますよね。
このNews&Topicsを更新したい!なんてあると思います。

方法の一つとしては、
更新作業全部、制作会社に任せちゃうカタチにする。
このときのメリットとしては、依頼するだけでめんどっちい作業自体は全部お任せできます。
デメリットは、依頼する会社にもよると思いますが、
制作会社に支払う更新費の問題はもちろん、更新までに時間がかかったり、やっぱり修正、ってなったときに同じ作業を踏むのにいちいち依頼かけるのがめんどうだったり、など。

他の方法は、自分で更新しちゃう。
ただ、更新するにはHTMLをいじらなきゃいけないので、まずその為に、HTMLとサーバーにUPして公開するための最低限の知識なんかが必要です。

一般的な例として上でご紹介したようなサイトの「News&Topicsを更新する作業」を、ざっと確認してみます!

①まずは追加、修正ファイルを確認!!

Webサイトを閲覧する際、そのサイトがそれぞれどういう構成になってるか、全部で何ページあるのかって、見てる側は、いちいち気にしないですよねぇ。
でも制作する側、更新していく側からする、と全体のページ数、それぞれのページのつながり方はとっても重要だったりします

この「News&Topics」という項目に限定して言うと、このサイトでは、
まずトップページに最新5件を表示しています。

なので、まずはトップページのNews&Topicsに公開したい情報を追加します。
そのかわり、一番下の古い情報を削除、、、とかそういった作業が必要になります。

また、「最新情報」の一覧ページがある場合は、ここも忘れずに。
今回の場合、グローバルナビの「最新情報」ボタンをクリックすると、
過去の更新情報の一覧が出てくる作りになってます。

ここのページも一番上に新しい情報を追加します。

あと、情報の詳細ページです。
タイトルだけでなく、なかみ(詳細)が表示されるページです。
これは「ページの修正」ではなく「ページを追加」しなきゃですね。

そして、この詳細ページはいままでに更新した、そしてこれから更新していく、各情報ごとに1ページずつあるはずですので、どんどんどんどん増えていく感じになります。

以上、このサイトではNews&Topicsに1件の情報を追加するのに3つのHTMLファイルをいじることになります。

②HTMLをいじる

HTMLってこんな感じです。
先ほどのコーポレートサイトのトップページのNews&Topicsの部分のみのHTMLの記述。

<div id="News">
<h2><img src="/images/topics.gif" alt="News&Topics" width="600" height="35" /></h2>
<div id="NewsBox">
<dl class="NewsStyle1">
<dt><span>トピックス</span>2010.10.09</dt>
<dd><a href="/news/sample1.html">サンプルタイトル①サンプルタイトル①サンプルタイトル①</a></dd>
</dl>
<dl class="NewsStyle2">
<dt><span>ニュース</span>2010.10.09</dt>
<dd><a href="/news/sample2.html">サンプルタイトル②サンプルタイトル②サンプルタイトル②</a></dd>
</dl>
<dl class="NewsStyle1">
<dt><span>レポート</span>2010.10.09</dt>
<dd><a href="/news/sample3.html">サンプルタイトル③サンプルタイトル③サンプルタイトル③</a></dd>
</dl>
<dl class="NewsStyle2">
<dt><span>ニュース</span>2010.10.09</dt>
<dd><a href="/news/sample4.html">サンプルタイトル④サンプルタイトル④サンプルタイトル④</a></dd>
</dl>
<dl class="NewsStyle1">
<dt><span>レポート</span>2010.10.09</dt>
<dd><a href="/news/sample5.html">サンプルタイトル⑤サンプルタイトル⑤サンプルタイトル⑤</a></dd>
</dl>
</div>
</div>

これ、だいぶシンプルなソースで、htmlの知識がある方にとっては、なんてことないと思うのですが、わからない方にとっては、おえーー(´ж`;)ゥって感じなんじゃないかと思います。
この該当部分を追加、修正、削除しなきゃいけません。

③サーバーにUPする

トップページ(修正)、一覧ページ(修正)、詳細ページ(追加)、3つのページのhtmlファイルを、サーバーにUPしなきゃいけません。
サーバーってなに?。。。
えっと、扱う機能やサービスに応じてさまざまな種類があるのですが、ここでいうWebサーバーは、Webサイトのデータ(HTMLとか画像とか他ファイル)を、なんだかごにょごにょしてくれて、世界中から閲覧できる形にしてくれるんです。

よくイメージできなかったらごめんなさい。
とにかくHTMLいじっただけで終わりじゃなくて、サーバーにファイルを送る作業も必要になりますよ、という話です。
その為にはまた専用のソフトを準備して、、、というゴタゴタもあります。

ニュースをひとつ更新するだけで、HTMLやサーバーに関する知識が全く無い方だとなかなか頭の痛い作業になるかと思います。
また、ちょっとHTMLの構文をコピペミスで間違えちゃったりすると、激しくレイアウトが崩れたり、リンクなどの機能が効かなくなったりして、「もう、こわいよぅ。更新するのイヤだよぅ。」という状態になった経験がある方もきっとたくさんいらっしゃるかと・・・。
3年前の更新情報に「New!」アイコンが付いてるような、うそつきーー!!ってホームページになってしまうこともしばしばです。

2、CMSとは

そんなときに便利なのがCMS(コンテンツマネージメントシステム)なんですが、
CMSっていうのは乱暴にまとめるてしまうと、HTMLとかサーバーの知識がなくても、ホームページのコンテンツを楽に追加修正できるシステムのこと。
そのCMSの中でもたくさん種類あって、有名どころでは
EC機能に特化した国産のオープンソース、EC-CUBE(イーシーキューブ)とか、コミュニティ系が得意なXOOPSとか、
ブログを構築するのに便利、とされてるMovable Type、などなどなど。
以前勤めてた会社では自社で開発したCMSを扱ってましたし、世の中にはいろんな種類のCMSがあるようです。

なんだかたっっくさんいろいろあって、その機能とか規模とか肝心なコスト、いろんな要素を吟味した上で選択することができるわけですが、WordPressはそんなCMSのうちのひとつです。

って言ってもどうやって簡単にホームページを更新できるのーーーと、あんまり想像つかないと思うので少し例を。(全部架空のサイトです。)

3、WordPressで、サイトを更新する方法

さっきのサンプルコーポレートサイトの管理画面、そのサイトに適した形で管理画面を作ることができます。

これ、WordPressの管理画面

WordPressで更新する手順はこんな感じ

画面の左っ側にずらりとナビゲーションが並んでるので、
「新規追加」をクリックすると入力画面が出てきます。
そこにタイトル、本文を入力して「更新」ボタンをポチすると、更新完了!

おーー!!なんか簡単!じゃないですか!??
管理画面からこうやって投稿するだけで『News&Topics』のトップページ、一覧ページ、詳細ページ、自動的に更新されるんですー!

アメブロやFC2なんかのレンタルブログサービスを使ったことある方は想像しやすいかと思いますが、
お客さん(閲覧者)に見せる画面とは別に、管理用のページがあって、
そこからどんどん更新、修正、できるわけです。

これは一番最初にサイトを制作する時に、
「新しい記事を投稿したら、トップページに最新5件表示させて、一覧ページにも表示させて、詳細ページが生成されて、、、、」
といった命令を聞いてくれるテンプレートを準備してあるからなのです。

『こんなコンテンツを更新したい』
『コンテンツをこういったレイアウトで魅せたい、、、』
といったことを、最初に制作しておく箱(テンプレート)をその仕様に準備しておけば、
管理画面から投稿するだけで、箱がごにょごにょやってくれますので、サーバーにUPしたりなんかのめんどくさい作業が必要ない!ということです。

ただ、『タイトル』と『本文』だけでなくて、WordPressではもっともっと独自の投稿内容を用意(カスタマイズ)することが可能です!

4、WordPressでの更新コンテンツ具体例

先ほどの「News&Topics」なんかもいいけど、さらにもっと複雑な内容なんかも自分で更新したい!
そんなときのために。

『タイトル』と『本文』だけでなくてWordPressの拡張機能を使うと、もっともっと便利な管理画面を作ることができます。
こんな機能つくってくださった制作者様、ほんとにほんとにありがたくて身悶えます。
これ、私にとって最大のWordPressおススメポイントです!!

例えば・・・

飲食店のサイト。

お店のメニューなんかって季節によって追加したり、季節限定のコースがあったり、と、いろいろと頻繁にいじりたい項目だと思います。

【サイト側】

こんな感じのサイト、レイアウトだったとしたなら、、、

【管理画面】

管理画面はこんな感じで。

使いたいお料理の写真、価格、コメント、こんな感じで
投稿したい内容をあらかじめ決めておけば、必要な投稿画面にカスタマイズができます。
自分で簡単に更新していけて、いい感じのレイアウトで表示されるようになります。

アイデアしだいでいろんなコンテンツにできます。

美容院サイト スタッフ紹介ページ

美容院や、エステ、病院などを探すときは、スタッフのキャラクターが私はとっても気になります!
なので、スタッフの紹介ページなんかがあるといいなーと思うのですが、どうでしょうか!

【サイト側】

スタッフの紹介ページ。新しいスタッフが入ったり、逆に辞めちゃったーって時なんかも、さくさくっと自分で更新。

【管理画面】

これも必要な項目を準備した管理画面に。

コーポレートサイトセミナーのお知らせ

セミナーを開催している会社なんかも更新もりもりしたいんじゃないかなーと思います。

【サイト側】

セミナーだけじゃなくてもスクールとかでもなんかいろいろ。

【管理画面】

同じように、必要項目をあらかじめ準備。

ケーキ屋さん商品情報

【サイト側】

ケーキ食べたいですね。

【管理画面】

人気No.1!とか季節のおススメアイコンなんかも管理画面のチェックボックスでサクッと表示。ケーキケーキ。

インテリア家具ギャラリー

【サイト側】

写真で魅せたいようなサイトはギャラリーがおススメですが、ソースが大変複雑になってくるので、htmlの知識が無い方にとってはなかなかのハードル。

【管理画面】

管理画面から投稿すると簡単です。
もともとのテンプレート(箱)のほうにレイアウトだけじゃなくスライドする命令も書かれてるので、写真と説明文投稿するだけで動きのあるページを自分で更新できます!

5、まとめ

「ホームページ」と一言でいっても、見た目のデザイン面ではもちろん、
普段閲覧してる側からは見えない部分である、管理面、機能面でも、いろんな種類があります。

まずは自分のホームページでどういったことを表現したいのか、
どんな効果を期待しているのか、
更新していく環境やコストに関して、いろんな条件の中で、デザイン面でも機能面でも、ぴったりなホームページが作れるといいですよね!

もちろん「更新する気は全くない、名刺代わりだし、そんな暇もないし」という方にとっては、「自分で更新できる」機能はいらなかったりしますし!
各CMSでできないことや、デメリットもありますし、多方面から検討する必要があります。

なんか、書いてみたのですが、ほんとはもっともっとたくさんWordPressの素敵なトコあるのに、私のイチオシについてのゴリ押しになってしまいました。。
私はまだまだ色んな引き出しを広げていかなきゃいけない状況ですが、とりあえずWordPressの素敵な部分をほんの一部ですが語ってみました!

おしまい。

Flash CS 4以降でライブラリにある画像を書き出して保存する方法

ちょっとflaで使用されている画像ファイルが必要だったのでメモ。 標準でこういう機能ってついてなかったんですね。 ※ 実行環境:Windows 7 / FLash CS 5 ライブラリの画像をエクスポートするJSFLをイ [...]

WordPress wp_headの各コード出力を無効にする

最近WordPress 3.3.1にアップデートしたサイトがあって、3.2時代に無効にしていた出力の一部が復活してしまってたので、ひと通り洗いだした。

link rel=”alternate” (フィードのリンク)

remove_action('wp_head', 'feed_links_extra', 3);

コメントフィードだけ消したいっていうのはできないっぽい?ので、無効してからテンプレに直接メインフィードのだけ記述します。

meta name=”genarator” (WPのバージョン)

remove_action('wp_head', 'wp_generator');

消した所でセキュリティリスクが減るわけではないですが、表示する必要性がないので。

link rel=”prev”とlink rel=”next”

remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

3.2.1までは「adjacent_posts_rel_link」で消えていましたが、3.3.1ではなんか長ったらしい名前になってました。

link rel=”canonical”

remove_action('wp_head', 'rel_canonical');

消さない方がいいものですが、別にプラグイン等で出力している場合などに。

link rel=”shortlink”

remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

これも使わないので。

link rel=”EditURI”とlink rel=”wlwmanifest”

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

リモート投稿をしない場合はこれで消します。

はいこれでスッキリしました。

FeedlyでSync’ing feedly. Please wait…が無限ループする

Feedly8.0で「Sync’ing feedly. Please wait…」無限ループについて解決方法を探しまくってたら情報を見つけたので。

Firefox9にFirebugとFeedlyがインストールされている環境下だと動作しなくなるようです。現時点ではFirebugを無効化するしかなさそうなので気長にアップデートを待つこととします。

あ、だいぶ遅いですけど、あけましておめでとうございます。

私の愛するフォント「ひま字」 #LOVEFONT

愛するフォントを告白するブログを書いてみましょ

先日、WordCampTokyoの時に、WEBCRE8@glatyoudさんに初めて(?。。。でしたよね。なんか私一人で勝手にずっと知ってる人!みたいな気になってますが。。。)お会いしまして、おいしいお菓子をいただきました。
手作りtwitterクッキー。でも、写真撮る前にぱくりと食べちゃった、ごめんなさい(´;ω;`)とってもおいしかったです(´;ω;`)
↓こちら↓にmixiとかEvernoteとかのアイコンクッキーの作り方が書いてあるよ。
新しく追加! WordPressやEvernote等のクッキー(webクッキー中級編)

このように@glatyouさんはお菓子をくれる人なのですが、このときお誘いをいただきました。

愛するフォントを告白するブログを書いてみましょーーっ!ってお誘いです。

↓こちら↓にすでにまとめられてるのですが、
#LOVEFONT まとめました。継続募集します!
すごく遅くなってしまいましたが、私もちょっと告白させてくださいー♪

お仕事で使うフォント

私は普段、中小企業のコーポレートサイトを作ることが多く、
どちらかと言えば「かっちり」なサイトばかりです。

少ないページ数でわかりやすく多くの情報を見せたい、ってことで、
なかなかシャレた英字フォントやら手書きフォントやらは使う機会も少なく、
特に意味もない部分で、アクセント的にしれっと入れたりくらいしか利用してないです。

なんかこれまで作ったタイトルバーいろいろ。

これだっ!、、、と、サイトのテイストにあったものを直感的に決めてしまってます。。。

この企画で書かれてる他のデザイナーさんの記事見てると、すごくフォントへのこだわりがあって、私も、もっとこだわりもってチョイスしなきゃだなーと反省してみたり。。。
とくに紙のお仕事もされてる方って、フォントへの愛がすごいですよね!
「あ、このフォントかっこいいなぁーー」なんて思っても、なかなかお仕事では使えないのでスルーしてしまってます、、、
私もこだわりを持って引き出し増やさなければっっ!!って思いました。

私の好きなフォントはひま字です

そんな中でも私が大好きなほんわかフォント、ひま字
↓こちらは作者様のサイトから。

かわいいですよねーほんとに。

ひま字の成り立ち

イラストレーターのKF STUDIOさんがつくったフォントです。
私は、KF STUDIOさんのイラストが大好きで大好きで、このイラストの感じにぴったりなフォント、ひま字もホント好きなんですね。
(福岡のご出身とのことで、勝手に親近感を抱いております。こんなかわいいらしいイラスト描いてくれるお母さんなんてめちゃくちゃうらやましい限りです。)

ひま字の特徴

一文字一文字が、イラストみたいにかわいいです。
手書き感満載です。
このフォントもKF STUDIOさんのイラストのようなやわらかく温かい感じです。
日本語フォントでかわいらしいのってたくさんありますが、ひま字は太さもしっかりあって読みやすいフォントだと思います。

ひま字の使いどころ

なかなか私のお仕事環境では使える機会はないのですが、プライベートでちょこちょこ使わせてもらってます。
私、趣味でイラストを書いてて、以前ボランティアで絵描いたときのもの。
ちょっと文字入れたときに。

個人で友達に年賀状送ったりするときも使わせてもらってます。
これ、去年の年賀状。

今年も使わせてもらう予定。。。まだ何も作ってないけど。

手書き感満載だけど、はっきりとしていて読みやすいです。

お仕事ではこういったかわいいテイストは使えないですが、友達間で配る簡単な「何か」を作るときは(旅行のしおりとか作るのすごい好き。。。)、ほぼ「ひま字」です。
やわらかくて、かわいくて、でもなんかちょっと抜けてる感じがして大好きなフォントです。

個人・商用サイトで無料利用可能で漢字もそろってます!
KF STUDIOさんのイラストも必見です!
以上、フォント「ひま字への愛」を語りました☆

特定のフォントを強く愛する利用者の皆さんへ
フォントの愛を語りませんか?
皆さんのブログ記事で、自分のそのフォントへの愛を語り尽くしてみませんか?特に欧文フォントのweb上の情報は圧倒的に英語が多く、webcre8は読めてません…。好きなフォントなのになんでそのフォントが出来たか、とかはサッパリ、そんなの悲しいですよね。この機会に調べてみるのも良いでしょう。そしてwebcre8は、それらの記事を並べて、にやにやするつもりですw
もちろんデザイナに限らず、見ていて美しいといった思い入れを持っているならそれも良いと思います。
お約束はタイトルに#LOVEFONTのハッシュタグをつけてもらえればOK。
どう書いたらいいかわからない方は、とりあえず当記事に見出しを合わせてもらえればよいかと思います。もちろん飛ばしたい項目は飛ばしても構いませんし、書きたい項目があれば追加して頂いて構いません。勿論和文、欧文、有料、無料も問いませんのでなぜそのフォントなのか、あなたの感じる魅力をゴリゴリ表現してみてください☆

WordPressの失敗から学んだことを勉強会でお話してきました

昨日、WordPressの少人数の勉強会に出席してきました。

で、数日前に聞いた勉強会の内容が、
「みんなでWordPressについてLT(ライトニングトーク)しよー!」というものでした。

LT!!

今、ちょっとお仕事でばたばたしてたので、
LTとはーーー!ギャアァァァァ━━━━(|||゚Д゚)━━というかんじだったのですが、、、
準備する時間あるかなぁーと心配してましたが、とっても楽しかったです。

いろいろと意見を交換しながら、
自分のプレゼンの練習にもなったかなぁーと思います。

5分程度という短い時間で、
やはり時間どおりにしゃべるのが下手で、
ドラ娘様がいらしたら、確実に強制退場でしたが、
少人数ということで、ゆるゆると話させていただきました。

ちょっとだけですがスライドせっかく作ったので、公開します。
あと、短いのでしゃべった内容も書きます。

テーマは、WordPressの失敗から学んだこと

準備する時間もあんまりなかったので、テーマを決めるのにすごく悩んだのですが、
主催の方より「WordPressでの失敗談などありますか」とチラッとヒントをいただいたので、
失敗なら任せて( ゚∀゚)!!と思い、そのままテーマとしました。

WordPressにはだいぶ慣れてはきたと思うのですが、
まだまだ失敗だらけなので失敗談は豊富なのです!!!

管理画面の使いやすさについて

失敗その1、「管理画面の使いやすさの追求」をあんまりよく考えずに作ってしまった。

先日のWordCampTokyoで「更新しやすいテーマ作り」のテーマでお話をした理由にもなるんです。

WordPressのサイトをデザインするときに、管理画面側のユーザビリティもよーく考えるのが、とっても大事だよなぁ、、、と思うんです。

以前に作ったサイトで、そのへんをおろそかにして作っているサイトがあるんです。
そこそこ規模の大きなサイトなのですが、更新コンテンツがたくさんあって、投稿内容もそれぞれ全部違う内容、レイアウトなんですけど、構成や管理画面のユーザビリティを事前によく練りこまなかったせいで、めちゃめちゃ管理しづらいサイトになってしまってます。

例えばその中のひとつの例なのですが、カスタムフィールドを使いました。
カスタムフィールドっていうのは、普通、WordPressの管理画面は、【タイトル】と【本文】のふたつの入力フィールドがあるのですが、もっともっと細かく投稿したい内容があるときに項目を増やせる機能で、あらかじめ自分で決めた項目に対して必要な値を入れていくだけ、の便利なものです。

なのですが、、、、

投稿する項目が多くなると、ちょっと、、、めんどっちいんですよね。

「あれ、detailってなによ、、、」って、自分が決めた名前に対して投稿内容がわからなくなったり、プルダウンで項目を選ぶのもめんどくさかったり、そもそも、あと、なに入力するんだっけ?ってわからなくなったり。。。

自分で作ったサイトなのに更新が大変億劫になったのでした。

もし、これであの人気プラグイン「カスタムフォールドテンプレート」を活用してると、こんな感じになりますよね。

画像も簡単にアップロードでき、値がセレクトボックスとかラジオボタンとか、使いやすいようにカスタマイズできる、なにより、ラベルが付いてるので、何を投稿したらいいのか一目瞭然です。

(カスタムフィールドテンプレートの使い方はたくさんわかりやすい紹介ブログとかあります!
いちお、私も「ブログだけじゃない!WordPressの活用法いろいろ」でちょっとだけご紹介しました。今では欠かせないプラグインのひとつです。。。)

投稿内容がいろいろとある場合は、更新もめんどくさくなっちゃうので、できるだけ、管理しやすい構成で制作するべきでした。

というわけで。。。

最初の構成作りや利用するプラグイン選びはすごく大事。
お客様にもし納品する場合は更新内容や更新頻度をよくヒヤリングし、その上で構成をよく考えて、何度も検証するべきだったと、

当たり前のことですが、今はホントに最初から気をつけて制作するようにしています。

次、失敗談その2。

コアファイルをいじくりまくっていた

プログラムモリモリ書ける方は、大丈夫なのでしょうか?
たまにさわってるって話も聞くのですが、みなさんどうしているのでしょう。。
でも「私」は絶対やっちゃだめでした。

そのいじってしまった理由が、管理画面の色とかデザインとかを、オリジナルのものにしたかったんです。
もう単純に、デザインを完全に変えてみたり、あと、管理画面内に「ヘルプ」をつけて、ファイルを追加してポップアップでヘルプ表示させてみたり、また、開発者ブログとか、管理画面に表示されると思うんですけど、お客様にはそういうの必要なくない?っていうのを、どんどん非表示にするために、コアファイルをいじくりまくってました。

でもいじくりまくって気やっとづいたのですが、

WordPressのアップデートができません。
バグが出ても何が原因かもう手に負えなくなりました。
そもそもWordPress標準のデザインシンプルでかっこいい、、、ってことに気づいてしまいました。

というわけで、コアファイルをいじるのは、かなりの上級者さんだけだな、と今は感じてます。
普通にやめとくことにします。

それでも管理画面をカスタマイズしたいときは、
今話題の、、、

Cawaii Adminです!!
詳しくはCawaii Admin【WordPress管理画面をかわいくカスタマイズするプラグイン】で書かれていますが、ただかわいいだけじゃないです。
へッダー部分に最低限、必要なメニューだけを表示可能にしてくれたり、消したいメタボックスもお好みで簡単に隠すことができます。
いかに使いやすく、一般の人でも簡単に気軽に更新できるか、をずーーっと気にして制作してたので、とにかくこのプラグインうれしいです。
ありがとうございます。

ちょっとご紹介すると、
↓ これ、私の別のブログです。↓
(といってもWordPressの新しい機能やプラグインを試すためのテストサイトに完全になってしまってます。。。)

このサイトにCawaii Adminを有効化すると、管理画面は、

こんな感じになります。
左のWordPressの細かいナビが消えて、
上にシンプルなナビが表示されます。
ロゴも簡単にサイトに合わせたものにさしかえることができます。

メタボックスの消去もさくっと。

で、このCawaii Admin、楽しくて楽しくて、さらにいじっていじっていじくりまくってしまいました。。。。

プラグイン内のファイルをもりもり変えてしまい、そして、こんな感じになりました。

ここまでやる必要性は全くなくって、完全に自己満の世界です、はい。
Cawaii Adminそのままで十分にわかりやすい管理画面になりますし、さらにプラグインも中いじりまくると、アップグレードできなくなっちゃうんで、これでやめときますーー。
ただ、趣味のサイト程度なら、こうやって好きなデザインにして、楽しく更新できるようになるんじゃないかなぁーと思います。
Cawaii Adminの今後のバージョンアップ予定で「CSSを自分でカスタムできるようにする」とステキなお言葉もありましたので、のんびり待ちましょう。|ω・`)コソ


こんな感じで、
たくさん失敗はしてますが、そこでたくさん得るものもあったかなーと思ってます。
どんどん知識を深めていき、失敗もホドホドにできるといいなーと思っております。

という感じのLTだったのですが、やっぱり、同じ分野でお仕事してる方々とお話できるのはとても刺激になります。
もともと、人見知りで外に出るのすごく苦手で、避けてしまうほうなのですが、一人でコソコソ調べるよりも、誰かとお話しするほうがよっぽど勉強になりますね。
今まで問題意識してなかったことに気づけたり!

有意義な時間が過ごせました。ありがとうございました^^

WordCamp Tokyo参加してきました!当日のスライドです!

WordCamp Tokyoはすんごい盛り上がりでしたよ

行ってきました!WordCampTokyo。
すんごい人・人・人!

1300人の参加登録、当日も800人超え(くらい?)とのことで、
もう、どんな感じになるんだろと、ドキドキしてましたが、
どどーーーんとすごい広い楽天さんの会場で、
スタッフさん達の事前の準備や当日の誘導のおかげで、
こんだけでっかいお祭りを楽しくすごすことが出来ました!

まずは私の「WordCamp」個人的な感想から

前回の神戸でもそうですが、
やっぱ勉強しなきゃだよなぁーーーと、
いつも反省してしまいます。

あの会場内のパワーとか知識とかアグレッシブさとか、
いろんな方々に圧倒されている自分がいます。
もっと賢くなりたいし、いいデザイン作れるようになりたいなーと。。。

いや、ほんとに「自信」が欲しいですね。
いろんな面で!!!(´△`)
というわけで、今激しく「勉強するぞーーーー!」という気分になってます。

デザイナーさん、プログラマーさん、ブロガーさんなどなどと接することができ、
WordPressやPHPに関しての知識ももちろんつめこみたいっ!っていうのがあるんですが、
なんだか知識というか、「意識」!
成長したいところがずごくありますね。。。

ほんとにみなさん勢いがあってステキでしたー

たくさんの方とお会いできてお話できてほんとによかったです!!

心に残ったセッション

すごく見たかったセッションがかぶっていたり、、、
というのもあって残念だったのですが、
USTREAMで拝見しました。
すごく勉強になりました。

中でもIDEA*IDEAの田口さんのセッション。
ナマ・田口さんを見れたのもうれしいし、
お話が、ほんとにお上手だし、
内容もめっちゃめちゃ響く話!
なんかほんと、考えさせられました。
あ、そんな田口さんは重い話をされたわけではないのです(´(ェ)`)
私が勝手にいろいろと自分自身を振り返るきっかけをいただけました。
がんばろーーっって思いました。

ほんとに、どうもありがとうございました。
お話聞ける機会をいただけたWordCampにも感謝です。

当日のスライドです

なんか、もう他のスピーカーさんのセッションとか見てたら
自分がしゃべるのが下手で下手で大変心苦しいです。

緊張で何度もオエッとなりました。
日ごろの運動不足(&しゃべり不足)のせいで、
しゃべってるだけなのに、だんだん息が切れてきて、
マイクからもれるフンフン興奮気味の自分の鼻息に、
更に焦ってしまいました。。。
たくさんの方、見ていただいてほんとにありがとうございました。

どきどき、アワアワしている様子です。。。(´△`)

内容に関しては、当日も申し上げましたとおり、
あくまで「私のWordPressの使い方」ということで、
もちろん、作るサイトによっても、使う方によっても、
いろんな構成方法があってもっともっと賢いやり方もあると思います!

その上でひとつの例として見ていただけるとうれしいです。
こっちのほうがいいよ!っていうご指摘ありましたら、
ぜひ教えてください!

なるべく文字は大きめ、太めにしたのですが、
文字多かったり、見えづらいとこあってすみません。。。

ちなみに、slideshareあげたら、
スライドの色とか文字とか汚くて、嫌な気持ちになってます。。。
うまいやり方あれば教えてください(´・ω・`)
拡大したら、ますます、きたねぇです。

なんかほんとにもう、感謝でいっぱいの一日でした。

このような機会をくださって、素晴らしい運営をされた
WordCamp Tokyoのスタッフ、ボランティアの皆様、
ほんとうにありがとうございました。

そして下手くそな私の話を聞いていただいた皆様、
心からお礼を申し上げます。

WordPressのイベント、今後もどんどん参加して勉強していきたいと思います。
どうぞよろしくお願いします^^

WordCamp Tokyoで、スピーカーをやらせてもらうことになりました

WordCamp Tokyo 11月27日(日)開催されます

9月WordCamp神戸でスピーカーで初参加させてもらい、
緊張しっぱなしのまま、
アワアワしたセッションになってしまいましたが、
今回もスピーカーでお声をかけていただき、
激しく感動しております。

2011年11月27日(日)
カンファレンス:9時45分~17時35分(9時15分 開場)
懇親会:18時00分~20時00分
会場:楽天タワー2号館7階(住友不動産品川シーサイドビル)
費用:無料

前回は初めてのWordPress!オリジナルテーマでブログ制作というテーマでお話させてもらいました。このときのスライドや追加資料はこちらからみれます。

今回も初心者向けのセッションですが、デザイナートラックということで、

WordPress のオリジナルテーマ制作
デザイン時に私が心がけている「更新しやすい」テーマ作り

というテーマで、実際にこれまでに制作したサイトを、
お客さんからの要望や、デザインで気をつけたことなどを例にあげながらお話したいと思います。

「いかに更新しやすいサイトにするか」なんですが、
更新しやすいサイトにするために、知っておくと初心者の方でもちょっと楽になる、
WordPressの特性、便利なプラグインなんかをご紹介します。
WordPressって、何?どんなことができるの?
と言う方もぜひWordCamp参加してください♪
phpがわからないWebデザイナー(私w)でも少々複雑な構成のWebサイトも作れるようになります!

前回の神戸でお話して以来、
ちょいちょいWordPressに関するご質問なんかいただくようになりました。
うれしいですー、すごく(・∀・)
ありがとうございます!

WordCampTokyoの、
お申し込みはこちらから。
タイムテーブルはこちらから。
他のスピーカーさんたちは、わ!(゚Д゚) あの人だっっ!って言う豪華な方々が盛りだくさんなので、私も楽しみでワクワクしております!
無料で聞けちゃうんだからすごいです!!

名刺を首にぶら下げてウロウロしてると思うので、お声をかけてもらえるとうれしいです!
私、いつも孤独に制作作業しているので、同業の女子友達がほしいです(T T)
一緒に制作の悩みなんか語り合いたいです!!
仲良くしてください!懇親会も参加します!
楽しみにしてまーす♪

WordCamp KOBE「初めてのWordPress!オリジナルのテーマでブログを作る方法」スライドと追加資料です

WordCamp KOBEしゃべってきたよ!

昨日、WordCamp KOBE、お話させていただきました!
さっき神戸から東京へ戻ってきました(・ω・)
スライドを公開させていただきます!

あと、昨日追加資料を準備しておいたのですが、枚数が足りなくて本当に、資料手元になかった方、申し訳ありませんでした(> < )
一緒に公開しております。

追加資料について

今回、私は、「初めてのWordPress!オリジナルのテーマでブログを作る方法」という超初心者向けテーマでお話しさせてもらって、目標は、聞いていただいたみなさんが、よっしゃ、いっちょやってみるか!と思っていただくこと、だったので、追加資料の方は、WordPressのオリジナルテーマのブログに初挑戦するときに見直すと便利かなーと思ってまとめた内容です。

「初めてのWordPress!オリジナルのテーマでブログを作る方法」追加資料【pdf】

スライドについて

他のスピーカーさん、めちゃくちゃ流暢っっっwwwww
に比べて私なんてひどいアリサマだったのに、最後まで聞いてくださった方、本当に心から感謝しております。
土下座したい気持ちです( ノω-、)
私のセッション前に並んでてくださった方々は、一人ひとり感謝の気持ちを訴えたくて、うずうずしておりました。。。
ほんとにありがとうございました!!!

周りのスピーカーさんが、上手にわかりやすく身振り手振りでお話しされる中、
私はすみません(´・ω・`) 、しゃべる全内容、「完全カンペ」を持参させてもらいました。
ぽんっっっ(o゚ω゚o)と、全て飛んでしまいそうで不安で不安で、いや、ほんとすみません。。。

なので、せっかく文章にしたので、また後日、カンペの方も公開します。
WordPress初挑戦の方、見ていただけるとうれしいです。

こちらがスライドです。

メモメモ

忘れないうちに、心に残ったこと、帰ったら勉強したいことなど、少し、ざーっっとメモさせてもらいます!

WordPressの管理画面を「かわいく」

最後のライトニングトークで@shinichiNさんのお話しされてた内容、すぐに見直したい!!
コードも公開してくださってるようです!
■WordCamp神戸ライトニングトークのスライド:WordPressの管理画面を徹底カスタマイズ!!
ありがとうございます!!
これ、仕事でお客さんに納品するときの私の悩みです。
WordPressの管理画面、かっこいいけど、一般の方向きじゃないんですよね。
要チェックです!

地元のWordBenchに参加したい!!

今回初めてWordCampに参加したのですが、日頃からもっと積極的にWordPressのイベントに参加していこう!って改めて思いました。
WordBench東京近辺の方々、次回からぜひ参加したいです。
仲良くしてください。よろしくお願いします。

高橋文樹さんの小説が読みたい!

User’s Cafeでお話しされた作家の高橋文樹さん
事前情報で作家さんでWordPressいじってて、プラグインまで開発できて、しかもイケメンってどういうことーーーーっ!!(`ω´*)
って思って、セッション待ち構えていたのですが、めちゃくちゃ面白かったです。
小説家さんと聞くと、イメージ、ピースの又吉みたいな感じなのかな、って激しく身勝手な偏見を抱いてたのですが、実際お見かけしても、やはりステキな方でトークも素晴らしかったのでした。
高橋さんの書く純文学を購入しなければっっ!!

いくら人見知りだからって、もう少し頑張ったら?、私。。。

と自分に言いたい。
お話ししたい方、たくさんいたんですよーーー(> < )

日頃から人見知りで、家で仕事することを好み、結果、今ほとんど人としゃべらず生きてる私ですが、今回ばかりはもっと積極的になれたら。。。と自分を呪いました。

WordPressと言えばこの方!マクラケン直子さん、
今回心の底からファンになってしまった、池田 百合子さん、
WordCamp KOBEのかわいらしいサイトをデザインされた瀬口理恵さん、
Fireworksマニアの憧れのyukiさん、
twitterでこっそり追わせてもらってる、をかもとさん、
ブログで勉強させてもらってるyatさん、
その他にももっともっとたくさんの方とお話ししたかったのに。。。
お話しできなかった!!無念!!

でもすごく刺激になりました。
ほんとに勉強になりました。

私なんぞにこんなにありがたい機会をくださった、
スタッフの方々ほんとにありがとうございました。
とくに@mamy315さん、なんにもわからない私に、いろいろ教えてくださってありがとうございました!!
とても感謝しております!!(> < )

なによりも、私のアワアワなセッションを見てくださったみなさん、ほんとにありがとうございますっ!

とりいそぎ、ご報告&お礼でした。
また落ち着いたらカンペ公開します!

ビバ!神戸!
鉄人はでかかった!!!

キッズ関係のWebサイトデザインをまとめました

赤ちゃん・子供関係のWebサイトを作る時に参考になりそうなWebサイトをまとめました。

・ベビー用品
・おもちゃ
・テーマパーク
・幼稚園

こんなサイトをいつか作るかもしれない。うんうん。

赤ちゃん用の家具の物販サイトでしょうか。かわいいです。
他と違ってスッキリした印象のデザイン。
青色を使ったベビー用品のWebデザイン。
赤と青のビビットカラー。
上と同じく赤と青ですが、色味が違うと印象変わります。
単調にならないように、サイドカラムは雲型ボックス。
シンプルな物販サイト
おもちゃの販売サイト。カラフルにして楽しい雰囲気。
右上の少年がスタンド使いに見えます。
背景に薄っすらイラスト。
学校のサイト
ディティールを工夫すれば、こんな背景色でもおkかも。

WordCamp KOBE2011参加します!楽しくWordPressを学んできますよ~♪

WordPress好きのお祭りWordCamp

9月11日(日)に神戸芸術工科大学で、WordCamp KOBE2011が開催されます!!
私もWordPressユーザーの一人として、なんとなんと、スピーカー参加 という形でお声をかけていただきました(> < )
ひえーーひええーーーー(´△`)
もうとんでもなく今から緊張していて痩せれる気がしますヽ(゚Д゚*)ノ

WordCampは、地元の人たちが運営するWordPressのカンファレンスで、WordPressについて(例えばプラグインやテーマなど)のお話がいっぱい聞けるカジュアルなイベントです。
初心者から高度なテクニックを持つ人まで楽しめる内容になっていて、世界中のコミュニティが開催してます。

今回の神戸も8月11日現在、参加登録者380人、まだまだ増える模様の大盛況っぷりのようです。全国からWordPress好きが集まるんですね。

WordCamp KOBE2011

サイトがかわいいっ!!ムラムラしますっ(≧∀≦)

前回の2月のWordCamp Fukuoka2011が開催されたときに、いいないいな、楽しそう、行ってみたいな、なんて遠くでワクワク憧れていたのですが、まさかまさかお声をかけて頂けるなんてっ(T_T)!
ほんとに恐縮しまくって今からガクガクしておりますが、同時にいろんな方にお会いできるチャンスなのですごく楽しみです♪

WordPress初心者さん、遊びに来てください♪

すごく有名な方々がタイムテーブルに名を連ねる中、
WordPress歴・一年弱で、PHPはいまだに魔法だと思ってるWordPressユーザーの私は何をお話したらいいのか。。。
いろいろ悶々と悩みましたが、初心者さんに近い存在である私にしかできない話をしよう!!って思ってます。

初心者の方が、よし、いっちょやってみるか、って気分になってもらえるとお話ができると、うれしいなぁーーー(・∀・)

私の初めてのWordPress制作はこのブログParkn’Park。
また、今回WordCampでお声をかけていただいたのもこのブログきっかけ。

PHPもちんぷんかんぷんなWebデザイナーが枕を濡らしながらオリジナルテーマを制作していった経過をお話したいと思います。
今ではお仕事の案件ほとんどがWordPressです。
プログラムわからないWebデザイナーでも、WordPressさわれるようになります!
きっとWordCampに来る方で、「WordPressやってみたいけど難しそう…」と感じている方、いらっしゃいます、、、よね?
というか、そんな方もぜひぜひご参加ください!!
「初めてのWordPress!オリジナルテーマでブログを作ってみる!(仮)」という感じでお話しできたらな、と思ってます。

WordCamp、いっしょに楽しみましょう!!

私の憧れのあのデザイナーさんも!いつもツイッターやらブログで参考にさせていただいてるあの方もっっ!利用させてもらってるあのプラグインの開発者さんまでっっっ!!ってな感じで、とにかくたくさんの方が参加登録してらっしゃって、私も楽しみでなりません。

この方のお話聞きたいっっ!!っていうのが盛りだくさんです。!
WordCamp KOBE2011のタイムテーブルはこちらから!
きっとすごく勉強になると思いますよ!!

以前の記事、ブログだけじゃない!WordPressの活用法いろいろでも書いたのですが、WordPressって善意にあふれてるってほんとに思うんです。
初心者でもとっつきやすいフォーラムやコミュニティがあふれていて、上級者からたくさん情報を得ることができます。
しかも無料で参加できるなんてこんなチャンスは逃すともったいないですよ~。
お近くにお住まいの方、また、遠くの方もぜひぜひ、参加してみてはいかがでしょうか!

そして、なにぶん、初めての経験で、アワアワとてんぱっている私の姿も、優しい目で見ていただけると幸いです…。
ひょっとしたら私の場合、人が集まらなくてヒトリゴトになってしまうのでは、、、と心配でならないのですが、初心者の方に少しでもWordPressに興味がわいてもらえるセッションに出来るように頑張りますっっ!

どうか、運営されてる方々の足をひっぱりませんように!(>_< )
たくさんのお友達ができますように!(>_< )
当日までに痩せれますように!(>_< )