ウィルス?!

サイト作成をある程度手がけていると、やはり何らかのウィルスに狙われるサイトも出てて来るようです。

定期点検で、何か不具合が無いか、ブラウザーの表示の崩れが無いかなどをザッと見て回るのですが、
なんと「バックドア(裏口)を開ける」というモノを見つけました。

「exploit_protector_fifam」 というモノが出てきました。
検索してみてもロシア語のサイトが200ほど出てくるだけで正体が良くわからないというのが今のところなのですが、こんなものはサイトに入れた覚えが無い。
ちなみに「exploit」とは、wikiへ

どこから侵入したのか不明ですが、お客様が自分でサイトの管理をしたいとう要望があり、WordPressで作成し記事投稿のやり方を教えていた会社のサイトでした。
サイバー攻撃の拠点として利用されていた可能性はあります。
早速、連絡してログインパスワードの変更など対策をお話しました。

CSS3.0 をモノにせよ。こりゃ便利!プロパティージェネレータ

CSS3.0 の必殺技(グラデーション、BOXシャドウ、テキストシャドウ、角丸)、クロスブラウザー対策なんかも出てくるので 覚えるの大変と思ってたら、便利なものを作ってくれている人がいるんですね~
スゴイです。
http://css-eblog.com/eblog_sample/0912/css3-generator/
JavaScript とあわせてクロスブラウザー対策するのがいいですね。

他にも
http://css3.mikeplate.com/

そういえば、IEは、9でもグラデーションに対応しておらず、Filterを使ったグラデーションだと、角丸を組み合わせると両立しないようです。
IE9より低いバージョンはJavaScript で対応可能なのですが、IE9対策用のJavaScriptがあるかもしれませんが探しきれていません。

「角の丸いブロックでグラデーションのモノはIE9では作れない」ということです。

要注意です。

“box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。

box-shadow: 10px 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

影は2~4つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。 insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。 長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。 複数の影を指定する場合には、カンマ( , )区切りで影のリストを複数指定します。

影を定義する指定内容は、以下のように解釈されます。
•1番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
•2番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
•3番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
•4番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
•色の値を指定すると、影がその色になります。
•insetキーワードを指定すると、ボックスの外側の影から内側の影に変更されます。

尚、box-shadowプロパティは、::first-letter擬似要素に適用されますが、::first-line擬似要素には適用されません。 また、border-collapse:collapse;が指定されたtable内要素には、外側の影はつきません。

テキストに影をつける場合には、text-shadowプロパティを使用します。

■値

none要素に影をつけない(初期値)水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetスペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可”

参考:
http://blog.ethertank.jp/2010/03/27-11:46:49

投稿フォーマット

wordpressのバージョンアップに伴って追加された「投稿フォーマット」を使いたくてメモしている投稿です。

Function.php のセットアップ関数部分に以下の記述を追加


add_theme_support( 'post-formats', array( 'aside', 'chat', 
'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio' ) ); 

全部の項目はいらないと思います。


add_theme_support( 'post-formats', array( 'aside', 'gallery', 
'image', 'link', 'quote', 'video', 'audio' ) ); 

こんなところでしょうか。audioもいらないかも知れません。音楽好きなので残しています。

そうすると、記事の投稿画面に、フォーマットという選択BOXが表示されます。
そこで選んだものが、投稿記事を包むタグ(article です)にクラスメイトして「format-****」と付与されます。

例:$lt;artcle class="post-1 format-image" $gt;

CSSだけの操作で表示をコントロールすれば良い場合は、任意の操作を、CSSファイルに書き込むという事になります。。

