検索フォームにフォーカスをしたときのCSSを設定しよう。

やぁやぁこんばんは(・∀・)
今日も今日とて(　´∀｀)＜ぬるぽんです（ｲﾐﾌ

今回はアメブロの検索フォームをちょっとだけ修正しました。

タイトルにある通りなことなのです。
IEでは少々どうだったか覚えていないのですが、フォームにフォーカスがあたるとちょっと影がでてしまうのですが、これが初期状態だと色がグレーなんですよね。

こんな感じ


これでは何か色がアンマッチですよね(´・ω・｀)


なので、この影の色を調整しちゃえと言うわけで、変更してみました。
ちなみに「CSS3」ですので、対応ブラウザがIE9以上からなんですよね。（Windows 7以降であれば大半は問題ないかと）


変更すると上記の画像のような感じになります。


ぬぉぉ、書いてる時に足攣った( ；∀；)
ってそんなことは置いといて

CSSで検索フォームに装飾を行っていきましょう(｀・ω・´)

.blogSearchInput:focus {
    outline: 0;
    -webkit-box-shadow: 0px 0px 3px 1px #1ABC9C;
                  box-shadow: 0px 0px 3px 1px #1ABC9C;
}

これだけです（ぇ


まず、「outline: 0;」についてですが、これはフォーカス時の内側の線を消してあげるために必須な物です。
これがないと影の色を変更してあげることができません。

そして次に影の色を変更します。
「box-shadow: 0px 0px 3px 1px #1ABC9C;」が影の設定をするものです。
数値の左側から「X軸、Y軸、ぼかし距離、広がり距離、色」です。

また、上記の設定では外側に影を設定するものです。
内側に影を設定する場合は「inset」を追加することで可能となります。

例）「box-shadow: inset 0px 0px 3px 1px #1ABC9C;」

ちなみにこの「inset」は一番前か後ろのどちらかに書けば問題ありません。

X軸とY軸についてですが、
X軸は加算すれば右方向へずれていきます。減算で左方向へずれていきます。
Y軸は加算すれば下方向へずれ、減算で上方向へずれます。

XYを「0px」としている場合は、全体的に影が付きます。上記の２枚目の画像な感じですね。


これを上手く数値を設定することで、画像で作ったかのようなものが作れたりします。
こんな感じです。




ではでは、今日はこの辺でおやすみなさい(つ∀-)


最後まで読んで頂けたならありがとございます。

See you next...(´∀｀*)ﾉｼ

先日書いた記事にて「背景色どうやるの？」的なことを聞かれたので

先日投稿した記事において、記事中に背景色を変えたコードを掲載しました。

この背景色ってどうやってるの？って聞かれたので、記事にした次第です(´∀｀)


基本的には、HTMLタグに直接CSSを打ち込んでいるだけに過ぎませんが、普通の方には分からない部分なんだなと思い、ある程度コピペで済む様な感じを載せてみます。


まず、ここでお話するのは、アメブロで「ブログを書く」から投稿しますよね。
初期状態であれば、「タグ編集エディタ」になっていると思います。

以下の画像のオレンジ色の枠で囲ってる部分です。



確か別のエディタや新エディタと３タイプあった気がします。
タグ編集エディタ以外は利用していないので、ご了承ください。


まず、先日のコード掲載部分ですが、こちらのタグを利用しました。

<pre>
　　ここに書きたい事
</pre>

多分、タグ編集エディタでは、連続での半角スペースが利用できないと思うので、「<pre></pre>」タグを用いました。
このタグは書いた通りに表示できるタグですが、この半角括弧「<　>」などは特殊なコードを利用しないと表示できません。

　< ＝ &lt;
　> ＝ &gt;

ただし、全角の＜＞はそのまま表示できます。


して本題ですが、背景色を付けるにはこのようにしているのです。

<pre style="background: #fff7ed;">
    ここに書きたい事
</pre>

「pre」タグの中に「style="background: #fff7ed;"」というコードを追加しました。
「style」はスタイルシートという物で、HTMLタグに装飾を施してあげる事が出来る子です。
スタイルシートは別名「CSS（カスケード・スタイル・シート）」と言います。
WEBの制作者さんは、このCSSと言うものでホームページの装飾をしているのです。


