AGN Web! - AGN Web! BLOG

カタログから物撮りを”作る”

まず、ほとんど「ありえない」事があった時に役立つであろう
「イレギュラーな注文へ答える」ための記事です。

商品を掲載する際に、『品物が手元にない』『生産中で製品が１つもない』…などなど、写真が用意できなくて困る事があります。
そんな時に、掲載に耐えられるようなサイズのカタログなどの原稿があれば何とか…何とかしましょう!!

続きを読むカタログから物撮りを”作る”

制作事例　ヤマザキライス様

■コンテンツ追加とプチリニューアル

クライアント名：ヤマザキライス様

URL：http://www.yamazaki-rice.com/

制作内容：

メインビジュアルをスライダーから背景動画に変更しました。
ドローンで撮影した動画をご提供いただきました。
※弊社撮影ではありません。弊社へドローンの撮影をご希望される場合はこちらをご覧ください。

また、あらたな取り組みにチャレンジされるとのことでコンテンツの追加をいたしました。

制作事例　社会福祉法人わかば福祉会様

ãã£ããã£2

新発田市を中心に幼稚園と保育園を展開している法人様です。
2016年4月1日にオープンした新しい認定こども園です。

公開　2016年4月25日
URL　http://www.wakaba-net.ed.jp/aoba/
●制作内容
・わかば福祉会としてのデザインの統一
・CMSの導入

制作事例　社会福祉法人わかば福祉会様

ãã£ããã£

新発田市を中心に幼稚園と保育園を展開している法人様です。
2016年4月1日にオープンした新しい保育園です。

公開　2016年4月25日
URL　http://www.wakaba-net.ed.jp/konoha/
●制作内容
・わかば福祉会としてのデザインの統一
・CMSの導入

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】

以前書いたslickの記事が比較的に読んでいただけているようなので、調子に乗ってもう一つ書きます。

前回記事
レスポンシブWebデザインに対応！Slick.jsを使ってスライドのサムネイルの位置を切り替える

現在(2016年4月)弊社では求人を募集していまして、求人ページを作った時に使ったパターンです。
→　この個所(INTERVIEW)です

今回はカルーセルスライダーで、真ん中の写真だけちょっと拡大させて見せるやつです。
カルーセルスライダーでたくさん写真があるぞっていうのを示しておいて、その中でウェイトを付けてあげることで目を引いてもらうパターンですね。
公式のサンプルの中のセンターモードで紹介されているやつ何ですが、普通にセンターモードにするだけだとこうならないし、特に公式では拡大させる方法が紹介されていないんですよね。※見つけられていないだけかもしれません…

ということで求人ページのやつをもう少しシンプルにしたデモを作ってみました。

【DEMO】

HTML

<div class="slider container">
    <div class="slider-for">
        <div class="slide-item"><img src="images/160423/01.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/02.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/03.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/04.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/05.jpg" alt=""></div>
    </div> 
</div>

</div>

.containerはmax-width： 960px;で画面のセンターに寄せている、個人的に使っているクラスなので無視してください。
あとは比較的普通です。

Javascript

$(window).load(function(){
    $('.slider-for').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        centerMode: true,
        infinite: true,
        autoplay: true,
        centerPadding: '100px',
        arrows: false,
        responsive: [                    
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '0px',
                    slidesToShow: 1
                }
            }
        ]
    });

    // ナビゲーション用
    $('.slick-dots').find('li').eq(0).addClass('slick-current');
    // On before slide change
    $('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){     
        $('.slick-dots').find('li').removeClass('slick-current');
        $('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');
    });
});

