see more 2013-03 - ponnao-clip

Home > アーカイブ > 2013-03

2013-03

今まで何度か使わせてもらってる、メイン画像に説明テキスト&リンクが入り、右サイドに小さめ画像とテキストがハイライトされるスライダーのカスタマイズメモです。

参考

jQueryでかっこいいイメージスライダー! | うぇぶこん-Web Concourse-

設置サンプル

Create Featured Content Slider Using jQuery UI

設置方法

以下をの直前へ。head中でもよいですが。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>

以下をお手元のCSS内に記述します。それか専用のCSSを一つ作っちゃうか。
画像の大きさや設定などはよきにはからってください。

#featured{
	width:710px;
	padding-right:250px;
	position:relative;
	height:250px;
	background:#fff;
	margin-bottom: 30px;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0;
	list-style:none;
	padding:0;
	margin:0;
	width:350px;
	left: 610px;
}
#featured ul.ui-tabs-nav li{ 
	padding:1px 0; padding-left:13px;  
	font-size:12px; 
	color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
	float:left; margin:2px 5px; 
	background:#fff; 
	padding:2px; 
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
	font-size:11px; font-family:Verdana; 
	line-height:18px; 
}
#featured li.ui-tabs-nav-item a{ 
	display:block; 
	height:60px; 
	color:#333;  background:#fff; 
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
	background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
	background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
	background:#ccc; 
}
#featured .ui-tabs-panel{
	width:600px;
	height:250px;
	background:#999;
	position:relative;
}
#featured .ui-tabs-panel .info{ 
	position:absolute; 
	top:180px; left:0; 
	height:70px; 
	background: url('../images/transparent-bg.png'); 
}
#featured .info h2{
	font-size:18px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	color:#fff;
	padding:5px;
	margin:0;
	overflow:hidden;
}
#featured .info p{ 
	margin:0 5px; 
	font-family:Verdana; font-size:11px; 
	line-height:15px; color:#f0f0f0;
}
#featured .info a{ 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover{ 
	text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}

今回縦並びのヘッダーナビを画像をliタグで挟む形をとったのですが、
chromeで画像の間に微妙な空きができました。

<ul id="headernavi">
<li><a href="#"><img src="images/headernavi01.png"></a></li>
<li><a href="#"><img src="images/custom/headernavi02.png"></a></li>
<li><a href="#"><img src="images/headernavi03.png"></a></li>
</ul>

おなじみのimgにvertical-align:bottom;を指定する方法をとったのですが、うまくいかないー(´・ω・`;)

原因は書き方にあったようで、imgの前にul、liタグを付けてしまうと
うまく反映されなかった。

× #headnavi ul li img

◯ #headnavi img

直接叱らないとダメと覚えよう(A´Д`;)

参考
liやdt、ddなどで画像を縦に並べたときの隙間を無くす – CSSテクニック – acky info

何かの時に役に立つかなぁと思ひ。

503エラーって!?起こる原因と対処方法 – Web Directors Studio

【参考】主なウェブサーバーエラー番号一覧

400Bad Request不正リクエスト
リクエストは不正な構文であるために、サーバーに理解されなかった。打ち込んだURLに変な間違いがあった時など。

401Unauthorized許可なし
リクエストは、ユーザー認証を必要とする。認証に失敗した時など。

403Forbiddenアクセス拒否
サーバーはリクエストを理解したが、そのリクエストの実行を拒否した。アクセス権限がない時など。

404Not Found存在不明
サーバーは、リクエストURLと一致するものを見つけられなかった。アドレスが無くなった時など。

500Internal Server Errorサーバー内部エラー
サーバーリクエストの実行を妨げる予期しない状況に遭遇した。 CGIスクリプト・エラーなど。

503Service Unavailableサービス利用不可
サーバーはサーバーの一時的な過負荷あるいはメンテナンスのために、現在、リクエストを扱うことができない。

