カテゴリー別アーカイブ: 未分類

CSS 属性セレクタの使い方3 ~E[attr="value"]~

前回の記事に引き続き、属性セレクタの使い方です。今回は、属性名と属性値を両方指定する書き方の紹介です。おそらく、これが最もよく使われているかきかただと思います。

E[attr="value"] ― ある属性が特定の値の要素

この書き方は、type属性の値によって見た目が変わるinput要素のスタイル指定でよく使われます。なお、「 ” ” 」内(valueの部分)は完全に一致していないとセレクタの対象にはなりません。

使用例

E[attr="value"]の書き方を使って、class属性にsample1とsample2を持っている<p>要素のみ色を変えてみます。

HTML

<p class="sample1">クラス名sample1だけ</p>
<p class="sample2">クラス名sample2だけ</p>
<p class="sample1 sample2">クラス名sample1とsample2</p>

CSS

p[class="sample1 sample2"]{ color: red; }

ブラウザ表示

表示結果

 

WEBクリエイター養成(午前)科修了式

CONGRATULATIONS!

WEBクリエイター養成(午前)科の修了式がありました。

6か月の訓練、長いようで短く感じられたと思います。受講生の皆さん、お疲れ様でした。開講時と比べてみて、かなりスキルアップできたのではないでしょうか。

1からWEBサイトを制作する技術は身についたと思いますので、あとは皆さんがそれぞれ進みたいと思っている道に必要な知識をさらに学んでいってほしいと思います。WEB業界は常に変化し続けています。どんどん新しい技術やデザインが出てくるので、学び続けることが重要です。

修了式から3か月間、就職活動に専念して、訓練で身に着けたスキルを活かせるお仕事を見つけてほしいと思います。

卒業制作発表

本日は、WEBクリエイター養成(午前)科の卒業制作発表でした。

今までのどの課題よりも長い制作期間を設け、企画書の作成から入っていただくという、実際の仕事に近い形の課題です。

企画書で立てた計画通りにはなかなか進まなかったかもしれませんが、具体的な計画を立てたことで、それぞれの工程にどの程度時間がかかるのか、どの作業に一番時間がかかるのかを意識することができたのではないでしょうか。仕事として制作をするとき、どのくらいの時間で完成させられるか、目算が立てられることは大切です。毎回計画を立てて制作をすると、自分がどのくらいの時間で制作できるのかがだんだんわかってくると思います。たとえ計画通りに進まなくても、計画を立ててみることは無駄にならないと思います。

皆さんの作品を拝見して、いままでやったことがなかったものに挑戦したり、一つのWEBサイトを完成させたりと、何かしら目標を立てて制作されていると感じました。素晴らしい姿勢だと思うので、こちらも忘れずにいてほしいと思います。

WordPressのブログにGoogleカスタム検索エンジンを設置する方法4

前回までの記事で、Googleカスタム検索エンジンを作成し、編集する方法を紹介しました。今回は、作成した検索エンジンをWordPressのブログに設置する方法です。

Googleカスタム検索エンジンをWEBページに表示する

Googleカスタム検索エンジンをWEBページに表示する方法は簡単です。カスタム検索エンジンの「設定」から「詳細」と辿っていき、「コードを取得」ボタンをクリックします。

コード取得画面

すると、上のような画面が表示されますので、表示されたコードをHTMLのdiv要素の中などにペーストするだけで、検索フォームが表示されます。JavaScriptコードの中にカスタム検索エンジンを識別する「検索エンジンID」が入っていいて、設定した検索エンジンを表示できるようになっています(画像中の検索エンジンIDは、存在しません)。

WordPressにカスタム検索フォームを設置する

上記のように、コードを取得してHTMLにペーストすれば検索フォームが設置できるのですが、WordPressに設置する場合は、ウィジェットを利用します。以下手順です。

  1. WordPress管理画面メニューから「外観」>「ウィジェット」を表示
  2. 左に並んだウィジェットから「テキスト」をえらび、サイドバー(テーマによって表示は異なる)にドラッグ
  3. 「テキスト」のタイトルを設定し、内容にGoogleカスタム検索で取得したコードを貼り付け
  4. 「テキスト」ウィジェットの「保存」ボタンを押すとブログに反映される

