9月, 2015 - AGN Web!

とにかく簡単にグッズ作成！ SUZURIを使ってみました。

在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめ

やることはグッズのデザインと値段を決めるだけ!
作成〜発送まで請け負ってくれるサービスのご紹介。

今回はSUZURIを実際に使ってみました。

SUZURI
https://suzuri.jp/

※ご利用の際はサイトの規約などをご確認ください。
※2015/09/30現在の情報です。

続きを読むとにかく簡単にグッズ作成！ SUZURIを使ってみました。

WordPressのテーマ選びに悩んだ時は!

ホームページ制作をしている方は、一度くらいは使った事がある……と思う
『WordPress』

今まで、触った事が無かった方だと
『どのテーマを使ったら良いのか』『どのテーマが目的のデザインに合っているのか』など
イロイロと悩む事があるかと思います。

そんな時には、一番シンプルで分かりやすいテーマを使って構築するのが一番ではないでしょうか。
理解できない機能満載のテーマでは、何かあった場合の問題点を探すのにも時間がかかってしまいます。

では、テーマは何を使うか？
私が一番オススメするテーマが

『WPMEMO basic』

『無料WordPressテーマ「WPMEMO basic」を公開しました。』

テーマの特徴
WordPress3.0以上対応
IE6,IE7, IE8, IE9 , Firefox, Chrome,Safariで動作確認済み（ただし、IE6はカスタムメニューのドロップダウンが動作しません）
カスタムメニューに対応
ウィジェットに対応
無料・商用利用可
※利用の際の注意点を必ずお読みください。

このテーマ、本当に必要最低限のファイルしかありません。
imageフォルダは有っても、中身は何も入っていません!!
今まで通常のHTMLサイトを移行するには”持ってこい”のテーマです。
そして、WordPressの構造を学んだり、オリジナルテーマを作る時の基礎にもなりえます。
レスポンシブなサイトを構築しようとした場合でも、好きな物を組み込みながら制作できますので
WordPressに慣れている方も、簡単に使う事ができると思います。

もし、テーマ探しで悩んでいるようならクセの少ないテーマを使って構築してみてはいかがでしょうか。

「CSSだけでマウスオーバーでアニメーションしてくるキャプション」をやってみた

こんにちは。yasaiです。

シルバーウィーク突入ですね！
みなさんはたくさん休めそうですか？

Ri-mode Rainbow様のブログで「画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置」というのがあったので、勉強がてら僕もやってみました。

Ri-mode Rainbowさんでは、マウスオーバーするエリアを設けてやっておられましたが、僕のは画像の親ボックスにマウスオーバーしたら画像がスライドしてくる仕掛けです。

sc20150919
【DEMO】

HTML

<div class="photo">
    <img src="your-image.jpg" alt="">
    <div class="caption">
        <div>
            <p>ここにキャプション</p>
            <p><a href="">ボタンとか</a></p>
        </div>
    </div>
</div>

<div>

<p>ここにキャプション</p>

<p><a href="">ボタンとか</a></p>

</div>

親要素を.photo、その中に画像と、キャプション用、キャプションというよりいろいろコンテンツを使えるように.captionでマークアップします。

CSS

※sassで書いてます。こちらの方が見通しが良い気がするので。

.photo{
    position: relative;
    overflow: hidden;
    text-align: center;
    img{
        max-width: 100%;
        height: auto;
    }
    .caption{
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        transition: top 0.5s ease;
    }
    &:hover .caption{
        top: 0;
    }
}
.caption{
    &>div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        color: #fff;
    }
}

