Category Archives

5 Articles

今頃、レスポンシブデザインに(汗)

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

http://flavor-design.biz

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

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

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

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

下記メモです。

[html]
<?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; ?>
[/html]

[html]
<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"/>
[/html]

スマホで閲覧時【のみ】タップで電話をかける設定

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

実装はjquery にて。

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

内に

[html]
<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>
[/html]

同HTML内で複数のjQueryを設置する方法

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

まずは、動かない例。
[html]
<!– 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>
[/html]

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

[html]
<!– 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>
[/html]

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

WordPressのContact Form 7で確認ページを

by admin 0 Comments

WordPressで、お問い合わせフォームなどを簡単に作ってくれるプラグイン【Contact Form 7】
これをいつも愛用してるのですが、確認ページは、ありません。
実際、なくても、それほど問題もなく、今まで過ぎてきたわけで。
でも、今回どうしても確認ページが欲しいとのご要望が…

いろいろやってみて、このjQuery プラグインを利用することで、
Contact Form 7 で設置したお問い合わせメールフォーム画面に一応「確認画面」を挟むことができました。

参考サイトは、こちらです。

こちらのページから、jQueryプラグインをダウンロード。

ダウンロードした jquery.wpcf7.confirm.js を、jquery フォイルと一緒に wp-content/themes/ 内のheader.php 内に設置します。

[html]
<script type="text/javascript" src="<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.js"></script>
<script type=’text/javascript’ src='<?php bloginfo( ‘stylesheet_directory’ ); ?>/js/jquery.wpcf7.confirm.js’></script>
[/html]