$(window).load(function(){

$('.slider-for').slick({

slidesToShow: 3,

slidesToScroll: 1,

dots: true,

centerMode: true,

infinite: true,

autoplay: true,

centerPadding: '100px',

arrows: false,

responsive: [

{

breakpoint: 480,

settings: {

arrows: false,

centerMode: true,

centerPadding: '0px',

slidesToShow: 1

}

]

});

// ナビゲーション用

$('.slick-dots').find('li').eq(0).addClass('slick-current');

// On before slide change

$('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){

$('.slick-dots').find('li').removeClass('slick-current');

$('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');

});

Javascriptで大事なところは、

centerModeをtrueに設定すること。
slidesToShowは奇数にすること。
centerPaddingで画像間の余白の調整

になると思います。

CSS

.slider{
    overflow-x: hidden;   
}
.slick-list{
    overflow: visible;   
}
.slick-slide{
    text-align: center;   
}
.slider-for img{
    max-width: 280px;
    height: auto;
    box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);
    display: inline-block;
}
.slider-for .slick-current img{
    transform: scale(1.10);
}  
/* ページャー */
.slick-dots{
    text-align: center;
    margin-top: 50px;
}
.slick-dots li{
    display: inline !important;
    margin: 0.5em;
}
.slick-dots button{
    display: inline !important;
    width: 1em;
    height: 1em;
    background-color: #ccc;
    text-align: center;
    overflow: hidden;
    text-indent: 2em;
    border-radius: 100%;
}
.slick-dots .slick-current button{
    background-color: aqua;
}
/* スマートフォンの場合 */
@media(min-width : 480px){
    .slider-for img{
        max-width: 300px;
        border: 10px solid #fff;
    }
    .slider-for .slick-current img{
        transform: scale(1.15);
    }
}

.slider{

overflow-x: hidden;

}

.slick-list{

overflow: visible;

}

.slick-slide{

text-align: center;

}

.slider-for img{

max-width: 280px;

height: auto;

box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);

display: inline-block;

}

.slider-for .slick-current img{

transform: scale(1.10);

}

/* ページャー */

.slick-dots{

text-align: center;

margin-top: 50px;

}

.slick-dots li{

display: inline !important;

margin: 0.5em;

}

.slick-dots button{

display: inline !important;

width: 1em;

height: 1em;

background-color: #ccc;

text-align: center;

overflow: hidden;

text-indent: 2em;

border-radius: 100%;

}

.slick-dots .slick-current button{

background-color: aqua;

}

/* スマートフォンの場合 */

@media(min-width : 480px){

.slider-for img{

max-width: 300px;

border: 10px solid #fff;

}

.slider-for .slick-current img{

transform: scale(1.15);

}

ちょっと長いですけど、拡大させるのに重要なポイントは

.slider-for .slick-current img{
transform: scale(1.10);
}

.slider-for .slick-current img{

transform: scale(1.10);

}

ここだけなんですよね。slickの場合、センターモードにすると、currentスライダーがセンターになり、.slick-currentが付与されるので、.slick-currentの中の画像のscaleを大きくしてあげています。
さらにslick側で用意する.slick-listにoverflow: hidden；がslick.cssで設定されていて拡大したときに画像が見切れてしまうので、overflow: visible；にするか、paddingで上下に余白をとってあげれば大丈夫です。

基本的にはこれで何とかなると思います。
画面いっぱい画像を並べるのであれば、.containerではなくてwidth： 100%;にしてカルーセルスライダーを画面のセンターに絶対配置してあげるとよいと思います。
あとは大きさや画像ふちを付けたり、影を付けたりと装飾して見た目を整えます。

slick使いやすくて好きです。前回のとはちょっと毛色が違いますが、こんな使い方もできますね。(というか、こちらの方がslickっぽいですね)
ほかにもこんなことできたーとか出てきたらまた紹介しますね。
もしくはこんなんはできないのか？ってのがあれば、挑戦してみますのでコメントください。

というわけで、弊社ではただいま求人募集中です。

求人募集中

求人の詳しい内容はこちらから
事業紹介はこちらから

※この情報は2016年4月現在の情報です。詳しくはアートグラフィック新潟Webサイトよりお問い合わせください。

コンタクトフォーム７のエラー（警告）を取る

みんな大好きcontact form 7。WordPressにお手軽にフォームを設置でき、カスタマイズも自在な人気プラグインです。私も長いことお世話になってます。
バージョン4.4に上げたあたりから、警告がダッシュボードに出るようになりました。
blog_cf7_01

設定は何も変えてないのに出た場合は、このまま利用してもちゃんとメールは届きます。
暫く放置してましたが、やはり気になるので、きちんと対処してみました。 blog_cf7_02

今回の例では、エラーが2個ありました。というか書いてありました。 blog_cf7_03

実際の設定画面を開いてみると、赤字の警告が該当項目の下に書いてあります。
それぞれ対処しましょう。
blog_cf7_04

題名の方はカンタンな話で、フォームからの送信時に題名が入ってないと、題名無しのメールになってしまうので、警告が出ます。ここは、題名が空欄の場合でも何らかの文字が入るように、分かりやすく「件名：」と入れてみました。

送信元のエラーですが、例としてあげたWordPressはドメインsample.com/test/と言うフォルダに構築しているため、ドメインが違うと認識されたようです。（もしかしたら違う理由かもしれませんが、それしか心当たりが無いので。）サブドメインを使っていても同じエラーが出るようです。
このような同じドメインのはずなのにエラーが出る場合はタグを使わず、
直接test@sample.comのように、アドレスを書き込んでください。 blog_cf7_05

[]を取るのを忘れずに。構文エラーで怒られます。 blog_cf7_06

この状態で保存をすると、エラーが無くなり警告も表示されなくなりました。スッキリです。
用法として正しいメールを送るように警告しているので、送信に支障が無くても折を見て対処した方が良いでしょう。

Facebookページのカバー画像が増えたから一挙公開します!!

こんにちは！
みなさんのところの桜はいかがですか??新潟の桜はそろそろ散り始めています。

さて、AGN Web Teamではこのブログの他にFacebookページもやっています。（Twitterもありますよ♪)

