Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

イラストフォント配布サイト作りました!

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

イラストをフォント化したTTFフォントの配布サイトです。

Windows、Mac OS X以降で使えます。
Webフォント用のファイルも準備予定です。

個人、商用ともにフリーです。
ご自由にお使いください^^

自分で好きなものだけWebフォント化していただいても大丈夫◎

デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。

こういうのがあると便利ー!などのご意見もお待ちしています!!

Font用のSVGファイルはFireworksで

ちなみにサイトのデザイン、アニメーションGIFの作成、フォントの元になったSVGファイルの作成はFireworksで。

詳しい手順などは以下のサイトがとっても参考になりますのでぜひ見てみてください♪

Bootstrap下調べ

bootstrap

というわけでBootstrapを使うにあたって、いろいろ調べ事をしたのでメモしておきます。

Bootstrap 3でレスポンシブを無効にできるか?

Bootstrap 2系は要素を追加してレスポンシブを実現するようになっていたそうなのですが、3系は標準でレスポンシブ対応とのこと。

今回のサイトはPC用のフォント配布サイトということもあって、レスポンシブである必要もあまりなかったのでレスポンシブを無効にする方法を調べました。
以下の手順で簡単にできました。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>を削除する。
<link rel=”stylesheet” href=”css/bootstrap.min.css” media=”screen”>の下に、
<link rel=”stylesheet” href=”css/non-responsive.css” media=”screen”>を追加する。
<script src=”js/respond.min.js”></script>を削除する。
グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*にする。

引用:Bootstrap移行ガイド レスポンシブの無効化

英語ですが、公式サイトにも手順がのっています。

公式:http://getbootstrap.com/examples/non-responsive/

段組はどういう仕組み?

bootstrapでは12カラムのグリッドシステムが採用されています。
トップページは4:4:4、下層ページは8:4で割って使うことにしました。

画像はどのサイズで作る?

%で指定されているグリッドシステムなので、このときこのカラムが○pxというのがいまいちわかりにくいです。なので全体的に画像は大きめに作って、グリッドに対してwidth:100%で貼り付ける必要があるのかなー?という印象。

フォームのスタイリング

classを適切に指定してあげれば、使いやすいフォームに簡単にスタイリングできます。
Contact Form 7だったらこんな感じ。

デザインの調整

以前、2系をさわろうとしたとき、なかなか複雑すぎて
必要な物だけ自分で書いたほうが早そう…と思ってしまって挫折したことがあったのですが
3系は見た目もすごくシンプルになっていて、その分CSSの装飾もシンプルなので追加のCSSで上書きがしやすい感じでした。

その他参考にしたサイトなど

全体的な感想

どっちかというと画像少なめなティザーサイトとか、管理画面とかそういうものをさくさくっと作るのによいのかなーという印象を受けました。

いろんな仕様があって、その仕様にすべて対応できるのか?とかを調べて使うにはちょっと大変かもしれませんが自分に決定権のあるこういう個人サイトをパパっと作るにはものすごく便利です!

なんとなく勝手がわかってきたので、今度はレスポンシブで作ってみたいと思います☆

WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき

WordPressでテーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました!
一度乗り越えればあとは簡単です!テーマつくってみようかなーと思っていただけるとうれしいです♪

今回は【WordPressではじめてテーマをカスタマイズ・自作するときありがちなに10のつまずき】ということで、テーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました。

全部私が実際最初につまずいたポイントなので、きっとはじめてカスタマイズするかたのお役にたてるはず…!

テーマカスタマイズの基礎の基礎編です。

テーマファイルを開いてみて、なにがわからないのかすらわからなくてカスタマイズを断念した、というような方にぜひ見ていただきたいエントリーです。

ざっくり概要がつかめれば、「なにがわからないのかわからない状態」が解消されるので、あとは自分で調べて理解していけるようになるんじゃないかな、と思います。

  • とりあえず一から作るのは大変だから既存テーマをいじって勉強したい。
  • 今使ってるテーマのヘッダーをオリジナルの画像にしたりしてみたい。
  • HTML&CSS作ったテーマファイル。どうやったらWordPressテーマ化できる?

といったような方もぜひどうぞ♪

WordPressでテーマをカスタマイズ・自作するとき最初につまづく10のこと目次

  1. そもそもテーマファイルってどこにあるの?
    ->テーマディレクトリ内のファイル構成を理解する
  2. index.phpを開いてみたけど、やなどの記述が見当たりません…!
    -> 共通部分の分解方法について理解する
  3. __()ってなんですか…!
    -> 翻訳関数を理解しよう
  4. 自作の画像を張り込みたいんですが、パスはどう書けば…?
    ->テーマファイル内での画像ファイルやjsファイル、CSSファイルへのパスの指定方法を理解しよう
  5. archive.phpとかsingle.phpとかこれってなに?
    -> ページファイルのいろいろ
  6. テーマをダウンロードしてきたんだけど、このテーマのときだけプラグインによって動かないものがあります…
    ->最低限必要なテンプレートタグを理解しよう
  7. ここに記事のタイトルを出して、ここに本文を出して…ってどう書いたら出るの?
    ->超基本のテンプレートタグ一覧
  8. ここからここがエントリーのワンブロックで、ここを繰り返して一覧表示させたい!
    ->ループを理解する
  9. はりきってHTMLとCSSでテーマファイルを作ったのに、管理画面をみても一覧に反映すらされません…
    ->自作のHTML&CSSファイルをテーマとして認識させる方法
  10. テーマできた!けどスクリーンショットがでなくてさみしいです。
    ->screenshotの設定方法