テキストウィジェットを使ってブログに表示

※上のウィジェット設定画面はWordpress3.8.1のものです。バージョンによって見た目は異なる場合があります。

これでGoogleカスタム検索エンジンのフォームがブログのサイドバーに表示されます。WordPressデフォルトの検索機能よりはるかに使い勝手が良いので、このブログでも利用させてもらっています。

WordPressのブログにGoogleカスタム検索エンジンを設置する方法3

前回前々回とGoogleのカスタム検索エンジンの作成・編集について書いてきました。今回の記事では、検索フォームの見た目を編集する方法について紹介します。

Googleカスタム検索エンジンのデザイン変更方法

Googleカスタム検索エンジンのフォームや検索結果の表示方法を変更するには、「検索エンジンの編集」から「デザイン」を選択します。

カスタム検索作成完了画面

レイアウト
検索フォームと検索結果をどのように表示するか選ぶことができます。画面右側のフォームでプレビューできるようになっているので、実際に確認しながら変更してください。
レイアウト選択画面
テーマ
ボタンや文字の色などを、用意されたテーマから変更することができます。
カスタマイズ
検索フォームや検索結果の見た目をカスタマイズすることができます。フォントファミリーや文字色、フォームの背景や枠の色などを細かく編集できます。
サムネイル
検索結果にWEBページのサムネイルを表示するかどうかの設定です。

次回記事では、Wordpressのブログに実際にカスタム検索フォームを表示する方法を紹介します。

WordPressのブログにGoogleカスタム検索エンジンを設置する方法2

前回に引き続き、Googleカスタム検索エンジンを作成してWordpressのサイトに表示する方法です。前回、Googleカスタム検索エンジンを作成するところまでご紹介しました。今回は、作成したGoogleカスタム検索エンジンの編集方法です。

Googleカスタム検索エンジンの編集方法

カスタム検索作成完了画面

Googleカスタム検索エンジン作成後に表示される3つのボタンのうち、「コードを取得」を選べば検索フォームの埋め込みコードを発行できますが、今回は機能や見た目の編集をしてみます。設定を編集するには「コントロールパネル」ボタンか、左側のメニューの「検索エンジンの設定」>「設定」をクリックします。

基本設定

カスタム検索基本設定画面

「検索エンジンの設定」>「設定」をクリックすると基本設定の編集画面が表示されます。ここでは、検索エンジンの名前やキーワード、検索対象のページなどを編集できます。埋め込みコードの取得もここから行います。

検索エンジンのキーワード
関連するキーワードを入力することで、検索の精度が上がることがあります。(同音異義語で検索したときなどに、結果が変わります)
詳細
「コードを取得」で埋め込みコードを取得できます。検索エンジンIDは、その検索エンジン固有の識別コードのようなもので、検索エンジンをサイトで利用するときに必要になります。公開URLとは、編集中のカスタム検索エンジンが公開されているURLです。Googleで公開したくない場合はオフにします。
画像検索
画像で検索する機能を有効にするかどうかの設定です。デフォルトではオフになっています。
音声検索
音声で検索する機能を有効にするかどうかの設定です。デフォルトではオンになっています。
検索するサイト
検索対象サイトの追加や削除ができます。指定したサイトにリンクが張られている場合、そのリンク先も検索対象にするなどの設定も可能です。

デザインの変更については、次回記事で書きます。

WordPressのブログにGoogleカスタム検索エンジンを設置する方法1

WordPressには、デフォルトで記事検索が出来る機能がついています。しかし、その使い勝手はお世辞にも良いとは言えません。デフォルトの検索フォームは、いわゆる「あいまい検索」ができません。検索語句と記事のタイトルや本文が、完全に一致していないと検索結果として表示されないのです(例:記事タイトルが漢字だったとき、ひらがなで検索しても表示されない)。