Facebookページでは、毎月担当を換えてカバー画像の更新をしてきました。
そのカバー画像がたくさんたまったので、列挙してみようと思います。

カバー画像は、デザイナーだけでなくディレクターやコーダーも日頃の息抜きと、とても前向きな協力(~~と言う名のプレッシャー~~)にてみんなで作っています。
それではいってみましょう！

続きを読む Facebookページのカバー画像が増えたから一挙公開します!!

Windows10でXAMPPを使ってApacheが立ち上がらない

ãã£ããã£3

先日、半強制的にWindows7からWindows10にアップグレードしたのですが、
OSのバージョンが変わると、どこに何があるか、わからなくなりますね。

Windows10にアップグレード後、初めてローカルサーバーを起動しようと
XAMPPを立ち上げたら、何やら赤文字でエラーが表示されています。

？？？？

よくわかりませんが、どうやらApacheが立ち上がらないようです。

正直、エラー内容がわからなかったので、google先生に聞いてみることにしました。

参考サイト
http://personal-studio9.com/xampp-windows10/

どうやら80番ポートがWindowsによって使われているから
Apacheを起動できません。と言われているので、
使われているWindowsのIIS（インターネットインフォメーションサービス）をオフにします。

IISを無効にするためにはプログラムのアンインストールと変更＞Windows の機能の有効化または無効化を立ち上げなければ
いけないのですが、Windows10にアップグレードしたばかりで、
コントロールパネルがどこにあるかわかりません。

いろいろ探してみたら、スタートメニュー＞すべてのアプリ＞Windowsシステムツール＞コントロールパネル
にありました。

コントロールパネル＞プログラムと機能＞Windows の機能の有効化または無効化を立ち上げます。

ãã£ããã£5

ãã£ããã£4

ãã£ããã£

インターネットインフォメーションサービスが起動していますのでここをオフにします。

ãã£ããã£2

オフにして再起動して設定完了です。

再起動後、無事にApacheが立ち上がりました。

制作事例　アートグラフィック新潟採用ページ

AGNkyuzin

自由人募集します。

やりたいことがあるのなら、その自由な発想でどんどんチャレンジできます。
アクティブに動ける人であれば、どんなことでも実現できます。
私たちは、あなたの「自由」を受け入れることができます。
アートグラフィック新潟はそれができる会社です。
URL　http://www.agn.co.jp/hp/information/recruit.php