カテゴリー「画像処理」の5件の記事

2006/06/04

第32回:自分専用のfavicon(ファビコン)を付けてみよう

favicon(ファビコン)とは、

FAVorite ICONの略で、 ウェブブラウザのお気に入りリストやタブに現れることのある、ウェブサイト独自のアイコン。
(はてなキーワード 「favicon」より)

のことです。
例えばココログのログイン画面をブラウザで開くとアドレスバーのURLの前に「ココログ」の文字が表示されます。

Cocolog_favi1


これが「favicon」です。

今回はこれを自分のブログに設定する方法です。

手順

事前準備1:favicon用の画像を準備する

「ペイント」などの描画ソフトで正方形の画像を作成し、自分のPC内の判りやすい場所に保存する。
※ favicon自体は16px×16pxの大きさですが今回は後でアイコンファイルに変換するツールを通し自動的にこの大きさに縮小するため、 元画像の大きさはもっと大きくても大丈夫です。
※但し、実際に使う大きさはあくまで16px×16pxですから、その大きさに縮小されることを考えて画像を作成しましょう。
作成した画像は「jpg」「gif」「png」のいずれかの拡張子で保存して下さい。

事前準備2:画像をfaviconに変換する

「Favicon Japan」さん提供の 「Favicon自動生成」を利用して、画像をfaviconに変換します。

  1. 「Favicon Japan」 さんにアクセスし、トップページの「Favicon自動生成」欄にある「参照」ボタンを押す。
  2. 「ファイルの選択」ウィンドウが開くので、上記で保存した画像を選択し「開く」ボタンを押す。
  3. 元のページに戻るので「faviconを作成する」ボタンを押す。
  4. 「preview」部分に出来上がりのイメージが表示されるので、それでよければ「DownLoad」ボタンを押す。
  5. 「ファイルのダウンロード」ウィンドウが表示されるので「保存」を選択し、自分のPC内の判りやすい場所に保存する。
    ※この場合、「ファイルの種類」は「全てのファイル」 にして下さい

【'07/02/24追記】
※「Favicon Japan」さんのツールは時々変換に失敗することがあるようです。
※同様の処理をしてくれるサイトを2つご紹介します。(いずれも海外のサイトで説明は英文ですが、操作は簡単です)
■DeGraeve.com内の 「favicon editor」→注意:変換できるのはpng形式のみ/元画像を16×16pxで作成/ダウンロードファイルは「zip」形式(解凍ソフトが必要)
■HTML-kit Tools内 「Favicon from pics」→注意:ダウンロードファイルは「zip」形式(解凍ソフトが必要)

以上でfavicon用ファイルの完成です。

ココログにfaviconファイルをアップロードする

上記で作成したファイルをココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。
<'06/06/06追記>
※アップロードの場所について
「ホーム(ルートディレクトリ)」を指定しないとIE6には表示されない
との情報を「風柳亭」 の風柳さんから頂きました。(風柳さん、ありがとうございました)
※IEをお使いの方は参考にして下さい。
※詳細は風柳さんのコメントを参照して下さい。

faviconを表示するための設定をする

  1. 上記の『基本1: ファイルのアップロード』の5.で表示された画像の名前をクリックしてページを開く。
    ※上記でアップロードした画像が表示されているはずです。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※この時urlの最後(つまりファイルの拡張子)が「http://~.ico」になっていることを確認して下さい。 これ以外の拡張子ではfaviconとして使えません。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてもOKです。
  3. 「管理ページトップ」→「ブログ」タブ→(便利メニューから)「設定の変更」を開く。
  4. 「ブログのサブタイトル(キャッチフレーズ)」 欄に下記のタグを入力する。

    <link rel="shortcut icon" href="○○○">

    ※○○○=faviconファイルの保存先url(上記2.でコピーしたもの)に置き換えて下さい。
  5. 画面下方にある「変更を保存」ボタンを押す。
  6. ページに「サイトに反映」ボタンが表示されるので、これをクリックする。
  7. 反映する範囲を指定して「反映」ボタンを押す。
  8. 「反映しました」画面が表示されたら終了。

