例えばこのWEBCreate PRACTICE!!の様にTOPページ以外にもお知らせが出ている様なサイトでは非常に助かる関数となります。具体的にはquery_posts()を使って記事のタイトルを何件か繰り返した後に一件の記事の全文を表示させたい時に使って頂くとかなり便利というやつです。

WEBCreate PRACTICE!!を例にとってソースを観て行きます。

News-feed部分の繰り返しの記述

<ul id="news" class="ticker">
 <?php if (query_posts('showposts=4')) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <li><a href="<?php the_permalink(); ?>"><?php the_date(); ?><?php the_title(); ?></a></li>
 <?php endwhile; ?>
 <?php endif; ?>
</ul>

ここまでは前回の復習みたいな感じですが、「WEBCreate PRACTICE!!」の場合このままでは問題が発生します。「WEBCreate PRACTICE!!」はTOPページにも単一の投稿にもこのソースを使用しています。なにが起きるかというと単一の記事を表示すると、4件分の記事をすべて表示してしまうんですね。ここで登場するのが「wp_reset_query()」です。

wp_reset_query()を使ってquery_posts()を初期化する

使い方は非常に簡単です。query_posts()をリセットしたい場所にこの記述をするだけです。

<ul id="news">
 <?php if (query_posts('showposts=4')) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <li><a href="<?php the_permalink(); ?>"><?php the_date(); ?><?php the_title(); ?></a></li>
 <?php endwhile; ?>
 <?php endif; ?>
 <?php wp_reset_query(); ?>
</ul>

これでこのあと記事の本文を表示してもquery_posts()の内容は影響しません。
 

WPの記事繰り返しの基本形

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post();?>
    /*ここに書かれた内容が記事の数だけ繰り返し*/
  <?php endwhile; ?><?php else : ?>
    /*繰り返す記事が無い場合ここに書かれた内容が表示される*/
<?php endif; ?>

 
この記述がWPの繰り返しの基本構文です。じゃあ、実際に投稿記事のタイトルが表示されるように記述を追加します。
 

投稿記事のタイトルが繰り返される様に記述を追加

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post();?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <?php endwhile; ?><?php else : ?>
    <div>残念ながら記事が見つかりません。</div>
<?php endif; ?>

 
the_permalink()はタイトルに対応する詳細記事のURLを取得する関数で、the_title()は記事のタイトルを取得する関数になります。
 
実際に編集しながらやっている方はお分かりだと思うんですが、この書き方だと記事の数だけ繰り返し＝全記事のタイトルとなってしまい。全ての投稿記事のタイトルが出てきちゃいます。そこで登場するのがquery_posts()関数です。これを使用すると最新記事から何件だけなどの条件を付けることが可能となります。じゃあ実際に最新3件しか表示されない様に変更しましょう。
 

<?php query_posts('showposts=3'); ?>
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post();?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <?php endwhile; ?><?php else : ?>
    <div>残念ながら記事が見つかりません。</div>
<?php endif; ?>

 
このように記述をすれば最新3件のみのタイトルが表示されるようになります。ちなみにquery_posts(‘showposts=○’)の○の中の数字が取り出したい記事の件数になります。
 

ドメインについて

wikipediaによると
 
ドメイン名  は、コンピュータネットワークにおいて個々のコンピュータを識別する名称の一部。ICANNによる一元管理となっており、世界中で絶対に重複しないようになっている。通常、IPアドレスとセットでコンピュータネットワーク上に登録される。多くの場合、ドメイン名はその下位に1つまたは複数のホスト名を連ね、またドメイン名それ自身もホスト名である。Domain Name Systemにより、ドメイン名を含むホスト名とIPアドレスとの変換が実行されている。
 
と説明されてます。要するに世界で2つと同じドメイン名を持ったサイトは存在しないちゅーことになります。そしてサーバーと契約した段階でこのドメインは取得できます。要するにｈｔｔｐ付きのurlそれがドメインです。そして皆さんの言うドメインはこのurlに自分で好きな名前を付ける独自ドメインについてだと思います。
じゃあ何故独自ドメインを取得しているサイトが多いか??ってところに着目してみようと思います。
 

独自ドメインのメリット

1.WEBサイトの信用度がアップする

 
これが最大と言っても過言ではないです。ちなみにこの信用度は「人」だけではなく「検索エンジン」にも当てはまります。要するにSEO的に見てもユーザーから見ても独自ドメインを取得しているサイトは信頼性が高いという事です。
 