.photo{

position: relative;

overflow: hidden;

text-align: center;

img{

max-width: 100%;

height: auto;

}

.caption{

position: absolute;

top: 100%;

left: 0;

z-index: 1;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

transition: top 0.5s ease;

}

&:hover .caption{

top: 0;

}

.caption{

&>div{

position: absolute;

top: 50%;

left: 50%;

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

text-align: center;

color: #fff;

}

大まかにレイアウトの部分を抜粋しました。

要点は、

親要素.photoを「overflow:hidden;」にして、表示エリア以外は非表示にする。
imgは親要素に対し100％にしたい。
これは、画像要素の大きさのキャプションを表示しているわけではなく、親要素に対してのキャプション部分の大きさとしているため。上のCSSだと親要素よりも画像が小さかった場合にキャプション部分が画像からはみ出してしまいますね(汗)
キャプション部分は絶対配置で配置し、「top:100%;」で親要素の表示エリアからはみ出させて非表示っぽく。

です。

動作部分としては、

.caption{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    <span style="color: #ff6600;">transition: top 0.5s ease;</span>
}
&:hover .caption{
    <span style="color: #ff6600;">top: 0;</span>
}

.caption{

position: absolute;

top: 100%;

left: 0;

z-index: 1;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

<span style="color: #ff6600;">transition: top 0.5s ease;</span>

}

&:hover .caption{

}

親要素はマウスオーバーされたときに、transitionを使ってtopの値を0までアニメーションさせています。

.captionのheightとhover時のtopの値を変更すれば、画像全体を覆わない高さのキャプション(帯っぽいやつ)など、応用はできそうです。

今回はちょっと軽めだけどこの辺で。こういうのやってるとCSSでいろいろ表現できるようになっていった覚えたてのころの気持ちが蘇りますね。CSS楽しいなぁ。

sassで書いてしまったので、CSSのリンクも載せておきますね。

150903image_caption

今回参考にさせていただいたRi-mode Rainbow様、ありがとうございました!!

バスケットボールスピリッツ電子書籍版販売開始

雑誌「バスケットボールスピリッツ」の電子書籍版がAmazon Kindleストアで販売されています。
ただ今発売記念キャンペーン実施中！

詳細は下記からご覧ください!!

合わせてこれまでのバックナンバーの内容を紹介するページもできてます。

ちなみに皆さんは何で電子書籍読みますか??

専用の端末？スマホ？タブレット？

【Play Back バスケットボールスピリッツ】明日18日ついに電子書籍版が発売される、「バスケットボールスピリッツ」。今回はこれまでに発売されたvol.1〜5までを振り返ってみましょう。…

Posted by バスケットボール・スピリッツ on 2015年9月16日

皆さまより熱い希望をいただいておりました「バスケットボールスピリッツ」電子書籍版がついに発売決定!!いつでも、読みたい所で、お手持ちの端末で！発売日は9/18(金)、Amazonにてお買い上げいただけるようになります！今回の発売を記念して、9/18(金)〜24(木)電子書籍発売記念キャンペーンを実施します!!http://www.bbspirits.com/news/ebookd_kindle/

Posted by バスケットボール・スピリッツ on 2015年9月14日

WordPressの高速化（初級編　EWWW Image Optimizer）

サイトの高速化に取り組む仕事があったついでに、自分たちのブログがどんな状況か、
googleのpage speed Insightsを見てみたところ、

0/100

驚異の0点。はじめて見ました。ひどい。

現状、このブログは素のWordPresst＋twenty fiftyの組合せで、きわめてプレーンな状態です。しかし、google様には問題だらけと言うことで、多くの指摘をうけました。

中でも、一番の心当たりとして、画像の最適化があります。メンバー皆が好きなように画像を貼りまくった記事をアップしていることから、かなり影響がありそうです。しかし、画像の最適化のために結構な枚数の画像をFTPでダウンロードしてから、処理の後、再度アップするのはかなり面倒です。

そこで今回はお手軽にプラグインを導入します。

導入したのは、EWWW Image Optimizerです。プラグインページから新規追加でカンタンに導入できます。導入後はサイドメニューのメディアからBulk Optimizeを開き、「Start optimizing」を押すだけです。画像の数によっては、かなり時間が掛かりますので、そこだけは覚悟して押して下さい。