以上です。
上手くできましたか?
自分のブログを表示してみてアドレスバーに作成した画像が表示されていればOKです。
※ブラウザに反映するまでにしばらく時間が掛かる場合もあるようです。

私は単純にココログカラーのオレンジを背景色にして、「初めて」の「は」の字を入れてみました(笑)

当ブログのfavicon


 

おまけ:faviconを削除、変更する場合

一度設定したfaviconを削除または変更する場合、通常はタグを削除するか、上記の手順を繰り返して新しい参照先を指定し反映させれば大丈夫なはずですが、場合によっては以前のfaviconが消えないときがあるようです。
その場合ブラウザの「ファイルの削除」を実行すれば削除、変更が有効になるはずです
但し、ブラウザによってはfavicon用の保存フォルダーを別に持っていて、そこのファイルを削除しないと変更が有効にならないものもあります。(例:Sleipnirなど)
その場合は、PC内のファイル検索で「favicon」ファイルを探してその中の該当のデータを削除してから、修正をかければ反映するはずです。

ここがポイント

  • faviconはブラウザの種類によって、 表示されるものとされないものがあるようです
    「Favicon Japan」 さんにブラウザごとの対応表がありますので、詳しくはそちらを参照して下さい。
    ブラウザ別ファヴィコン対応表
  • (個人的なPC環境のせいだと思いますが)私の場合「Favicon Japan」 さんのツールでは上手くいかなかったので下記のサービスを利用しました。
    「degrave.com」「Favicon Editor」
    これは表示されている16×16マスの方眼の中に一つずつドットを打って画像を作成していくツールです。
    作成後、「make favicon」ボタンを押すと下に原寸の画像が表示されますので、その画像を「右クリック」→ 「名前を付けて画像を保存」で自分のPC内に保存します。
    ※「make favicon」を押した後でも、何度でも修正可能です。出来上がりの様子を見ながら修正を繰り返して作成できます。
    あとは、上記の【faviconを表示するための設定をする】と同じ処理でOKです。
  • favicon用の素材を配布されている素材屋さんもあるようなので、「自分で画像を作るのは難しい」 という場合はそちらを利用するのも一つの方法です。
    ※「favicon素材」などをキーワードに検索すると出てきます。
    その場合、画像は変換しなくてもfaviconとして使えるファイルに(多分)なっているはずですので、上記の設置方法の 【faviconファイルをダウンロードする】から始めて下さい。
    ※素材サイトから素材をお借りする場合は、必ず利用規約を読んでその範囲内で利用しましょう。

お世話になりました

「FaviconJapan」さん
「degrave.com」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (39) | トラックバック (8)

2006/05/14

第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう

1つ前の記事 「カスタマイズ・サンプルNo.2」の.entry部分に使っているワザです。
「カスタマイズ・サンプルNo.2」の記事にも書いたように、写真の上にそのまま文字を載せると読みにくくなる可能性が高かったので使ってみました。
■サンプルはこちらでご確認下さい。→画像を使った半透明フィルターサンプル

元々「filter: alpha(***);」という画像を半透明にするCSSが存在するのは知っていたのでこれを使ってみようかと思ったのですが、調べてみたところ

  • IE(Internet Exploror)にしか使えない
  • 画像を半透明にするだけでなくその上に載せた文字も半透明化されてしまう
  • 使用する画像全体に対して指定しなければならず、私が希望している「エントリー部分だけ」 といった部分的な使い方が出来ない

といった事実が判明したため希望通りにはならないと判断し別の方法を取ることにしました。
(確かに「IE問題」(?)以外は、「そりゃそうだよね~」な内容ではあるのですが^^;)

