Beach Resort Photoclip » Exblog

ExblogにTwitterのつぶやきを載せられる? livedoorは? fc2は?

象支店長 — Tue, 16 Mar 2010 08:11:01 +0000

2010.7.30 追記
エキサイトブログで Twitter のブログパーツが使えるようになったのでそちらを使った方がいいと思います

=== 以下、本投稿 ===

つい先日 Twitter (ツイッター) をはじめたので (遅すぎ? ) いろいろ検索していまして、Javascript も Flash も使えない Exblog (エキサイトブログ) にTwitter でのつぶやきを載せる方法はあるのか、ふと気になったので調べてみましたらありました。

TwitGIF : Generate a GIF Animation Image Badge From Your Tweets.

TwitGIFは、Twitterのユーザー名を入力するだけであなたのつぶやきを簡単にアニメーションGIF形式のbadge（ブログパーツ）に変換してくれるジェネレーター

とのこと。

あっという間にこのようなアニメーション GIF を作ってくれます (クリックすると Twitter にジャンプ)

アニメーション GIF なので普通の画像と同じように扱えます。したがって Exblog でも使えるわけですね。目からウロコな方法、スバラシイ。

サイズも以下の 4 つが用意されているので載せる場所も選べます。

Banner(W:468, H:60)
OneLiner(W:468, H:30)
SideBox(W:160, H:300)
QVGA(W:320, H:240)

試しに私も自分の Exblog に貼ってみました。

Live Demo : Exblog Customize

fc2ブログやlivedoorブログの場合

fc2 ブログや livedoor ブログをお使いの場合は、javascript が使えますので、Twitter にログインして [ 設定 ] → [ Web ] → (あなたのサイトにもTwitterを表示させよう) → [ 自分のサイト ] → [ Faves Widget ] で Widget の設定やサイズ、デザインなどを自分のブログに合わせコードを取得し、好きな場所に貼りつければ簡単に表示させることができます。

実際に Widget を貼ってみました。

livedoor ブログ : ブログ研究所 – livedoor Blog（ブログ）
fc2 ブログ : ブログ研究所

テンプレート内からサイドバーの場所や表示位置を正確に探し出すには多少知識が必要ですが、テンプレートのバックアップを取っておけば元に戻せますので Twitter のつぶやきをブログにも載せたいという方はチャレンジしてみてはいかがでしょうか。

関連性が高い、、、かもしれない記事

背景画像が簡単に作れるジェネレーター

象支店長 — Tue, 11 Nov 2008 02:11:08 +0000

「エキサイトブログで果たしてエキサイトするか#32008/2/7投稿
エキサイトブログで果たしてエキサイトするか#3.」の中で背景画像を無料ダウンロードサイトやジェネレーターをいくつかご紹介しましたが、先日ネット徘徊していたとき楽しく背景画像が作れそうなジェネレーターを見つけましたのでアップしておきます。
柄は68種類、表面のテクスチュアは5種類、組み合わせは自由でどちらも縮小拡大可です。作業状態はすぐにプレビューされるので操作で悩むことはないと思います。

さっそく作って背景に使ってみました(笑)

背景画像が作れるジェネレーター

.
.

WEBサイトやブログの雰囲気を変えたくなったときに使ってみてはいかがでしょうか。

さてさて、今日は 1 （イチ）が4つ並んだ日付なんですね。
いつもと変わらないんでしょうけど気分は悪くない 11時11分にアップしてみようか。

ちなみに今日は「配線器具の日」「ポッキー&プリッツの日」「サッカーの日」…etc なんですと(笑)
どれもみんななんとなくわかるのがいいですね。詳しくは下記のリンク先でどうぞ。

11月11日今日は何の日～毎日が記念日～：日本記念日学会日本記念日学会:そんな学会があったの(驚)
11月11日今日は何の日.

。。。では、楽しい一日でありますように

関連性が高い、、、かもしれない記事

エキサイトブログ (Exblog) のプチカスタマイズ #8+