1.テーマディレクトリ内のファイル構成を理解する

そもそもテーマファイルってどこにあるの?

とりあえず、テーマファイルがどこにあるのかがわからないとカスタマイズのしようもありませんよね。

テーマファイルはWordPressのディレクトリの中の【wp-content】->【themes】の中にあります。

テーマを自作する場合もこのディレクトリの中にテーマファイル一式を作ってアップロードします。

それぞれのテーマのディレクトリの中に、index.phpやstyle.cssなど必要なファイルを作っていきます。

2.共通部分の分解方法について理解する

index.phpを開いてみたけれど…

実際にテーマファイルを見てみましょう。

現在のWordPressの標準テーマ、twentytenテーマをみていきます。

index.phpを開いてみます。

終わり。

なんというこざっぱり感…!

これをみて、どこでなにをしているのかさっぱりわからず、リタイアした人も多いのではないでしょうか…。

index.phpではいろんなファイルが読み込まれています

WordPressでは、いろんなページで共通して使う部分だけをパーツとして別ファイルに保存して、それを各ページで読み込むことで修正の際の手間をすくなくできるような作りになっています。

たとえば

[php]<?php get_header(); ?>[/php]

この部分は、テーマディレクトリ内のheader.phpを呼び出す、という意味です。

header.phpを見てみましょう。

<head>や<body>がでてきました!

フッターとサイドバーも同様に別のファイルが読み込まれています。

それぞれ

  • get_footer()->footer.php
  • get_sideber()->sidebar.php

が読み込まれます。

[php]<?php get_template_part( ‘loop’, ‘index’ ); ?>[/php]

この部分はheaderやfooterとはちょっと違って、任意のファイル名のテンプレートパーツを呼び出す関数になります。

この場合、

loop-index.php

が呼び出されます。

loop-index.phpがない場合は、loop.phpが呼び出されます。

今回はloop-index.phpというファイルがテーマフォルダ内にありませんでしたので、ここではloop.phpが呼び出されることになります。

get_template_part()について、詳しく知りたい方はWordPressの関数リファレンスページをご覧下さい。

こんな感じで、様々なファイルを読み込んで表示しています。

3.翻訳関数を理解する

__()ってなんですか…!!

では、メインの処理になるloop.phpをみてみましょう。

…長くてごちゃごちゃしていますね…。

とはいっても基本的には、など様々なテンプレートタグで値を出力しているだけなのですが、気になるのが例えばこういうところ。

__()ってなに…。

この__()、至る所ででてきます。

実際何を表示している部分なのかわかれば、消したり書き換えてもいい箇所なのか判断できる!ということで、テーマ適用して表示させて、「View all posts〜」という表記を探してみます。

…が、どこにもでてきません。

翻訳されて日本語で表示されているから元の英語は出てきません!

これは__()というのが、国際化対応のためのWordPressの関数で、

「__()で囲まれた部分の文字を、翻訳ファイルを元に翻訳して出力する」という処理になっているために、テーマを表示させてもどこかわからない…ということが起こるのです。

_e()というのもあり、こちらは変換された日本語を標準出力に出力する関数です。

たとえば、

[php]<?php __( ‘Leave a comment’, ‘twentyten’ ); ?>[/php]

こういうものがあった場合、’Leave a comment’という文字列をtwentytenテーマの翻訳ファイル(poファイル)によって対応する日本語に翻訳し出力をしてくれています。

取ってみる

これ、大変ありがたいのですが、日本語環境でしか使わず、とりあえずソースをすっきりさせてどういう作りになっているのかみたい初心者には、ソースコードも長くなり、ぱっと見てなんのことかわかりにくくてすこし邪魔です。

こういう場所は、

たとえば

[php]<?php __( ‘Leave a comment’, ‘twentyten’ ); ?>[/php]

この表記なら

[html]Leave a comment[/html]

としてしまいます。
phpも__()も取っ払ってみてください。

すると、テーマファイルを表示させた時、英語のままLeave a commentとでている箇所ができると思います。

そこがこの文字列のさす箇所です。自力で日本語化するのもよし、再度関数をあてた状態にして同じ場所にでている日本語を確認してその日本語におきかえるのもよし。

__()、_e()などの翻訳関数を外すと、ソースがかなりすっきりして見やすくなると思います。

翻訳関数の仕組みと存在はしっかり覚えておこう

この辺の関数の使いこなしや翻訳ファイル(poファイル)については結構奥が深いので、WordPressテーマの基礎知識がしっかりとついてから、あらためて勉強して、世界中で使ってもらえるテーマやプラグインを作るときなどに役立てていきましょう。

この時点では、「これは翻訳関数である」「はずして手動で日本語に置き換えても動作する」ということがわかっていればOKじゃないかなと思います。

4.画像ファイルやjsファイル、CSSファイルへのパスの指定方法を理解する