で、辿りついたのが「半透明に見える画像を作って、エントリー部分の背景画像として敷き詰める」という方法です。
簡単にいうと「白と透過色」の細かいチェック柄の壁紙画像を作成して、それを使って見える部分と見えない部分を作っているわけです。
ヒントをいただいたのは「FC2」でテンプレートの制作、配布をされている「e-moon's blog」様です。
ありがとうございました。

前置きが長くなりましたがいよいよ処理方法です。
今回はなんと画像を作るところから始めるので、更に長くなると思います(笑)
では、どうぞ。

【'06/09/13追記】
同様の画像をダウンロード出来るサイトを発見しました。
「Free Wall Paper」
「トップページ」→「素材」→「使い方」→「半透明の背景」
ご利用の際は提供サイトの規約を遵守して下さいね。

<お詫び>
Macで参照して下さっている方には申し訳ないのですが、私のPC環境はWindowsなので以下の方法(使用するソフトなど)は全てWindowsで作業する場合を前提にしています。
私にMacについての知識がないので悪しからずご了承下さい。
※ただ、(多少手間は掛かりますが)簡単な作業ですので「ペイントソフト」と「画像レタッチソフト」があればMacでも再現可能なはずです。

手順

事前準備1:画像ソフトで2色のチェック柄画像を作成する

  1. 「ペイント」を起動する。
    ※通常「スタート」→「すべてのプログラム」→「アクセサリ」の中に入っています。
  2. 「変形」→「キャンバスの色とサイズ」を選択し、 表示された画面で「幅」と 「高さ」をそれぞれ「100」に変更し「OK」 ボタンを押す。
    ※単位は「ピクセル」です。
  3. 「表示」→「拡大」→「拡大率の指定」を選択し、 表示された画面で「拡大率」を 「600%」または「800%」を選択し「OK」 ボタンを押す。
    ※自分が作業しやすい大きさになれば拡大率はいくつでもOKです。
  4. 「表示」→「拡大」→「グリッドの表示」 を選択する。
    ※キャンバス上にグレーの縦横罫線が引かれていればOK。
  5. 「カラーボックス」で「黒」を選択する。
  6. 「ツールボックス」で「鉛筆ツール」を選択する。
  7. キャンバス上にカーソルを持っていくと鉛筆の形状になっているので、 その鉛筆の先で表示されているマス目を一つおきにクリックし 「市松模様」 を作っていく。

    touka1

    ※場所を打ち間違えた場合は「編集」→「元に戻す」 で間違える前の状態に戻れます
  8. ある程度の範囲が打てたらその範囲をコピー→貼り付けして模様の範囲を拡大していく。

    touka2

    「選択ツール」を使って、範囲選択→その範囲の上で右クリックして 「コピー」 を選択→同様に右クリックで「貼り付け」を選択
    画像がグレーの線で囲まれた状態になっていると思うので、 それをそのままドラッグ (左クリックしたまま引っ張る)して模様を合わせる
    ※この際に上下左右の端に模様がない部分が出来るのは問題ありませんが、 格子模様の途中 (内部)で模様がずれることがないように注意してください
  9. ほぼ全面に模様が描けたら、利用する部分を範囲選択する。
    ※「選択」ツールを使って白く残っている部分が入らないように画像を選択する。
    画像の大きさは50×50(px)~70×70(px) くらいあれば大丈夫なので、 全面を埋める必要はありません。
    ※大きさは縦横が偶数の正方形にして下さい。
    画像の大きさは、画面下のステータスバー(下図の赤枠で囲んだ部分です) に表示されるのでカーソルを少しずつ動かして確認して下さい

    touka3
  10. 選択した画像をコピーする。
    ※範囲選択した部分の上にカーソルを置いて右クリック→「コピー」する。
  11. 「ファイル」→「新規」を選択。
    ※「無題への変更を保存しますか」(無題=現在表示されている元の画像です)とメッセージが出るので、不安だったら「はい」 をクリックして、名前を付けて保存して置いてください。
    特に問題がなければ「いいえ」でもOKです。
  12. 一番最初の状態に戻るので、「編集」→「貼り付け」でコピーした画像を貼り付ける。
    ※一見灰色に見える小さい四角が貼り付けばOKです。
  13. 周囲の余白を削除する。
    ※もう一度「変形」→「キャンバスの色とサイズ」を選択し、「幅」と 「高さ」 をそれぞれ今度は9.でコピーした画像と同じ大きさに変更し 「OK」ボタンを押す。

    touka4
  14. 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
    ファイル名は半角英数で付けてください
    「ファイルの種類」は「24 ビット ビットマップ (*.bmp;*.dip)」 でOKです

