2009年12月17日
ブログ用画像のサイズ一括変換
ブログにデジカメ画像を大量にUPしている方は
それぞれ自分のやり方でやっていると思うが
ちょっとめんどくさがりなタカさんは
画像を一括変換してくれるような
フリーソフトをXPな時から使用している
今回はそのなフリーソフトの中でも
最近使い始めたものをちょっと紹介してみたいと思う
アプリケーション名は「PhotoShifter」といい
対応しているOSは
「Windows2000,XP,VIsta,WIndows7」となっている
一部機能を省略するが
どんなことができるかというと
・画像の形式やサイズの一括変換
・画像のトリミング
・アイコン作成
・画像の回転
・画像の分割と結合
・透過GIFと透過PNGの作成
・アニメーションGIF
・AVIファイル形式での保存
などなどができるようになっている
ファイルの追加もアプリケーションを起動し
ドラッグ&ドロップで簡単に登録できるようになっていて
いまどきの操作感で使用できるアプリケーションだ
ダウンロードURL
http://www.h4.dion.ne.jp/~fht/software/photoshifter.html
それぞれ自分のやり方でやっていると思うが
ちょっとめんどくさがりなタカさんは
画像を一括変換してくれるような
フリーソフトをXPな時から使用している
今回はそのなフリーソフトの中でも
最近使い始めたものをちょっと紹介してみたいと思う
アプリケーション名は「PhotoShifter」といい
対応しているOSは
「Windows2000,XP,VIsta,WIndows7」となっている
一部機能を省略するが
どんなことができるかというと
・画像の形式やサイズの一括変換
・画像のトリミング
・アイコン作成
・画像の回転
・画像の分割と結合
・透過GIFと透過PNGの作成
・アニメーションGIF
・AVIファイル形式での保存
などなどができるようになっている
ファイルの追加もアプリケーションを起動し
ドラッグ&ドロップで簡単に登録できるようになっていて
いまどきの操作感で使用できるアプリケーションだ
ダウンロードURL
http://www.h4.dion.ne.jp/~fht/software/photoshifter.html
2009年12月05日
ブログカスタマイズ(タイトル文字)
前回の続きで
今度はブログページの一番上にあるタイトルを
画像に置き換えてしまう方法を紹介するが
このカスタマイズは
ブログのテンプレートによって見栄えが悪くなる場合もある
どういう場合かというと
画像の上にタイトル文字が表示されるように
スタイルシートで設定されているテンプレートの場合だ
それとこの方法でやると
ブログの説明文も表示されなくなるので
その場合は別途自分で文字をいれなければなくなる
まあ紹介文が表示されなくともよいのであれば別にかまわないが
まず画像に置き換える方法を説明する前に
準備段階として「コメントアウト記述」について説明する
「トップページ」「個別記事」「アーカイブ」の部分に関しては
HTMLという言語で書かれているが
無効にしたい部分をコメントをいれる為に用意されている
「コメントアウト記述」することで
あとで元にもどしたい場合の為に残しておける
では「コメントアウト記述」の方法だが
実に簡単で
始まり: <!--
終わり: -->
で挟むだけになる
たとえば
<img src="http://www.hoge.ne.jp/title.jpg">
という部分をコメントアウトして残したい場合なら
<!--
<img src="http://www.hoge.ne.jp/title.jpg">
-->
とすればOKだ
それではカスタマイズ箇所だが
テンプレートは前回と同じもので説明するので
話しがわからない場合は前回の記事を参照よろしく
まずは「トップページ」の以下の部分をコメントアウトしよう
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
次に緑色の部分のみコピーしてコメントアウトの下へ貼り付け
文字部分を画像に置き換える
前回同様にアップロードしておいた画像を使用するのであれば
< img src="自分のブログのアドレス/画像ファイル">
というHTMLタグを以下のように間にいれることになる
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><;img src="画像へのURL"></a></h1>
といった感じで
続けると以下のようになっているはずだ
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><img src="画像へのURL"></a></h1>
以上、タイトル文字を画像に置き換える方法を紹介したが
このブログの文字も画像に置き換えてあるので
確認してみてほしい
それといろいろカスタマイズしたいのであれば
テンプレートにカスタマイズしたいものを登録し
そちらをいじることをオススメする
今度はブログページの一番上にあるタイトルを
画像に置き換えてしまう方法を紹介するが
このカスタマイズは
ブログのテンプレートによって見栄えが悪くなる場合もある
どういう場合かというと
画像の上にタイトル文字が表示されるように
スタイルシートで設定されているテンプレートの場合だ
それとこの方法でやると
ブログの説明文も表示されなくなるので
その場合は別途自分で文字をいれなければなくなる
まあ紹介文が表示されなくともよいのであれば別にかまわないが
まず画像に置き換える方法を説明する前に
準備段階として「コメントアウト記述」について説明する
「トップページ」「個別記事」「アーカイブ」の部分に関しては
HTMLという言語で書かれているが
無効にしたい部分をコメントをいれる為に用意されている
「コメントアウト記述」することで
あとで元にもどしたい場合の為に残しておける
では「コメントアウト記述」の方法だが
実に簡単で
始まり: <!--
終わり: -->
で挟むだけになる
たとえば
<img src="http://www.hoge.ne.jp/title.jpg">
という部分をコメントアウトして残したい場合なら
<!--
<img src="http://www.hoge.ne.jp/title.jpg">
-->
とすればOKだ
それではカスタマイズ箇所だが
テンプレートは前回と同じもので説明するので
話しがわからない場合は前回の記事を参照よろしく
まずは「トップページ」の以下の部分をコメントアウトしよう
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
次に緑色の部分のみコピーしてコメントアウトの下へ貼り付け
文字部分を画像に置き換える
前回同様にアップロードしておいた画像を使用するのであれば
< img src="自分のブログのアドレス/画像ファイル">
というHTMLタグを以下のように間にいれることになる
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><;img src="画像へのURL"></a></h1>
といった感じで
続けると以下のようになっているはずだ
<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><img src="画像へのURL"></a></h1>
以上、タイトル文字を画像に置き換える方法を紹介したが
このブログの文字も画像に置き換えてあるので
確認してみてほしい
それといろいろカスタマイズしたいのであれば
テンプレートにカスタマイズしたいものを登録し
そちらをいじることをオススメする
2009年12月03日
ブログカスタマイズ(上部画像)
すでに部分的なカスタマイズが終わっているが
今までに施したカスタマイズを記録に残しておこうと思う
まず準備段階として
カスタマイズの元となるテンプレートを選択する
タカさんの場合はPC系のネタを扱うことを決めていたので
赤や緑がはっきりと見えるように
黒を基調としたデザインのテンプレートを選択
「ブログ設定」の「テンプレート」から
カテゴリー:きれいなテンプレート
テンプレート:光のページェント
を登録してカスタマイズを施した
まず最初に目を付けたのがブログのタイトル下にある
バック画像を自分で作成したものに置き換えること
ということで
まずは画像を保存し大きさを見てみる
大きさは「730Pixel × 300Pixel」
これはそれぞれのテンプレートによって
大きさが違うようなので
必ず大きさを確認しておこう
そして大きさをあわせて画像を作成しアップロードしておく
次にテンプレートの「個別記事」と「スタイルシート」に
記述してある内容を見てみると
画像の場所は「スタイルシート」に記述してあり
内容は
background: url(_img/hikari/hikari.jpg)
これを自分で作成しアップロードした画像に置き換える
background: url(http://img01.da-te.jp/usr/secretbase/title.jpg)
たったこれだけの作業になる
スタイルシートの示した部分を変更すれば
「トップページ」「個別記事」「アーカイブ」の
すべてに適用される
何種類かテンプレートの内容を見てみたけど
画像を使用しているテンプレートなら
同じスタイルシート内容の箇所を変更するだけなんで
カスタマイズはかなり容易にできるみたいだ
現在このブログの「過去記事」部分のみ
FLASHではなく画像にしてあるので確認してみてほしい
今までに施したカスタマイズを記録に残しておこうと思う
まず準備段階として
カスタマイズの元となるテンプレートを選択する
タカさんの場合はPC系のネタを扱うことを決めていたので
赤や緑がはっきりと見えるように
黒を基調としたデザインのテンプレートを選択
「ブログ設定」の「テンプレート」から
カテゴリー:きれいなテンプレート
テンプレート:光のページェント
を登録してカスタマイズを施した
まず最初に目を付けたのがブログのタイトル下にある
バック画像を自分で作成したものに置き換えること
ということで
まずは画像を保存し大きさを見てみる
大きさは「730Pixel × 300Pixel」
これはそれぞれのテンプレートによって
大きさが違うようなので
必ず大きさを確認しておこう
そして大きさをあわせて画像を作成しアップロードしておく
次にテンプレートの「個別記事」と「スタイルシート」に
記述してある内容を見てみると
画像の場所は「スタイルシート」に記述してあり
内容は
background: url(_img/hikari/hikari.jpg)
これを自分で作成しアップロードした画像に置き換える
background: url(http://img01.da-te.jp/usr/secretbase/title.jpg)
たったこれだけの作業になる
スタイルシートの示した部分を変更すれば
「トップページ」「個別記事」「アーカイブ」の
すべてに適用される
何種類かテンプレートの内容を見てみたけど
画像を使用しているテンプレートなら
同じスタイルシート内容の箇所を変更するだけなんで
カスタマイズはかなり容易にできるみたいだ
現在このブログの「過去記事」部分のみ
FLASHではなく画像にしてあるので確認してみてほしい