Category Archives: Webなこと

今頃なんですが、FlavorDesignのサイトをレスポンシブ化しました。

http://flavor-design.biz

自分のサイトって、真っ先にやれよという感じなんですが、
結局後回しにして、ここまで…汗

…といっても、作り直す余裕はなくて、既存のサイトに、モバイル用のCSSを追加しただけです。
手抜きすぎますが、タブレット用は、PC用と同じものを見せることにしました。

style.cssをコピーして、mobile.cssを作り、
検索置換で、横幅を100%にしたり、フロートを解除したりしてから、表示を調整。

当時、グローバルナビを背景画像でだしてあったので、そこが面倒でしたが、
カスタムメニューを使って、テキストに変更。
jQueryプラグイン「MeanMenu」を使って、スマホ用折りたたみメニューを。

下記メモです。

<?php if (is_mymobile()):?>
<!-- ↓スマートフォン用のviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ↑スマートフォン用のviewport -->
<?php else: ?>
<!-- ↓スマートフォン以外のviewport -->
<meta content="width=1024" name="viewport">
<!-- ↑スマートフォン以外のviewport -->
<?php endif; ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link media="only screen and (min-width: 0px) and (max-width: 480px)" href="<?php bloginfo( 'stylesheet_directory' ); ?>/mobile.css" type="text/css" rel="stylesheet"/>

最近は、li要素を横並びにするときに、
display:inline-block;
をよく使うように。

ネットショップなどで、商品を並べるときに、
高さが違っても崩れないから便利。

その時にできてしまう隙間を消す方法。
liを横並びにした場合のメモ。

ul {font-size:0px;}

3年くらいサイト放置されてた会社さんの御依頼で、
WordPressをバージョンアップした際の不具合。
いろいろ検索して、対応策を発見。

原因は、テーマのfunction.phpの中に、
1つでも下記のような書き方があると、
メディアライブラリの画像が表示されなくなるということ。

<?php //処理 ?>

<?php //処理 ?>

上記を下記に変更で、解決です。

<?php //処理 ?>
<?php //処理 ?>

ヘッダーによくある電話番号画像で、
スマホで見た時だけ、電話番号をタップしたら電話がかかるようにする。
パソコンなどのときは、リンクエラーになるので、リンクさせたくない。

実装はjquery にて。

<img src="img/tel.png" alt="0120000000" class="tel">

内に

<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	var device = navigator.userAgent;
	if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
		$(".tel").wrap('<a href="tel:0120000000"></a>');
	}
});
</script>

レスポンシブデザインのサイトをいかに効率良く制作するか…
最近の課題のひとつでもあったので、出かけてきた。
『10倍ラクするIllustrator仕事術』出版記念セミナー in 福井 powered by CSS Nite

『10倍ラクするIllustrator仕事術』

『10倍ラクするIllustrator仕事術』

『10倍ラクするIllustrator仕事術』

『10倍ラクするIllustrator仕事術』


講師の鷹野さん(from東京)とは、お久しぶり。
10年前にこの仕事を始めた頃は、大変お世話になった。
相変わらず、わかりやすい話し方。
日頃の作業で、気になってる内容が、どんどん出てきてた。

久しぶりに良いセミナーに参加できて、ホント良かった〜!
ありがとうございました。

(今回は、こちらの本の発売記念ツアーだそうです)

float:leftで右マージン20pxで並べたとき、
一番右のボックスは、右マージンいらないというCSSメモ。
 

#home02_box {
	width: 890px;
	overflow: hidden;
}
#home02_box ul {
	margin-right: -20px;
	width: 910px;
}
#home02_box ul li {
	width: 435px;
	margin-right:20px;
}

熱はないけど、喉の痛みがひどくて、本日のマルシェワンダーランド行きを断念。
1日おとなしく、おうちで家事&お仕事することに。しょぼん。
でも、家族はみんな留守だから、キママに過ごそう日曜日。

今日は、2件のメモ。

最近、最初からレスポンシブデザインで制作することが多いけど、そうじゃない場合。
PCでは気づかないんだけど、スマホなどで見ると、背景が切れてしまう件。
背景画像をXにリピートしたときなどにそうなる。

背景を指定してあるdivは、もちろん width:100%に指定してあっても、
その内側のdivに固定サイズの900pxなどを指定している場合。
横幅900px以下のブラウザで閲覧すると、背景が切れてしまう。

解決方法は、背景をしているdivに、
min-width:900px; を指定。
その外側のdivがある場合は、そちらで解決もあり。

もうひとつ。
スマホ等で、PCサイトを見たときに、画面幅=コンテンツ幅では、ちとみにくい。
そんなときは、こちら。
ビューポートの設定で、コンテンツ幅が960pxのとき、例えば…

<meta name="viewport" content="width=1000,user-scalable=yes,maximum-scale=1.0">

content=”width=1000の値を、実際のコンテンツ幅より、広く指定すると、
とりあえず、見やすくなる。

お仕事メモ。
よくぶつかる課題。
複数設置すると、どれかが動かなくなるという件。

まずは、動かない例。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="Scripts/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="Scripts/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
	$('#slider2').bxSlider({
		auto:true,
		speed:1000,
		mode: 'fade',
		captions: true
	});
});</script>

<!-- jcarousel用 -->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

<!-- jcarousel -->
<script type="text/javascript" src="Scripts/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/skin.css" />
<script type="text/javascript">


function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });


    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });


    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll: 1,
     auto: 2,
        wrap: 'circular',
        initCallback: mycarousel_initCallback
    });
});
</script>

↓こちらで、解決。
読み込み順を変えるのだけども、かなり時間かかってもた。

<!-- jcarousel用 -->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="Scripts/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="Scripts/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
	$('#slider2').bxSlider({
		auto:true,
		speed:1000,
		mode: 'fade',
		captions: true
	});
});</script>

<!-- jcarousel -->
<script type="text/javascript" src="Scripts/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/skin.css" />
<script type="text/javascript">


function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });


    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });


    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll: 1,
     auto: 2,
        wrap: 'circular',
        initCallback: mycarousel_initCallback
    });
});
</script>

明日もこぴっと頑張れし!

先日の勉強会で知り合った岡本さんから、著書の【イラストでよくわかるPHP】が届いた。
可愛いので、私でもやる気が出る感じ。ありがとうございます!

イラストでよくわかるPHP

イラストでよくわかるPHP

昨日は、病院の日で、何気に疲れ果てたところ、
本日、届いたプレゼントで、ちょっと戻ってきました。
感謝!

Amazonはこちらから↓

模倣サイト

模倣サイト


こちらからどうぞ。

本家はこちら

よくここまで、やるなー
まー間違って買う人はいないと思うけど、ご注意ください。