象支店長 — Sat, 08 Nov 2008 04:09:25 +0000

先に投稿した [リンクにマウスオーバーすると Tooltip が表示されるようにするカスタマイズ]

エキサイトブログ (Exblog) のプチカスタマイズ #8今回のTooltipはこのように表示されます。.

では IE だと思ったようにきれいに表示されませんでした
。。。もしかしたら私のやり方がまちがっていたのかもしれませんが(汗)

そこでさらにいろいろ調べていましたらクールではないですが（個人的には実用的な感じで好きですが）他にも CSS（スタイルシート）と HTML だけで Tooltip を表示させる方法がありました。
エキサイトブログの場合は javascript が使えないので CSS と HTML の操作のみで Tooltip を表示させる手法はまさしくエキサイトブログ向き、さっそくやってみました。

参照サイト

.
.

CSSとHTMLの記述のみでTooltipを表示する

[ スキン変更 ] → [ CSS（スタイルシート）編集 ] でCSS 内の最後に以下の記述を加える。
最後じゃなくてもいいですがわかりやすいように最後にしておきます。
```
a:hover {
	background: none;  /* BG color is a must for IE6 */
	text-decoration:none;
}
a.tooltip span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:130px;  /* Tooltipの幅 */
}
a.tooltip:hover span {
	display:inline;
	position:absolute;
	background:#ffffff;
	border:1px solid #cccccc;
	color:#6c6c6c;  /* Tooltipの文字色 */
	text-decoration:none;
}
```
一番上の a:hover （リンクにマウスカーソルが乗っかった時にどう表示するかの指定）はおそらくどんなスキンを使用していてもすでに記述されていると思うので、もしいま使用しているCSS の中に a:hover がある場合はそこに ~~background:#ffffff;~~ background: none; と追加してください。
参照サイトでは background: #ffffff; となっていましたが、他のリンク背景もすべて白くなってしまったのでここでは background: none; としました。
ちなみに私のエキサイトブログで使用しているスキンには a:hover はありませんでしたそういう場合は忘れず記述するようにしましょう(笑)
補足を読むと背景色指定の~~background:#ffffff;~~ background: none; は「IE6 に必須」と書いてありますね。
なお、a:hover 内で text-decoration:underline; を指定（マウスカーソルを乗せるとアンダーラインが表示される指定）をしていると IE6 と IE7 はTooltip の文字列にもアンダーラインが入ってしまうみたいです。
a.tooltip:hover span { のところに text-decoration:none; （アンダーラインなし）を加えたら解決しました。
リンクを貼るときには以下のように記述します。普通とちょっと違います。
たとえば私のサイトのトップページへ以下のような条件でリンクを貼ろうとする場合

リンク先 http://www.photoclip.net/hotels/
リンクの文字列 Beach Resort Photoclip
Tooltip の表示東南アジアのリゾートホテル写真集

次のように記述します。
```
class="tooltip">Beach Resort Photoclip東南アジアのリゾートホテル写真集.
```
青字が追加された記述です。
上のように記述した結果が右のようなリンクになります。Beach Resort Photoclip東南アジアのリゾートホテル写真集.

すでに気づかれていると思いますが、どうやら最後に付いている . （ドット）がこのTooltipのキモのようでリンクをで閉じたあと忘れずに . （ドット）を記述しないとTooltipに表示させたい文字列まで普通のリンクになってしまいます。
そこでこの目障りな . （ドット）が表示されないようにしてしまいましょう。

以下、ブログの背景が白の場合です。背景が黒の場合は #000000 です。
要は .（ドット）をブログの背景色と同じ色にして見えなくしてしまおうというわけですね。

CSS 内に以下の記述を加えます。
```
span.white {
	color: #ffffff;
}
```
そしてリンクを貼る場合は以下のように記述します。
```
Beach Resort Photoclip東南アジアのリゾートホテル写真集.
```
上のように記述した結果（文字色を背景色と同じにしてしまった結果）
最後の . （ドット）が見えなくなりました。Beach Resort Photoclip東南アジアのリゾートホテル写真集.

投稿でリンクを貼るたびになどと打つのは大変なので他のよく使う記述も含め単語登録しておくといいと思います。
んそんなのとっくにやってるシツレーしました

せっかく設置したのでこのブログでも使うことにしました(笑)
何か疑問がありましたらコメントしてください。どうもおつかれさまでした

関連性が高い、、、かもしれない記事

エキサイトブログ (Exblog) のプチカスタマイズ #8

象支店長 — Thu, 23 Oct 2008 03:08:10 +0000

今日はCSS に数行記述を加え、リンクにマウスオーバーすると
Tooltip （簡単な説明）が表示されるようにしてみます。

【追記 12:35:36】
IE6 だとマウスをどかしても Tooltip が消えない & 説明文にアンダーラインが入りますねぇ。
IE7だと Tooltip は消えるけど説明文にアンダーラインが入りますねぇ。まっいいか

【追記 12:47:46】
アンダーラインはCSSに text-decoration: none; を追加したら消えました。

Demo

参照サイト： lixlpixel CSS tooltips

CSSを編集してTooltipが表示されるようにする

[ スキン変更 ] → [ CSS（スタイルシート）編集 ] でCSS 内の最後に以下の記述を加える。
最後じゃなくてもいいですがわかりやすいように最後にしておきます。

/* Tooltip */ （アタマにこうやって記述しておくと削除するとき楽です）
a.tip {
	position: relative;
}
a.tip span {
	display: none;
	position: absolute;
	top: 20px; /* 表示される位置 */
	left: -10px; /* 表示される位置 */
	width: 125px; /* 幅 */
	padding: 5px; /* Tooltip内の余白 */
	z-index: 100;
	background: #000; /* 背景色 */
	color: #fff; /* 文字色 */
	-moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */
	text-decoration: none;
}
a:hover.tip {
	font-size: 99%; /* this is just for IE */
}
a:hover.tip span {
	display: block;
}

リンクを貼るときに Tooltip を表示させたい場合には以下のように記述します。
```
class="tip">投稿上の文字列 ここに説明文
```
青文字がTooltipを表示させる記述です。
ちなみに通常のリンクはこういう記述ですね。違いがわかりますでしょうか？
```
投稿上の文字列
```

あらかじめ青文字の部分を単語登録しておけば簡単に挿入できます。こんな感じで。
```
class="tip"
```
```
ここに説明文
```

なおリンクが貼ってある画像でも使えます。
他のブログ（Webサイト）でも使えますが javascript が使えるのであればそれを利用した方がいいような気がします。
説明文中は改行も使えますので改行させたい場合は
と記述してください。

投稿の中に記述するほどではないけれど
ちょっと説明しておきたいというときに使われてはいかがでしょうか。

関連性が高い、、、かもしれない記事

エキサイトブログ (Exblog) のプチカスタマイズ #7

象支店長 — Fri, 10 Oct 2008 09:27:35 +0000

プチカスタマイズよりもちょっと大がかりでしたが
スキンを Windows版 Photoshop CS3 のようにしてみました。

http://tacogle.exblog.jp/

横1280 のモニターでブラウザを全画面にして見るとそこそこそれっぽいと思います。
全画面にするには F11 キーを押します。もう一度押せば元にもどります。

IE6 は下のタスクバーが表示されないので×、IE7 は通常表示されるステータスバーを一時的に非表示に。Firefox がベストか。

あなたの PC も Vista マシン

キャプチャー画像から加工していったのですが作業中どれが本当の Photoshop のウィンドウかわからなくなることがあって思わず苦笑。さっきはブラウザ上のごみ箱アイコンをクリックしてしまいました。

あ～、ややこしや～ぁ、ややこしや～ぁ～。

では皆さんすてきな週末 & 連休を

10月9日：6個中0個第415回抽選結果（みずほ銀行）
0個、、、予定通りだなかばヤケ

関連性が高い、、、かもしれない記事

エキサイトブログ (Exblog) のプチカスタマイズ #6

象支店長 — Wed, 01 Oct 2008 05:10:52 +0000

ためしにこのブログの左上にも表示させてみましたが
今日はWEBページ上の任意の場所にバッジのような画像を表示させる方法です。

Exblog の投稿 : [カスタマイズ] ウィンドウの角にバッジを入れる
Exblog に投稿してある内容もあわせてお読みください

ブログにバッジを表示させる方法

まず画像を用意しましょう。画像は jpg、gif、png が使えますが、Exblog の「マイイメージアカウントにイメージ登録」には jpg と gif しかアップロードできませんので png を使いたい場合は別のサーバーへアップロードが必要になります。
今回は画像の作製にバッジのジェネレーター（バッジをWEB上で作れるサイト）を利用してみました。

Web 2.0 Badges – Useful collection of stylish web 2.0 badges and badge generator

使い方は、右に並んだバッジから好きなものを選んだのちText、Font、Font Size等を指定、[APPLY] ボタンを押すと反映されますので、画像上で右クリックして「名前を付けて画像を保存」をクリックしてPCのデスクトップなどに保存します（画像はjpgでした）
ちなみにFirefoxの「名前を付けて画像を保存」では保存できませんでした。
なお現在は見た目優先でjpg ではなく透過 gif 画像に差し替えてあります。

スキン変更のページにアクセスし1.で用意した画像を「マイイメージアカウントにイメージ登録」のリンクをクリックしアップロードします。アップロード後、[イメージURLコピー] ボタンを押して画像のURLを表示させコピーします。
あとでCSS に貼り付けますのでテキストエディターなどにコピペしておいてください。

次にHTML編集のテキストボックス内に表示されているHTMLの一番上に
```
badge">
```
と、記述します。
なお青字の badge は別の文字列でも構いませんが、CSS （スタイルシート）に記述する文字列と一緒じゃないといけません。

次にCSS の最後に（別に最後じゃなくてもいいのですが、撤去するときにわかりやすいように最後としておきます）以下の記述を加えます。

#badge {
	position: absolute;
	top: 0;  /* 上からどのぐらいの位置に表示させるか、離したい場合は●● px と記述 */
	left: 0;  /* 左からどのぐらいの位置に表示させるか、右なら right と記述、離したい場合は●● px と記述 */
	width: 122px;  /* アップロードした画像の横幅 */
	height: 122px;  /* アップロードした画像の高さ */
	z-index: 99;
	background: url(http://pds.exblog.jp/pds/1/200809/30/12/badge.gif) no-repeat;
}

青字の badge が 3. で述べた「一緒じゃないといけない」と言った箇所です。
赤字の URL は 2. でコピーした URL を貼り付けてください。

表示させる位置はいろいろ変更出来ますので任意の数字に px （ピクセル）と付け加えて調整してください。

プレビューしてうまく表示されていたら保存して終了です。

HTML編集とCSS編集は簡単なので、問題は画像をどうするかですね。
Exblog の投稿にも書きましたが、Exblog は内をいじることができないので透過PNG画像を使った場合IE6（ブラウザ）ではちゃんと表示されません。透過GIFも使えますが周囲がギザギザになってしまうのんですよね。ページ背景との兼ね合いもあるのでなんとも言えませんが。。。
四角い画像ならなんら問題ないので季節の写真でも入れてみますか(笑)

もうひとつの方法

今回は背景画像としてバッジを表示させましたが、投稿内の画像と同じように画像を直接表示させてその画像に別サイトへのリンクを張ることもできます。

Exblog の投稿 : [カスタマイズ] ウィンドウの角にバッジを入れる

私のExblog で右上に表示されている画像をクリックすると今日のこの投稿にジャンプするようにしています。

追記2008-10-15
スキンを大幅に変更したので現在の私のexblogではこのカスタマイズ結果はご覧になれません。応用したものはページに左側に残してあります。

追記2009.4.18
左下に表示させる方法を Exblog に投稿しました。
ブラウザの左下に画像を固定する方法:Exblog Customize
当ブログでの関連したコメントはこちらです。

関連性が高い、、、かもしれない記事

エキサイトブログ (Exblog) のプチカスタマイズ #5

象支店長 — Sat, 13 Sep 2008 10:35:20 +0000

追記：2008.9.14
Exblogの投稿内にアップロードした画像がなぜか消失していました。自分で削除しちゃったのかな？。。。もしかしてやってはいけないカスタマイズ？いちおう復活させましたがもう一回消失したら御法度カスタマイズなのかもしれません。
あとポップアップ画像から拾ったURLの一部がエンティティ化されているのでそれも通常の文字に打ち変えて使いました（下段に追記してあります）

今回はサムネイル画像（小さい画像）の上にマウスカーソルを持って行くとクリックしなくても画像が拡大表示されるカスタマイズです。
これはプチカスタマイズ #4 よりも簡単です。
← 象の上にマウスカーソルを持って行くと拡大されます。
これと同じものをエキサイトブログ(Exblog) の投稿内に載せた写真に適用させるにはどうしたらよいのでしょうか。

Exblog のDemo 投稿

オンマウスで画像を拡大表示させるカスタマイズ（方法）

CSS（スタイルシート）の最後に以下の記述を貼り付ける

a.pic-enlarge {
	display: block;
	float: left;
	margin: 0 7px 0 0;
}
a.pic-enlarge img{
	position: absolute;
}
a.pic-enlarge,
a.pic-enlarge img{
	width: 100px;
	height: 100px;
}
a.pic-enlarge:hover {
	border: 0;
	cursor: auto;
}
a.pic-enlarge:hover img {
	width: auto;
	height: auto;
}

pic-enlarge という記述は別の文字列にしても構いません。ただしすでにCSSで使われているものとかぶってはいけません。ここではかぶりそうにない文字列を使いました。仮に違う文字列を使った場合は手順2. のpic-enlarge のところも修正する必要があります。

投稿本文中に画像を挿入する際は以下のように記述する

画像のURL" class="pic-enlarge" title="画像名（画像のタイトル）">画像のURL" title="画像名（画像のタイトル）" width="100" height="100" />

画像のURL を知るには

いつもやっているように画像をアップロードしたあとで [アップロード済み] のリンクをクリック。

アップロードした画像がポップアップウィンドウに表示されるのでポップアップした画像上で右クリックし、（IE6 & IE7 の場合は）コンテキストメニューの一番下にある [プロパティ] をクリック。プロパティのウィンドウが開くのでアドレス（URL）に表示されている文字列をコピー。
Firefox はポップアップした画像上で右クリックしコンテキストメニューの [画像のURLをコピー] をクリックするだけでURLがクリップボードにコピーされます。

追記：画像のURLが一部エンティティ化されているのでスラッシュ、アンダーバー、ドットを通常の文字にかえてURLとしました。

（例）エンティティ化されたURL

http://pds.exblog.jp/pds/1/200809%2F14%2F12%2Fe0131412%5F19265897%2Ejpg

（例）通常の文字列に打ち変え

http://pds.exblog.jp/pds/1/200809/14/12/e0131412_19265897.jpg

%2F → / （スラッシュ）
%5F → _ （アンダーバー）
%2E → . （ドット）

具体的にはこのような変換になります。

といったように、比較的簡単に導入できます。。。んそうでもないかっ

関連性が高い、、、かもしれない記事

エキサイトブログ (Exblog) のプチカスタマイズ #4+

象支店長 — Thu, 11 Sep 2008 07:55:13 +0000

投稿内の写真に背景画像を使った枠をつけるカスタマイズ（方法）

背景画像を用意

画像は小さめなものを用意し、その画像をrepeat させることでどんなサイズの写真にも対応できるようにします。私のサイトで使っている画像を例にとると背景画像自体は3px × 3px の下のようなとても小さいgif 画像です。

↑ココです。わかりますか？
拡大するとこんなgif 画像です。

この画像を連続して表示させると

こんな斜めストライプの背景画像ができあがります。
この背景画像上に投稿した写真が表示されます。

背景画像は自分で作ると大変なので、ストライプであれば
エキサイトブログで果たしてエキサイトするか#3 の投稿内で紹介している
「Stripe Generator」もしくは「Background Image Maker」という
ジェネレーターを使うといいでしょう。
模様のような背景画像を無料配布しているサイトも載せてありますので
ひととおり目を通してみてはいかがでしょうか。

背景画像のアップロード

マイブログ設定のメニューからスキン変更のページを開き、「現在使用中のスキン」のところにある「編集」ボタンを押します。
次に「スキン編集」ページ内の「HTML編集」のところにある「マイイメージアカウントにイメージ登録」をクリックします。

ポップアップした「イメージアップロード」ウィンドウを利用しPC 内に保存してある画像をアップロードします。ファイル名は grayframe.gif にしました（別に好きな名前で構いません）
アップロード後、「保存されたイメージリスト」からアップロードした画像を見つけクリックして赤い線が引いてある「イメージURL」（画像へのリンク）をコピーします。
WIDTH と HEIGHT は必要ありません。

コピーしたイメージURLはあとでスタイルシートを編集するときに必要になりますので
テキストエディタやメモ帳などにペーストしておいてください。

CSS編集（スタイルシート編集）

イメージURL のコピーが終了したらポップアップしたウィンドウは閉じて、次に「HTML編集」の下にある「CSS編集」に移ります。CSSを一番下までスクロールしたら、とりあえず下記のような記述を追加します。↓ は画像ですので、コピーする場合は画像の下にある 内を選択してコピーしてください。



img.IMAGE_MID,
img.IMAGE_LEFT,
img.IMAGE_RIGHT {
	padding: 4px 4px 4px 4px;
	background: url(コピーしたイメージURLをここにペーストする) repeat;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
}

Exblog は投稿内で画像をアップロードするときに 中央、左、右 という配置を指定しますが
その指定を行うと  タグ内に以下のようなclass 属性が付与されます。
（  タグ内に自動的に追加されてしまうということ）

中央を指定すると class=”IMAGE_MID”
左を指定すると class=”IMAGE_LEFT”
右を指定すると class=”IMAGE_RIGHT”



バックグラウンドで自動的に付くそのclass 属性を利用して投稿内にある画像のみ枠がつくようにしています。
したがって、中央に配置する画像のみに枠をつけたいのであれば
img.IMAGE_MID {
	padding: 4px 4px 4px 4px;
	background: url(コピーしたイメージURLをここにペーストする) repeat;
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
}

このように記述すれば、中央の写真のみに枠がつき、左と右の写真には枠がつかないといったような表現も可能です。
その下にある
	padding: 4px 4px 4px 4px;

は、写真の回りにどのくらいの幅の枠をつけるか（背景画像をどのくらいはみ出させるか。正確には写真の回りにどのくらいの幅の余白を持たせるか）を指定しています。この場合は上下左右に4px ずつという指定です。太くしたければ数値を大きくすれば太くなります。
次の
	background: url(コピーしたイメージURLをここにペーストする) repeat;

は、背景画像の指定です。
背景画像はご自身の「マイイメージアカウントにイメージ登録」 して、そのURLを指定してください。くれぐれも他人のサイトで使われている画像に直リンクしないように。
最後の4行
	border-top: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;

は、無くても構いませんが、上と左に薄い色で1px の線、下と右にチョット濃いめの1px の線を引くことでなんとなく出っ張っている感じを出しています。カラーコードのところ（# から後ろの6 文字）を変えることでいろいろな色が使えます。


人とビミョーに違うExblog を作ってみたい方、どうぞお試し下さい。
最終型

画像

CSS
img.IMAGE_MID {
	padding: 9px 9px 9px 9px;
	background: url(http://pds.exblog.jp/pds/1/200809/11/12/08original.gif) repeat;
	border-top: 1px solid #c5c5c5;
	border-left: 1px solid #c5c5c5;
	border-right: 1px solid #343434;
	border-bottom: 1px solid #343434;
}

中央に配置する画像のみ枠が表示されるようにした。



Exblog の該当記事 http://tacogle.exblog.jp/8598804/


	関連性が高い、、、かもしれない記事
	
	ExblogにTwitterのつぶやきを載せられる? livedoorは? fc2は? (0)
	背景画像が簡単に作れるジェネレーター (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #8+ (1)
	エキサイトブログ (Exblog) のプチカスタマイズ #8 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #7 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #6 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #5 (2)
	エキサイトブログ (Exblog) のプチカスタマイズ #4 (0)
	エキサイトブログで果たしてエキサイトするか#3 (2)
	エキサイトブログで果たしてエキサイトするか#2 (0)



エキサイトブログ (Exblog) のプチカスタマイズ #4
象支店長 — Thu, 11 Sep 2008 02:57:18 +0000
放置状態になっていたエキサイトブログ(Exblog) のカスタマイズ、久々の投稿であります。
ついでにタイトルも「エキサイトブログで果たしてエキサイトするか」から
SEO対策も視野に入れ   「エキサイトブログ(Exblog) のプチカスタマイズ」 に変更しました。

どうして突然？、、、今ごろ、、、なぜ再開？
すでにお気づきの方もいらっしゃると思いますが、2週間ほど前から投稿タイトル下に投稿（単一ページ）が何回閲覧されたかカウントされるようにしました。
そして昨日、右のサイドバー内に「Top 10」 が表示されるようにしたところ、何故か「エキサイトブログで果たしてエキサイトするか #3」 が2位になっているのを発見しチョットやる気になったのであります(笑)
Exblog の場合、 の部分がいじれないのでFavicon を変更したり javascript を使ってのカスタマイズができないのでカスタマイズと言っても 「プチ」 からは抜け出せませんが。。。
今回はどこを 「プチる」 かと申しますと、右の写真のように画像の周辺に枠をつけるカスタマイズです。
ちょっとした枠があるだけで写真の感じが変わりますし、特にブログの背景色が 「白」 の方は、周辺が白い写真を投稿した時に画像のエッヂが背景になじんでしまってメリハリがなくなってしまうのを防ぐことができます。
ただ単に画像の四辺に任意の太さの枠線を引くだけなら、スタイルシートの中から
（私が使っているテンプレートのスタイルシートの場合は）
img {
	border: 0;
}

という記述を探し出し
img {
	border: 1px solid #000000;
}

と変更すれば、太さ1px の黒い（#000000）実線が（すべての）画像の四辺に引かれます。
が、すべての と書いたようにロゴ画像などにも線が入ってしまうのでそこが問題です。
また1px を5px とかにすれば太い線になりますが、線自体は単なるベタな色の線なのでオシャレな感じはありません。
そこで投稿内の写真の下だけに背景画像を読み込ませ、その背景画像が画像の四辺にはみ出るようにスタイルシート内に記述します。
作業内容としては、スキン変更 → HTML編集 にある「マイイメージアカウントにイメージ登録」 をクリックして画像をアップロードし、スタイルシート内に簡単な記述を追加するだけですので簡単です。

投稿サンプル

詳しい説明は次の投稿で。

	関連性が高い、、、かもしれない記事
	
	ExblogにTwitterのつぶやきを載せられる? livedoorは? fc2は? (0)
	背景画像が簡単に作れるジェネレーター (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #8+ (1)
	エキサイトブログ (Exblog) のプチカスタマイズ #8 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #7 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #6 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #5 (2)
	エキサイトブログ (Exblog) のプチカスタマイズ #4+ (0)
	エキサイトブログで果たしてエキサイトするか#3 (2)
	エキサイトブログで果たしてエキサイトするか#2 (0)





エキサイトブログで果たしてエキサイトするか#3
象支店長 — Thu, 07 Feb 2008 03:22:08 +0000
背景に画像を使う
研究  で使っているエキサイトブログのアドレスは
http://tacogle.exblog.jp/です。
上記のサイトにここで行ったカスタマイズが反映されています。
*CSS編集を行う場合は必ず編集を行う前のCSSを保存しておきましょう。
そうしておけば何かあったときすぐに復旧できます。


ブログの背景がカラーコードで指定したベタな色じゃちょっと味気ないですね。
そんなときにはCSS編集をちょっといじって画像を背景として使ってみましょう。
まずは背景画像の入手です。
背景画像を無料でダウンロードできるサイトやジェネレーターを以下にいくつか載せておきます。

DinPattern

Kollermedia.at

Squidfingers

DROMOSCOPIO

everyday icons Playground

Stripe Generator

Background Image Maker


気に入った背景画像が手に入りましたでしょうか？
では、ダウンロードした画像を載せた投稿（記事）を一本アップします。
投稿に背景画像を載せたくない場合は別のサーバーに画像をアップしてそのURLを下記の手順でCSSに貼り付ければ同様に背景画像としてページ上に反映されます。サーバーを持っていない方は下記の手順で。。。
2008.2.8
さきほど気づきましたが、HTML編集とCSS編集のところに「マイイメージアカウントにイメージ登録」というアップローダーがあるんですね、失礼いたしました。
個人的には投稿から拾っちゃった方が楽なので下記の方法で作業します。


投稿に載っている背景画像の上で右クリックしてその画像のURL（アドレス）をコピーします。

インターネット・エクスプローラーの場合
プロパティを開きます。


プロパティが開いたら下の写真のようにURLのところを左クリックしたまま選択して（なぞって）コピーします。



Firefoxの場合（こちらは圧倒的に簡単）
右クリックして開いたコンテキストメニューのなかにある「画像のURLをコピー」を左クリックすれば一発で画像のURLがゲットできます。


これで準備は整いました。
あとはエキサイトブログのCSS編集を開いて、「body」の「background」に
さきほどコピーしたURLを貼り付けます。
ちなみに昨日の時点ではこのようになっていました。
body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.7;
	font-size: 16px;
	background-color:#FF0000;
	}

そのなかのbackgroundを以下のように修正します。
body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.7;
	font-size: 16px;
	background: #FF0000 url(http://pds.exblog.jp/pds/1/200802/07/12/e0131412_1033337.gif) repeat top left;
	}

カラーコードを#FF0000のままにしておくとページが表示されるときに一瞬ですが赤い色が描写されてしまうときがあるので背景画像の色味に合ったカラーコードに変更しておいた方が無難です。何も指定しなければ白になります。
念のため部分的に抽出しておきます。
background: #カラーコード url(背景画像のURL) repeat top left;

URLの前後のカッコ()を忘れないようにしてください。最後にある「repeat」というのは「指定した画像を繰り返し描写してくださいね」という命令みたいなものです。
プレビューしてOKでしたら保存を押して終了です。
さらに背景画像を固定してみたい方はbodyを以下のように修正します。
body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.7;
	font-size: 16px;
	background-image: url(http://pds.exblog.jp/pds/1/200802/07/12/e0131412_1033337.gif);
	background-repeat: repeat;
	background-position: top left;
	background-attachment: fixed;
	}

これで背景画像が固定されカラムのみスクロールされます。
注：背景画像を載せた投稿を削除すると画像も削除されてしまうみたいです。

	関連性が高い、、、かもしれない記事
	
	ExblogにTwitterのつぶやきを載せられる? livedoorは? fc2は? (0)
	背景画像が簡単に作れるジェネレーター (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #8+ (1)
	エキサイトブログ (Exblog) のプチカスタマイズ #8 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #7 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #6 (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #5 (2)
	エキサイトブログ (Exblog) のプチカスタマイズ #4+ (0)
	エキサイトブログ (Exblog) のプチカスタマイズ #4 (0)
	エキサイトブログで果たしてエキサイトするか#2 (0)