今回使い比べてみましたが、
元々色ベースを決めてて、それに合う色配色を探す場合だったらkularが便利かな。
意外な組み合わせが見れます。

類似色を探すなら、Color Scheme Designerかもね。

デザイナーの私が色選択に迷った時に使用している配色ツール・カラーチャートなどのまとめ | OZPAの表4

kuler

Color Scheme Designer 3

ウェブ配色ツール Ver2.0

WebクリエイターボックスのmanaさんとStocker.jpさんのやりとりがおもしろかったので、記事をまとめました。

世界のWebデザイナーのお給料はいかほど? | Webクリエイターボックス

世界のWebデザイナーの年収についてのやりとりまとめ – Togetter

うわっ、日本のWebデザイナーの年収、低すぎ…? | Stocker.jp / diary

この記事を読みまして、思ってたより低いなとは思った。まぁ格差はあるだろうけど。
私は地方デザイナー&フリー稼業なので、拘束時間が短い割(つか、自由時間が結構あるw)割には貰えてる方?とは思いました。

個人的には、この「デザイン」という言葉が曲者なんだと思う。
日本では絵を描ける人みたいな感じで軽く浸透してる部分があるけど、本来の意味は「設計」だから。だから海外では、デザイナー=「設計」出来る人という意味合いで、全体的に仕事を設計できるハイレベルな人しか「デザイナー」とは呼べないよ。みたいな図式なんだと思う。

これとは逆に日本はデジタルクリエイターやIT系に関して、ちょっと鍛錬させれば誰でもできるみたいな感覚は確かにあるなぁと。

海外でいうところのハイレベルな「Webデザイナー」になるべく、個々人が技術を鍛錬することが、社会全体に認めさせるための近道なのかね。がんばります( ´∀`)

かなり古い記事だけど、小粋さんの記事が一番わかりやすくまとめられてるんじゃないでしょうかね。
小粋空間: WordPress における日付/時間の表示とフォーマット変更方法
よく使われるものが抜粋された「5.フォーマット文字一覧」がとても見やすくありがたいです。

20130516追記 決定版は「Y-m-d」じゃね!?

今回日付の表記で試行錯誤してて思ったのですが、
日付とタイトルを並べて記述する場合に

月日を入れると
2013年4月9日 記事タイトル
2013年3月29日 記事タイトル
2013年12月19日 記事タイトル

こういう風に揃わなくてモヤモヤするし(;´Д`)
揃えるのにはCSSも駆使しなきゃいけなくてめんどいので、
特に指定がなくデザイン的に問題ない場合は、

「Y-m-d」でいいんでないかと!

2013-04-09 記事タイトル
2013-03-29 記事タイトル
2013-02-19 記事タイトル

ほら、スッキリ(爆)

このブログの右上の検索窓を他のブログにも移植しようとカスタマイズしてたところ、検索窓の右側と右下にヘンな白余白があることに気が付きました。
今まで背景が白だったので気が付かなかった。

こんな感じで。

transparentで指定すると白い部分がなくなります。

input.search_input {
background-color: transparent;
}

がっ、IEだとfocus枠がその分だけ大きくなってます。(focus枠はvicunaの仕様)
これはどうしても直せなかった。いつか絶対直してやる~。

煙霧など 低気圧と前線の影響 NHKニュース

