BloggerでCSSを使う（Use CSS with blogger)

　前回の記事でGimicの使い方での紹介でGimicのコントロールパネルの画像をアップしました。ところが調整項目の文字が小さく、通常の表示ではつぶれてしまいました。画像を大きくすればいいのですが、圧縮しても１３００PXだとまあ読めるのですが、ちょっと大きすぎて目障りです。 　最初は小さくても画像をクリックすれば大きくなるようなことがCSSでできるはずです。しかし、グーグルの blogger ではCSSが使えないと思っていました。今回どうしたものかとネットで調べたらCSSが使えることがわかりました。bloggerを使っている方はほとんどないと思いますが、いろいろ気を付けることがあるので備忘録として書いておきます。 　
　
　まず、下にblogger の編集画面の画像です。 　

　　

編集画面は左上の「作成」と「HTML」の２種類があります。「作成」はワープロ感覚で記事を書け、画像も作成画面にドラッグして配置できるので非常に便利です。「HTML」はタグを直接入れられます。わたしの場合は主に「作成」で記事を作り、細かい調整は「HTML」でやっていました。

　ただし、ここで問題があってｐタグなどを入れても作成画面にしてからHTML画面で編集しようとすると、brタグ以外は消えてしまうのです。主に行間などの調整だったので、これまであまり気にしていなかったのですが、CSSを使うとなるとｐタグなどがきちんと残らないとできません。一度、公開すれば残るのですが、また「作成」で編集するとpタグが消えてしまいます。結局、HTMLだけで作業をしなければならないので、ちょっと面倒です。

　ということで、CSSのために記事はHTMLだけで作業することにしました。

　CSSを入れる場所は編集トップ画面の「テーマ」の項をクリックします。



　テーマをクリックすると「カスタマイズ」と「HTMLの編集」が出ます。HTMLの編集でレイアウトの調整などができるみたいです。「カスタマイズ」はいろいろできるようです。ここではこの中のCSSを追加する方法について説明します。この画面で「上級者向け」―>最下段の「CSS追加する」をクリックします。
　すると下のような画面になります。

画像をクリックで拡大
画像の外でクリックで戻る

右の枠にCSSを入れれば完成です。上の画像はクリックすると拡大・縮小ができるようにしています。試してみてください。

　画像をクリックすると大きくなり、次にクリックすると小さくなるCSSは次のようになります。

 /* クリックで画像を拡大縮小 */
.img400-1300 input {display: none;}
.img400-1300 input + img {width: 400px; cursor: pointer;}
.img400-1300 input:checked + img {width: 1300px;}

 通常のサイズが400px、大きいサイズが1300pxです。この場合のHTMLは下です。

<p class="img400-1300" style="margin-bottom: 30px;">
<label for="mo1">
  <input type="checkbox" id="mo1">
   <img src="../Images/LouvreMonarz009DetailsLocalProcessingChannelAllb2.jpg" alt="ルーブルモナリザ">
 </label>
</p>　

　要はチェックボックスを見えなくして、チェックが入ると拡大、外すと元に戻るという仕組みです。pタグの代わりにdivタグでもできます。
　bloggerの場合は画像をリックするとポップアップで拡大します。次に、外側でクリックすれば小さい画像に戻ります。右上のXをクリックしても小さく戻ります。これはなにかのトリガーにも使えそうです。

　ただ、動作確認は一度公開しないとできないので、わたしのようにアクセスが少なければ、アクセスのない時を狙ってテストできますが、多い方はちょっと面倒かもしれません。

　いまは部品化されているので、わざわざコードを書くことはないと思いますが、CSSをいじりたい方は参考にしてください。

　bloggerはブログのランキングのへのアクセスが自動でできないので日本ではあまり使われていないと思いますが、外国ではまあまあ使われているようです。また、グーグルが突然、bloggerを停止する可能性もあるかもしれません。そのときは、他のサイトに移動するのも面倒なので、このブログは終了するつもりです。

Gimicを使った写真の部分的な明るさの調整( Adjust the partial brightness of a photo using Gmic.)

　GIMPプラグインGimicのフイルターの本来とは違う変な使い方ばかりしてきたので、少しフイルターらしい使い方を説明します。とは言ってもGimicのマニュアルがあるわけでもないので適当にパラメータをいじってみた感じの話です。もちろん、GIMPが前提です。
　写真などで部分的に暗いところを明るくしたい時があります。下は友人からもらったモナリザの写真です。

　モナリザの絵がちょっと暗くなっています。このようなとき、絵のあたりを明るくしたいわけです。

　全体的に明るくするときは、　 GIMPによるレベル調整（Level control using GIMP)で説明したようなレベル補正で可能です。実際、レベルを調整した結果が下です。

　全体的に明るくなっています。普通はこれでいいのですが、全体的に明るくするとそれ以外のところが明るくなりすぎて目障りになることがあります。

　暗い部分を主に明るくしたい場合は GimicのLocal Processing というフイルターが使えます。このフイルターの調整画面は以下の画像です。

画像をクリックすると拡大します(Large: click on the image)。
拡大後画像の外側でクリックすると小さくなります(Small: click outside the image)。
 

右の調整項目の上から２番目のStrngth(%)は右にスライドすると明るくなります。ただし、あまり明るくするとまだらに黒い部分が出ますので注意が必要です。NeighborhoodSize(%)は左に移動すると明るくなります。あとは適当にパラメータを気に入ったところに合わせます。結果の画像が下です。

 

レベル調整ほど明るくはありませんがモナリザの部分が明るくなり、右の壁の部分はあまり明るくなっていません。まあ使えるかなと思っています。　

　次は下のような周りが明るくて木の切ったあとがちょっと暗めの写真です。レベルで補正するとあまりうまくいきません。

　　　　　　Befor

　

　そこで、フイルターを強めに掛けたのが下です。バックも明るくなりましが白飛びすることなく、木の切り跡が明るくなりました。見た感じに近くなりました。ただし、右側の白い部分が黒っぽくなっています。あまり強くかけるとこのような黒い部分が出るので注意です。

　　　　　　After

　

　暗い穴の中のぼんやりと写っている写真などにも使えると思います。

Digital Art Style #４E

Festival in the Dark#4-c

Broken Symmetry#4-e

Strings of the Universe#4-d

Festival in the Dark#4-c:Plaid-a
一番上のデザインを格子柄にしてみました。

Festival in the Dark#4-c:Plaid-b

Festival in the Dark#4-c:Plaid-c