2013-09-01

Webサイト制作におけるWordPressを用いたブログのトップページの作り方１

WordPress

Webサイト制作に関連して、ブログを作る必要が出てくる場合がある。

今回はWordPressでのブログ制作におけるトップページの作り方の基本事項をまとめていく。

WordPressのインストール方法などは省略する。
参照：http://wp-exp.com/

WordPressでのブログ制作は、WordPressの管理画面（ダッシュボード）でブログに関する情報の設定や記事の投稿を行っていく。
そして、phpでページを生成し、スタイルシートでテーマを作成し、ページにテーマを適用していくという流れになるようである。

テーマとはデザインのテンプレートのようなものと考えると分かりやすいと思われる。

テーマのスタイルシートの最初に書くこと

スタイルシートの一番最初にはテーマに関する情報を記述する必要がある。
記述する主な項目は以下の通り。

項目名	記述する内容	省略
Theme Name	スタイルシートのテーマ名	不可
Theme URI	テーマ（スタイルシート）がある場所のURL	可
Description	テーマの説明文	可
Version	テーマのバージョン	可
Author	テーマの著作者	可

※テーマと認識されるために必要となるため、「Theme Name」のみ省略不可。
以下、記述例。コメントとして記述する。

/*
Theme Name: ○○○○
Theme URI: http://www.△△△
Description: ××××××.
*/

コードの書き方

基本的な書き方は以下の通り。

<?php タグ名(パラメータ値); ?>

パラメータ値があるものは括弧内にパラメータ値を指定する。パラメータ値が文字列の場合はシングルクォート「''」で囲む必要があるが、数値の場合はシングルクォートで囲む必要はない。

2013-08-29

前田慶次道中日記

オフ

突然ですが、前田慶次をご存知でしょうか？

漫画「花の慶次-雲のかなたに-」が有名で、近年はパチンコ・パチスロで使われているらしく、知らない人でもCMで目にする機会はあったかと思います。

なぜ突然前田慶次が出てきたかというと、タイトルにある通り、「前田慶次道中日記」の復刻版を手に入れたからです！

前田慶次が好きという方、この復刻版の存在を知ってました？

私は一応前田慶次好きを自負していますが、恥ずかしながらつい数日前に知りました。

「道中日記」が存在しているらしいことは知っていましたが、まさか復刻版なるものがお手頃価格で販売されているとは。

なんともありがたいことです。

で、さっそく中身を見てみました。

梱包をといて、まず、資料の立派さに驚きました。

豪華な箱のケースに以下の4点が入っています。

影印本
解説冊子
道中日記の行程図
米沢の遺跡地図

ありがたいことに冊子にちゃんと解読文と現代語訳が付いています。
また、前田慶次の主な経歴やエピソード、遺跡・遺品などもまとめられていて、いきなりこれを買うという人はなかなかいないとは思いますが、これで初めて前田慶次について知るという人でもこれだけで前田慶次の人となり、概要が分かるようになっています。

まだお持ちでないファンの方にはおススメです。

以下、欲しいという方のための情報。

販売しているお店はかなり限られているようで、市立米沢図書館のWebサイトで確認できます。
市立米沢図書館http://www.library.yonezawa.yamagata.jp/maeda.html

ちなみに私は米澤書房さんで購入しました。
米澤書房http://bookhouse.ocnk.net/

すぐに届いてとても対応が良かったです。

と、レビューのような内容になりつつあるので、以下でもう少しブログっぽいことを書きたいと思います。

道中日記について

まずは道中日記について少しだけ説明を書いておきます。

これは、関ヶ原の合戦後、上杉家が会津120万石から米沢30万石に減封され、移動するのに伴って、上杉家へ仕官する（していた）前田慶次が、当時の拠点の京都（伏見）から米沢へと向かう道中を綴った日記です。

前田慶次は文武の両方に長けていたと言われていますが、この日記では彼の文化人としての一面を垣間見ることができるようです。

さらっと見た感じでは、日付ごとに書かれた原文はそれほど長い文章ではなく、詩歌を交えながら、漢字、ひらがな、カタカナで書かれているようです。

