イメチェン [カスタマイズ]
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追記:
どうしても許せない箇所を修正しました。
これで、左サイドも落ち着きました。
ちなみに画像は春に松本城へ行ったときのものです。
あえて、大好きな松本城の写真を選んでみました
またコツコツやって行きますので、これからも宜しくお願いします
写真枠 [カスタマイズ]
私のブログの写真には写真枠がついていますが、ニョニョさんから
「どうやってるの?」という質問がありましたので説明したいと思います。
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>
コメントの絵文字機能改良 [カスタマイズ]
コメントの絵文字を改良 [カスタマイズ]
以前、「コメントに絵文字を追加」という記事でコメントに絵文字を表示することが出来るようになりました。
こんな感じですね!
この頃は良かったのですが、12月の定期メンテナンスでスキンデータの入れ替えが行われてから、コメントに挿入した絵文字が改行されてしまうようになりました
コメントの絵文字を改良しようと調べていたついでに改行される原因を調べてみました。
2行コメントを書いて、それぞれの最後に絵文字を入れた状態です。
まだ、送信していません。
そもそも、この時点で名前の「はまやん」が改行されていたりと違和感たっぷりです!
絵文字が2個とも次の行に改行されています。
当初は絵文字をコメントに追加するためのJavaScriptがバグっているのかと思って調べていたのですが、違っていました。
.each-comment imgにfloat:left;の記述があります。
これはコメント1件単位のimg(画像)に対してのスタイルを指定する箇所なのですが、float:left;とすると画像を左に移動して文字を右側に回り込ませるものです。
なんだ、この行を消せば良いのでは?と安易に削除すると。
確かに絵文字は正常になりましたが、コメントがタクロウの画像の下に移動しています。
float:left;はコメントがタクロウの画像の右側に回り込ませるために記述されているんです
ではどうすれば良いかとソースを調べると、タクロウの画像を除いたコメント以下をまとめている.comments-bodyクラスがあるので、このクラス内の画像にはfloat:left;が無効になるようにします。
.comments-body imgを追加しました。
float:none;はfloat:left;を無効にするものです。
margin:0 0pxで絵文字の右側の空白をなくしてあります。
絵文字が改行されずに正しく表示されました
絵文字の左右に多少マージン(空白)があっても良いかもしれませんね。
以上、長々と書いてみましたが、コメント絵文字が改行されてダサいと思っている方はチャレンジしてみて下さい。
オリジナルスキンを使っていない方は空いているペインに以下の行を追加してみて下さい。
<STYLE type="text/css"> <!-- .comments-body img { float:none; margin:0 0px; } --> </STYLE> |
3ペインのカスタムスキン [カスタマイズ]
昨日、なかなか良さそうなカスタムスキンが追加されていました。
左右にサイドバーのあるスキンなのですが、前回より中央がワイドになっているものです。
いくつかの記事はちょっと編集が必要ですが、しばらくこのスキンを試してみたいと思います。
この記事読みにくい、など意見がありましたらお知らせ下さい。
記事を編集しなおすか、以前のスキンに戻したいと思います。
今わかっている画像が切れているカテゴリ
・ポケモン日記
・カスタマイズ