しかしながら上記のものだけでは、テキストが端っこにピッタリとくっついた状態になってしまいます。
以下は例です。

例です(´∀｀)

これでは少々見栄えがあんまりよろしくない(；´Д｀)
のでので、「padding」と言う内側に余白をつけるためのパディングを付けてあげる

<pre style="background: #fff7ed; padding: 14px;">
    ここに書きたい事
</pre>

こうすることで、約１文字分を内側に寄せてあげることができます。


ついでにですが、「CSS編集可能」なタイプであれば、CSS内に直接設定してあげることで、投稿中の書く量が減らせます。

pre {
    background: #fffdf3;
    padding: 14px;
}

以上が、先日の聞かれた事でした(・∀・)
カラーコードについては追々記事にできればと思います（ぇ

今日の内容は良いのかどうかは分からないです。
少しでも役立てていれば幸いです。

では、最後まで読んで頂けたならありがとございます。

See you next...(´∀｀*)ﾉｼ

アメブロカレンダーをちょこっとカスタマイズしてみたよ(・ω・)

サイドバーにあるカレンダーの列の背景色を変更しようと思って作成したものです。

以下の画像の感じとなります。



日曜日と土曜日の列の背景色を変更するために、jQueryを使用して必要となる要素を追加します。
下記に記述しているコードを「プラグインの追加」から「フリープラグイン」を選択し、下記コードを追加します。
jQueryが必要となりますので、そんなもの使ってないって人は、本体のコードもコピペしてください。

また、CSSも編集しますので、CSSが編集できるテンプレートでのみ可能です。

jQuery本体のコード
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
※すでに他のスクリプトで導入している場合は、上記コードは不用です。


追加のコード【JavaScript】

<script>
$(function(){
  function colColor() {
    var cal = [
      '<col class="sun">',
      '<col class="mon">',
      '<col class="tue">',
      '<col class="wed">',
      '<col class="thu">',
      '<col class="fri">',
      '<col class="sat">',
    ];
    var r = 0;
    html = '';
    while(r<cal.length) {
      html += cal[r];
      r++;
    }
    $('.calendar').find('table').prepend(html);
  }

  colColor();
});
</script>

追加のCSSコード【CSS】
「background: 値」と「color: 値」
※値＝お好みの色に変更してください。
例）#ff0000　＝　赤

/* カレンダー */
.calendar td a {
	display: block;
	width: 100%;
	height: 100%;
	background: #1ABC9C;
	color: #ffffff;
}
.calendar td a:hover {
	color: #ff3366;
}
.calendar .sun {
	color: #ff0000;
	background: #ffd9ea;
}
.calendar .sat {
	color: #305aff;
	background: #d0efff;
}

アメブロカスタマイズ

昨日書いた事から脱線してるかもしれませんが、当ブログのカスタマイズを行ってみました。

やったこととしては、ヘッダー（タイトルがある部分）にクロスフェードスクリプトを組み込んで
ビジュアルを整えて見ました。

CSSでヘッダー周りを弄っていたのですが、サイズやら細かい部分が変更できなかったので、
JavaScriptで強制的にサイズなどを変更できるようにしました(｀・ω・)


あとは記事一覧の上にあるボタンの画像も変更しました。

デザインに関しては、フラットな感じでポップなカラーに仕上げてみました。
ただし、フラットデザインとは全く異なります。

どうも( ´∀｀)＜ぬるぽんです

初めての方は初めまして(・∀・)
(／´∀｀)／ぬるぽんです＼(´∀｀＼)

私はWEBデザイナーをしていますが、プロではありません！
独学で養ったことを記事にして残していこうといった目的でブログを始めてみました(´・ω・)ゝ

サブタイにも書いておりますが、HTML以外にもCSSとJavaScript（jQuery含む）も綴っていけたらた思います。
たまにJavaScriptでツールを作ったりもしています。
また、jQuery用のプラグインの制作もしていますが、未熟なコードなのでちょいと厳しいものもあります(´・ω・｀)ｻｰｾﾝ

便利かなと思ったものは配信していくつもりです(｀・ω・´)

もしかするとWordPressに関する記事もでちゃうかも知れません。

ではでは、初心者さん向けのHTMLの記事を書いていけるようにしていきます！