また、現在と同じ地名や観光地として有名な宿場町の名前が原文に登場しているあたりはとても興味深いです。
といっても詳しい風景描写などがあるわけではないので、そのへんは期待したのと少し違ったようです。

とはいえ、まださらっと見ただけなので、今後じっくり読んでみたいと思います。

前田慶次について

「花の慶次」や他の小説を読む限りでは、前田慶次の出没年が不明・曖昧なことから、主に前田利家との年齢関係（年上か年下か）をどう考えるかによって、キャラクターの描かれ方が違う印象があります。

ただ、個人的な意見を言わせてもらうと、なんといっても「花の慶次」の慶次像が一番です。登場人物との出会いや関係など脚色は少なからずあることとは思いますが、実際の慶次がどうであったにせよ、「花の慶次」で描かれている慶次像は圧倒的にカッコいい。

我が家に全巻そろっていたため、何歳のときに初めて読んだのかは定かではありませんが、とにかくカッコいい男像といったら、現実も架空（漫画など）も含めて、私の中で「花の慶次」の慶次像を超えるものはありません。

決してアッチ系の意味合いではありません。この漫画は人が人に惚れこむということがどういうことかを教えてくれます。

正直私は、中学生くらいの子に下手な課題図書を与えるより、「この夏は花の慶次全巻を読みなさい」といってあげた方がよいのではないかと思います。

そうすればきっと思春期に「カッコいい」を勘違いして、良からぬ方向に進んでしまう子も減るんじゃないかと思います。一方で、逆に「傾奇者」に魅せられて、別の変な方向に走ってしまう子も出てきそうではありますが…。

でもそれくらいカッコいいです。漢（男）を学ぶバイブルと言っても過言ではないと思います！

知らない人は是非読んでみてください。

と、前田慶次というよりは「花の慶次」で描かれている前田慶次像について語ってしまいましたが、こんな思い入れもあったために、本当のところの前田慶次という人物にも興味があり、それを知る一つの術として、このたび道中日記を買うに至ったというわけです。

ちなみに、私の一番好きな武将は直江兼続です。
「花の慶次」でも登場しますが、やはり魅力は「義」。そして「直江状」。

長くなるので直江兼続についてはまたの機会にしたいと思いますが、ドラマ「半沢直樹」で描かれている半沢直樹像の魅力と通じる部分が直江兼続にはあると思います。

とにもかくにもまとめとしては、もう一度米沢いかないとですね。

※花の慶次公式サイトhttp://www.hananokeiji.jp/index.html

2013-08-27

Webサイト制作におけるjQueryのプラグイン（設置）に関するまとめ

ｊQuery

先日、訓練におけるWebサイト制作の発表が終わったので、授業が次のステップに進む前に今回のWebサイト制作において用いたjQueryのプラグインについてまとめておく。

私が用いた主なjQueryのプラグインは以下の３つ。

flexslider：画像の移り変わりの方法（フェード/スライド）を選択できたり、画像の表示順をランダムにできたりと多機能で便利なスライダーのプラグイン
jScrollPane：CSSでデザインを変えることができるスクロールバーのプラグイン
galleriffic：キャプションやスライドショーなど多機能で、サムネイル画像をクリックすることで、固定位置に大画像が表示されるギャラリーのプラグイン

また、今回のWebサイト制作を通して、jQuery プラグイン設置時に気付いた注意点をまとめておく。

jQuery プラグイン設置時の注意点

jQuery プラグインの設置には、読む込むだけのjsファイルの他に、実行部のスクリプトの記述が必要なものがある
プラグインにはjsファイルだけでなくcssファイルがセットになっているものもある
簡単にカスタマイズできる項目はHTMLのscriptタグ内に書いてあるもの（書いておくこと）が多いようだが、jsファイル内にもほぼ同じ記述（設定箇所）がある（ことが多い）
紹介サイトなどで書かれているカスタマイズの項目名がたまに間違っていて変更が効かないことがあるので、その場合はjsファイル内の項目名を確認した方がよい
複数のプラグインを同じページに設置する場合、外部スクリプトを読み込む順番によって、動作したりしなくなったりするので、読み込み順の調整が必要な場合がある
jQuery本体は基本的には１つで良いが、プラグインによって動作するjQuery本体のバージョンが異なる

