AGN Web! - AGN Web! BLOG

制作事例　（株）しゅんあぐり様

農家が潤い、生活者も喜ぶ。そんな農業スタイルを仲間たちと作り上げたい。

公開　2015年6月5日
URL　http://www.syun-agri.com/
TYPE　コーポレートサイトリニューアル

●リニューアル目的
・デザインのリニューアル。
・ページ構成を見直し、ユーザビリティの向上。
・LINEスタンプと合わせて制作

擬似要素のz-indexで失敗【CSS】

こんにちは、yasaiです！
5月も終わりますね。GWとGW明けの業務が目白押しだった5月が終わって、祝日のない6月がやってきますね(泣)

今日はCSSのお話です。「おしゃれシャドーつけてみよう」です。
擬似要素のz-indexでうまいこと表示に失敗した話です。

今回コーディングに当たってこんな感じのデザインいただいたのです。

メインタイトルがサイト幅いっぱいで、そこから2カラムパターンですね。ふむふむ。

それでもってメインタイトルはドロップシャドウがついてて、2カラム部分にかかってるわけですね。スマホのときも同じ感じで。はい、了解です。

んー、このシャドウってタイトル全体より短くてセンターな感じです？あ、はい、了解です。(単純にドロップシャドウじゃないのね、おしゃれしゃどー)

こういうことですねー。

やり方は色々ありそうだけど。今回はメインタイトルの後ろに幅のちょっと短い%の擬似要素を置いてそいつにドロップシャドウしましょう。これでいくことにしました。ざっくりいきます。

おしゃれ影をつけよう！

HTML

&lt;div id="wrapper"&gt;
    &lt;h1 class="title"&gt;TITLE&lt;/h1&gt;
    &lt;div class="left-column"&gt;
        &lt;h2&gt;SUB TITLE&lt;/h2&gt;
        &lt;div class="contents"&gt;contents&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="right-column"&gt;SIDE&lt;/div&gt;
&lt;/div&gt;

<h1 class="title">TITLE</h1>

<h2>SUB TITLE</h2>

<div class="contents">contents</div>

</div>

</div>

CSS

.title{
    width: 100%;
    max-width: 960px;
    padding: 16px 0;
    margin: 0 auto;
    text-align: center;
    line-height: 1;
    background-color: #fff;
    <span style="color: #ff6600;">position: relative;</span>
 }
.title:after{
    <span style="color: #ff6600;">content: '';
    width: 94%;
    height: 1px;
    -webkit-box-shadow: 0px 1px 7px #000000;
    -moz-box-shadow: 0px 1px 7px #000000;
    box-shadow: 0px 1px 7px #000000;
    position: absolute;
    bottom: 0;
    left: 3%;
    z-index: -1;
    border-radius: 2px;</span>
}

.title{

width: 100%;

max-width: 960px;

padding: 16px 0;

margin: 0 auto;

text-align: center;

line-height: 1;

background-color: #fff;

<span style="color: #ff6600;">position: relative;</span>

}

.title:after{

<span style="color: #ff6600;">content: '';

width: 94%;

height: 1px;

-webkit-box-shadow: 0px 1px 7px #000000;

-moz-box-shadow: 0px 1px 7px #000000;

box-shadow: 0px 1px 7px #000000;

position: absolute;

bottom: 0;

left: 3%;

z-index: -1;

border-radius: 2px;</span>

}

こんな感じですかね？影つきました！ちゃんとブラウザ幅に合わせて縮小もできてるし、良かったよかった！

やったことは、TITLEの94％の幅でbox-shadowを設定したafter擬似要素をTITLEの後ろに置いたということですね。影の部分がうまく出るようにbottomで調節して、シャドウの上の部分が出ないように、TITLEに背景色を設定したということです。

と、まぁできたと思って、他のとこのコーディングしてたんですけど･･･

影がコンテンツの下にあるよ!!

ざっと組んで見直して、まぁ気がつくわけですよね。(2カラム部分に背景とかを後からつけたので、発見が遅れた･･･)擬似要素が他のコンテンツの後ろにいますねーこれじゃダメです？だめ？ですよねー修正します。

CSS

