yasai - AGN Web!

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

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

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

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

制作内容：

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

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

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サイトよりお問い合わせください。

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

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

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

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

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

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

Simplenoteを使ってみてる(Markdownの練習を兼ねて)

この記事はSimplenoteのブラウザ版を使って下書きしています。 Githubもやってかなきゃだし、Web業界にいたりすると、どうもいい加減Markdown記法に慣れていかなくちゃなって思っていたのです。
以前一度かじったのですが、なんだか続かなかった経験があって、ちょっと挫折感があったのです。
あの時は、いまいち使いやすいエディタに巡り合わなかった、っていうのが敗因だと思っています。
そこで最近使い始めたのが今更ながらSimplenoteです。

良いところ

モバイルアプリが使いやすい
Markdownが使える
パブリッシュ機能が便利
ブラウザで使える
Evernoteより軽い
自動保存
更新の履歴がわかる(戻れる)

今一つなところ

クラス名、IDが付与できない
定義リストが使えない(Markdown使用時)
ログイン画面(間違うとユーザー名から)

Simplenoteって？

Simplenote は簡単にメモやリスト、アイディアなどを書き留められるツールです。無料で、お持ちのデバイスすべてのノートを同期できます。 Simplenote ではスピードと効率を最も重視しています。アプリを開き、書き込むだけ。ノートがたくさん集まってきたら、検索したりタグやピン留めで整理したりもできます。
Google Play の Android アプリ Simplenoteより

とてもざっくり説明すると、Evernoteのテキスト専用機みたいなイメージです。
書いたそばから自動保存してくれ、異なるデバイス間でも同期してくれます。

Evernoteとの違い

画像やファイルの保存はできません
テキストの装飾はできません(リッチテキストが使えない)
Markdownが使えます
Notebookがない(基本的にタグ管理のみ)
動作が軽い

Evernoteを使う場合は、Cloudに保存、みたいな意識にのときが多いですかね。
Evernoteと比較すると、とにかくプレーンなテキストを書くことに特化しているので、Evernoteとはそもそものアプリの趣旨が違うと思います。(自ずと利用する目的が変わる)
ただテキストという面で考えても、EvernoteのNotebook機能は便利なのでこれがないのはちょっと残念。タグだけで管理する感じが、ブログの機能として考えたときにTumblrにカテゴリがないのとちょっと雰囲気が似ているかもしれません。リッチテキストが使えない点はMarkdownで書けるので、そんなに気になりませんでした。

WordPressの下書きに使う

Markdownで書くことのできるブログも増えてきました。前述のTumblrもそうですし、はてなもそうですね。
仕事でも良く使うWordpressの場合はデフォルトではMarkdownで記事を書くことができません。
※プラグインを導入すればできます。(Jetpack、JP Markdownなど)
プラグインを導入していない場合でも、Simplenoteを使ってMarkdownで下書きを作った場合、プレビュー画面をコピーしてビジュアルエディタにに貼付ければOKです！
Wordで原稿作っている人には同じような感じですね！(Markdown書く人でWord使って下書きする人っているのかな？)

Markdownで書く場合はHTMLを直接書いてもOKみたいです。ちょっと感覚的に違和感はありますが。
ですがこの方法でHTMLを貼付けても、プレビュー画面でTwitterの埋め込みはできていませんでした。同様にiframeもダメでしたので、scriptやこういった特殊な埋め込みはできないみたいです。(HTMLが文字列としてそのまま出力される)
こういったものに関しては、WordPress側で挿入した方が良さそうです。
また画像の挿入などもMarkdownで書くことはできますが、WordPress上でアップロードしてそのまま挿入した方が簡単ですね。
Simplenoteは、あくまで文章の作成に使うのが良さそうです。

ブラウザ版のちょっと残念なところ・いいところ