jQuery プラグインの無難な設置手順

これは他にも同じようにしている人はいるとは思うが、私自身が勝手に無難な方法と思ってやっている手順は以下の通り。

プラグインの配布先や紹介サイトにある単独ページのDemoサンプル（一番簡潔なサンプル）をそのままコピーしてきて、動くか試す
手順1がちゃんと動く確認ができた後に、そこに何の変更も加えない状態で、本来設置したいHTML内に必要なコードや読み込みを記述して、動くか試す
手順2がちゃんと動く確認ができた後に、カスタマイズしたい箇所ごとに「変更」→「動作確認（正常かおかしくなったか）」を繰り返していく

※ここで注意すべき点は、必ず1箇所ずつ変更していき、そこが正常に動作するようになるまでは次のカスタマイズに進まないこと。

ものによっては、HTML内に記述する前に先にカスタマイズしてしまい、カスタマイズ後の動作が確認できたものをHTML内に記述するという方法もありだと思われる。

2013-08-21

Webサイト制作におけるパンくずリストの書き方

HTML CSS

Webサイト制作におけるパンくずリストの書き方はいくつかあるが、ベターな書き方を習ったのでまとめておく。

※パンくずリストとは：http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88

ポイントは以下の2点。

ページ名とページ名の間は「>」（不等号）を用いる ⇒ 検索エンジンが「>」が使われているとパンくずリストと認識するらしい
liタグを用いる場合は、左右のどちらかのページ名と同じliタグ内に「>」も書いてしまう

ベターな書き方

以下、サンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パンくずリストの書き方</title>
<style>
body, ul, li, p, a {
　margin: 0;
　padding: 0;
}
ul {
　list-style: none;
　margin-left: 10px;
}
p {
  margin-left: 10px;
}
ul li {
　display: inline; /* or float: left; */
}
ul li a {
　margin-right: 7px; /* 「&gt;」と左右のページ名との間隔を調整 */
}
</style>
</head>
<body>
<!-- 書き方1-->
<ul>
<li><a href="page1.html">ページ1</a>&gt;</li> <!-- 「&gt;」は「>」の実体参照文字 -->
<li>ページ2</li>
</ul>
<!-- 書き方2 -->
<p>
<a href="page1.html">ページ1</a>&ensp;&gt;&ensp;ページ2 <!-- 「&ensp;」は半角スペースの実体参照文字 -->

</p>
</body>
</html>

以下、表示結果。

書き方1はaタグにmargin-rightをつけることで「>」と左右のページ名との間隔が均等に見えるように調整している。
また、書き方2については、ページ数が少ない場合にはこのような書き方をしても問題ないとのことで、一つのpタグ内で「>」の左右に半角スペースを置くことで、両ページ名と「>」との間隔が均等に見えるよう調整している。

SEO対策としての効果は弱いらしいが、書くならページ名の繋ぎには「>」を使うのがベターとのこと。

ちなみにページ名の文字と「>」とが縦方向にややズレて見えてしまうことに対して、vertical-alignなどで縦方向を調整するために別のタグで「>」を囲むという方法は、認識される意味が変わってきてしまうため、やらない方がベターとのこと。

（SEO的には）あまりおススメではない書き方

以下は、たまに見かけるがSEO的にはあまりおススメではない書き方のサンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パンくずリストの書き方</title>
<style>
body, ul, li, p, a {
　margin: 0;
　padding: 0;
}
ul {
　list-style: none;
　margin-left: 10px;
}
ul li {
　display: inline; /* or float: left; */
}
</style>
</head>
<body>
<!-- 書き方3-->
<ul>
<li><a href="page1.html">ページ1</a></li>
<li>&gt;</li>   <!-- 「&gt;」は「>」の実体参照文字 -->
<li>ページ2</li>
</ul>

<!-- 書き方4-->
<ul>
<li><a href="page1.html">ページ1</a></li>
<li>&raquo;</li>  
<li>ページ2</li>
</ul>
</body>
</html>

