<   2012年 11月 ( 21 )   > この月の画像一覧

文字と画像の配置について(5)

次回投稿は12月4日になります。お待ちください。

ページへページへページへページへページへページへ

今回は小さな画像を扱ってみましょう。
実験8で使った記事入力欄の次の部分をコピーして、記事入力欄に貼り付けて、画像タグを加工します。
d0181824_14484032.jpg

【画像タグの説明】
[#IMAGE|d0181824_161535.jpg|201211/28/24/|left|520|365#

【d0181824_161535.jpg】
画像のファイル名です。アップロードした際、この名前でサーバーに保存されます。

【left】
画像の配置です。
中央はmid、左配置はleft、右配置はright。アップロードした際に指定したものです。

【520|365#】
画像の大きさです。単位はピクセル。
サーバーに保存された画像の大きさです。
上記の場合 520×365ピクセルの大きさの画像が保存されています。
アップロードする際、データサイズが500KBを超えると、自動縮小されてしまいます。
3枚のデジカメ画像はいずれも500KBを超えていた為、 520×365ピクセルに縮小されたものです。
この大きさはこのブログで表示出来る最大値なのです。納得ですね。
言い換えれば、データサイズが500KB以下であれば、大きな画像、例えば、パソコン画面 1366×768ピクセルもアップロードすることが出来るということです。
私は写真をアップロードする際、横幅を800ピクセルに加工しています。
横幅1024ピクセルの写真も絵柄によって500KB以下に収まる場合がありますが、100%ではありません。
大きな画像をアップロードしたい時はデータサイズを確認してからアップしています。
本文画像をクリックすると別画面が出てきますが、大きな画像をアップロードしておけば、皆さんに大きな画像を見て頂けます。

画像タグは削除したり、追加したり、書き換えて内容を変えることができます。
以下は、画像の大きさ等を書き換えるとどうなるかという実験です。

【実験10】
① 改行タグを削除
② 画像サイズを3枚とも150×105ピクセルに書き換える。
  (下のご注意とご参考をお読みください)
③ 配置を中央配置のmidに書き換える。
d0181824_1503358.jpg

ブログの表示は下のようになります。
中央配置では自動改行され、ブログの中央に画像が配置されます。
d0181824_161535.jpg
d0181824_1624963.jpg
d0181824_1633465.jpg

【実験11】
実験10の入力記事の中央配置のmidを左配置のleftに書き換える。
d0181824_15222257.jpg

ブログの表示は下のようになります。
左から一列に表示されます。
d0181824_161535.jpgd0181824_1624963.jpgd0181824_1633465.jpg

【実験12】
実験11の入力記事の 左配置のleftを右配置のrightに書き換える。
d0181824_15324182.jpg

ブログの表示は下のようになります。
右から一列に表示されています。写真の並びが反対になります。
d0181824_161535.jpgd0181824_1624963.jpgd0181824_1633465.jpg

【実験13】
右配置、左配置、中央配置を混在させてみましょう。
記事入力とブログ本文表示を見比べてください。組み合わせによりいろいろな配置にすることが出来ます。
余り意味は有りませんが遊んでみてください。
例1
d0181824_1683281.jpg
d0181824_161535.jpgd0181824_1624963.jpg
d0181824_1633465.jpg

例2
d0181824_15535038.jpg
d0181824_161535.jpgd0181824_1624963.jpgd0181824_1633465.jpg

例3
d0181824_1613834.jpg
d0181824_161535.jpgd0181824_1624963.jpg
d0181824_1633465.jpg



【ご注意】
次の事に注意してください。
① 小さな画像をアップロードした場合、画像の大きさを大きく書き換えても、アップロードした画像より大きくなりません。
② 一行に並べる画像の枚数は制限ありませんが、余白を含めた横幅の合計がブログ本文の横幅を超えないようにしてください。

【ご参考】
このブログの横幅は530ピクセルです。余白は画像1枚につて10ピクセルです。
(スキンで設定されています)
同じ横幅にした場合の枚数と横幅は次のようになります。
1枚・・・・530-10 =520
2枚・・・・{530-(10×2)}÷2=255
3枚・・・・{530-(10×3)}÷3=166.66
     きっちりと左右を合わせるには1ピクセル内で調整します。 
     1枚目:166ピクセル、2枚目167ピクセル、3枚目167ピクセル
皆さんのブログはどうでしょうか。
不明な場合はいろいろと試してみてください。

今日はここまで、
次回は画像に文章を加えてみましょう。
次回は12月3日の予定です。

by PC-otasukeman | 2012-11-30 15:45 | Comments(6)

文字と画像の配置について(4)

ページへページへページへページへページへページへ

 昨日の実験6、実験7の本文表示ですが、IE9以外のブラウザを使っている方は3枚の画像が自動改行されて、正しく見えていたのではないでしょうか。
XP(ブラウザはIE8)で見たところ下のように表示されていました。改行処理はブラウザによって違うようです。
実験6の本文表示                   実験7の本文表示
d0181824_10463187.jpgd0181824_1047792.jpg

【実験8】
実験6の入力に改行タグを画像タグの後ろに入れてみます。
「Enter」キーは押していません。
d0181824_1151281.jpg

下のように本文の表示はIE9のブラウザでも見えるようになります。
d0181824_161535.jpg
d0181824_1624963.jpg
d0181824_1633465.jpg

【実験9】
実験8と同じ入力をし、
それぞれの改行タグの後ろで「Enter」キーを押してみました。
入力記事欄は一見同じように見えますが、行間隔が微妙に広くなっています。
d0181824_1120372.jpg

本文の表示は下のようになります。
実験8との違いが分かりますか?写真間の余白の広さです。
「Enter」キーによる改行スペースが入り写真間の余白が広くなっています。
d0181824_161535.jpg

d0181824_1624963.jpg

d0181824_1633465.jpg


【実験6~実験9で分かったこと】
① 左配置、右配置の画像タグを使った場合は、必ず改行タグを最後につける。
② 行間のスペースは「Enter」キーの押下で変わる。
  スペースの広さでブログ本文の様子が変わりますので注意しましょう。
③ アップロードした画像のサイズが画像タブに反映される。
④ 左配置、右配置の画像の大きさは既定のサイズに縮小される。

今日はここまで。
次回は小さな画像で実験してみましょう。

by PC-otasukeman | 2012-11-29 10:39 | Comments(2)

文字と画像の配置について(3)

ページへページへページへページへページへページへ

今日はエキサイトブログの画像の配置について調べてみましょう。
使った画像は岩屋堂散歩道・浄源寺の撮れたて写真です。
イチョウの黄色、もみじの赤・・・グラデーションを楽しみながらご覧ください。
【実験5】
愛用の一眼レフで撮影した3枚の写真を中央配置で画像アップロードしました。
記事入力欄には次のように画像タブが挿入されます。
3行になっていますが、「Enter」キーは押していません。
d0181824_15301698.jpg
この3枚の画像はブログ本文では次のように表示されます。下の画像の大きさはこのブログの最大(横幅520ピクセル)です。
2769ピクセル×1941ピクセルの画像は520ピクセル×365ピクセルに縮小されてアップロードされています。中央配置の場合、改行タブを入れなくとも自動改行されています。
d0181824_1527883.jpg
d0181824_1544386.jpg
d0181824_1552122.jpg


【実験6】
同じ写真を今度は左配置で画像アップロードしました。
記事入力欄には次のように画像タブが挿入されます。
3行になっていますが、「Enter」キーは押していません。
d0181824_1674567.jpg

IE9で見ている方は本文で次のように表示されます。
アップロードされた画像の大きさは最大(横幅520ピクセル)ですが、本文の画像は420×295ピクセルと小さくなっています。
左配置の場合は自動改行されていません。横幅をオーバーした2枚目の途中から表示されません。
IE8で見ている方は自動改行され、3枚とも左寄せで見えると思います。
d0181824_161535.jpgd0181824_1624963.jpgd0181824_1633465.jpg

【実験7】
同じ写真を今度は右配置で画像アップロードしました。
記事入力欄には次のように画像タブが挿入されます。
3行になっていますが、「Enter」キーは押していません。
d0181824_19114132.jpg

IE9で見ている方は本文は次のように表示されます。
アップロードされた画像の大きさは最大(横幅520ピクセル)ですが、本文の画像は420×295ピクセルと小さくなっています。
1枚目の写真が右寄せになり、3枚目が左寄せになっています。2枚目は3枚目の下に隠れているのでしょう。とにかく見えません。
IE8で見ている方は自動改行され、3枚とも右寄せで見えると思います。
d0181824_18595031.jpgd0181824_1904473.jpgd0181824_1964518.jpg


【結論】
① ブラウザによっては画像の自動改行処理が異なる。
  従って、画像については自動改行できないものとして入力する必要がある。


今日はここまで、
次回は小さな画像で実験してみたいと思います。

by PC-otasukeman | 2012-11-28 19:27 | Comments(4)

文字と画像の配置について(2)

ページへページへページへページへページへページへ

エキサイトブログの投稿記事入力でいろいろと実験してみましょう。
【文字だけの文章】
文章を入力するとき、1行の文字数が一杯になると、自動的に次の行に移って入力されます。
自動改行の様子を投稿入力欄とプレビュー画面で見てみましょう。

【実験1】
ひらがな(全角)入力モードで数字を100桁入力してみます。途中で「Enter」キーは押していません。
記事入力欄です。1行の文字数は67桁、68文字目以降は次の行に移っています。
d0181824_121771.jpg

プレビューで見ると次のようになります。
ブログ本文では1行の文字数は58文字になって、59文字目以降は次の行に移っています。
d0181824_123123.jpg


【実験2】
55文字目から10文字を赤字で文字サイズを大きくしてみます。
記事入力で文字サイズと文字色のタグが追加されています。これらのタグは全て半角英数です。
1行目が一杯になる前に改行されています。
d0181824_12372035.jpg

プレビューを見ると、文字サイズが大きくなった分1行目の文字数は減っています。普通の自動改行がされています。
d0181824_13222142.jpg


【実験3】
55文字目から10文字を半角英数にしてみます。
d0181824_1334372.jpg

プレビューで見ると。
54文字で改行され、半角英数の10文字は次の行に移っています。
d0181824_13371332.jpg


【実験4】
入力を半角英数100桁に変えてみました。記事入力は普通に自動改行されています。
d0181824_1347419.jpg

プレビューで見ると、76文字目の「6」の数字の右半分以降の数字が表示されていません。
d0181824_13494742.jpg


【結論】
上の実験で次のことが分かりました。
【投稿記事入力】
①日本語入力では1文字単位で自動改行の位置が決まります。
②半角英数字は桁数単位で自動改行の位置が決まります。
③半角英数字の桁数が1行の桁数を超える時は、超えた部分は次の行に移されます。

【プレビュー画面】
①日本語入力では1文字単位で自動改行の位置が決まります。
②半角英数字は桁数単位で自動改行の位置が決まります。
③半角英数字の桁数が1行の桁数を超えるときは、超えた部分は表示されません。

以上は私のブログに関してのことです。
自動改行の条件はスキン設計によって変わってきます。
皆さんのブログはどうなっているでしょうか。

改行の特徴を理解しておくことはブログの構成を考える上で大切です。
また、プレビュー画面の③を把握しておけば、記事が消えて驚くことも無くなるでしょう。

今日はここまで、
次回は画像を含んだときどうなるか実験で明らかにしていきましょう。

by PC-otasukeman | 2012-11-27 15:09 | Comments(2)

文字と画像の配置について(1)

ページへページへページへページへページへページへ

今回はエキサイトブログの投稿記事の入力のお話です。
下の画像は今日の記事の一部です。
緑のアンダーライン部が画像タグ、赤枠内が改行タグ。改行タグの使い方が今日のテーマです。
d0181824_16162996.jpg


【ご相談内容】
エキサイトブログの初心者です。
私のブログは写真は中央に、文章は左寄せの構成になっています。
これを写真も文章も左寄せの構成にしたいのです。
写真を左寄せにupすると、文章が写真の右隣に出てきてしまいます。。。
どのようにしたら良いのでしょうか

【回答】
次のように、写真を左配置にして、文章を続けて入力すると、
d0181824_11325287.jpg

下のようになります。右のスペースに文章が入ります。
【ポスタライズ】
d0181824_14314487.jpg
「ポスタライズ」とは普通の写真を個性的なイラスト調に変身させることです。

文章を左端から配置したい場合は、改行タグを画像タグの後ろに挿入しなければなりません。
d0181824_11392747.jpg

そうすると、下のようになります。
【ポスタライズ】
d0181824_14314487.jpg

「ポスタライズ」とは普通の写真を個性的なイラスト調に変身させることです。

【説明】
改行タグの使い方については、画像アップロードの下に記載されていますが、初心者の方には分かりにくいようです。私も最初は分かりませんでした。
d0181824_15335724.jpg

<br clear=all>タグをコピーして貼り付ければその後の入力は新しい行からになるということらしいですが、分かりにくいですね。
とにかく、行を改める時はこのタグを貼り付ければよいと覚えてください。

今日はここまで、
次回も記事入力についてお話しします。

by PC-otasukeman | 2012-11-26 16:19 | Comments(6)

画像加工ソフトで遊ぶ

ページへページへページへページへページへページへ

ライトアップ岩屋堂の画像を画像加工ソフト「JTrim」で遊んでみました。
下の画像は画像ファイルを右クリックして[プログラムから開く]ー[JTrim]で開いたものです。
赤枠で囲ったツールボタンをクリックすると・・・・・
(注:JTrimは良く使われている無料ダウンロードソフトです)
d0181824_14152220.jpg

【コントラスト】
d0181824_14272450.jpg

【セピア色変換】
d0181824_14273599.jpg

【RGB交換】
d0181824_1430855.jpg

【RGB交換】
d0181824_1430423.jpg

【ポスタライズ】
d0181824_14314487.jpg

【2階調化】
d0181824_14291081.jpg


デジタルの世界は楽しいですね。

下の画像は3年前友人から頂いたプロの写真です。(スキャナ写真)
鮮やかな赤にビックリしましたが、加工していたのでしょうね。
皆さんも画像加工ソフトで遊んでみては如何でしょうか。
d0181824_15131188.jpg

22日から25日迄孫娘の七五三で留守にします。
次回のテーマ投稿は11月26日の予定です。

by PC-otasukeman | 2012-11-22 14:00 | Comments(2)

岩屋堂ベストビューポイント

ページへページへページへページへページへページへ

鳥原川を堰き止めた天然プール。
夏は 水遊び で賑わい、秋はもみじで賑わいます。
d0181824_10312418.jpg

風もなく雨も降らない穏やかな日の夜。
水面が鏡面となり、ライトアップされたもみじが映し出されます。
ベストビューポイントから見ると実に幻想的です。
d0181824_1043630.jpg
d0181824_1049239.jpg
d0181824_10493295.jpg
d0181824_1044515.jpg
d0181824_10452172.jpg
d0181824_10455223.jpg
d0181824_10461921.jpg

1枚目はコンパクトデジカメで妻が撮影したもの。もちろん全自動です。
2枚目以降は一眼レフカメラ
マニュアルモードで撮影
絞りやシャッタースピードをやみくもに 変えて撮れた写真です。
はたして皆さまに素晴らしさが届きますでしょうか。

2012 ライトアップ岩屋堂
2012 岩屋堂のもみじ
と合わせてご覧ください。
岩屋堂のライトアップは11月25日夜9時迄

by PC-otasukeman | 2012-11-21 12:00 | Comments(2)

2012 岩屋堂のもみじ

ページへページへページへページへページへページへ

幻想的なライトアップも良いですが、やはりもみじには太陽が似合います。
d0181824_14285954.jpg
d0181824_14565981.jpg
d0181824_1457246.jpg
d0181824_14591844.jpg
d0181824_14591653.jpg
d0181824_15134673.jpg
d0181824_151426100.jpg
d0181824_15151799.jpg


by PC-otasukeman | 2012-11-20 12:00 | Comments(2)

パソコンのセキュリティ対策

ページへページへページへページへページへページへ

ウイルス感染の被害ニュースが後を絶ちません。
パソコンライフを楽しむ私達にとっては脅威です。
そこで、先月発売されましたWindows 8 (エイト)のセキュリティ対策を調べてみました。

あるパソコン指南書には、
「標準搭載のセキュリティ機能がスゴイ」と題して
Windows 8はセキュリティ機能も進化している。標準搭載のアンチ・ウイルスソフト「Windows Defender」は、あらゆる種類のマルウエアからユーザーを保護し、リアルタイムでウイルスの検出を行ってくれる。

と記述されていました。マルウエアとはウイルスやスパイウエア等の不正プログラムのことです。

いろいろ調べていくと、
Windows Defender = Microsoft Security Essentials(MSE)
d0181824_1374771.jpgd0181824_1374890.jpg
  (Windows 8 Windows Defender)             (Windows 7 MSE)

であることが分かりました。
MSEはマイクロソフト社から無料で提供されているウイルス対策ソフト。
XP、Vista、7(セブン)をお持ちの方にお勧めしていたソフトです。

8(エイト)では「Windows Defender」の名前で標準搭載され、初期設定されているのです。
今まではウイルス対策ソフトを確認してからでないと安心してインターネットに繋げませんでした。
ソフトによっては手続きが厄介で初心者泣かせでした。
購入したときからパソコンは守られているのですから有りがたいことです。

MSEの正式採用によりお助けマンとしては永年の願いが叶ったという思いです。

次に市販のセキュリティソフトについて説明します。

指南書には、
「市販のソフトと組み合わせて対策しよう」
「市販のソフトは必要に応じて使いましょう」

等と記載されていました。
Windows Defenderの標準搭載で市販ソフトも死活問題です。
この表現は少しあいまいですが、仕方がないでしょう。

セキュリティソフトには2つの重要な機能があります。
「リアルタイムでウイルスを検出・駆除する」
「スキャンでウイルスを検出・駆除する」

この機能は怪しいソフトを探し出して、削除するものです。
複数のウイルス対策ソフトが有効になっていると、お互いがウイルスと誤認して削除し合う危険性がありますので、1台のパソコンに複数のセキュリティソフトを使うときは、注意が必要です。

【市販のセキュリティソフトの技術】
各メーカは独自技術でセキュリティソフトを提供しています。
下に一例を示します。
d0181824_11123399.jpg

MSEはウイルス・スパイウエア対策がメインです。
パソコンの使い方によってはMSEではカバーできないところがあります。
その場合は市販のセキュリティソフトを使うと良いでしょう。

【結論】
ブログを楽しみ、
メールをやり取りし、
ワードやエクセルで文書を作成し、
写真加工を楽しむ程度のパソコンライフであれば、MSEだけで十分だと思います。
XP、Vista、7(セブン)をお使いの方はもう一度MSEの導入をご検討ください。
ウイルス対策ソフトMSEのインストール
Windows 8(エイト)を購入の方は、最初から「Windows Defender」を使ってください。
以上です。

by PC-otasukeman | 2012-11-19 11:48 | Comments(0)

2012ライトアップ岩屋堂

ページへページへページへページへページへページへ

岩屋堂散歩道
今年も16日からライトアップがスタートしました。
早朝と夜の岩屋堂です。
画像をクリックしてご覧ください。
d0181824_1359473.jpgd0181824_15105743.jpg
d0181824_1474014.jpgd0181824_15162292.jpg
d0181824_13534460.jpgd0181824_1523949.jpg
d0181824_13464255.jpgd0181824_15243759.jpg
d0181824_1334433.jpgd0181824_15271617.jpg
d0181824_15464980.jpgd0181824_15473915.jpg
d0181824_1601353.jpgd0181824_1624921.jpgd0181824_16144538.jpgd0181824_1613066.jpgd0181824_1633648.jpg

雨や風もない静かな日  
鳥原川の川面が鏡面になり、幻想的な世界になります。
25日迄です。
今年は紅葉が早いようです。お早めにお越しください。
次回のテーマ投稿は11月19日の予定です。

by PC-otasukeman | 2012-11-17 16:31 | Comments(4)