事前準備2:画像を透過する

  1. 「Microsoft Photo Editor」を起動する。
    ※通常は「スタート」→「すべてのプログラム」→「Microsoft Office ツール」あたりに入っています。
    ※Office2003以降のバージョンをお使いの場合、「Microsoft Photo Editor」は付属していないようです。
    その場合の対応を「Point」に記載しましたので読んでみて下さい。
  2. 「ファイル」→「開く」で上記(14.)で保存した画像を開く。
  3. 「ズームボックス」を「800%」に変更する。

    touka5
  4. 「透明色に変更」ボタン(または「ツール」→「透明色に変更」)をクリックする。

    touka6
  5. カーソルの形が変わるので、そのカーソルの先に付いている黒い▼の先の部分で、「黒」の四角(どこでもOK) を一つクリックする。
  6. 「透過色に変更」画面が出てくるので、画面の窓に表示されている色が「黒」になっていて、「透過性」が100% であることを確認して「OK」ボタンを押す。

    touka7

    ※「OK」を押したあと、画面全体が白とグレーの模様になればOK。

    touka8
  7. 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
    ※ファイル名は半角英数で付けてください。
    「ファイルの種類」は「GIF形式(*.gif)」 を選択してください

以上で画像の作成は完了です。

ファイルをココログにアップロードする

上記で作成した画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。

【CSSを編集する】

基本的に、通常の背景用画像と同様の取り扱いでOKです。
例えば「エントリー部分」へ適用する場合は、「body」に背景画像を設定した上で
第27回: 個々の記事(エントリー)表示欄に背景画像を設定してみよう
の「敷き詰め」を説明した方法で「エントリー部分」だけに半透明(透過)画像を背景として設定します。

他にもいろいろな部分で利用できると思いますので、工夫してみて下さい。

ここがポイント

  • Office2003以降では「Microsoft Photo Editor」ではなく、 「Picture Manager」 というソフトが付属しているようですが、残念ながらこのソフトでは透過処理は出来ないようです
    ■参考:Microsoft Office アシスタント「画像を透過するには」
    Office2003以降のバージョンをお使いの方は各自透過の出来るソフトが別途必要になります。
    その個々のソフトでの取り扱いについてはここでは説明出来ませんので悪しからずご了承下さい。
    ※フリーソフトを使うのに抵抗がないということでしたら、個人的には「JTrim」という画像処理ソフトが使いやすくてオススメです。 (但し、導入は自己責任でお願いいたします)
    「WoodyBells」 様内「JTrim」
  • 「市松模様」がずれないように注意してください。
    細かい作業ですが途中からコピー&ペーストを駆使すればそんなに時間も掛からず出来上がると思うので、 時間に余裕があるときにでも試してみて下さい。
  • また、今回はWindows付属の「ペイント」と「Microsoft Photo Editor」を使用しましたが、 これ以外でも基本的なペイントソフトや画像レタッチソフトなら同様のものが容易に作れると思いますので使い慣れているものを使って下さい。
  • 今回は「白×透過」の画像にしましたが、白の部分を薄目のピンクや黄色、ブルーなどにしてもきれいかもしれません。
    デザインに合わせて工夫してみて下さい。
  • 黒の背景画像に対して透過画像を作る場合は、上記とは逆に「白の部分を透過」した画像を作成してください。  