ブラウザ版を使っていてちょっと残念に感じてる点は、すごい細かいとこなんですけどログイン画面でユーザー名(メールアドレス)とパスワードを入力する時に、パスワードを間違うと、もう一度ユーザー名から入力しなきゃいけないところですかね。
自分でもログイン画面作ったりしますが、こういう時はユーザー名は消さずにパスワードだけ再入力する方が好みです。
逆にそういうところくらいですかね、ちょっと不満なのは。 IDやクラスが使えないという点は、IDやクラスが必要なくらいHTMLを書きたければHTMLを書くためのものを使えばいいし、定義リストが使えないのはMarkdownエディタでは良くあることのようです。
見た目もシンプルでいいし、動作も軽いのでかなり気に入って使っています。

コーディングしたりする仕事柄、Webブラウザは常時立ち上がっていることが多いので、わざわざアプリケーションを立ち上げずに作業に入れるとこもお気に入りです。モバイルアプリもあるので、スマホで気になったネタをリスト書きしておいて、PCのキーボードで一気に文章にするっていうのがいい感じです。

ちょっとした便利機能だと思う

これは2点あって、「履歴が見られる(戻れる)」点と「パブリッシュ機能」が優秀ってことです。
自動保存なんで過去ファイルなんてものがないので、前の方が良かったなぁって言うときに戻れないとちょっと大変なんですが、Simplenoteの場合は、上の時計アイコンから履歴を見ることができます。まだ試してないけど、「Restore」ボタン押すとその時まで戻ってくれそうです。

最近多用してるのが「パブリッシュ機能」です。
ノートを公開してURLを発行し、URLを知っている人だけノートを見られる機能です。
ここでMarkdownが力を発揮します。Markdownで書いて公開すると、ちゃんとHTMLで書いたWebページとして表示してくれます。
チーム内の簡単な打合せ事項や連絡事項なんかはこれで書いて、メールやチャットで共有すると楽でいいです。

こんな感じです(共有例)

その他にもSNSで共有したり、メールに変換して送ったりすることもできるみたいです。

Markdownを使うには

SimplenoteでMarkdownを使うのはとても簡単。インフォメーションアイコンをクリックすると「Markdown Formatted」というチェックボックスがあるので、これにチェックを入れるだけ！
ちなみにノートを新規で作ったばかりだと切替られないみたいなので、ちょっとだけ文章書いてから切り替えればOKです。

書いたMarkdownは上部の「Edit/Preview」のタブの切替でカクニンできます。

※インフォメーションで文字数のカクニンもできるので、文章量が必要な場合なんかにも便利ですね。

Markdownそのものの使い方は、この辺りを参考にしたらよさそうです。

ということでSimplenote、結構必須アイテムになりつつあります。もし良かったらみなさんも使ってみてはいかがですか??

追記
共同編集する場合の方法を書きました。よかったらこちらもどうぞ！

Simplenoteを誰かと共有(ブラウザ版)

バスケットボールスピリッツvol.8発売

バスケ雑誌「バスケットボールスピリッツ」vol.8発売中!!

http://www.bbspirits.com/news/basketballspirits-vol8/

お求めはオンラインショップ、またはAmazonで!!

Amazonでは電子書籍版も購入できます!!

今号のバスケットボールスピリッツはオールスター特集。新潟BBラビッツの出岐選手と近藤選手が大活躍した長岡でのオールスターの様子もしっかり押さえてありますよ！ pic.twitter.com/LtS2t2Okbr

— バスケットボールスピリッツSHOP (@Shop_bbspirits) 2016年3月25日

【Flexboxと疑似要素】Flexboxやってみた!!そしたらはまった！うまくいかなかった！

こんにちは。
今年の新潟は例年より雪が少ないみたいです。
寒がりなので、はやく暖かくなるといいなぁ、コタツ欲しいなぁ、コタツで仕事したいぁと思うこの頃です。

さて2016年1月12日でInternet Explorer 8・9・10 のMicrosoftサポートが打ち切られまして、CSSを書く人間としては一足先に春が来たのかもしれないなぁと頭の中がポカポカするわけですが、これまで古いIEさんに遠慮してできなかったことを、どんどんやっていかなきゃいけないわけです。

Internet Explorer 8・9・10 のサポート終了［過去記事］