.title{
    background-color: #fff;
    line-height: 1;
    margin: 0 auto;
    max-width: 940px;
    padding: 16px 0;
    <span style="color: #ff0000;">position: relative;</span>
<span style="color: #ff0000;">    z-index: 2;</span>
    text-align: center;
}
.title:before {
    background-color: #fff;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.title:after {
    border-radius: 2px;
    bottom: 0;
    box-shadow: 0 1px 7px #000000;
    content: "";
    height: 1px;
    left: 3%;
    position: absolute;
    width: 94%;
    z-index: -2;
}

.title{

background-color: #fff;

line-height: 1;

margin: 0 auto;

max-width: 940px;

padding: 16px 0;

<span style="color: #ff0000;">position: relative;</span>

<span style="color: #ff0000;"> z-index: 2;</span>

text-align: center;

}

.title:before {

background-color: #fff;

content: "";

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 100%;

z-index: -1;

}

.title:after {

border-radius: 2px;

bottom: 0;

box-shadow: 0 1px 7px #000000;

content: "";

height: 1px;

left: 3%;

position: absolute;

width: 94%;

z-index: -2;

}

修正したのは親となるTITLEのz-indexを設定したこと。

これでHTML全体のルートに対しての.titleのz軸の位置関係を明示して、それに対する擬似要素の位置関係を設定したということですかね。考えてみたらそりゃそうか、という気もしますね。

z-indexが2でbefore擬似要素が追加になっているのは他の要素との兼ね合いか、after擬似要素を他のコンテンツの上にのせる関係で、after擬似要素がTITLEの上にのってしまったためその上にTITLEと同じ大きさで背景色がTITLEと同じbefore擬似要素を間に差し込んだため。

ここまでくると、もっと簡単な方法があったかな、という気もしますね。何かもっといい方法あるよという方は、コメントお願いします。CSSだけで色々な表現ができるようになって楽しいですね。もっと勉強しなくちゃなと痛感です。

今回参考にさせていただいたサイト様です。ありがとうございました。

要素の重なりについて本気出して考えてみた（z-indexとか何とかとか）

素材が無い時は…作る!!

欲しい素材が見つからないときは、あきらめて加工を行った方が以外と効率的だったりします。

そこで、和風の写真が欲しいけど…手元にあるのは『チョット…』な場合。

まぁ、そんな事はないと思いますが

実際に、どんな処理をすると”どう変わるのか”を動画でご覧頂こうと思います。

○加工項目

・髪の色、・目の色（カラーコンタクトだったので）、・口紅の色

・浴衣の色、・髪型の調整、・メイクの地味化。

作業時間17分を5分程度でご覧下さい。
写真素材：ぱくたそ（https://www.pakutaso.com/）

仕上がりは『続きを』ご覧下さい

続きを読む素材が無い時は…作る!!

RICOH THETAのパノラマ写真を外部サーバー(theta360.com)を使わずにWordPressの記事に埋め込む方法

20150320ricoh

超お手軽に360°写真を取ることが出来るリコーのシータですが、この写真をWordPressの記事中にアップしようとすると、現状リコーのサービスtheta360.comを使い埋め込みコードを取得する事になります。ユーザー登録が必要でFacebookアカウントも必要と、少々面倒です。代わりの方法が無いか調べてみましたが、余所で紹介されていたのは別のWEBサービスを利用する方法でした。

theta360.comは簡単にパノラマ画像をWEB利用できる良いサービスですが用途によっては外部サーバーを使いたくないケースも多々あると思います。出来ればサーバー内で完結させたい！今回はWordPressの記事中へのパノラマ画像の埋め込みをプラグインのみでやってみました。続きを読む RICOH THETAのパノラマ写真を外部サーバー(theta360.com)を使わずにWordPressの記事に埋め込む方法

ウェブマスターツールの「検索クエリ」が新しくなり「検索アナリティクス」に！

今回は「検索アナリティクス（ベータ版）」の使い方を説明したいと思います。

ウェブマスターツールの検索トラフィックにある「検索クエリ」が新しくなり、
「検索アナリティクス（ベータ版）」がリリースされました。

検索アナリティクスって何が出来るの？

サイトがどれくらいの頻度でGoogleの検索結果に表示されたかがわかります。
4種類のデータを6種類のカテゴリでレポート表示できます。

検索アナリティクスの使い方

4種類のデータをグラフと表で表示できる。

赤枠部分の項目を追加してグラフに表示させることができます。