2.サーバーを変えても元のままのドメインでアクセス出来る

 
そのままですね、はい。サーバーを引越すと独自ドメイン取っていない場合はurlが変わっちゃいます。
 
以上の点からも独自ドメインは取得した方が良いというのは伝わるかな??と思います。
 

ドメインの種類

 
「独自ドメインが重要な事は分かった!!じゃあ、一番信頼できそうだし良く聞く.co.jpを取得しよう!!」
 
ってなってる方は落ち着いてください。実は何個かのドメインに関しては取得するのに条件を満たしてないといけないドメインがあります。
 

1.取得条件付きドメイン「.co.jp」

 
日本国内で登記を行っている会社が登録できます。

例）株式会社、有限会社、合同会社、合名会社、合資会社、相互会社、信用金庫、信用組合、外国会社など。
 

2.取得条件付きドメイン「.or.jp」

 
法人組織が登録できます。

例）財団法人、社団法人、医療法人、監査法人、宗教法人、特殊法人、特定非営利活動法人、一般社団法人、一般財団法人など。
 

3.取得条件付きドメイン「.ac.jp」

 
18歳以上を対象とした高等教育機関、学術研究機関などが登録できます。

例）大学、大学校、高等専門学校、学校法人、職業訓練校、職業訓練法人大学共同利用機関などの学術研究機関など。
 

4.取得条件付きドメイン「.ed.jp」

 
初等中等教育機関および18歳未満を対象とした教育機関が登録できます。

例）保育所、幼稚園、小学校、中学校、中等教育学校、高等学校、盲学校、聾学校、養護学校、専修学校など。
 

5.取得条件付きドメイン「.go.jp」

 
日本の政府機関や各省庁所管の研究所、特殊法人、独立行政法人が登録できます。
 
これ以外にもあるかもしれませんが、「えーじゃあ何が良いのよ??」ってなると思います。あくまでネットで囁かれている噂なので一概には言えないですが、「.com」「.jp」などが安心できそうです。その逆に「.info」は安く取得できる分信頼性が低いそうです。
 

独自ドメインの取得方法

 
基本的にはドメイン取得代行業者に依頼する形になります。正直ドメインに関してはセール期間とか以外では値段はどこも大差がありません。なのでとりあえずメジャーな業者さんをご紹介しておきます。
 

お名前.com

 
おそらくドメイン取得代行業者として一番知名度があるんじゃなかろうかと思います。安心して取得できますね。取得する際は下のバナーをクリックしてサイトに行ってください。



 

サーバーについて

 
wikipediaによると
 
Webサーバは、HTTPに則り、クライアントソフトウェアのウェブブラウザに対して、HTMLやオブジェクト（画像など）の表示を提供するサービスプログラム及び、そのサービスが動作するサーバコンピュータを指す。 広義には、クライアントソフトウェアとHTTPによる通信を行うプログラム及びコンピュータ。
 
と説明されています。要するにHTMLなどのデータを世界中どこにいてもアクセス出来るように保管しておくコンピューターって事です。独自ドメインと違いwebページを公開するにはこのサーバーは無いとダメなものになります。自分でサーバーを構築することも可能ですが、メチャメチャ大変だし時間と労力を使うので一般的にはレンタルサーバーを借りるのが普通です。
 
「えぇえぇ、ですからどこのサーバーが良いんだってばよ??」
 
と思われてることでしょう。残念ながらドメインと同じようにサーバーもケースバイケースです。自分が作ろうと思っているサイトを理解していないと、あとから痛い目を観る可能性もありますんでお気を付けください。
 

サーバー会社ごとの違い

 
もちろん資本主義社会なので各サーバー会社ごとにサービスの内容、料金体系が異なります。気をつけなければいけないのは、自分の作ったサイトで使っている言語が使用できるかどうかです。HTML・CSS・javaScriptは気にしなくていいです。PHPやPerlなどを使用する場合です。だいたいどこのサーバー会社も一番安いプランはPHP・CGI・DBが使えない所が多いです。なのでワードプレスEC-CUBEとかのサイトの場合は注意が必要です。
 
では最後に何個かメジャーなサーバー会社を紹介して今回の記事は終了にします。
 

WADAX

 
企業サイトをUPするならここがいいかもです。安定性・容量申し分なしな上「電話対応」があるのが僕の知っている他のサーバーとの大きな違いです。ただ・・・、ちょーっとお値段がはります。


 