参照ここ(http://www.mrta26.com/2011/01/20/wordpress-3-1-post-formats/)

角丸 border-radius

CSS3.0 で登場の角丸、border-radius
もちろんIE対応に苦労するわけで・・・・
対策は、いろいろ方法画あるようで・・・
備忘の為、記載してゆきます。

JQueryでの対応が一番簡単かも
1.jquery.corner.js.の場合(角丸以外も出来て面白そうです)
http://www.malsup.com/jquery/corner/
使い方の説明は上記のサイトにありますが、

基本は、$(this).corner("30px");これ
例:idがBOXの要素を5pxで角丸の場合 ↓↓↓↓↓↓↓
<script type="text/javascript">  $(´#box´).corner("5px");</script>
もちろん先にjsを読み込んでおく必要があります。(コピペできるように載せときます)
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="js/jquery.corner.js"></script>

そうそうもちろんCSSも


.クラス名{  
    border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
   -moz-border-radius: 10px;   /* Firefox用 */  
} 

右上、左上、右下、左下


-webkit-border-top-left-radius:  
-webkit-border-top-right-radius:  
-webkit-border-bottom-right-radius:  
-webkit-border-bottom-left-radius:  
-moz-border-radius-topleft:  
-moz-border-radius-topright:  
-moz-border-radius-bottomright:  
-moz-border-radius-bottomleft:  

普通の指定


border-top-left-radius: 55pt 25pt
border-top-left-radius  
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

参照:http://www.w3.org/TR/css3-background/#the-border-radius

IE9対策(自動後方互換には、これを記述すべし meta あわせてハック

IE9で対応のはずの、CSS3.0が出来ないと思っていたら、勝手に後方互換するらしい。
head部分に


<meta http-equiv="X-UA-Compatible" content="IE=9" />

これを書き込めば、自動の後方互換を切れるらしい。とりあえず書いとく必要がありそうです。

IEはいろんなところで時間を取らせるブラウザーです。

参照

IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。

1.IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック

以下の順番でプロパティおよびセレクタを記述してください。
body {
color: red; /* all browsers, of course */
color: green¥9; /* IE8 and below */
*color: yellow; /* IE7 and below */
_color: orange; /* IE6 */
}
body:not(:target) {
color: black¥9; /* IE9 */
}
•IE6:値の先頭にアンダースコア「_」を付与
•IE7:値の先頭にアスタリスク「*」を付与
•IE8:値の末尾に「¥9」を付与
•IE9:セレクタの末尾に「:not(:target)」を付与+値の末尾に「¥9」を付与

ある作業で必要に迫られて集めたもので、CSSハックを推奨する記事ではありません。

中央寄せ

基本中の基本なのですが、あれどうやったかな~と一瞬思い出すまでに時間がかかるので備忘の為掲載。

CSSによるセンタリング。
・インライン要素は、text-algn:center
・ブロック要素は、; margin:auto widthの設定忘れないように
を使うのは必須。
忘れがちなのはこれ → ブロック要素中のブロックのセンタリング

方法1:
子ブロックに position:absolute; left:50%; を設定
忘れずwidthを具体的なpxで設定して、その半分のpxで、margin-left
高さも中央にする時は、top:50%; margin-top を半分の大きさで

方法2:これでも出来るというだけでオススはしません。
親ブロックのCSSに、text-align:center 縦も中央の場合は、vertical-align:middle
を設定して、子ブロック(中央寄せしたいブロック)に; margin:autoを設定。

ちょっとややこしい。触っていないとあれ?となるよね~

ちなみに、IE6はバグで、text-align:centerでブロック要素もセンタリングできるとか・・・・

参考サイト

Html5とスタイルシートのリセットCSS

Html5が言われてずいぶんと経ちますが、PC向けサイトよりいち早くスマートフォンサイトでは、Html5+CSS3.0でというのが定番ではないでしょうか。
しかし、スマートフォンのブラウザーのバージョンによっては、Html5に対応していなかったりするようで(iPhone3.2)、PC向けサイトだと、まだまだこれからではないでしょうか。
少し古い記事ですがリセットCSSの記事があったので掲載しておきます。

参照サイト http://html5doctor.com/ より

HTML5 Reset Stylesheet
Monday, July 27th, 2009 by Richard Clark.

We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.

The code

Let’s start with the complete CSS stylesheet:

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark – http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:”;
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

So what’s new?

Quite a bit! The next few sections explain what I changed and why I changed it.

The basics

I started by removing elements that have been deprecated from the HTML 5 specification, like ,

and . (We’ll cover deprecated elements in more detail in another post). I also added new HTML 5 elements, like and, in order to remove any default padding, margin, and borders. I’ve also added an explicit display:block property for elements that are required to render as blocks.

I also removed the explicit unstyling of the :focus pseudo-class. There are two reasons for this. First, by declaring outline:0, you remove the focus identifier for keyboard users. Second, Eric released his stylesheet in good faith that people would explicitly style :focus, but they generally don’t, so it’s safer to leave the default :focus styles in place. (I also set defaults for , since I don’t think that got updated very often either.)

I’ve left the default list styles in place simply as a personal preference. I tend to add the list style back when using Eric’s reset anyway. I have, however, included nav ul {list-style:none;} to remove those pesky bullets from your navigation.

Using attribute selectors

You’ll notice that I’ve included attribute selectors for and . This way, the style will only appear if there is a title attribute on the element. This is primarily for accessibility. For example, we use regularly on this site but don’t always include a title attribute. We think it’s safe to assume all of our readers (no matter what device they’re using) know what HTML stands for. We do still use the element to make sure screen readers read the text as H-T-M-L rather than struggling to pronounce “HTML”.

What’s that bit about mark?

is a new element introduced in HTML 5 used to (you guessed it) mark text in a document. According to the spec: ““The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.””. I anticipate it will be used for highlighting phrases in search results and other similar purposes. We’ll post more on soon.

Where are all those application elements?

Application elements is a term I’ve loosely used to describe elements like menu, etc. These elements are more likely found in web apps than web sites. I left these out since, at the time of writing, browsers implement barely any of what was “Web Applications 1.0″. Also, this stylesheet is intended primarily for authors serving their pages as text/html, not XML.

Go grab it

The stylesheet is released under a Creative Commons license in the public domain, so you can use it for both personal and commercial work. I thought I’d let Google take care of the hosting, so go grab it from Google Code and let us know about any improvements you make!

長い引用でしたが、html5 としてのポイントは、「新しいタグが対応していないブラウザーだとブロック要素として認識しない」という点で、

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

特にこの部分が重要だと思われます。

—————–追記 旧IE対策でこれをヘッドに書いておく ————————
Googgleさんから、IE9.js を読み込んでます。
詳細: https://code.google.com/p/ie7-js/

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<![endif]-->
1 / 3123