◾クリック数：Google検索結果ページに表示されたあなたのサイトをクリックして移動した回数
◾表示回数：あなたのサイトがGoogleの検索結果に表示された数
◾CTR（クリック率）：Googleの検索結果においてサイトのコンテンツがクリックされた割合、クリック数÷表示回数
◾平均掲載順位：Googleの検索結果におけるサイトの「最上位」の平均掲載順位

6種類のカテゴリを表で表示できる。

赤枠部分のカテゴリごとに表示させることができます。

・クエリ：検索されたキーワードごとのカテゴリ
・ページ：あなたのサイトのページごとのカテゴリ
・国：検索された国ごとのカテゴリ
・デバイス：PC、モバイル、タブレットごとのカテゴリ
・検索タイプ：ウェブ、画像、動画ごとのカテゴリ
・日付：指定した日付ごとのカテゴリ

クエリ
Googleで検索されたキーワードごとのデータを表示します。
あなたのサイトがどのようなキーワドで検索されているかわかります。

ページ
あなたのサイトのページ別のデータを表示します。
ページごとのパフォーマンスを比較できます。

国
検索された国ごとのデータを表示します。
特定の国のみでの検索パフォーマンスを確認できます。

デバイス
PC、モバイル、タブレットごとのデータを表示します。
デバイスごとの検索パフォーマンスを確認できます。

検索タイプ
ウェブ、画像、動画ごとのデータを表示します。
基本ウェブの検索ですが画像や動画でもあなたのサイトを検索しているかを確認できます。

日付
指定した範囲の一日ごとのデータを表示します。
日付単位で検索パフォーマンスを確認できます。

フィルタ機能
各カテゴリでフィルタ機能が使えます。
フィルタを使うことで見たい情報だけに絞り込むことができます。

・クエリ：キーワードで絞り込みが行えます。

・ページ：URLの文字で絞り込みが行えます。

・国：検索された国を選んで絞り込みが行えます。

・デバイス：PC、モバイル、タブレットで絞り込みが行えます。

・検索タイプ：ウェブ、画像、動画で絞り込みが行えます。

・日付：指定した日付絞り込みが行えます。

比較機能
今回、追加された機能としてデータの比較をすることができるようになりました。

例として掲載順位のデータだけでデバイスの「PC」と「モバイル」を比較します。

「PC」と「モバイル」を選択

グラフ上に「PC」と「モバイル」順位の変動が同じグラフで見ることができます。

補足

画像のグラフ上にある「更新」ですが、2015/4/21に行われた
モバイルフレンドリーアップデートの日です。

「更新」の日を境にモバイルの検索順位の推移も調べることができます。
SEO対策の効果測定や改善のためには、検索アナリティクスはかなり実用的なツールになります。
Googleアナリティクスでは得られない貴重な情報がありますので、
工夫すれば様々な使い方ができます。

是非、使ってみてください。

制作事例　しゅんあぐり様LINEスタンプ

弊社で制作させていただいたしゅんあぐり様LINEスタンプ「ビーンくんとフラちゃんと。」が販売開始されました！

購入はこちら！

[スタンプの一部をご紹介]

※画像はサンプルです。

みなさんバンバン使ってくださいね。

さてさて、いよいよ販売が開始されました。何だと思います？しゅん・あぐりのLINEスタンプです！ぜひ使ってみてください。http://line.me/S/sticker/1119924よりお入りください。

Posted by 株式会社しゅん・あぐり on 2015年5月12日

Webデザインに使いたい! Photoshopスマートオブジェクトのススメ

Webデザインのカンプ完成にいたるまでに、ディレクターやクライアントからの校正を重ね、その都度、何度か編集作業が必要になってくることが多々あります。

しかしPhotoshopで編集する際、画像の劣化にどうしても気をつかわなくてはなりません。

しかし、スマートオブジェクトを活用することで
そういったことを気にせず修正作業をすることが可能になります。

Webデザインにおいて、なにかと便利なスマートオブジェクト。
今回はそんなスマートオブジェクトの使いどころをご紹介します。

続きを読む Webデザインに使いたい! Photoshopスマートオブジェクトのススメ

ハッシュタグを見極める

Twitterも身近なツールとなっていますが、いろいろな利用をされるためタグといえる『ハッシュタグ』も乱立していて、普通に『日本語ハシュタグ』も増え続けています。
そこで、使われているハシュタグが何の意味を持った物なのか？

