画像をグループ化する複数の画像をグループ化して、表示中に前後の画像に切り替えるスライドショーのような表示もできます。画像表示中に画像をクリックすると、次の画像へと切り替わります。表示され、前後の画像へ移動することもできます。押すことでも、前後に切り替えることができます。オプションを指定します。title="3枚目タイトル"></a>::2枚目以降の<a>~</a>の間に、それぞれのサムネイルを入れることも可能です。同じ手順でできますので、好きな方を使ってください。それ以外に、FTPクライアント(FFFTPなど)と画像編集ソフト(GIMPなど)、テキストエディタ(行番号表示があるものがよい)が必要です。HTMLとCSSなどの情報が表示されます。)が出てきましたが、そう上手く行かなかった場合には、左半分のHTMLエリアにフォーカスを合わせ(=クリックし)て、カーソルキー(キーボードの矢印キー)の上下で、ハイライト(反転表示行)を移動させてみてください。右半分のCSS領域に、背景画像を指定している部分がでる箇所があるはずです。「style.css(586行目)」と書いてあります。そこに背景画像を指定する記述があるのです。ファイルの場所マウスポインタを青文字の「style.css(586行目)」に合わせると、ツールチップテキストでURLが表示されます。見ることのできるファイルが、画像ファイルです。FTPクライアントで、アクセスしてみましょう。ページのデザインに影響を与えているのです。ダウンロードしてから開いてみれば、背景画像であることが分かるはずです。ファイルを書き換える方法を試してみましょう。色合いを変えてみるとか、図形を描き加えてみるとか、逆に何かを消してみるとか。画像の縦横サイズさえ変えなければ、何をしてもかまいません。強制再読込)することで、ヘッダー部分の画像が変わるはずです。背景画像を別の画像にする次に、まったく別の画像にしてみましょう。これらは自分が使うファイルに合わせて読み替えてください。FTPクライアントを使って、サーバにアップロードします。ファイルをダウンロードし該当部分、先程調べた586行目からを編集します。center;}通常は、画像のサイズを変えると、他の要素のバランスがずれてしまいます。これは、画像サイズに合わせて、他の要素のサイズや位置が調整されているためです。値)を微調整する必要があります。やり方自体は同じなので、いろいろ試してみてください。新しく背景を入れる最後に、もともと背景画像のないテーマに、背景画像を入れる方法です。やり方自体は今までと同じで、画像をアップロードして、CSSファイルを書き換えるだけなのですが、元のCSSファイルに「background-image:」の記述がないため、「CSSのどこを?」が分からないと思います。そんな時は、左半分のHTML領域内でマウスを動かしてみてください。ページの該当する部分の色が変わって表示されます。情報を書き加えてください。本来であれば、HTMLとCSSの仕組みを理解して、変更箇所を見つけるべきです。するには既存のWordPressのテーマは複雑すぎるため、上記のような方法を紹介しました。単純なテーマでも自力で作ればかなり理解が深まりますので、時間があったら挑戦してみてください。テーマのカスタマイズに限らず、Web開発をするために便利なブラウザを2つ紹介します。両方とも、歴史などの説明は割愛しますので、興味があれば調べてみてください。今回は、CSSを解析する機能に絞って説明します。ブラウザは、ここで紹介する2種類以外にもたくさんあるので、自分にあったものを探してみるものいいでしょう(開発に便利かどうかは調べてません)。自分が気に入ったブラウザを、「みんなが使っている」なんていう幻想は持たないでください。正しく表示されなければ価値が半減します。いう拡張機能を追加することで、右クリックに「要素を調査」というメニューが加わります。左側のHTMLソースの各行にマウスポインタを合わせると、ページを表示している元のウィンドウの該当部分がハイライト表示されます。カーソルキーでカレント行を動かす(またはマウスでクリックする)ことで、右側にその部分の属性値が表示されます。スタイルの各行にマウスポインタを近づけると、行頭に灰色の通行止めマークが現れます。それをクリックするとマークが赤くなり、その行のスタイルが無効になります。属性の名前や属性値をクリックすることで、内容を自由に変更することもできます。任意の属性を付加することもできます。このように変更したものは、あくまでも一時的なもので、再読み込みすれば元に戻りますし、実際のサーバのデータが書き換わることは絶対にないので、安心して試すことができます。Chrome前回も少し触れましたが、インストールしたままの状態で、「要素の検証」機能が使えます。左側のHTMLソースの各行にマウスポインタを合わせると、ページを表示している元のウィンドウの該当部分がハイライト表示されます。カーソルキーでカレント行を動かす(またはマウスでクリックする)ことで、右側にその部分の属性値が表示されます。どのようなスタイルが指定されているのかを見ることができます。マウスポインタを、この部分に近づけてみると、右端にチェックボックスが現れます。このチェックを外すことで、一時的にそのスタイルが指定されていない状態を見ることができます。違い、属性値を変えることはできないようです。チェックをはずしてもサーバーのデータが書き換わることはありません。上の2つのブラウザ(とブラウザ+拡張機能)には、他にも便利な機能として、JavaScriptの実行を監視したり、ページ読み込みの時間を測定・分析したりする機能がついています。この研修では触れませんが、Web関連の仕事をしていく上で必ず必要になる日が来ると思います。今回は、前回説明した意味構造と見た目についてです。前回の記事の見出し「昔のWebサイト」の部分が、どういう意味構造の中にあるものなのか、そして何故あのような見た目になったのかを説明します。普通のブラウザには、見ているWebページのソースを表示する機能がついています。この機能を使うと、HTMLのソースを見ることができます。簡単に見やすく構造を見ることができるソフトがあります。いうソフトを使います。Tool画面の左側でHTMLの構造が分かります。いう構造の中にある文字列だということが分かります(おおまかな情報は画面の下1行にも表示されます)。画面の右側で、その部分に影響を及ぼしているスタイル(見た目の定義)が分かります。どのCSSファイルに書いてある定義が、どのようなものであるかが書いてあります。影響を与えているCSSの記述は3個所あるようです。それらの記述がすべて影響を与えるわけですが、同じ事柄についての定義は、優先度の高いものが使われます。横線が引かれています。効いている、ということです。他の値については割愛しますが、ひとつだけ。