テーマ内に自作の画像を張り込みたい!パスはどう書いたらいいの?

まず使用しているテーマディレクトリ内に画像ファイルを置く

たとえばブログのタイトル部分を画像にしたい!と言ったような場合。

まず、タイトル画像をつくります。

作ったらそれを使用しているテーマディレクトリ内のどこか(imagesディレクトリなどがあればその中でもよいし、テーマディレクトリ以下なら好きな場所でOK)に保存します。

今回は、twentytenテーマのimagesディレクトリの中に、sitetitle.pngというタイトル画像をいれた、という前提で進めていきたいと思います。

相対パスではなく、絶対パスで

画像をつくったらテーマを修正していくのですが、画像までのパス設定に注意が必要です。

WordPressのテーマは、http://ブログのurl/wp-conents/themes/テーマ名/各ファイル というように深い階層の下にアップロードされていますが、実際にはhttp://ブログのurl/という場所で表示されます。

そのため、このファイルから相対パスで

[html]<img src="images/sitetitle.png" />[/html]

と記述しても、ブラウザで見た時には、http://ブログのurl/images/sitetitle.png を参照するようになってしまいます。

これでは画像が表示されません。

画像までのパスを絶対パスで記述してあげればOKです。

絶対パスを出力してくれるテンプレートタグを使おう!

ただし、直接

[html]<img src="http://ブログのurl/images/sitetitle.png" />[/html]

のように記述してしまうと、ブログのURLが変わってしまったときなど、とても面倒なことになります。

そこで、この関数の出番です。

[php]<?php get_template_directory_uri(); ?>[/php]

これは、使用しているテーマディレクトリまでのURLを出力してくれるテンプレートタグです。

このように記述します。

[php]<img src="<?php get_template_directory_uri(); ?>/images/sitetitle.png" />[/php]

こうしておくと、表示時には

http://ブログのurl/使用しているテーマまでのパス/images/sitetitle.png

となり、ブログのURLの変更にも対応した記述となります。

CSSファイルやjsファイルも同様にテーマディレクトリ内に保存し、

を使って絶対パスを出力してあげることによって、適切なパスでファイルを読み込めるようになります。

 

5.ページファイルのいろいろ

WordPressのテーマは基本的にはindex.phpとstyle.cssがあれば動かすことができますが、twentytenのテーマを見ると、archive.phpやcategory.phpなどほかにもいろいろなテンプレートファイルがあることが確認できると思います。

たとえばトップページとカテゴリーテージのデザインをわけたい、といったときなどそれぞれ対応するファイル名のテンプレートがあればそれを優先して読み込み、すべてなければindex.phpを使うというような仕組みになっています。

WordPressテーマは、それぞれのページでテーマを読み込む優先度が設定されていて、たとえばカテゴリーページはこのような優先度でテンプレートファイルを探していきます。

  1. category-slug.php
    – 例えばカテゴリーのスラッグが “news” の場合は category-news.php
  2. category-ID.php
    – 例えばカテゴリーID 6 用のテンプレートであれば category-6.php
  3. category.php
  4. archive.php
  5. index.php

上から順に探していき、見つかったこころのテンプレートファイルを適用します。

なにもなければindex.phpが適用されます。

タグページ、日付ごとのアーカイブページ、投稿毎のページなど、細かくテンプレートファイルをわけて適用することができます。各ページのテンプレートファイルの優先度はWordPress公式ページに詳しくまとまっていますのでチェックしてみてください。

http://wpdocs.sourceforge.jp/テンプレート階層

6.最低限必要なテンプレートタグ

プラグインが動かないテーマがあったりします…

wp_head(); と wp_footer(); は絶対!

twentytenテーマファイルのheader.phpやfooter.phpを確認してみてください。

wp_head()やwp_footer()といった表記が目につくと思います。

これはwp_head()アクションをスタートさせる関数で、ヘッダー内のメタ情報をはじめ、いろんなことを出力する関数です。

メタ情報等を出力するので、勝手にでてほしくないから消した!というようなことをやりがちな関数でもあります。

しかし、プラグインの多くはこの関数が呼び出されるタイミングで一緒に「プラグインに関わる処理もお願いね」と処理を投げるようになっているため、このwp_head()そのものを削除してしまうと、プラグインの動作に必要な処理(ファイルの読み込みなど)が行われなくなり、プラグインが正常に動作しなくなってしまいます。

wp_footer()も同様です。

プラグインが正常に動作しない場合はまずこの関数がどちらも正しくテーマ内に組み込まれているか確認しましょう。

ちなみに、wp_head()の出力結果が気に入らない場合は、調整できます。

ただし、動作に必要なファイルの読み込みをとめてしまったりすることのないよう、慎重に行ってくださいね。

7.超基本のテンプレートタグ

ブログの情報や記事の本文を出力したりするテンプレートタグ。

たくさんあるのですが、ありすぎてはじめは大パニックになりました。

なのでよく使うテンプレートタグをピックアップしてご紹介します。

ブログの基本情報を出力するタグ(どこでも使える)

ブログのURLを出力

[php]<code class="plain"><?php </code><code class="functions">echo</code> <code class="plain">home_url(); ?></code>[/php]

ブログのタイトルを出力