そんな中、実案件でついにFlexboxを使う機会があったので、喜びの舞を踊ったときのお話です。今回は失敗談になります。ちょっとはまりました…

続きを読む【Flexboxと疑似要素】Flexboxやってみた!!そしたらはまった！うまくいかなかった！

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

年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか？

さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。

みなさんはサイト制作するとき、メインに使うスライダーって決めてますか？僕の本命は bxSliderとslickです。この2本の使い分けって感じですねー

先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。

【DEMO】

今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。

まずはslick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。

<script src="jquery.js"></script>
<script src="slick.min.js"></script>
<link rel="stylesheet" href="slick.css">

※追記

slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。
一応回避方法を考えてみましたのでコメントをご覧ください。

スライダー部分のHTMLはこんな感じに。

<div class="slider container">
    <div class="slider-for">
        <div class="sp-slide"><img src="images/01.png" alt=""></div>
        <div class="sp-slide"><img src="images/02.png" alt=""></div>
        <div class="sp-slide"><img src="images/03.png" alt=""></div>
        <div class="sp-slide"><img src="images/04.png" alt=""></div>
        <div class="sp-slide"><img src="images/05.png" alt=""></div>
        <div class="sp-slide"><img src="images/06.png" alt=""></div>
    </div>     
    <div class="slider-nav-wrap">
        <div class="slider-nav">
            <div class="sp-thumbnail"><img src="images/01.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/02.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/03.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/04.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/05.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/06.png" alt=""></div>
        </div>
        <div class="slick-nav-arrows">
            <div class="slick-next"></div>
            <div class="slick-prev"></div>
        </div>
    </div>
</div>

</div>

</div>

</div>

スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。

動作のためのJavascriptをこんな感じです。

$(document).ready(function(){
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        centerMode: true,
        focusOnSelect: true,
        vertical: true,
        arrows:  true,
        prevArrow: $('.slick-prev'),
        nextArrow: $('.slick-next'), 
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    centerMode: true,
                    vertical: false
                }
            }
        ]
    });
});

$(document).ready(function(){

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

slidesToShow: 1,

slidesToScroll: 1,

arrows: false,

fade: false,

asNavFor: '.slider-nav'

});

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

slidesToShow: 4,

slidesToScroll: 1,

asNavFor: '.slider-for',

dots: false,

centerMode: true,

focusOnSelect: true,

vertical: true,

arrows: true,

prevArrow: $('.slick-prev'),

nextArrow: $('.slick-next'),

responsive: [

{

breakpoint: 768,

settings: {

centerMode: true,

vertical: false

}

]

});

メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。
メインである.slider-forのオプションで「asNavFor : ‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。

サムネイルの方は、今回は4枚並ぶ形にしました。「slidesToShow: 4」
「the last carousel 」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。

そしてslickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。

見た目の方のCSSはこんなです。

