カテゴリー「エントリー部分」の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/05/12

第28回:リンクの装飾を設定してみよう

リンクを設定した文字列は色を変えたり、下線を付けたりして他の文字列とハッキリ区別したほうが読者にも分かり易く親切ですし、クリックして貰いやすくなります。
ココログでは管理画面の「デザイン」→「テーマの変更」からもリンク文字の色や下線の有無、文字の太さなどの簡単な設定が出来ますが、 CSSを利用すればもっと細かく多彩な設定が出来るようになります。

今回は下記で例に挙げた設定のCSSをそれぞれご紹介します。
※リンク先はよく使うブログ検索サイトにしてみました(笑)クリックすると別窓で開くようにしてあります。

 

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄にリンク装飾用のCSSを記述する。

    1. カーソルを乗せると文字が太文字になる

    /*通常の状態*/
    a:link{
    font-weight:normal; /*文字の太さ:通常*/
    color:#cc3399;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    font-weight:normal;
    color:#000099;
    text-decoration : none;}
    /*カーソルでポイントした時*/
    a:hover{
    font-weight: bold; /*文字の太さ: 太字*/
    color:#cc3399;
    text-decoration : none;

    2. カーソルを乗せると背景に色が付く

    /*通常の状態*/
    a:link{
    color:#333366;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#999999;
    text-decoration : none;
    }
    /*カーソルでポイントしたとき*/
    a:hover{
    color:#333366;
    text-decoration : none;
    background-color:#9999ff; /*背景色*/
    }

    3. リンクの下線を点線にする

    /*通常の状態*/
    a:link{
    color:#ff3300;
    border-bottom:1px dotted #009900;/*罫線(下側) に点線*/
    text-decoration : none;/*テキスト装飾:なし (←これを付けないと通常の下線が付いてしまう)*/
    }
    /*訪問済み*/
    a:visited{
    color:#999900;
    border-bottom:1px dotted #cccccc;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#99cc00;
    border-bottom:1px dotted #666600;
    text-decoration : none;
    }

    4. カーソルを乗せると文字の位置が移動する

    /*通常の状態*/
    a:link{
    color:#660099;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#ff66ff;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#9900ff;
    text-decoration : none;
    position:relative; top:3;left:3;/*文字が動く方向と範囲*/
    }

    5. カーソルを乗せると背景画像が表示される

    /*通常の状態*/
    a:link{
    color:#ff9933;
    text-decoration : none;
    }
    /*訪問済み*/
    a:visited{
    color:#009900;
    text-decoration : none;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    color:#000000;
    text-decoration : none;
    background-image:url(http://~);/*背景画像の指定*/}

    6. 枠線を付けてボタン風に表示

    /*通常の状態*/
    a:link{
    text-decoration : none;
    color : navy;
    border-top : 1px solid #cccccc;
    border-right: 3px solid #999999;
    border-left : 1px solid #cccccc;
    border-bottom: 3px solid #999999;
    padding:3px;
    }
    /*訪問済み*/
    a:visited{
    text-decoration : none;
    color : navy;
    border-top : 1px solid #cccccc;
    border-right: 3px solid #999999;
    border-left : 1px solid #cccccc;
    border-bottom: 3px solid #999999;
    background-color:#e3e3e3;
    padding:3px;
    }
    /*マウスでポイントしたとき*/
    a:hover{
    text-decoration : none;
    color : navy;
    border-top: 3px solid #999999;
    border-left: 3px solid #999999;
    border-right : 1px solid #cccccc;
    border-bottom : 1px solid #cccccc;
    padding:3px;
    }

    ※通常時(マウスポイントしていないとき)は罫線の下と右を太くて濃い線、マウスでポイントしたときはその逆(上と左を濃く太く) にすることで擬似的な立体感と動きが表現できます。
    ※但し、これはボタンらしく見せるために文字の周囲に余白を設定してしまっているので、通常の文章の中では使いにくいかも… ^^;

    ※上記を参考にしてリンク設定用CSSを全て半角英数で記述して下さい。
    ※色や線の種類、太さなどはご自分で自由に変更して下さい。 
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

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

ここがポイント

  • リンクはその状態によって4つの定義済みクラスを持っています。
    a:link : 通常のリンク(未訪問状態)
    a:visited : 訪問済みのリンク
    a:hover : マウスでポイントした状態
    a:active :  クリックして該当サイトに繋がるまでの間の状態
    上記で書いたCSSのようにそれぞれの状態に別々の要素を適用することが可能です。
    但し、複数の状態を同時に指定する場合は、上記の並び順を間違えないようにしましょう。
    (順番が前後すると、指定した装飾が上手く反映しなくなることがあります。省略するのは大丈夫です)
  • サイドバーと本文(記事部分) のリンク装飾を別々に指定することも出来ます。
    その場合、サイドバーのリンクプロパティに「.sidebar」を付けて
    .sidebar a:link{~}
    .sidebar a:visited{~}
    といった感じで指定して下さい。
  • 上記の例ではリンク文字の色もCSSの中で指定していますが、ココログの場合「デザインの編集」→「テーマの変更」 部分で指定した方が管理しやすいと思います。
  • この他にも、色や線の種類、太さなどをデザインに合わせたリンク表示を工夫してみて下さい。
    尚、「通常の状態(未訪問)」と「訪問済みリンク」は、ハッキリと区別出来るように変化を付ける、 また文章として読む場合にも読みにくくならないような色をそれぞれ選択しましょう。

お世話になりました

■素材サイト「IMAGE」 様<No.5のリンクの背景画像>
■素材サイト 「PRISM」様<記事内のボタン素材>


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


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

2006/04/22

第27回:個々の記事(エントリー)表示欄に背景画像を設定してみよう

記事表示列全体ではなく、個々の記事(エントリー)表示欄にそれぞれ背景画像を設定する方法です。
こんな(↓)感じで各エントリーの同じ場所に同じ画像が繰り返し表示されます。(クリックで拡大)

entry1



手順

事前準備:背景用の画像を準備する

背景用の画像を準備します。

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
※この部分は背景の上に文字が載りますので、文字の読みやすさを考えて背景画像を選択しましょう。
※また、記事表示欄よりも小さめで周囲に余白があるものを選択した方がいいと思います。(理由は「point」にて説明しています)

準備した画像はPC内の判りやすい場所に保存しておきます。

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

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

CSSを編集する

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

    .entry-body{
    background-image:url(●●●); /*背景画像の指定*/
    background-attachment:fixed; /*背景画像の固定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ▲; /*背景画像の位置指定*/
    }

    を記述する。
    ※漢字、かなで書いてある部分以外は全て半角英数で書いて下さい。
    ※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』
    ※プロパティを「.entry」で指定すると、 コメント部分で背景画像がダブって表示されてしまうようなのでここを「.entry-body」に変更しました。('06/05/07)
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • .entry部分は文字と表示スペースの間に余白が殆どない状態で設定されているので、 使用する画像は記事表示欄の幅よりも小さめなものを選択し上下左右に余裕がある状態で位置指定するときれいに表示できると思います。
  • どうしてもどこかの辺に接した状態で表示したい、または敷き詰めで表示したい、 という場合は下記のような記述で文章の周囲に余白を作ると見やすさ、読みやすさが向上すると思います。

    .entry-body{
    background-image:url(●●●);
    padding:10px 20px 0px 20px;
    margin:-10px -20px ;
    }

    上記は敷き詰めにした例です。一つの画像を固定にする場合は、「padding」と 「margin」の部分を前述のタグに追加してください。
    marginはマイナス指定にしてください。
    ※それぞれの数値はご自分のブログに合わせて調整して下さい。
    ※ちなみに上記の数値で適用すると、下記(↓)のような状態になります。(クリックで拡大)
    ※下記の画像は余白の状態が分かり易いように少々濃い色の背景素材を使用しています。

entry3


お世話になりました

■写真素材サイト 「ミントblue」 様<記事内に表示した写真をお借りしました>
■素材サイト 「web*citron」 様<参考画像内に使用した背景素材をお借りしました>
■素材サイト 「PRISM」様<記事内のボタン素材>


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


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

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)

2006/03/11

第19回:引用部分の装飾を設定してみよう

書籍や雑誌、他のWebページ、ブログに記載されている内容を借りてきて自分のブログに掲載する際は、自分の文章と借りてきた文章を分ける意味で「<blockquote>~</blockquote>」というタグで囲みます。
引用ボタンココログでも記事作成画面に標準で「引用文」 ボタン(左図参照) があり範囲を選択したあとこれを押すことでタグを自動的に挿入出来ますが、 デフォルトのままのスタイルだと単に文章がインデント(文字下げ)されるだけであまり目立ちません。

デフォルトだとこんな感じです。↓

これは引用文です。

そこで、引用タグに装飾をして、他の文章とハッキリ区別できるようにしてみましょう。

著作物の引用ルールは「著作権法」において定められています。
他人の著作物を引用する場合は、そのルールの範囲内で正しく利用して下さい。

■参考:「はてなダイアリー」『引用とは』
■参考: 「Wikipedia」『引用』

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄に

    blockquote {
    border:■px solid #●●●●●●; /*枠線の太さ、種類、色*/
    margin: ■px ; /*枠線の外側の余白*/
    padding: ■px ; /*枠線の内側の余白*/
    }


    を全て半角英数で記述する。
    ※●●●●●●にはその色を指定する6桁のカラーコードを代入します。
    ※カラーコードについては下記のページなどを参考にして下さい。
    ■参考: 「色のみじん切り」様 色のみじん切り
    ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
    ※■にはそれぞれ任意の数字を入力して下さい。
    ※各プロパティの詳しい説明は「point」にて後述。
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。
    ※↓のようになっていればOKです。

これは引用文です。

以上です。
うまく出来ましたか?

ここがポイント

この他にも線の色や背景色を変えることでいろいろな表現が出来ます。
例えば

  • 線の種類を変えて背景に色を付ける

これは引用文です。

blockquote{
border:2px dashed #8b0000; /*枠線の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-color: #FFE4E1; /*枠線の中の背景色*/
}

  • 線無しで背景色のみ指定

これは引用文です。

blockquote{
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-color: #E6E6FA; /*枠線の中の背景色*/
}

  • 線の種類を変えて背景に画像を指定

これは引用文です。

blockquote{
border:5px inset #6B8E23; /*枠線の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
background-image:url(画像のurl); /*枠線の内側の背景画像*/
}

  • 付箋紙風

これは引用文です。

blockquote{
border-left:10px solid #292c5a; /*枠線の左側の太さ、種類、色*/
border-bottom:1px solid #cccccc; /*枠線の下側の太さ、種類、色*/
border-right:1px solid #cccccc; /*枠線の右側の太さ、種類、色*/
margin:10px 15px; /*枠線の外側の余白*/
padding: 10px; /*枠線の内側の余白*/
}

※borderの左、下、右それぞれの太さ、色を変えて立体的に見えるようにするのがポイントです。(上は指定なしにしています)

などなど。
ブログの雰囲気に合わせて色々と工夫してみて下さい。

お世話になりました

「TAG index」
「色のみじん切り」
■素材サイト 「PRISM」


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


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

2006/02/25

第11回:記事とフッターの間に区切り線(画像)を入れてみよう

エントリー欄とフッター(投稿者名やカテゴリ、固定リンクなどが書いてある部分)の間に区切り線になる画像を入れてみましょう。
こんな感じ↓になります。(クリックで拡大)

Line_1

手順

事前準備:画像を入手する

区切り線用の画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう

私は「Simple Life」 様でお借りした素材 (300px * 28px)を使いました。

※長めのライン画像を使用する場合、自分で設定したエントリー部分の幅よりも短い画像でないと途中で切れてしまうので注意しましょう。

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

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

CSSを編集する

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

    .content p.posted
    {
    background-image:url(●●●);/*区切り用画像アドレスの指定*/
    background-repeat:no-repeat;/*画像の繰り返し(なし) */
    padding-top:■px;/*画像挿入スペースの作成(上余白の設定) */
    background-position:top center;/*画像の位置*/
    }


    の赤文字部分を全て半角英数で記述する。
    ●●●には上記で保存した画像のURL、 ■には画像の高さに合わせて数値を入力して下さい。
    (/*~*/で囲まれた部分は表示には影響しません。設定の内容を書いておくメモなどに活用できます。 この中は半角英数以外でもOKです)
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • 「background-repeat」は画像の繰り返しを指定するプロパティです。
    上記のCSSでは長めのラインを一つだけ表示するため、
    「background-repeat:no-repeat;」
    を記述して、画像の繰り返しは「なし」
    に設定しました。
    ここを
    「background-repeat:repeat-x;」
    と記述すれば、 横方向へ繰り返し表示されるので小さな画像を連続して表示することで繋がったラインのように表示することが出来ます。
    例えば、前回サイドバーのタイトルに付けたアイコンを 「repeat-x」で並べてライン状にするとこんな感じ↓になります。

 

  • 書いているときは気付きませんでしたがこの部分(.contrnt p posted)に画像を入れると、 記事だけでなくコメントのフッターにも同じ画像が付くようです。
    コメントの区切り線としても使えますね。

お世話になりました

【今回お世話になったサイト様、ブログ様です。 ありがとうございました。】

「PRISM」様<記事中のボタン素材>
「Simple Smile」 様<ライン素材>


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


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