ミニバード

 
僕も使っているサーバーになります。値段・容量と申し分ないですがネットの評価では、安定性がないワードプレスが動かないとか言われてます。(※正直僕はそんなの感じたことないです。)ちなみにミニバードを運営している会社がネットオウルという企業なんですが、ウェブクロウというサーバーサービスも行っており、そちらはなんと無料で広告なしのサーバースペースを使わせて頂けるうえになんとPHPとMySQLも使えるという太っ腹っぷりです。(※PHPを使うコースの場合広告有)。


 

ロリポップ

 
一番金額的には安いサーバーになります。ただ、その一番安いプランだとPHP・データベースが使えない要するにワードプレスなどは使えない事になりますんでHTMLだけのwebサイトであれば問題ないのですがそれならミニバードの姉妹サーバーのwebクロウの方がお勧めです。


 
なんにせよ、適宜自分の作ってるサイトに合わせて独自ドメイン、サーバーレンタルされるようにしてください。

 

ファイルのダウンロード

 
こちらからファイル一式ダウンロードしてください。
 
ダウンロードしてzipファイルを解凍したら自分のサイトの中に下記のソースコードを記述。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/thumb_gallery.js"></script>
<link href="css/thumb_gallery.css" rel="stylesheet" type="text/css"> 

フォトギャラリー部分のHTMLマークアップ

<div class="display_image">
 <ul>
  <li><img alt="画像01" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像02" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像03" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像04" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像05" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
 </ul>
</div>

上記のように、div要素にクラス属性「display_image」を記述し、その中にリスト(※<ul>)で画像を配置します。・・・終了です。なんとシンプルでなんと設定しやすいスクリプトだこと。K野さん恐るべし!!
 

注意点

 
※div要素内のリストは、ul要素にのみ対応しています。

※挿入するimg要素のwidth属性とheight属性は必ず指定してください。

※各画像のサイズが統一されていなくても、問題なく動作しますが、各画像の縦横比（特に高さ）は統一されている、もしくは、ある程度近い数値である事を推奨します。
 

<script src="css_browser_selector.js" type="text/javascript"></script>

準備はこれでOKです。あとはアンドロイドで別の記述をしたいセレクターに「.android」を頭につけて記述する。

p{
  text-align:right;
}

.android p{
  text-align:center;/*for-Android-*/
}

上記の様にCSSを書くとAndroidで観たときだけ<p>タグの中の文字列は中央揃え、それ以外のブラウザやデバイスで閲覧すると右揃えとなります。(※コメントアウトは分かりやすい様に付けているだけなので、無くても問題ありません。)

そして、このスクリプトのすごい所はブラウザの違いだけでなくOSの違いも判別出来るところです。例えばmacのIEやウインドウズのサファリなどの指定も出来てしまうんです。下記の例はウインドウズのサファリでの指定例です。

.win.safari p{
  text-align:center;/*for-Windows safari-*/
}

対応OS

・win – Microsoft Windows
・linux – Linux
・mac – Mac OS
・ipod – iPod Touch
・iphone – iPhone
・android – Android
 

対応ブラウザ

・ie – Internet Explorer (All versions)
・ie8 – Internet Explorer 8.x
・ie7 – Internet Explorer 7.x
・ie6 – Internet Explorer 6.x
・gecko – Mozilla, Firefox (all versions), Camino
・opera – Opera (All versions)
・safari – Safari
・chrome – Google Chrome
 
これさえあれば、IEだって怖くない!!(笑)。
 

表示させるアイコンを作る!!

なにはともあれ、表示させるものを作らなければ話が進まないのでどのグラフィックソフトでも構わないです。(ｊｐｇ、gif、png、bmpの形式で保存出来れば)僕はフォトショップでやりました。

114px×114pxのカンバスで作成してください。正方形であればこのサイズより大きくても構わないらしいのですが、「114×114」が既定サイズらしいのでこのサイズで作成することを推奨します。そしてiphoneの場合(というか、Android持ってないのでAndroidがどうなのかわかりません・・・。ごめんなさい。)角丸にしなくちゃいけないんじゃないの!?って思うかもしれませんが、勝手に角丸に切り抜かれます。なので心配ご無用です。ってか角丸にしかならないんですよねー(笑)。

保存形式はｊｐｇ、gif、png、bmpのどれでもいいらしいんですが一番きれいなんで「png」で保存しましょう。
 

