So-net無料ブログ作成
カスタマイズ ブログトップ
前の5件 | -

イメチェン [カスタマイズ]

OLYMPUS PEN E-P2 LUMIX G 20mm/F1.7 ASPH. (40.0mm相当)
プログラムAE(F5.6 1/800秒) WB:オート 仕上がり:i-FINISH(標準) 0.0EV ISO200

久しぶりにスキンを変更してみました。
3ペインから2ペインワイドに変更して記事の横幅を広くしました。
そのおかげで(これが目的ですが)、大きな画像をアップすることが出きるようになりました[わーい(嬉しい顔)]

せっかくなので、画像の枠をポラロイド風に戻して、画像のプロパティを移動してスッキリさせ、
画像の縮小もJTrimと言うソフトからGIMP2に変更しました。
ホントはPhotoshopとかのほうが美しく加工出来るんでしょうけどね。
それでも、以前よりかなりキレイになりました。

記事のスペースはまずまずなのですが、左サイドがイマイチ・・・
サイドのスペースもワイドになって、フォントも大きくなったような気がします。
もっと、小さくても良いんだけどな。
この辺は暇を見つけて手直しですかね。

9/23 21:00追記:
どうしても許せない箇所を修正しました。
これで、左サイドも落ち着きました。

ちなみに画像は春に松本城へ行ったときのものです。
あえて、大好きな松本城の写真を選んでみました[ぴかぴか(新しい)]

またコツコツやって行きますので、これからも宜しくお願いします[るんるん]

nice!(8)  コメント(4)  トラックバック(0) 
共通テーマ:blog

写真枠 [カスタマイズ]

SC_0002S.jpg

私のブログの写真には写真枠がついていますが、ニョニョさんから
「どうやってるの?」という質問がありましたので説明したいと思います。

1.オレンジ色で囲ったtableタグを記述。
2.いつものようにアップロードした画像を挿入(最下部の記述)。
3.赤色の四角で囲った部分をアップロードした画像に合わせて、height、widthを修正。
4.緑色の四角で囲った部分をアップロードした画像に合わせて、画像のsrcを修正。
5.2でアップロード画像のソースを削除。

以上で終了です。
興味のある方は試してみてください。
下記の記述をコピーして使ってください。
ポラロイド風は写真枠風と若干違ってますのでご注意を!!


写真枠風
<table style="border: 1px solid rgb(153, 153, 153); filter:progid:DXImageTransform.Microsoft.Shadow
(color=#cccccc,strength=5,direction=135);" bgcolor="white" cellpadding="5" cellspacing="1" align="center"><tbody><tr><td><img src="/_images/blog/_590/shionja/P8011794.jpg" border="0" height="338" width="450" style="MARGIN: 0px"></td></tr></tbody></table>

ポラロイド風
<table style="border: 1px solid rgb(153, 153, 153);" bgcolor="white" cellpadding="5" cellspacing="1" align="center"><tbody><tr><td><img src="/blog/_images/blog/_590/shionja/10755940.jpg" border="0" height="240" width="320" style="MARGIN: 0px"></td></tr><tr><td align="center"><b>サンタさんのクリスマスケーキ</b></td></tr></tbody></table><p class="auto">
</p>

nice!(4)  コメント(6)  トラックバック(0) 
共通テーマ:blog

コメントの絵文字機能改良 [カスタマイズ]

3段目にお天気の絵文字が増えていますのに気付かれた方がいらっしゃると思います。
youさんの記事より修正点は以下の通りです。
 1.お天気の絵文字の追加
 2.絵文字が改行される問題の修正

2の問題はなかなか修正されず、何とか自力で修正(詳しくはこちら)しましたが、
やっとyouさんのほうで修正して頂けたようです。
自分で修正した箇所ををコメントアウトして表示してみたところ、
正確に絵文字が表示されるのを確認しました。

絵文字が改行されて、コメントの絵文字機能を断念した方は、
もう一度チャレンジしてみてはいかがでしょうか!


nice!(8)  コメント(8)  トラックバック(0) 
共通テーマ:blog

コメントの絵文字を改良 [カスタマイズ]

以前、「コメントに絵文字を追加」という記事でコメントに絵文字を表示することが出来るようになりました。


こんな感じですね!

この頃は良かったのですが、12月の定期メンテナンスでスキンデータの入れ替えが行われてから、コメントに挿入した絵文字が改行されてしまうようになりました
コメントの絵文字を改良しようと調べていたついでに改行される原因を調べてみました。

① 今の現状


2行コメントを書いて、それぞれの最後に絵文字を入れた状態です。
まだ、送信していません。
そもそも、この時点で名前の「はまやん」が改行されていたりと違和感たっぷりです!

② コメントを送信


絵文字が2個とも次の行に改行されています。
当初は絵文字をコメントに追加するためのJavaScriptがバグっているのかと思って調べていたのですが、違っていました。

③ コメント部分のスキンデータ(CSS)

.each-comment imgfloat:left;の記述があります。
これはコメント1件単位のimg(画像)に対してのスタイルを指定する箇所なのですが、float:left;とすると画像を左に移動して文字を右側に回り込ませるものです。
なんだ、この行を消せば良いのでは?と安易に削除すると。

④ floatを削除したコメント


確かに絵文字は正常になりましたが、コメントがタクロウの画像の下に移動しています。
float:left;はコメントがタクロウの画像の右側に回り込ませるために記述されているんです
ではどうすれば良いかとソースを調べると、タクロウの画像を除いたコメント以下をまとめている.comments-bodyクラスがあるので、このクラス内の画像にはfloat:left;が無効になるようにします。

⑤ 追加したスキンデータ(CSS)

.comments-body imgを追加しました。
float:none;float:left;を無効にするものです。
margin:0 0pxで絵文字の右側の空白をなくしてあります。

⑥ 改良後のコメント


絵文字が改行されずに正しく表示されました
絵文字の左右に多少マージン(空白)があっても良いかもしれませんね。


以上、長々と書いてみましたが、コメント絵文字が改行されてダサいと思っている方はチャレンジしてみて下さい。
オリジナルスキンを使っていない方は空いているペインに以下の行を追加してみて下さい。

<STYLE type="text/css">
<!--
.comments-body img {
float:none;
margin:0 0px;
}
-->
</STYLE>

nice!(3)  コメント(9)  トラックバック(1) 
共通テーマ:blog

3ペインのカスタムスキン [カスタマイズ]

昨日、なかなか良さそうなカスタムスキンが追加されていました。
左右にサイドバーのあるスキンなのですが、前回より中央がワイドになっているものです。
いくつかの記事はちょっと編集が必要ですが、しばらくこのスキンを試してみたいと思います。

この記事読みにくい、など意見がありましたらお知らせ下さい。
記事を編集しなおすか、以前のスキンに戻したいと思います。

今わかっている画像が切れているカテゴリ
・ポケモン日記
・カスタマイズ


nice!(3)  コメント(6)  トラックバック(0) 
共通テーマ:blog
前の5件 | - カスタマイズ ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。