shirasakaBLOG

このブログ、週末で思いっきりリデザインしました。
割と思い切ったレイアウトになりましたが、後悔はしてません。

↑大きな画像も貼れちゃうよ！

リデザインするに至った経緯というか、理由は2つあります。

01.前僕が使用していたテンプレートのブログをよく見るようになった

WordPressは無料で使えるテンプレートが星の数ほどあるのですが、星の数ほどあるため、テンプレートがひとと余りかぶりにくい、という利点があります。しかし、最近まわりで同じデザインのブログをよく見るようになってきました。このままではオリジナリティがなくなってしまう！（ひとのデザイン使ってるくせにオリジナリティもなにも無いのですが）と思ったのでした。
前使ってたテーマは、これ↓
WordPress › ChocoTheme « Free WordPress Themes

02.横幅可変のブログに挑戦してみたかった

横幅可変、というのは、ウィンドウサイズに応じて横幅が変わるレイアウトのことです。横幅可変のウェブサイトは、少し前に若干もてはやされてたのですが、実用的じゃないとかの理由ですっかり廃れてしまいました。でも、個人的には結構好みということもあって、自分のブログで一度やってみよう、という流れでございます。

新しい試み

今回新しい試みで追加したのは以下のとおり。
・nanapi [ナナピ] | みんなで作る暮らしのレシピのようなヘッダー固定スタイル
・カイ士伝のようなブログタイトルの隣にひとことネタ
・Gizmodo, the Gadget Guideのようなサイドバー固定スタイル
・크로파랑투의 지구별 달콤고양이 :: 네이버 블로그のような大きい画像を表示できちゃうスタイル

まだまだ改善の余地はあるのでこれからちょこちょこ手を加えていきますが、とりあえずはリニューアルのご報告まで。

CSS3のanimationプロパティ使うと、なんでも点滅させることができます！
（現在、Chrome3以降、Safari4以降でしかサポートされていません）

とりあえず、CSSファイルに、下記ソースをコピペしてみましょう。

@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.8;/*透明度80%*/
 }
}
.blinking{
-webkit-animation-name: pulse;/* 実行する名前 */
-webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */
-webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

 
あとは、html内の点滅させたいタグに、class=”blinking”を追加するだけです！
上の例でいうと、透明度100％と80％間を0.3秒間隔で、いったりきたりします。

class=”blinking” を追加するだけなので、いろんなものを点滅させることができますよ！

<div class="blinking">ふつうの文字も</div>

<div class="blinking"><a href="#">リンクの文字も</a></div>

 
画像も！

<div class="blinking"><img src="/wp-content/uploads/2010/05/sho_icon_normal.png"  /></div>

 
animationプロパティ未対応ブラウザでは、
点滅されずに普通に表示されるだけになります。

時間や透明度など、数値を変えるだけで色々雰囲気の違う
アクションをさせることができますよ！　ぜひお試しください！

文字を選択したときの、背景色って、
普通はブルーですよね？

デフォルトだとこんなかんじです。

この背景色を、変更するCSSをご紹介します。

/*反転時の文字色・背景色 */
::selection {
background: #F8E6AF;　　/* 背景色*/
color:#666666;　　/* 文字色*/
}
/* Firefox対応*/
::-moz-selection {
background: #F8E6AF;　　/* 背景色*/
color:#666666; 　　/* 文字色*/
}

 
CSS3をサポートしたブラウザ以外は無視されます。
IEとかIEとか、あとIEとかでは見れないので、気をつけてください。（あと、IEもネ！）

早速、このブログにも導入してみました。

うん、イイかんじ！
上の赤字の部分をコピーして、CSSに追加すれだけで反映されるので、
ブログ等にも簡単に導入できます。ぜひ、試してみてください！