HTMLマークアップ

<head>内に下記のソースコードを追加してください。

<link rel="apple-touch-icon" href="画像パス" />

ちなみに

<link rel="apple-touch-icon-precomposed" href="画像パス" />

にするとiphoneの「キラリン☆」って感じのグラデーションを外せます。
 

ファイルのアップ

 
このホーム画面用アイコンは別にどこに配置して貰っても構わないので適宜自分のサイトの適当なところにアイコンをUPしてください。もちろんHTMLもちゃんとUPしてくださいね。
 

 

Adobeの公式発表↓↓

 

 
「Creative Cloud」といえば月額5,000円で、Adobeの最新アプリが全部使えて、ネットワークストレージ（20GB）もついてくる。というサービスです。発表された当初は「マスターコレクション」をウン十万払わずに使えるんか!?すげー!!と一瞬なったのをおぼえています。ただ、ホントにお得なんだろうか??という疑問を抱える方も多かったはず。とりあえず、現段階でネット上で飛び交っている「Creative Cloud」のメリット・デメリットをまとめてみようと思います。
 

「Creative Cloud」のメリット

1. ・最新バージョンがつかえる。
2. ・全アプリが使える。
3. ・パッケージ販売にはないアプリが使える。
4. ・ストレージサービスその他使える。

「Creative Cloud」のデメリット

1. ・月額料金を払い続ける必要がある。
2. ・月額料金はいつまでも5,000円とは限らない。
3. ・毎月ネットワークで認証しなければいけない

結論

わからないっっっっっっっっ!!!!(笑)。とりあえず、数多くのユーザーさんはCS6はとりあえずパッケージ版で買ってAdobeの様子を伺うというスタンスみたいです。
 
そして今回悲しい事が一つあります。「Fireworks」が開発終了とのことらしいです。「Fireworks」開発終了の背景には、「Photoshop」「Illustrator」等の他のグラフィックツールと機能が重複している為だそうです。えー・・・正直フォトショのスライスって僕は訳分からない(勉強が足りてな・・・ゲフンゲフン)から、かなり残念です。一応「Fireworks CS6」のサポート継続はされるらしいのですが、本当に残念です。
 
最後にAdobeの公式でのQ＆Aが面白い感じになっていたのでリンクを貼っておきます。
 

 

1280×1024のカンバスでストライプを作成

まずはストライプで出したい二色の色を描画色背景色に設定して下さい。色を決めてもらったら下図のようにフィルター→スケッチ→ハーフトーンパターンと手順を進めてください。(※ハーフトーンパターンが選択できない時は、とりあえずカンバスを何色でもいいので塗りつぶしておいてください)
 

 
そうすると下図のようなハーフトーンパターンの編集画面に入ると思います。とりあえず今回は細めのコントラストのくっきりしたストライプを作ろうと思います。
 

 
サイズ→2
コントラスト→50
パターンタイプ→線
で設定してください。
 

 
画面いっぱいにボーダーが出来上がります。
 

468×60のカンバスにボーダーを貼り付ける

貼り付け方はどんなやり方でも構いません。1280×1024のカンバスで作ったボーダーを丸ごとコピーして468×60のカンバスにペーストします。
 

 
おそらく上図の様にカンバスの枠をはみ出てペーストされるはずです。この状態でコピペで出来たレイヤーを自分の好みの角度に回転させると斜めストライプの完成となります。
 

 
今回のチュートリアルを使って作ったサンプルバナーです。文字だけのバナーでもこんな感じにすると、かわいらしくなりますね。
 

 

エクセルで貼り付けたい表を選択する

 
表の全体をコピーしてください。前回同様分かりづらいですが表の周りは破線がチカチカ点滅してる状態です。
 

コピーしたデータをイラストレーターに貼り付ける

 
実はこの段階でベクトル化されてたりします。今回は「この先」まで向かいます。
 

表全体を選択してコピーする

 
これでフォトショップにベクトルデータとして表を貼り付ける準備はOKです。
 

フォトショップに貼り付け→表の編集

フォトショップの画面に行くと下図のようなダイヤログが出てくると思います。

ペースト形式をスマートオブジェクトにしたら「OK」をクリック!!これでベクトルデータとしてフォトショップに表の貼り付けが出来ました。表の編集をしたい時はレイヤーパネルのサムネイルをダブルクリックしてください。
 

 
そうするとイラストレーターが立ち上がって編集ができます。