[php]<?php bloginfo(‘title’); ?>[/php]

(値は管理画面->一般設定で設定)

ブログの説明文を出力

[php]<?php bloginfo(‘description’); ?>[/php]

(値は管理画面->一般設定で指定)

テーマディレクトリまでのURL

[php]<code class="plain"><?php </code><code class="functions">echo</code> <code class="plain">get_template_directory_uri(); ?></code>[/php]

(このブログでtwentytenを使用していたとすると、http://blog.v-colors.com/wp-contents/themes/twentyten/ と出力される)

使用中のテンプレートのメインCSSのURL

[php]<code class="plain"><?php <code class="functions">echo</code> <code class="plain">get_stylesheet_uri(); ?></code></code>[/php]

(このブログでtwentytenを使用していたとすると、http://blog.v-colors.com/wp-contents/themes/twentyten/style.css と出力される)

記事などの情報を出力するタグ(基本的にループ内で使用可)

そのままコピペで使えますが、タグによっていろいろとオプション値が設定でき、表示方法を変えたり、前後に文字列をつけて出力したりといったことが可能です。どんな値が設定できるかはタグによって異なりますので、タグの説明の下にそれぞれ公式ページへのリンクをつけました。そちらのページで確認してみてくださいね。

記事のタイトルを出す

[php]<?php the_title(); ?>[/php]

記事の本文を出す

[php]<?php the_content(); ?>[/php]

記事の抜粋を出す

[php]<?php the_excerpt(); ?>[/php]

記事の投稿日時を出す

日付系の関数には、the_dateとthe_timeがあります。

the_dateは同じ日に複数件投稿があったら最初の一件目にだけ出る。

the_timeは同じ日に複数件投稿があってもすべての投稿に出るという違いがあります。

[php]<?php the_date(); ?>[/php]

[php]<?php the_time(); ?>[/php]

記事のカテゴリーを出す

[php]<?php the_category(); ?>[/php]

記事のタグを出す

[php]<?php the_tags(); ?>[/php]

記事へのリンクを出す

[php]<?php the_permalink(); ?>[/php]

カスタムフィールドに設定したkeyの値を出す

[php]<?php echo post_custom(‘key’); ?>[/php]

もっともっとテンプレートタグはあります!

一覧はこちらから

8.ループを理解する

ここからここまでがエントリーの一ブロックで、この部分を記事件数分繰り返したい、という部分をループで囲みます。

ループはこのように書きます。

[php]
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!-ループ内で使えるタグはここで使えます–>
<?php the_title(); ?>
<?php endwhile; endif; ?>
[/php]

もし、条件に合う記事があれば、記事のデータがなくなるまで繰り返す

という意味です。

上に貼っている画像の方のコードは、
今書いたものとすこし違いますよね。
これは、先ほどのコードから「もし、条件に合う記事があれば」の条件を取り除いたものです。

[php]
<?php while(have_posts()): the_post(); ?>
<!-ループ内で使えるタグはここで使えます–>
<?php the_title(); ?>
<?php endwhile; ?>
[/php]

どちらも同じように記事のデータがなくなるまで繰り返します。

ifを使ってこのように書かれている場合もあります。

[php]
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!–ループ内です。記事がある限りこの部分が繰り返されます–>
<?php endwhile; else: ?>
<!–一件も記事がない時は、ここの部分が表示されます–>
<?php endif; ?>
[/php]

このように書けば、記事が一件もなかったときの表示を以下のように記述することができます。

9.自作のHTML&CSSファイルをテーマとして認識させる方法

テンプレートタグの埋め込みを行う前に、とりあえずまずはテーマとしてとしてWordPressに認識させましょう。

トップディレクトリのstyle.css にコメントが必要です。

[css]
/* CSS Document */
/*
Theme Name: vcolors-v2
Theme URI: http://blog.v-colors.com
Description: vcolors-v2
Author: YUKI
Author URI: http://blog.v-colors.com
Template:
Version: 1.0
*/
[/css]

Theme Name テーマ名
Theme URI テーマのURL
Description テーマの説明
Author テーマの制作者
Author URI URI テーマ制作者のURL
Version テーマのバージョン
Template 親テーマの定義
Tags テーマのタグ

10.screenshotの設定方法

テーマのディレクトリの中にscreenshot.png を置いてFTPでアップロードするだけで自動で認識されます。

画像のサイズは、横300px × 縦225px で作成すると良です。

いかがでしたか?

はじめてカスタマイズするとき、私がつまずいたポイント10個のご紹介と解説でした。

ここまでわかれば、あとはいろんなテーマをみてみて、その中に書いてある関数名をググって調べたり、自分で解決できるようになっていると思います。

私がWordPressをはじめて使った時より遥かに書籍もWeb上の情報も充実しています。以前くじけてしまったことがあるという方も、これを機にもう一度挑戦してみてはいかがでしょうか?

この春新しいことを覚えてみたいかた、まだWordPressさわったことがないという方も、わかりやすい資料が増えてきた今、ぜひトライしてみませんか?

WordPressはどんどん機能が充実してきていますので、ぜひ早めに基礎を覚えて、今後はどんどん新しい機能を使いこなすことに時間をかけていきましょう♪

先日書いたWordPressをインストールしたら最初にやってることまとめも一緒にどうぞ。

それでは。楽しいWordPressライフを☆

もし間違いなどあればご指摘いただけるとうれしいです><

WordPressをインストールしたら最初にやってることまとめ

今日は、WordPressを設置したとき毎回やっているカスタマイズに入る前の下準備について、自分のメモもかねてまとめてみました。

仕事でも、プライベートでも本当にかかすことのできない存在になっているWordPress。

今回は、そんなWordPressを設置したとき毎回やっているカスタマイズに入る前の下準備についてまとめてみました。

毎回やっているのにうっかり忘れたりしてしまうので自分のメモもかねて…!

  1. 初期設定
  2. プラグインを入れる
  3. テーマを準備する
  4. functions.phpの設定をする

1.初期設定

1.1 パーマリンクの設定をする

デフォルト設定のままだと

http://blog.v-colors.com/?p=123

とかでちょっとかっこわるいので

パーマリンクの設定を変更します。

管理画面メニュー 設定->パーマリンクの設定からお好みの設定に。

いろんな設定ができます。どんな設定ができるかは公式サイトのパーマリンク設定についてにまとめられています。

1.2 メディアの設定をする

管理画面メニューの 設定->メディア で投稿画像のサイズを設定します。
ここでは、サムネイル(thumbnail)、中サイズ(medium)、大サイズ(large)のサイズが指定できます。

WordPressのデフォルトでは、サムネイル(thumbnail)、中サイズ(medium)、大サイズ(large)、フルサイズの4サイズが自動的に生成できますが、もっといろんな種類が欲しい時もありますよね。

↑たとえばこういう感じで小さいのともっと小さいの2つのサムネイルを生成したい…とか。

テーマディレクトリ内のfunctions.phpに【add_image_size】を記述してあげると、生成する画像を増やせます。

詳しいやり方については
4.functions.phpの設定をする
に記載していますのでそちらをどうぞ。

1.3一般設定をする

キャッチフレーズや(これが<?php get_bloginfo ( ‘description‘ ); ?>で表示される分になります)
日付フォーマット、時刻フォーマットなどを好みの形に設定します。

2.プラグインを入れる

2.1 標準で入っているプラグインから必要なものを有効化

WordPress日本語版をインストールした時点で標準で入っているプラグインがいくつかあります。
その中から2つはかかせないプラグインとして有効化しています。

Akismet
コメントスパム対策のAkismet。
私の弱小サイトなんてなくてもそうそうスパムコメントありませんが、たまーにあるときはしっかりはじいてくれてます。

WP Multibyte Patch
WordPress日本語版のマルチバイト文字に関する修正を行うプラグインです。メール送信、トラックバック受信、ピンバック受信、検索等で発生する障 害に対して対策を行ってくれているとのこと。その辺りを特別に自分で対策をしている人以外は迷わず有効化を。

2.2 必要なプラグインを追加していく

必要なプラグインを追加していきます。

大体は新規プラグイン追加画面から検索して見つかるプラグインです。
手動アップロードの手間いらずでラクチンです。

管理画面メニューのプラグイン->新規追加

■お問い合わせフォーム

Contact Form 7
@takayukister作の国産お問い合わせフォーム。いつもお世話になっています。
お問い合わせフォームとしてだけではなく、PHOTO STOCKERのサイドバーのアンケートフォームにもContact Form7を使っています。いろいろ使えますね。

■SEO系

HeadSpace2
ページ毎に最適なタイトルやメタタグを埋めたりするためのSEO対策系のWordpressプラグイン。以前はAll in One SEO Packを使用していたのですが今はHeadSpace2を使っています。このあたりはお好みで。

Google XML Sitemaps
Google、Yahoo、MSN用のサイトマップを自動で作成してくれるWordPressプラグインです。

■カテゴリー並べ替え

My Category Order
カテゴリリストの並びを自由に変更するプラグインです。
WordPressでは、登録したカテゴリーの並べ替えができません…!
きちんと設計してからカテゴリ登録とかすればいらないのかもですが、構築、運用しているうちにカテゴリー増やしたくなったり変更したくなったり、ってどうしてもでてきてしまいますよね。これも欠かせないプラグイン。

■ページングしやすくする

Pagebar2
WordPress に見やすいページャーをつけるプラグインです。1 2 3 4 5…とかなってるアレです。<前へ 次へ> だけより断然便利。

CSSでスタイリングできるので、こんな感じでデザインにあわせて変更できます。

■関連記事や人気記事を表示できるようにする

Popular Posts

人気のエントリーを表示させるプラグイン。
こんな感じで人気のエントリーを表示させることができます。

Similar Posts
関連するエントリーを表示させるプラグイン。
タグやカテゴリー、かいた人の情報などの関連性を判断して(どの関連性を優先するか、しないかなどは管理画面で設定できます)関連するエントリーを表示してくれます。

PHOTO STOCKERでは関連写真を表示させていますが、このプラグインを使って表示させています。

Post-Plugin Library
上の二つのプラグインを利用るときに必要になるプラグインです。使うときはこれも一緒に有効化を。

■モバイル対応させる

Ktai Style
WordPress ウェブログを日本の携帯電話対応にするプラグインです。

スマートフォン対応のプラグインは今いろいろお試し中です。一番いいと思うものが決定したら追記しますね。

3.テーマを準備する

使用するテーマを用意します。

管理画面メニューの 外観->テーマ->テーマのインストールタブ でキーワードでテーマを検索してインストールすることができます。

私は自作テーマ用のベースとなるテーマを作っているので、そのテーマのstyle.cssをサイトにあわせて書き換えてアップロードして有効化しています。

style.cssのコメント部分をこんなかんじに書き換えています。

[css]

/*
Theme Name: vcolors-v2
Theme URI: http://blog.v-colors.com
Description: vcolors-v2
Author: YUKI
Author URI: http://blog.v-colors.com
Template:
Version: 1.0
*/

[/css]

このへんのことはWordPress自作テーマの作り方にも貼付けているPDFの資料に詳しく書いているので、テーマを一から自作したい!というかたはこちらもあわせてどうぞ♪

(↑画像をクリックするとpdfを開きます)

4.functions.phpの設定をする

使うテーマが決まったら、テーマフォルダ内のfunctions.phpにいろんな設定をしていきます。

アイキャッチ画像を使えるようにする

WordPressでは記事ごとのサムネイル画像【アイキャッチ画像】が設定できます。

こういうふうに簡単に一覧を出したりできます。便利ですね。

ただこの機能は、使用しているテーマフォルダ内のfunctions.phpにアイキャッチ画像を使う旨の記述があってはじめて使えるようになります。

[php]

add_theme_support( ‘post-thumbnails’ );

[/php]

アイキャッチ画像を表示させるには、テーマに

[php]

<?php the_post_thumbnail(); ?>

[/php]

と書くだけです。

オプションなども設定できます。
こちらのサイトにとっても詳しくまとまっているのでもっと詳しく知りたい方はぜひ!

画像のサイズバリエーションを増やす

メディア設定の箇所でも触れましたが、

これくらいのサムネイル画像も欲しいし

↓こういう小さいのも一緒に生成したい…とかいうときがあったりします。

そんなときは、functions.php内に以下のように記述します。

[php]add_image_size( $name, $width, $height, $crop );[/php]

↓ミニサイズを増やすとするとこんな感じで。

[php]add_image_size( ‘mini’, 45, 45, true );[/php]

引数は以下の通り。

add_image_size( $name, $width, $height, $crop )
$name … サイズ名:アルファベットが安心 例)’my-original-size’
$width … 画像の幅:整数,ピクセル単位
$height … 画像の高さ:整数,ピクセル単位
$crop … 縮小しないで中央を切り抜く(true)か否か(false):true または false

テーマ側での表示のさせ方も含め、以下のページに詳しくまとまっています


functions.phpに書き込めばほかにもいろんなことができますよ☆

こちらに詳しくまとまっています!


以上、いつも最初にやっていることまとめでした。
あとはどんどん自分好みにカスタマイズを進めていきます。

自作テーマの作り方については(上でも紹介しましたが)こちらの記事もどうぞ。

WordPress自作テーマの作り方
(デザイン・コーディングはできるけど、WordPressのテーマ化する手順がわからない…という方向けです)

皆さんはインストールした後、どんな感じでセッティングしていますかー??
これもやったほうがいいよ!もっとこうしたほうがいいよ!などありましたらぜひ教えてください♪
環境や使い方によって、あなたにとって最適な環境設定は異なってくると思うので、いろいろ試して自分なりの最強初期設定を見つけてみてくださいね♪

ではでは☆


以下はお仕事以外で、個人的にWordPressで作ったサイト一覧です。
サンプルとして載せておきます☆


最近買った本でよかった2冊

WordCamp Fukuoka2011 WordPressテーマの作り方発表資料など

今年も大盛況のうちにWordCamp Fukuoka 2011が開催されました!

詳細な感想はまた後日ということで、中教室で担当させていただいたセッションの資料を取り急ぎ公開します。

今年も大盛況のうちにWordCamp Fukuoka 2011が開催されました!

参加してくださった方350名+スタッフ50名弱の計400名近くが一堂に集まったとか…

しかも県外からもたくさんご参加くださって、東京や大阪、名古屋、鹿児島、熊本、兵庫に長崎、沖縄などなど…!
全国のWordPress好きの方々と交流することができました。

今年も本当に楽しかったです!

詳細な感想はまた後日書くとして、中教室で担当させていただいたセッションの資料を先に公開します。

予想をはるかに超える方々にお越し頂いて…。
本当にありがとうございました。

当日の音声や動画とかがないのでスライドだけだとなんのことだかわからないページなどに少し補足をいれたり、不要なページは一部削ったりしています。

間違えていた部分も修正しました><

アイキャッチ画像を使いたい時、functions.phpに書かなければいけないのは、
add_theme_support( ‘post-thumbnails’ );
です。

当日のスライドのスクリーンショットが間違っていました><
ごめんなさい。。

Wcfukuoka2011 slide

配布した補足資料(pdfです)

今回のセッションも、テーマづくりがはじめての方がつまずきやすいポイントの解説を中心にまとめてみました。

頑張ってスライドをつくったら50枚とかになっていて、最終的に20分間、ものすごいスピードで話すことになってしまいました…。お聞き苦しい点も多々あったかと思います。ごめんなさい。

そのぶん、少しでもわかりやすいようにと資料を印刷していたのですが、これまた準備枚数が足りずみなさんにプリントをお渡しすることができませんでした。。。

当日配布した資料もpdfで置いておきますので、よろしければご覧下さいね。

聞いてくださったみなさま、本当にありがとうございました!!!

Webデザイナーな私の勉強方法まとめ

私の勉強方法まとめてみました。

といっても「いい情報をとりこんで、実践して、その結果をアウトプット」をひたすらしているだけなのですが、
実際にどのようなサイトや本を見てインプットしているか、どんなサイトをアウトプットしているかなどまとめてみました。

私の勉強方法まとめてみました。

といっても

「いい情報をとりこんで、実践して、その結果をアウトプット」

をひたすらしているだけなのですが、実際にどのようなサイトや本を見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。

インプット

情報が美しくまとまっているサイトのフィードをチェック

国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。

そういうブログのフィードをチェックしています。

デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。

全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。

そうしておくことで、いざ●●しないといけない!というときに、そういえばどこかでみたことある!これは出来るはず!とすばやく判断することができ、スムーズにその情報を引き出すことができています。

おすすめ情報系サイト

などなど。

Fireworksに興味のある方はぜひ

もよろしくお願いしますw

身近なデザイナーさんやプログラマーさんのブログをチェック

まとめブログや情報ブログももちろん情報の宝庫ですが、身近プログラマさんやデザイナーさんのブログはより今の自分に必要な良質な情報の宝庫です。

・最近こんなの試してみた

・こんな仕事があった

・こんなコミュニティーができた

・勉強会をした

・こんなところで苦労したからメモ

など

こういった情報はまとめブログにはあまりありません。

勉強会などに参加して、その他の参加者の方々のtwitterだけでなく、ブログをちゃんとフィードに登録しておく。

まだ知り合いが少なければ、愛読している本の著者の方や、あこがれのサイトを作っている方のブログなどをフィードに入れてチェック。

そこから得られた勉強会の情報などをチェックして積極的に参加、いろんな人に会う。

困ったときに助けてくれるのは『身近な人』です。たくさんの方と知り合って、情報交換して、協力していくのはとっても大事です…!普段少人数でお仕事されている方なんかはとくに!!!!

そして

いい印刷会社さん見つけた!こんなイベントがあるよー!Macのこのソフトおすすめ!こんなショートカット知ってる?Gitって知ってますか?Subversionは?クラウドってなに?

などなどそんなもの存在すら知らなかった!というものの存在を教えてもらうことが出来ます。

時には生活に役立つ知恵を教えてもらうことも出来ます。

こういうものがあるんだ、というヒントをインプットすることが出来れば、それを自分で調べる→知識としてストックということができるようになります。

知らなかったことをたくさん知れるのは本当に楽しいです。

そんなにたくさんフィードチェックするのは大変!という方は

Web Designing (ウェブデザイニング) 2010年 12月号 [雑誌]

 

Web Designingのような雑誌でツキイチでどかっと情報収集するのもおすすめです。

クリエイターさんのインタビューとかも面白いですよ☆

ツイッターでチェック

役立つ情報をつぶやいているtwitterアカウントをフォローするのもおすすめです。

私も@FwManiaというアカウントで特に私が気になった日本のサイトの情報をつぶやいています。よかったらどうぞ♪

本を読む

ネットでたくさん情報が得られる時代ですが、ひとつのテーマを掘り下げて書かれている書籍から得られるものは大きいと思っています。

最近読んだ本とこれから読もうと思っている本をまとめてみます。

デザイン系

Fireworks CS3/CS4/CS5 (速習デザイン)私の本です。ごめんなさい…!
Fireworksの本を書きました。

FireworksはillustratorやPhotoshopより機能がシンプルでわかりやすいと思うので、「PCでデザインをする」こと自体 がはじめてな方でもすぐに何かしら形になるものが作れるので、これでPCでデザインをすることになれてから用途にあわせてPhotoshopや illustratorを使いこなしていくというのもおすすめです。

【送料無料】Illustratorデザインメソッド

 

Illustratorデザインメソッドそれなりにillustratorは使っているけれど、こんな使い方でいいのかしら…もっと効率よく作れる方法がないかな…というillustratorをひととおりさわれる人にたくさんのひらめきを与えてくれる本です。

ハートの書き方ひとつとっても、いろんなアプローチを紹介してくれているのでとても参考になりますよ!

【送料無料】Photoshopデザインメソッド

 

Photoshopデザインメソッド上記のPhotoshop版です。

サンプルデザインがどれも美しくて、眺めているだけでも勉強になります。

CSS・jQuery・コーディングなどなど

【送料無料】効率的なサイト制作のためのDreamweaverの教科書

 

効率的なサイト制作のためのDreamweaverの教科書Dreamweaverの本ですが、Webデザイナーになりたい!ホームページを作ってみようかな、でもどうしたら?という人に読んでほしい一冊です。

よくあるソフトのツール紹介本ではなく、サイト制作の流れにそって丁寧に書かれています。

【送料無料】Web制作の現場で使うjQueryデザイン入門

 

Web制作の現場で使うjQueryデザイン入門いろんなプラグインをそのまま使うことしか出来なかったのですが、この本を読んでカンタンなカスタマイズや自分でちょっとした処理を書くことが出来るようになりました。

これがなかったら多分、私のサイトでお花がくるくる回っていたことはなかったんじゃないかと…!おすすめです。

【送料無料】jQuery逆引きマニュアル

 

jQuery逆引きマニュアル出たばかりの一冊です。届くの待ち!(読んだら更新します!)

【送料無料】魅せるiPhoneサイト

 

魅せるiPhoneサイト評価が高い一冊。iPhone対応、実はまだしたことないのでこれを読んで勉強します!(読んだら更新します!)

PHP

【送料無料】よくわかるPHPの教科書

 

よくわかるPHPの教科書実際にレンタルサーバで使う方法から書かれているので入門書にはぴったりです!

本自体もきれいで読みやすいです。

これからPHP勉強してみようかな、というデザーナーさんには特におすすめ。

WordPress

【送料無料】WordPress 3サイト構築スタイルブック

 

WordPress 3サイト構築スタイルブックWordPress3.0系対応の本です。

WordPress3.0系の機能を生かして、これからテーマを自作してみようかな、というかたにおすすめ。

【送料無料】PHPによるWordPressカスタマイズブック

 

PHPによるWordPressカスタマイズブックWordPress3.0系対応の本です。

ある程度わかっているけど、もっと3.0系の機能を使いこなしてガンガンカスタマイズしたい!という方におすすめです。

実践する

自分のサイトを持つ

やってみたいことを全部業務でトライできればいいのですが、予算の問題、時間の問題、その他色々、なかなかそうはいかなかったりします。

また、やったことのないことをいきなり本番で行うのは大丈夫かな…できるかな…間に合うかな…という不安もつきまとい、あまり精神的にもよくないような気がします…。

そこで私は、やってみたい技術やデザインをバンバン試すために個人でひたすら新しいサイトを作っています。

今やっているのは

こんな感じです。

この他にこのブログとポートフォリオサイトをやっています。

デザインもプログラムもひとりでこつこつ作っています。

仕事をしながら、プライベートの時間でこれらのサイトを管理しているのですこしでも効率よくするためにPHPで管理用のプログラムを作ったり、うち5つはWordpressで作っているので、Wordpressについての理解が深まり、

デザインもたくさん作っているので、ツールの使い方にもなれ、こういう表現ってどうしたらよかったんだっけ…?といった

ツールの使い方で手が止まる、ということが少なくなり、そうしたことを繰り返すうちに自分でもびっくりするぐらいトータルの作業スピードがあがりました。

個人サイトなんてどう頑張っても一年に一つ作れればいい方だったのですが、この3ステップを本格的にはじめてからサイト制作のスピードが劇的にアップしたので、今年はたくさんのサイトを作ることが出来ました。

上記のうちの半分ぐらいサイトはこの一年で作ったりリニューアルしたりしています。

個人サイトで経験しておくことで、

実際に業務でデザインやプログラムが必要になった時、

経験があるので早く、的確な判断が出来るようになったと思います。

アウトプットする

人に見える形で記録する

上記の「実践する」もアウトプットなのですが、ここでいうアウトプットは得た知識を実践した結果をブログなどで発表するアウトプットです。

私はこのブログと、Fireworksマニアで自分の持っている情報をアウトプットしています。

自分だけのメモにまとめてもよいのですが、人に伝えようと書くことで、あやふやにやっていた部分もきちんと調べて伝わるように書こうとするので、自分自身の知識の整理にもなっています。

さらに、実際にこういうことをした、こんなことが困った、という情報は他の方の役に立つこともありますし、誰かの役に立つかも!という作業はモチベーションアップにも繋がります♪

また「この人はこんなことをしている人なんだ」と知ってもらえるきっかけにもなります。

さらに、得た情報と自分の考えもまとめて他人に理解してもらえるように何度も見直して書いていくのでちょっとずつ文章力もUPします!

こうしたアウトプットがきっかけで今年はいろんな機会をいただけて、発表したり。たくさんの人と出会えたり、ブログ読んでますよ、と言ってもらえて会話のきっかけにもなったりと、良いことがたくさんありました!

昔は、これ私だけの秘密にしておこう…とか出し惜しみしていたこともあったのですが、どんどん新しい技術やアイディアが出てくる時代に、私が思いついた程度のアイディアを秘密にしておいたところで何の意味もないことに気がつきました…

逆にアウトプットすることで『一番最初に思いついて発表した人』になれるかもしれない…!!

あとから、「私も知ってたもん!」って言ったって遅いんですよね。

さぁ早速知っていることを記録に残そう!

…ということで、日々こんなことを繰り返しています。

残念なくらい凡人デザイナーなので、人の2倍は努力するように心がけています。

なんかもう溢れ出てくる才能!!!みたいなのがあればよかったんですけど…!

10年後も生き残れるようにがんばれ私><

おしまい。

ぜぇぜぇ。書き終わった…息切れしました…

毎日読み物系のブログを更新している方って本当にすごい…!

私はこんな風に勉強してるよー!といった情報がありましたぜひ教えてください♪