そのため、WordPressでブログを作成するときは、無料で作成できるGoogleのカスタム検索エンジンを利用することをお勧めします。今回と次回の記事で、その設置方法を紹介します。

Googleのカスタム検索エンジン作成方法

Googleのカスタム検索エンジンは、Googleアカウントがあれば作成することが出来ます。まずはGoogleアカウントでログインした状態で、Googleカスタム検索エンジンのページを開きます。

「カスタム検索エンジンの作成」というボタンを押せば下の画像ような編集画面に移行します。

Googleカスタム検索エンジン作成画面

ここで、検索対象にしたいWEBサイトのURLを入力すれば、カスタム検索エンジンを作ることが出来ます。作成した後で、各種機能や見た目などを編集できるので、とりあえず作成してみましょう。

下記例のようにURLを入力し、「言語」のプルダウンメニューは「日本語」を選択して、「作成」ボタンを押します。

www.example.com/*

このように入力すればサイト全体を検索できる検索エンジンが作成されます。URLの指定の仕方によって、特定のページのみ検索、サイトの一部を検索、といった設定が可能です。URLは複数指定可能です。

次回以降の記事で、作成した検索エンジンの設定や使用方法を書きます。

アイキャッチとは

 ブログやサイトを運営する上で、アイキャッチ画像を表示させるのはとても大事になってくるものとなっています。そこで今回はアイキャッチについてお話したいと思います!

アイキャッチってそもそも何?

 アイキャッチとは、サムネイルとも呼ばれる、記事の内容を表す画像のことをいいます。よくブログなどで記事一覧を表示している箇所で画像が表示されているかと思いますが、それが“アイキャッチ画像”と呼ばれるものですね。
 文章だけの記事だととても読みづらいものになってしまうので、それを防ぐのと、見出しを兼ねてアイキャッチ画像を載せておくとよいでしょう。
 アイキャッチ画像を掲載させたい場合はWordPressなどのCMSで記事を投稿する時に設定させる必要があったりします。アイキャッチを表示させるプラグインなどもWordPressには用意されていますが、WordPressの話は別の機会にでも…

アイキャッチ用のフリー素材を探そう!

 ちなみにアイキャッチ画像もそうですが、サイトに画像を使う時は基本的にフリー素材(商用利用してよい画像)を使うことが好ましいです。そうでない、著作権がある画像を使ってしまった場合、最悪損害賠償問題になってしまうことも。
 そうならないために、今のうちからフリー素材を使うよう癖をつけておきましょう。ちなみにオシャレなフリー画像はFlickrで入手することが可能です。このサイトは海外のサイトなので画像を探す際は英語で検索ワードを指定する必要がありますが、オシャレな画像を入手することができるので、是非とも活用してみましょう!

和風デザインお助けツール

制作作品で和風なものを作成する場合もあるでしょう。そんな時役立つサイトを紹介します。
※使用に関しては各サイトの使用規約を読んでから使用して下さい。

日本の伝統色 和色大辞典

和風の色は微妙な色が多いですね。そんな時、色相を考えるのに打ってつけ。

wargo pattern

和風イメージには欠かせない小紋などのパターン満載。シームレスなので背景にも◎。

Japanese style pattern by gimei on deviantART

こちらは色付きパターン満載。同じくシームレスなので背景にも◎。

上記のものだけでも、創作範囲が広がりますね。是非参考に。

難しい配色を助けてくれる優れもの

デザインする時、一番難しいのが「色使い」。そんな配色を手助けしてくれるサイトを紹介します。
※使用に関しては各サイトの使用規約を読んでから使用して下さい。

ウェブ配色ツール Ver2.0

手軽に配色チェックをするならお勧め。プレビューを見ながら配色の調整ができるのが◎。

COLOURlovers

自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。

他にもイメージに合わせて配色を選べるサイト、書籍などあるので2,3キープしておくことをお勧めします。