お世話になりました

「e-moon's blog」
「超初心者の手取り足取りホームページ教室」
「Free Wall Paper」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (9) | トラックバック (2)

2006/04/15

基本3:記事欄への画像の挿入

「IMG(イメージ)ボタン」を使った記事欄への画像挿入方法を説明します。

  1. 「記事の作成」画面「本文」中の任意の場所にカーソルを置いて、「IMG(イメージ)ボタン」(画像の挿入) をクリックする
  2. 「画像の挿入」ウィンドウが別に表示される。
  3. <1.画像の選択>で挿入する画像を選択する。
  4. <2.画像オプション>で【カスタム設定】を選択する。
  5. 設定項目が表示されるので、自分が表示したいように各項目を設定する。
    ※設定の詳細については下記を参照して下さい。
  6. 画像の挿入ボタンを押す

5.の各設定項目の詳細は下記のようになります。

  • 《テキストの回り込み》
    画像の後に書いたテキスト(文字列)がどの位置に来るかを制御します。

    ■「画像を左に」
    →左端に画像、その右余白にテキストが表示されます。
    ■「画像を右に」
    →左側がテキスト、右端に画像が表示されます。
    ■「回り込み指定なし」(チェックを外す)
    →画像の横の余白にはテキストは表示されません。
  • 《サムネイルの作成》
    画像を縮小表示します。
    幅をピクセル、またはパーセントで指定すると元画像と同じ縦横比で縦も縮小された画像が記事上には表示されます。
    これを選択すると自動的に元画像へのリンクが張られ、記事上ではこの縮小画像をクリックすることで元画像が開く設定となります。
  • 《ポップアップウィンドウ》
    画像、または文字列をクリックすると元画像をポップアップ画面で表示します。

元画像の大きさと《サムネイルの作成》、《ポップアップウィンドウ》のON(チェックあり)、 OFF(チェックなし)の組み合わせによって投稿記事への画像表示状態が変わってきます。
それぞれの組み合わせ時の表示状態について表にまとめましたので参考にして下さい。

【A.元画像の大きさ(幅)が記事表示欄よりも小さい場合】

No

サムネイルの作成

ポップアップウィンドウ 画像の表示状態
1

ON

ON

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
2

OFF

ON

画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる
→リンクをクリックすると原寸の写真がポップアップで表示される
3

ON

OFF

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
4

OFF

OFF

画像が記事中にのみ原寸で表示される
※ リンクはなし

【B.元画像の大きさ(幅)が記事表示欄よりも大きい場合】

No

サムネイルの作成

ポップアップウィンドウ 画像の表示状態
1

ON

ON

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
2

OFF

ON

画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる
→リンクをクリックすると原寸の写真がポップアップで表示される
3

ON

OFF

サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される
4

OFF

OFF

自動的に記事欄の幅に合うように縮小された画像が挿入されポップアップへのリンクが張られる
→画像をクリックすると原寸の写真がポップアップで表示される

上記より、「IMG(イメージ)ボタン」(画像の挿入)を使った場合、ポップアップなしで画像を挿入出来るのは

  • 画像が記事欄の幅よりも小さい
  • 「サムネイルの作成」、「ポップアップウィンドウ」 の設定がどちらもOFFになっている

の条件のときのみとなります。
※ HTMLタグを自分で成形すれば可能ですがここでは説明しません。
※ご自分で下記のページなどを参考にご確認下さい。
「TAG index」 様内 『HTMLタグリスト/イメージタグ』

ココログ公式ヘルプ「使い方ガイド」内の下記のページも参照して下さい。
3: ブログへの画像/ファイルのアップロード


*この記事にコメントを書く*

| | コメント (2) | トラックバック (0)

2006/04/07

第25回:記事に挿入した画像をポラロイド写真風に表示してみよう