または、これから利用するハッシュタグが思わぬジャンルで使われていないかチェックする場合、使えるサイトがあります。

ハッシュタグクラウド：http://hashtagcloud.net/

このサイトでは、ハッシュタグの検索はもちろんの事

ジャンル別のランキング、開催予定のイベントで使われているハッシュタグ、最近出現したハッシュタグなどを見る事ができます。

1つのハシュタグに関し…基本的に登録制なのですが、タイトル、カテゴリー、ハッシュタグの説明を見る事ができます。（登録されていれば）

また、、関連するハッシュタグや最近のツイート状況も確認できるグラフも付いていますので、どれほどの勢いがあるかもチェックできます。

検索エンジンにも拾われやすいようなので、イベント・広告などでハッシュタグをもうける場合、先にハッシュタグクラウドで登録を行ってから拡散したほうが後々の拡散状況や関連するモノやコトをチェックする事が簡単にできますので少しでも情報は多い方が良いと思いますので、利用してみて下さい。

制作事例　椎谷板金工業様

屋根、外壁、雨樋から採光システムまで、
快適な暮らしのための修理･施工工事は私たちにお任せください。

公開　2015年4月17日
URL　http://www.yane-toi.com/
TYPE　コーポレートサイトリニューアル
CMS　Wordpress

●リニューアル前の課題と要望
・新しい事業（採光システム）始めるにあたってホームページに情報が無い。
・デザインが古いので新しいデザインにしたい。
・施工実績も更新できるようにしたい。

●リニューアル後
・CMSを導入することにより、施工実績を更新できるようにした。
・新しい事業（採光システム）のページを増やし業務内容を充実した。
・サイト内構成を整理して、ユーザーの導線を明確にした。

Twitterのタイムラインを埋め込む

みなさんお花見はしましたか？どこかおすすめはありますか？

出店で食べるお好み焼きが好きです。

新潟もたくさんお花見スポットがあるので、来年ぜひ行ってみてくださいね。

さて今回はTwitterのお話です。

サイトのサイドとかフッターにTwitterのタイムラインを埋め込むのは良く有ると思います。今回はその基本的なカスタマイズについてです。

Twitterウィジットのコードを取得する

Twitterにログインしたら、「設定」→「ウィジット」と進めます。新規作成ボタンからTwiterウィジットを作ります。

基本的な設定はこの画面で行います。

設定する項目は

ユーザー名
＠ツイート除外の有無
画像を自動で開くかどうか
高さ
テーマの色（light/dark）
リンク色

です。

設定が終わったら「ウィジットを作成」ボタンでコードが表示されるので、表示されたコードをコピーして自分のサイトへ貼付けます。これで基本的にTwitterのタイムラインを埋め込むことができました。

@agn_webさんのツイート

Twitterウィジットをカスタマイズする

埋め込んだウィジットのdata-chrome属性でカスタマイズができますよ。

data-chrome属性で変更できる設定は

noheader：タイムラインのヘッダーを無くします。
nofooter：タイムラインのフッターやツイートボックスを無くします。
noborders：ボーダーを削除します。
noscrollbar：タイムラインのスクロールバーを削除します。
transparent：タイムラインの背景を透明にします。

@agn_webさんのツイート

今回はスクローバー以外は全部設定してみました。data-chrome属性を複数設定する場合は半角スペースで繋ぎます。transparentで背景が透明になっていることに背景を設定したボックスの中に入れてあります。


&lt;a class="twitter-timeline" href="https://twitter.com/agn_web" data-chrome="noheader nofooter noborders transparent" data-widget-id="000000000000000000"&gt;@agn_webさんのツイート&lt;/a&gt;
&lt;script&gt;// &lt;![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]&gt;&lt;/script&gt;

<a class="twitter-timeline" href="https://twitter.com/agn_web" data-chrome="noheader nofooter noborders transparent" data-widget-id="000000000000000000">@agn_webさんのツイート</a>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

// ]]></script>

data-chrome属性以外にも、幅・高さ・ボーダー色・表示するツイート数なども設定できるようです。

詳しくは「カスタマイズに関するドキュメント」をご覧ください。

これでサイトデザインに合わせて使いやすくなりましたね！しかし前からこんなに変えられたかなぁ。

AGN Web TeamでもTwitterしてます。お気軽にフォローしてくださいね！@agn_web

ちなみにFacebookはこちら。