.slider{
    position: relative;
    max-width: 960px;
}
.slider img{
    max-width: 100%;
    height: auto;
}
.slider .slider-nav-wrap{
    position: relative;
}
.slider .slider-nav-wrap .slider-nav .slick-list{
    padding: 0 !important;
}
.slider .slider-nav-wrap .slider-nav .slick-track{
    left: 0 !important;
    width: 100%;
    opacity: 1;
}
.slider .slider-nav-wrap .slider-nav .slick-slide{
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    opacity: 1;
    padding: 5px;
}
.slider .slider-nav-wrap .slider-nav .slick-slide:hover{
    opacity: .5;
}
.slider .slider-nav-wrap .slick-arrow{
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slider .slider-nav-wrap .slick-prev{
    right: 0;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #444444;
}
.slider .slider-nav-wrap .slick-next{
    left: 0;
    border-width: 6px 12px 6px 0;
    border-color: transparent #444444 transparent transparent;
}
@media (min-width: 768px){
    .slider .slider-for{
        float: left;
        width: 79.1666%;
    }
    .slider .slider-nav-wrap{
        position: absolute;
        top: 50%;
        right: 0;
        width: 16.6666%;
        padding: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .slider .slider-nav-wrap .slider-nav .slick-list{
        padding: 0 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-track{
        left: 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-slide{
        padding: 0;
    }
    .slider .slider-nav-wrap .slick-arrow{
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .slider .slider-nav-wrap .slick-prev{
        top: auto;
        bottom: -1.5em;
        border-width: 18px 9px 0 9px;
        border-color: #444444 transparent transparent transparent;
    }
    .slider .slider-nav-wrap .slick-next{
        top: -1.5em;
        border-width: 0 9px 18px 9px;
        border-color: transparent transparent #444444 transparent;
    }
}

.slider{

position: relative;

max-width: 960px;

}

.slider img{

max-width: 100%;

height: auto;

}

.slider .slider-nav-wrap{

position: relative;

}

.slider .slider-nav-wrap .slider-nav .slick-list{

padding: 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-track{

left: 0 !important;

width: 100%;

opacity: 1;

}

.slider .slider-nav-wrap .slider-nav .slick-slide{

-webkit-transition: opacity .3s ease;

transition: opacity .3s ease;

opacity: 1;

padding: 5px;

}

.slider .slider-nav-wrap .slider-nav .slick-slide:hover{

opacity: .5;

}

.slider .slider-nav-wrap .slick-arrow{

position: absolute;

top: 50%;

width: 0;

height: 0;

border-style: solid;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.slider .slider-nav-wrap .slick-prev{

right: 0;

border-width: 6px 0 6px 12px;

border-color: transparent transparent transparent #444444;

}

.slider .slider-nav-wrap .slick-next{

left: 0;

border-width: 6px 12px 6px 0;

border-color: transparent #444444 transparent transparent;

}

@media (min-width: 768px){

.slider .slider-for{

float: left;

width: 79.1666%;

}

.slider .slider-nav-wrap{

position: absolute;

top: 50%;

right: 0;

width: 16.6666%;

padding: 0;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.slider .slider-nav-wrap .slider-nav .slick-list{

padding: 0 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-track{

left: 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-slide{

padding: 0;

}

.slider .slider-nav-wrap .slick-arrow{

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.slider .slider-nav-wrap .slick-prev{

top: auto;

bottom: -1.5em;

border-width: 18px 9px 0 9px;

border-color: #444444 transparent transparent transparent;

}

.slider .slider-nav-wrap .slick-next{

top: -1.5em;

border-width: 0 9px 18px 9px;

border-color: transparent transparent #444444 transparent;

}

ちょっと長いですけど、基本的にはたいしたことしてないですね。

メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を％で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100％にしています)
.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)

スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。
DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。

今回はコードばかりでいつも以上にとっつきにくいですね。スイマセン・・・

追記(2016/04/25)

サンプルその2も作ってみました。よろしければこちらもどうぞ！

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

Googleスプレッドシートと連携！Googleフォームを使ってみた。

yasaiです。師走ですね。師じゃなくて下端なので当然はしりますよ。
今回はGoogleフォームを使ったときのお話です。GoogleフォームのメリットはGoogleスプレッドシートと手軽に連携ができることですね！

151219blog

※goolge→google(goolge様ごめんなさい)

相変わらず前置きが長いので、飛ばして読みたい方はこちらからどうぞ。

Googleフォームを使ってみよう
回答をGoogleスプレッドシートに保存する
Googleフォームを自分のサイトに設置しよう
Googleフォームを利用するメリット·デメリット
おまけ

前回まで「ログインなしで誰でも投稿できる！Tumblrのゲスト投稿を使ったサイトを作ってみた。」の時のことをお話しましたが、今回はその続編です。

ログインなしで誰でも投稿できる！
Tumblrのゲスト投稿を使ったサイトを作ってみた。
【概要編】・【制作編】

Tumblrのゲスト投稿機能を使って、写真をログイン無しで投稿してもらえるように作ったNagamelでしたが、複数の人に投稿してもらえることを考えると、自分の投稿を削除したいことや、投稿そのものが何かの違反ですよってお知らせできる機能が必要かな、と思いました。
無論メールでお知らせしてもらうようにしても良かったのですが、メールってクリックしてメーラーが立ち上がって、空白の画面に文字を入れていくのが、少し気分的に障壁があるように感じるですね。やっぱりフォームの方がいいな、と。

NagamelはTumblr使っているので、FTPでフォームのPHPをアップして、ということができません。別サーバにフォーム用のページおいてもいいんですが、気軽にサクッと作りたかったという今回の趣旨に反するので、これは却下。
DISQUSでコメント欄を作るのもありかなと思ったのですが、今回はGoogleフォームを使って作ってみました。下は実際のフォームのスクリーンショットです。

続きを読む Googleスプレッドシートと連携！Googleフォームを使ってみた。

ログインなしで誰でも投稿できる！Tumblrのゲスト投稿を使ったサイトを作ってみた。【制作編】

こんにちは。yasaiです。

前回に引き続き、「ログインなしで誰でも投稿できる！Tumblrのゲスト投稿を使ったサイトを作ってみた。」の後編、今回は制作編です。
※概要編はこちら

投稿できるいろいろな方法
それぞれの問題点
Tumblrのゲスト投稿について
今回作ったサイト
– サイトの構成とゲスト投稿の流れ
– 実際の作業について
Tumblrのゲスト投稿のいまひつなところ

今回作ったサイト

前回のおさらいです。

上記の様な構成で作りました。

制作にあたっては次のことをしました、

ゲスト投稿の有効化
テンプレートの修正(出力部分) タグの有効化とメニューへの追加
タグリストの設定
削除依頼ページの作成(Googleフォームを利用)
その他のページ制作

になります。ここまでが前回のおさらいです。

実際の作業について

それでは、ここから僕が実際にやったことのお話です。

1.Tumblrのゲスト投稿を有効にする。

Tumblrの自分のブログのダッシュボードから、「外観を編集」します。

そうすると、「ゲスト投稿」を有効にするかどうかのスイッチがあるので、「On」にします。

ゲスト投稿できるように設定すると、このような項目が決められます。
ゲスト投稿用のタイトル
ゲスト投稿のガイドライン。(注意事項や使い方の説明に)
ゲストが使用できるタグ。カンマ区切りで複数設定できます。
ゲスト投稿で使う投稿タイプ

以上を設定したらこの画面ですることはおしまいです。
※この画面は自動保存されます。

2.テンプレートの修正(出力部分) タグの有効化とメニューへの追加

今回使用させていただいたテーマ「Simplig-folio」では、グローバルメニューにゲスト投稿の有無があらかじめ書かれていました。（ありがとうございます）

<ul>
    {block:HasPages}
    {block:Pages}<li><a href="{URL}">{Label}<i class="icon_next"></i></a></li>{/block:Pages}
    {/block:HasPages}
    <li><a href="javascript:void(0);" class="tagopen">Tagslist<i class="icon_next"></i></a></li>
    <li><a href="/archive">{lang:Archive}<i class="icon_next"></i></a></li>
    {block:AskEnabled}<li><a href="/ask">{AskLabel}<i class="icon_next"></i></a></li>{/block:AskEnabled}
    <span style="color: #ff6600;">{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}<i class="icon_next"></i></a></li>{/block:SubmissionsEnabled}</span>
</ul>

<ul>

{block:HasPages}

{block:Pages}<li><a href="{URL}">{Label}<i class="icon_next"></i></a></li>{/block:Pages}

{/block:HasPages}

<li><a href="javascript:void(0);" class="tagopen">Tagslist<i class="icon_next"></i></a></li>

<li><a href="/archive">{lang:Archive}<i class="icon_next"></i></a></li>

{block:AskEnabled}<li><a href="/ask">{AskLabel}<i class="icon_next"></i></a></li>{/block:AskEnabled}

<span style="color: #ff6600;">{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}<i class="icon_next"></i></a></li>{/block:SubmissionsEnabled}</span>

</ul>

赤字の部分ですね。ソースを見ると「Ask」のもの入ってますね！(Ask機能をOnにすると表示されます。)

{block:SubmissionsEnabled} content {/block:SubmissionsEnabled}でゲスト投稿が有効な時に、contentが表示されるので、これでグローバルメニューに{SubmitLabel}が表示されます。{SubmitLabel}には「ゲスト投稿ページのタイトル」に入力した文字列が表示されます。

次に投稿フォームが表示されるページです。

ダッシュボードで入力した情報は上記のように表示されます。画像をD＆Dでアップロードできるのが初めからついているのとかってステキです。

投稿する際には、非Tumblrユーザーは名前とメールアドレスを入力しないと投稿できません。
また、ガイドラインにはHTMLを書くこともできたので、プライバシーポリシーなど長めのものになる場合は、別ページにリンクしてもいいですね。(フォームページはサクサク進んで欲しいですから)

3.タグリストの設定

ここで述べるタグは、2.で使ったTumblrの独自タグやHTMLタグではなくて、カテゴリーを表す意味でのタグになります。

Tumblrではちょっぴり残念なことに他のブログのようなカテゴリーが設定できません。その代わりにタグを利用します。

「Simplig-folio」ではあらかじめタグクラウドを表示するようにプラグインが設定され「Taglist」に表示されるようになっていましたが、今回はタグを固定してしまったので、ダッシュボードの「テーマの編集」から変更できるように<header>内に以下のカスタムテキストを入れました。

<meta name="text:Tag List" content="">

1	<meta name="text:Tag List" content="">

こうすると、ダッシュボードからカスタムテキスト「Tag List」が編集できるので、jQruey使って「Tag List」にリンクのリストを生成しました。

<script>
    $(document).ready(function(){
        //Tag List
        var taglist = [{text:Tag List}];
        var len = $(taglist).length;
        for(var i=0; i<len; i++){
            $('.tag_list').append('<li><a href="/tagged/' +taglist[i] +'">' +taglist[i] +'</a></li>');
        }
    });
</script>

$(document).ready(function(){

//Tag List

var taglist = [{text:Tag List}];

var len = $(taglist).length;

for(var i=0; i<len; i++){

$('.tag_list').append('<li><a href="/tagged/' +taglist[i] +'">' +taglist[i] +'</a></li>');

}

});

</script>

この時、タグに日本語を設定した関係上、カスタムテキストの各項目は‘ ‘(クオーテーション)で囲む必要があります。カスタムテキストはゲスト投稿で指定したタグと、もう１つ「お知らせ」タグを設定しました。

4.削除依頼ページの作成(Googleフォームを利用)

誰かに投稿してもらえるサイトを作りたかったので、投稿してもらったものの削除以来ができないと困るなぁということで。お問い合わせページを作り、お問い合わせフォームをつけました。

どこまでも無料で作りたいのでお問い合わせフォームはGoogleフォームを初めて使ってみました。(Googleフォームを使った感想はまた今度)
Googleフォームの設定をポチポチして埋め込みます。

実はこの部分、初めはTumblrの質問(Ask)機能で実装するつもりだったんです。

なぜ断念せざるをえなかったかというと、Ask機能ではTumblrユーザー同士ならば非公開でやり取りできるようなのですが、非Tumblrユーザーとは公開状態でしか、やり取りできないみたいなのです。(おそらくやり取りを出力する場所がないから？)
個人的に好きなTumblrですがユーザーの割合を考えると、ちょっとそれはなぁ、ということで断念せざるを得ませんでした。

5.その他のページ制作

これで、TopPage、Tagpage、SubmitPage、ContactPageができたので、残りのサイトの趣旨を説明するAboutPageと、これは守ってねという内容のPolicyPageを「ページの追加」からサクッと作ります。

これでサイトの体裁が整ったので、ここまで非公開で作っていたので公開してしまいます。

Tumblrのゲスト投稿のいまひとつなところ

さてここまで作ってみて、今ひとつというか、もうちょっとこれができたら良かったな、という所をまとめます。

非Tumblrユーザーの場合、投稿者の名前を出力できない。
承認制なのでリアルタイムに更新しない。
管理者へのメッセージは公開すると「消えてしまう」。
Tumblr人口がまだまだ日本だと少ない。

特に「非Tumblrユーザーの場合、投稿者の名前を出力できない」点は大きかったです。せっかく投稿してもらっても、投稿者様の名前を表示できないので。

Tumblrユーザーの場合は

{block:Submission}<a href="{SubmitterURL}" target="_blank">{Submitter}</a>さんからの投稿です{/block:Submission}

1	{block:Submission}<a href="{SubmitterURL}" target="_blank">{Submitter}</a>さんからの投稿です{/block:Submission}

といった形で名前とリンク先が表示できるのですが、非Tumblrユーザーの場合は{Submitter}は「匿名」と表示されます。これがとても残念なとこですよね。
しかたないから今回は、お名前の表示を希望される方はキャプション(画像投稿のみなので)にコピーライトとして名前を入れてもらうことにしました。とても苦肉の策です。

ちなみに、その投稿が、ゲスト投稿によるものかどうかは、ゲスト投稿の場合はタグに「#submission」が表示されるので、それで判断できます。

そういった部分でも、Tumblrユーザーがもっと増えたらいいのになぁと思います。

まとめ

2回に渡ってまとめてきましたが、いかがだったでしょうか？
なかなかアカウントもログインもなく、デザインを自由に投稿できるようにできるのって、あまり選択肢がないように思いますので、制作する際の１つの選択肢になれば嬉しいです。

なにか質問や、もっといい方法あるぞ、っていうのを教えてもらえたら嬉しいのでコメントくださいね。Tumblrもチャット機能をリリースする話もありますし、まだまだ目が離せないですね。

せっかく作ったので、Nagamelもどうぞよろしくお願いします。ぼぉっと空眺める時間、欲しいじゃないですか(笑)

今回作ったサイト
「空を投稿するサイト Nagamel」

Nagamel

@Nagamelskyさんのツイート

ログインなしで誰でも投稿できる！Tumblrのゲスト投稿を使ったサイトを作ってみた。【概要編】

こんにちは。yasaiです。

めっきり寒くなって、冬もう間近ですね。みなさんは冬が待ち遠しいですか？
昨日は鶏肉とネギ焼いて食べました。串に通さない焼きとりです。
きっと冬には冬の楽しみ方があるんですよね。僕は布団にもぐって読書です。(こたつならなお良し)

さて、先日ユーザーから写真を投稿してもらうようなものを作りたいというお話を聞く機会がありまして。気軽に写真投稿するのって、写真に限らず文章でもなんでもそうですが、ちょっと難しいんだな、と思ったのです。

※SNSでいいじゃん、っていう話はさておき。こういうことが手軽にできるようなってるのも、SNSのすごさの１つですよね。

それでタイトルにしたように「ログインなしで誰でも投稿できる！Tumblrのゲスト投稿を使ったサイトを作ってみた。」ってことをしてみたので、その際のお話です。

投稿できるいろいろな方法

誰でも投稿できるサイトの様なものの実現手段について考えてみましょう。
深く考察していませんが、パッと思いつく所はこんなものでしょうか？

SNSのハッシュタグで集める
会員制のサイトを作る
WPのプラグイン使う
フォームで投稿してもらいかき集めて静的HTMLで表示

それぞれの問題点

「1.SNSのハッシュタグで集める」の場合

基本的に承認制ではないのでどうのような投稿も拾ってしまう。
SNSのアカウントが必要になる。

「2.会員制のサイトを作る」

ログインしないと投稿できない。

「3.WPのプラグイン使う」

サーバなどの初期コストがかかる。

「4.フォームで投稿してもらいかき集めて静的HTMLで表示」

1件1件HTML追加するのは大変。自動追加したりするのにプログラムが必要になるかも。

こうなってくると、それぞれに一長一短ありますね。
今回やってみたいことの要件は、

誰でも投稿できる
アカウントやログインはしたくない
主旨に反するような投稿は掲載したくない

ということにで考えます。

Tumblrのゲスト投稿について

そこで今回はTumblrのゲスト投稿を使ってみます。

そもそもTumblrってなんだという方はこちら。

Tumblrとは、アメリカのDavidville.incが運営する、世界中で注目のメディアミックス・ウェブログサービスです。「リブログ」というWeb上の画像、動画、記事を自身のブログにて引用・転載する機能があり、「ネット上のスクラップブック」として非常に人気が高いんです。またCMSとしての機能も備えていて、注目をあびています。

Tumblr（タンブラー）の使い方まとめ！【カスタマイズサイト例つき】
LIG 様のブログより

Tumblrのいいところはデザインのカスタマイズができて、サーバーが不要。
僕も簡易的なCMSとして使えると思うのです。また設定でFacebookやTwitterと簡単に連携できるのも嬉しいですね。

あとはWordpressなどに比べるとスマホアプリからの投稿が容易だと思います。(投稿への心理的な障壁が低い)
するっとボタンが出てきたりして、使っててちょっぴり楽しくなります!!

Tumblrのゲスト投稿について

Tumblrアカウントがなくても利用できる。
デザインの変更が比較的容易。
管理者の承認で公開される。
投稿の種類を選択できる。(テキスト・画像・引用・リンク・動画)
使用するタグを指定できる。
TwitterやFacebookにそのまま流せる。

これで今回の要件は満たすことができそうですね♪

今回作ったサイト

今回作りたかったのは「誰でも投稿できる『空』の写真を集めたサイト」です。
※単純に写真集めるだけだとつまらないので、「空」シバリです。写真って書きましたけど、写真じゃなくてもOK。イラストでも加工したものでも。
※できたら素材集サイトみたいにできたらいいなぁって思いました。投稿者様の許可必須ですかね。

コンセプトは何となくぼぉっと「空」を見上げられるサイト、です。
（ぼけっと空を眺めている気分になれたら良いなぁ）

上記の様な構成で作ります。そのために今回やったのは、

ゲスト投稿の有効化
テンプレートの修正(出力部分) タグの有効化とメニューへの追加
削除依頼ページの作成(Googleフォームを利用)
その他のページ制作

になります。

まずやったことの前に、ゲスト投稿が公開されるまでの流れを説明します。

上記の図のように、投稿するためのページが用意されます。(Tumblrのもともとのオプションで!! 作らなくていいんです！)
そのページから投稿があると、ブログの管理者へメッセージが届きます。
管理者がメッセージから「公開」すると、投稿が公開されます。(もちろん承認しないことも、日付を指定して投稿することもできます)
※ここで注意点。実際に公開される時に投稿者は管理者となります。(後述)

一気に書き上げようと思いましたけど、ちょっと長いですね(汗)
続きは次回。なるべくすぐ書きますね。

今回作ったサイト
「空を投稿するサイト Nagamel」

今回はTumblrテーマSimplig-folioを使わせていただきました!!ありがとうございます！

Nagamel

@Nagamelskyさんのツイート

HTML

Javascript

CSS

求人募集中

良いところ

今一つなところ

Simplenoteって？

Evernoteとの違い

WordPressの下書きに使う

ブラウザ版のちょっと残念なところ・いいところ

ちょっとした便利機能だと思う

Markdownを使うには

※追記

追記(2016/04/25)

今回作ったサイト

実際の作業について

1.Tumblrのゲスト投稿を有効にする。

2.テンプレートの修正(出力部分) タグの有効化とメニューへの追加

3.タグリストの設定

4.削除依頼ページの作成(Googleフォームを利用)

5.その他のページ制作

Tumblrのゲスト投稿のいまひとつなところ

まとめ

今回作ったサイト 「空を投稿するサイト Nagamel」

投稿できるいろいろな方法

それぞれの問題点

「1.SNSのハッシュタグで集める」の場合

「2.会員制のサイトを作る」

「3.WPのプラグイン使う」

「4.フォームで投稿してもらいかき集めて静的HTMLで表示」

Tumblrのゲスト投稿について

Tumblrのゲスト投稿について

今回作ったサイト

今回作ったサイト 「空を投稿するサイト Nagamel」

今回作ったサイト
「空を投稿するサイト Nagamel」

今回作ったサイト
「空を投稿するサイト Nagamel」