0121lunch 前回( 「第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう」) の記事をちょっと応用してポラロイド風に表示出来るようにしてみました。
影の画像やタグは前回と殆ど同じCSSを利用するので、前回のものを既に適用している場合は【事前準備】は不要です。
今回用に書き換えたCSSのみ追加入力して保存して下さい。

今回のカスタマイズは下記ブログの記事を参考にさせて頂いています。

「小粋空間」様 内 『CSSで画像に影を付ける(ドロップシャドウ)』
「Dear Days別冊」様 内 『ポラロイド背景に画像を(茶系)』

ありがとうございました。

手順

事前準備1:影用の画像を準備する

「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』の記事からリンクしてある影用の画像をダウンロードします。
該当ページの真ん中辺りで「画像はこちら。」と書いてある部分の「こちら」に貼ってあるリンクをクリックし、表示されたページの画像を自分のPC内に保存して下さい。

事前準備2:影用の画像をココログにアップロードする

上記で入手した画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1:ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしリンクを開く。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    『第3回:カスタムテンプレートを作ってみよう』
    を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    .pola {
        background: url(●●●) right bottom;
        float: left; /* 回り込み制御 */
    }

    .pola img {
        position: relative;
        left: -5px; /* 画像を左へ移動 */
        top: -5px; /* 画像を上へ移動 */
        padding:
    10px 10px 50px 10px; /* 画像枠 */
        background: #ffffe0; /* paddingを設定した場合の背景色 */
        border: 1px solid #999999; /* 画像の枠線 */
    }

    を全て半角英数で記述する。
    ※●●●には上記で保存した画像のURLを入力して下さい。
    前回のCSSとは赤文字の部分だけが異なります。
    ※ 上記のCSSは「小粋空間」様 内 『CSSで画像に影を付ける(ドロップシャドウ)』「Dear Days別冊」 様 内 『ポラロイド背景に画像を(茶系) 』を参考にさせて頂きました。
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります。
※画像の挿入については前回の記事
『第24回: 記事に挿入した画像に写真風の枠線と影を付けてみよう』
またはココログの公式ヘルプ
「使い方ヘルプ」『3:ブログへの画像/ファイルのアップロード』
を参照してください。

画像タグにCSSを呼び出す記述を追加する

  1. (「リッチテキストモード」の場合)「HTMLの編集」画面に切り替える。
    ※「プレーンテキストモード」の場合はそのままでOKです。
  2. 画面に

    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left; MARGIN: 0px 5px 5px 0px" />

    というようなタグが入力されていると思うので、そこから
    MARGIN: 0px 5px 5px 0px
    を削除する。
    ※「カスタム設定」を設定した場合はもっと複雑なタグが記入されますが、そこからも同様に「MARGIN: 0px 5px 5px 0px」の部分を探して削除して下さい。
    ※この部分が残っていると影の表示がずれてしまいます。
  3. 上記のタグを

    <span class="pola">~</span>

    で囲む。
    ※つまり、上の画像タグの場合だったら、

    <span class="pola"><img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left" /></span>

    になります。
  4. 記事が書き終わったら「保存」ボタンを押す。
  5. ブログを表示してイメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

ここがポイント

  • このCSSを適用する場合、使用する画像は縦長のものよりも少し横長か正方形に近い方がそれっぽく見えます
  • 画像の下部分の大きな余白にサイン(文字)を入れたい場合は、 好きな文字を入れた画像を別に作成しそれをココログにアップロードした上で

    background-image:url(●●●); /*文字入り画像の指定*/
    background-repeat:no-repeat; /*画像繰り返し:なし*/
    background-position:▲ ■; /*画像の位置*/

    の記述を「.pora img」タグ内に追加してください。

お世話になりました

「小粋空間」
「Dear Days別冊」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (0) | トラックバック (1)

2006/04/02

第24回:記事に挿入した画像に写真風の枠線と影を付けてみよう

shidarezakura 記事部分に挿入した画像に写真風の枠線と影を付けてみましょう。
携帯のカメラで撮った写真でも立体感のある、ちょっとスタイリッシュ(?)な雰囲気で表示させることが出来ます。


