アメブロガーの可能性を求めるそんなものでありたい -4ページ目

見づらい感じがしたのでサイドバーをまた右に戻しました。

この、サイドバーは2カラム

(このブログはアメブロでの設定上は3カラムで表示上は2カラムです)

でも

3カラム

でも左にメインカラム(記事があるカラム)を配置した方が

記事が読みやすいです。

左にサイドバーでも、幅を最小限にしてナビゲーションメニュー的なものなどを置くのも良いと思うのですが

現在のこのブログではサイドバーの幅が広いので、見づらいと感じました。



あくまでこのブログの場合なので、

再三、申し上げておりますようにブログの運営コンセプトによってこの辺は違うかと思います。

このブログのコンセプトの中には、

『見本(サンプル)的な表示をしてあとで解説に使用できるようにする』

というものもあるので、サイドバーは広いままにしてあります。

ヘッダーもちょっと自分的には(ビジュアル的に)いまいちなんですが、

これも後で解説に使えると思い

時折変更はしていますが、かなり変則的なままにしてあります。

サブブログの方が

自分の中での完成段階になるメドもかなり先になると思っていて

中々解説がはじめられない項目もあるのですが、

これからもお付き合いいただければ幸いです。

ロゴやボタンの画像を作成するのはたいへんです・・・そんなときに便利なサイトのご紹介

ロゴやボタンの画像を作成するのはたいへんです・・・そんなときに便利なサイトのご紹介<br />

今回は↑(上の記事タイトルのロゴ)も下記で紹介しているWEBツールで作成しました。


Cool Textで作成した動画GIFの燃えてるロゴ


こんな、動画GIFの燃えてるロゴも作成できます
ヾ(@~▽~@)ノ


ボタンに関しては、

『このブログの読者になる(チェック)』のリンクの下部に表示される方だけにスタイルを設定する

で書いたように、マウスオーバー(ロールオーバー)用の画像も作成できます。


Cool Text: ロゴ及び画像ジェネレーター

設定できる、オプションも適度に多くもなく少なくもなく

かなり手軽にロゴやボタンが作成できるのでおすすめです。

『このブログの読者になる(チェック)』のリンクの下部に表示される方だけにスタイルを設定する

『このブログの読者になる(チェック)』のリンクの上部に表示される方だけにスタイルを設定する

この記事は、

  1. IE7で親要素と子要素の間にHTMLのコメントがあるとチャイルドセレクタなどが適用されない
  2. 『このブログの読者になる(チェック)』のリンクの上部に表示される方だけにスタイルを設定する
  3. HTMLのコメントがあると IE7でスタイルが設定できない ことがあるので、 JSで取り除く


の続きです。

今度は、『このブログの読者になる(チェック)』のリンク

の下部の方にスタイルを適用させる訳です。

このブログの読者になる(チェック)下部

こちらは、画像にしてみました。

このブログの読者になる(チェック)下部を画像にしてみる

コードの方は、前回

HTMLのコメントがあると IE7でスタイルが設定できない ことがあるので、 JSで取り除く

で公開してあるので、そちらを参照して下さい。

使った画像が、最初に表示されるものと

リンクに触れたとき(マウスオーバー)に表示するものを用意しました。


このブログの読者になる(チェック)下部を画像にしてみる:マウスオーバー



プロの人たちが使うテクニックで、

CSSスプライトと呼ばれる手法など

これら二つを合わせてひとつの画像にして、

CSSで位置をずらして表示する方法もあったりしますが

今回は、画像を作成するのにWEBツールを使用しました。

このツールは、マウスオーバー(ロールオーバー)用の画像も同時に作成できるので

それをそのまま使いました。

これを、加工してひとつにしても良いですけど

今回は簡単にすますことにしました。

この便利なツールは

ロゴやボタンの画像を作成するのはたいへんです・・・そんなときに便利なサイトのご紹介

にてご紹介しております。