この日経の記事が一番納得いったかな。現場ではやっぱり対応に追われていた模様(ーー;
黄砂は山梨までは飛んでいたようですが、それ以南は来てないらしい。

関東で大騒ぎになった「視界不良」 黄砂と煙霧どこが違う?  :日本経済新聞

この「煙霧」。昨日から今日にかけて、その意味や黄砂との違いについて、気象庁の天気相談所にも問い合わせが相次ぎ、職員の皆さんは休む間もなく対応に当たったそうです。

 「煙霧」は天気の一種です。日本の天気は国内用に15種類に分けられていますが、「煙霧」は「晴れ」や「雪」と同様天気を表す言葉なのです。15種類の中には、皆さんがよく聞く「快晴」「晴れ」「霧」といった言葉や、「砂じん嵐」などあまり耳にしない言葉もあります。「煙霧」はその一つで、「晴れ」や「雪」と同様「天気」なんですね。

 煙霧の定義は「肉眼では見えないごく小さい乾いた粒子が大気中に浮遊して視程が10キロ未満の状態」とされています。「ごく小さい乾いた粒子」には、海塩粒子なども含まれるため、強風の海辺で、上空は青空なのに水平方向は白っぽく霞んでいるときも「煙霧」となります。波しぶきが蒸発して塩分が空気中に漂って視界を悪くしているのです。

 煙霧を通すと太陽光は黄色みを帯びたり赤っぽい色に見えたりするため、「黄砂では?」と思われますが、黄砂と煙霧は別のものとして扱われます。明らかに「大陸の黄土地帯などが発生源」と断定されるものが「黄砂」ですが、発生源や浮遊しているものが特定できない場合は「煙霧」になります。「黄砂」は先ほど紹介した15種類の「天気」ではありません。「煙霧」と呼ぶ現象の一部が、その発生源によっては、「黄砂」と呼ばれ、区別されるのです。

東京の空が黄色くなってネット上でお祭り騒ぎ … 気象庁は「煙霧」と発表するも、一部ワイドショーでは「黄砂の可能性」 : にわか日報

330:名無しさん@13周年:2013/03/11(月) 09:24:08.88 ID:AQxHhzQ80
「黄砂」を物資名として使っている人と
「黄砂」を現象名として使っている人がいるから
ややこしくなっている

「中国から黄砂が飛んでくる現象」ではないから
これは黄砂じゃない!黄砂じゃない!無知め!素人め!
と、なぜか急に怒り出す人がツイッターにいたが

普通の人は
「空が黄色いし、砂っぽいし、実際、黄砂混ざってるから、これ黄砂だよね」
と、反応するのは当然だろう

これは黄砂じゃないの!黄砂じゃない!ムキー!黄砂って言うな!
と怒り出すのが理解出来なかったし実際浮いてた

304:名無しさん@13周年:2013/03/11(月) 09:16:40.30 ID:6C1PawerP
つまりPM2もいっぱい含まれる煙霧。

煙霧自体は関東の郊外では散発的によく見られる。(関東ローム層の田園地域)
黄色いのは畑土が乾燥したりスギ花粉が混じった色。
PM2は福一や日中の公害物質のまいあがりが由来と思われる。
黄砂がそのまま煙霧になったのではない。

Home > アーカイブ > 2013-03

MESSAGE
3月11日の東北地方太平洋地震で
被災された方、親しい方が被災された方に、
心よりお見舞いを申し上げるとともに、
被災地の一日も早い復興を
心よりお祈りいたしております。
PROFILE

横浜在住。
横須賀でWeb制作の仕事をしている
へっぽこ兼業主婦です。
ガチャピン似。


A RELATED SITE
くまのがっこうブログパーツ
TODAY’S COLOPLA COLONY
FAVORITE SHOP
RECOMMEND COMIC
【送料無料】しろくまカフェメロン味!

【送料無料】しろくまカフェメロン味!
価格:680円(税込、送料別)

【送料無料】なのはな

【送料無料】なのはな
価格:1,200円(税込、送料別)

【送料無料】昭和元禄落語心中(1)

【送料無料】昭和元禄落語心中(1)
価格:590円(税込、送料別)

【送料無料】テルマエ・ロマエ(4)

【送料無料】テルマエ・ロマエ(4)
価格:714円(税込、送料別)

TWITTER
POPULAR ENTRY
BOOKLOG

PONNAO’S RAKUTEN FAVORITE

YOUR’S RAKUTEN FAVORITE

Return to page top