このカスタマイズは、下記ブログの記事を全面的に参考にさせて頂いています。

「小粋空間」様 内 『CSSで画像に影をつける(ドロップシャドウ)』(CSSタグ)
「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』(影用画像入手)

ありがとうございました。

手順

事前準備1:影用の画像を準備する

「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』の記事からリンクしてある影用の画像をダウンロードします。
該当ページの真ん中辺りで「画像はこちら。」と書いてある部分の「こちら」に貼ってあるリンクをクリックし、表示されたページの画像を自分のPC内に保存して下さい。

事前準備2:影用の画像をココログにアップロードする

上記で入手した画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1:ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしリンクを開く。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    『第3回:カスタムテンプレートを作ってみよう』
    を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    .shadow {
        background: url(●●●) right bottom;
        float: left; /* 回り込み制御 */
    }

    .shadow img {
        position: relative;
        left: -5px; /* 画像を左へ移動 */
        top: -5px; /* 画像を上へ移動 */
        padding: 5px; /* 画像枠 */
        background: #ffffe0; /* paddingを設定した場合の背景色 */
        border: 1px solid #999999; /* 画像の枠線 */
    }


    を全て半角英数で記述する。
    ※●●●には上記で保存した画像のURLを入力して下さい。
    上記のCSSは全て 「小粋空間」 様に記載してあるタグのコピーです。
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります
今回は画像の挿入方法も合わせて説明します。

画像の挿入

  1. 記事作成画面の任意の位置で「IMG(画像の挿入)」ボタンを押す。
  2. 「画像の挿入」ウィンドウが開くので、「1.画像の選択」の「参照」ボタンを押し挿入したい画像を選択、「開く」ボタンを押す。
  3. 元の画面に戻るので「画像の挿入」ボタンを押す。
    ※「カスタム設定」は必要に応じて設定して下さい。
    ※詳細については下記の記事を参考にして下さい。
    基本3: 記事欄への画像の挿入
  4. 記事作成画面に画像が表示されれば完了。
    ※「プレーンテキストモード」の場合は、画像は表示されず画像表示用のタグが自動入力されます。

画像タグに影を付けるための記述を追加する

  1. (「リッチテキストモード」の場合)「HTMLの編集」画面に切り替える。
    ※「プレーンテキストモード」の場合はそのままでOKです。
  2. 画面に

    <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left; MARGIN: 0px 5px 5px 0px" />

    というようなタグが入力されていると思うので、そこから

    MARGIN: 0px 5px 5px 0px

    を削除する。

    ※「カスタム設定」を設定した場合はもっと複雑なタグが記入されますが、 そこからも同様に「MARGIN: 0px 5px 5px 0px」の部分を探して削除して下さい。
    ※この部分が残っていると影の表示がずれてしまいます。
  3. 上記のタグを

    <span class="shadow">~</span>

    で囲む。
    ※つまり、上の画像タグの場合だったら、

    <span class="shadow"><img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left" /></span>

    になります。
  4. 記事が書き終わったら「保存」ボタンを押す。
  5. ブログを表示してイメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

ここがポイント

  • 今回のカスタマイズは、画像タグに「shadow」というセレクタを指定することによって、 影を付ける場合と付けない場合を選択できるようになっています。
    影を付ける場合は、必ず画像タグに<span class="shadow">~</span>を追加入力して下さい。
  • 画像を挿入するときに生成されるタグの「margin」指定が残っていると影がずれて表示されてしまいます。
    必ず「margin」指定を削除して下さい。
  • 既に入力されている画像にもCSSを設定した上で<span class="shadow">~</span>を追加すれば影を付けることが可能です。
  • 上記以外の詳細な設定についても「小粋空間」様の該当記事で解説されていますので、ご参照下さい。

お世話になりました

「小粋空間」
「POCHIKING」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


| | コメント (2) | トラックバック (1)