上記以外には、繋ぎに画像などを用いる方法もしばしば見られる。

SEO的には書き方1、書き方2が好ましいが、見た目（デザイン）を優先させるなら他の書き方でも良いと思われる。

2013-08-18

Webサイト制作におけるjQueryの基本的なメソッド６ - wrap()とremove()

ｊQuery

今回はwrap()メソッドとremove()メソッドについて確認する。

その前に、ここまでは既にHTML内にある要素を指定してそれを操作するという方法で確認等を行ってきたが、同じような書き方で、新しく要素を作って、それを操作するということができる。

記述方法は以下の通り。

$('新しく作る要素のHTMLコード').メソッド(パラメータ);

要は今まで既存の要素を指定していた部分に、新しく作る要素のHTMLコードを記入すれば良いだけとなる。

では、以下で新しく作った要素に対する操作も含めて確認していく。

要素を追加、削除する機能をもつ基本的なメソッド

wrap()メソッド：指定した要素を囲む（包む、ラッピングする）
remove()メソッド：指定した要素を削除する（要素ごと削除する）

wrap()メソッド

記述例は以下の通り。

$("要素1").wrap($("要素2"));

要素2で要素1を囲む（包む、ラッピングする）という操作になる。

2013-08-18

Webサイト制作におけるjQueryの基本的なメソッド５ - before()とafter()

ｊQuery

前回に引き続き、今回はbefore()メソッドとafter()メソッドについて確認する。

before()メソッド

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>before()メソッド</title>
<style>
body, div, p, li {
  margin: 10px;
  padding: 0;
}
#done {
  background: #0F0;
}
#dtwo {
  width: 200px;
  background: #0FF;
}
#dthree {
  width: 150px;
  background: #F0F;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
  <p>done_p</p>
  <p>done_p</p>
</div>

<div id="dtwo">
 <p>dtwo_p</p>
 <p>dtwo_p</p>
</div>

<div id="dthree">
 <p class="pone">dthree_pone</p>
 <p class="ptwo">dthree_ptwo</p>
 <p class="pthree">dthree_pthree</p>
 <ul>
  <li class="lione">dthree_ul_lione</li>
  <li class="litwo">dthree_ul_litwo</li>
 </ul>
 <div>
  <p>dthree_div_p</p>
 </div>
  <p class="pfour">dthree_pfour</p>
</div>

<script>
$(function(){
　$('#done').before($('#dtwo'));
　$('#done').before($('.pone'),$('.pfour'),$('.pthree'));
　$('#dtwo').before($('#dthree p'));
　$('#done').before($('.litwo'));
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
結果から、以下のことが分かる。

複数の要素をまとめて移動させる場合、before()メソッドの括弧内に書いた順に移動する（移動後、その順番で並ぶ）※上記例の「.pfour」、「.pthree」に対する結果参照
もとは兄弟関係でないものでも、同じ条件で抽出されたものは、移動後は兄弟扱いになる　※上記例の「#dthree p」に対する結果参照
このような指定の仕方が正しいのかどうかは不明だが、「ul li」の「li」のみを移動させた場合でも、処理はされる（「li」が単独で移動する）※上記例の「.litwo」に対する結果参照

2013-08-18

Webサイト制作におけるjQueryの基本的なメソッド４ - prepend()とprependTo()

ｊQuery

前回に引き続き、今回はprepend()メソッドとprependTo()メソッドについて確認する。

機能の概要は既に（前回）書いたので割愛する。

挿入される位置が異なる以外は、append()メソッドおよびappendTo()メソッドと同じ機能なので、前回の記事を見て頂いた人は特に見る必要はないと思われる。

テーマのスタイルシートの最初に書くこと

コードの書き方

道中日記について

前田慶次について

jQueryプラグイン設置時の注意点

jQueryプラグインの無難な設置手順

ベターな書き方

（SEO的には）あまりおススメではない書き方

要素を追加、削除する機能をもつ基本的なメソッド

wrap()メソッド

before()メソッド

jQuery プラグイン設置時の注意点

jQuery プラグインの無難な設置手順