レスポンシブECサイトとWordPressを組み合わせ効率的でSEOに強いサイトを作る！ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブECサイトとWordPressを組み合わせ効率的でSEOに強いサイトを作る！ 2013.09.03 2020.03.13 WordPress レスポンシブWebデザイン導入が急務 最近Web業界の新たな主流になっている「レスポンシブWebデザイン」。今年の春と比べても実際に導入しておられる企業様が急増してきています。 PC/スマホ/タブレットなどあらゆるデバイスに1ソース/１URLで運用できるレスポンシブWebデザインは、Webを運用する担当者様からするとこれまでのデバイス毎にサイトを構築/運用する方法と比べると比較にならないほどの効率化を図れます。 また、Googleが推奨するレスポンシブWebデザインを導入することによりSEO効果も期待できるという点が多数の企業様が導入している理由と考えられます。 しかしECサイトに目を向けてみるとレスポンシブWebデザインを導入している企
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト
サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</
howtohp.com - howtohp リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
参考にしたい！ネットショップ３社のお手本Facebookページをチェックしてみよう。 - BASE U｜ベイスのネットショップ開設・運営・集客を解説するWebメディア
ソーシャルメディアでの集客による基本スタンスから、具体的な運用の方法までこのBASE UではFacebookページの活用方法をご説明して来ましたが、今回は実際にネットショップを運営している３社のFacebookページ活用事例をご紹介したいと思います。 カバン、雑貨、野菜というそれぞれジャンルの違う商品を扱う３つのネットショップのFacebookページですが、どれも自信をもってオススメできるお手本と呼べるべきものです。自分のFacebookページの運用を通してよりよいコミュニケーション方法を見つけていくのもいいですが、成功事例とも呼べるページを研究するのも大切でしょう。あなたはどのFacebookページを参考にしてみたいですか？ 土屋鞄製造所 手作りの革製品を実店舗とネットショップから販売する土屋鞄製造所のFacebookページです。”「革」香りをデザインに込めて、工房から手作りの温もりを届
ズレる・ハマるChromeのページ印刷トラブルへの対処法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。毎日、1pxに泣いているライターの内藤です。 最近、webページ印刷に関してChromeでハマったことについて3つ書きたいと思います。 Chromeでの印刷に備えてcssスプライトに1pxの余白を足そう ボタンのロールオーバーなどでよく使いますよね、こういうの。 【css】 a { display: block; width: 236px; height: 109px; overflow: hidden; } a:hover img { margin-top: -109px; } 【html】 <a href="#"><img src="common/img/top/ban_blog.png" width="236" height="218" alt="button" /></a> ね、ね、やりますよね？ ところが･･････ Chromeの印刷プレビューではズレる お客さん「
ウェブデザイナーは要チェック！フラットに効く400種以上のカラーがセットされたスウォッチ素材
フラットなユーザインターフェイスを作成する際にぴったりな400種以上のカラーがセットになったPhotoshop用のスウォッチ素材を紹介します。 トレンドカラーとして、フラットに興味がない人でもカラーの引き出しが増えますね。 Photoshop Swatches Library for Flat UI Design スウォッチは上記ページの「Download .aco」から直接acoファイルがダウンロードできるので、そのファイルをPhotoshopのスウォッチパネルから「読み込み」や「置き換え」して利用します。 Photoshopに入れるとこんな感じです。 Photoshopのスウォッチ サムネール表示だと何があるのか分かりにくいので、半分くらいリストで紹介します。 半分でも長いので、分割で。 最初の方は、フラットデザインでよく見かけるカラーが豊富にあり、グレーも揃っています。
CSSのみで画像を背景（画面全体）にアスペクト比を崩さず中央配置する | soplog(そぷログ)
CSSのみで画像を背景にベターっと表示するサンプルを作りました。 背景と言っても実際に配置するのは img要素 です。 ※IE7～8は、画像よりウインドウが狭くなった時、中央配置されません。 ※IE6はアスペクト比が崩れます。 ※Media Query と min-*** に対応すれば、IE6～8でも意図した動作になるはずです。 サンプル HTML <!-- 画像のサイズは指定しない --> <div id="bg-fill-image"> <img src="http://placekitten.com/g/1024/768"> </div> <div id="wrapper"> <!-- 通常のコンテンツはここに書く --> </div> CSS html { /* 内包する要素に関わらず高さを保持する */ height: 100%; } body { margin: 0; padd
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
【2013年注目必至！なCSS仕様】CSSフィルタ、これはすごい！（デモ付き） | OpenWeb
以前から気になっていたCSSフィルタについて、ちょっと調べてみました。 結果、あまりにお手軽に、効果絶大なエフェクトをかけられることが判明して、ちょっと興奮しています。これはすごい！ CSSフィルタは、SVGで従来から規定されていたFilter Effectsを、CSSの世界に持ち込んだものです。 CSSとSVGのワーキンググループが共同して立ち上げたCSS-SVG Effects Task Force (FX TF)により、「Filter Effects 1.0」という仕様として策定が進められています。 この仕様によって新しく導入されるCSSプロパティはいくつかありますが、主なものはfilterプロパティです。 filterが素晴らしいのは、ぼかしやドロップシャドウといったエフェクトを、CSSのみで簡単に指定することができるからです。 例えば、要素にぼかしをかけたい場合は、以下のようなプ
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
MdN Design｜総合情報サイト
高さが固定のエリアに単一行のテキストを天地中央にセンタリングすることは、line-heightを高さと同じに指定する等の方法で可能だが、複数行となると簡単にはいかない。複数行にまたがるテキストを天地中央にセンタリングしたいということは多いだろう。 それを実現する方法のひとつとして、「CSS TRICKS」の「Vertically Center Multi-Lined Text」（css-tricks.com/vertically-center-multi-lined-text/）が参考になるだろう。このサイトで紹介されているサンプルは高さが固定になってしまっているが、これを参考に高さが可変の例を紹介しよう。 ここでは【1】のようなものをつくる場合を考えてみる。まずは、HTML【2】とCSS【3】を用意しよう。メニュー用のリスト要素ul.boxに対して、「display:table;」を指定
[CSS]複数行のテキストを天地左右中央に配置するスタイルシート
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
CodeKitで簡単にCSS Preprocessorを利用する！
CodeKitで簡単にCSS Preprocessorを利用する！ 本エントリーはCSS Preprocessor Advent Calendar 2012の12日目のエントリーです。 CSS Preprocessor Advent Calendar 2012とは年末の12/1〜12/25まで、みんながブログなどでCSS Preprocessorについて熱く語るというイベント、僕は2012年一番重宝したMacアプリ「CodeKit」について解説します。 そもそもCSS Preprocessorってなに? CSS PreprocessorはSassやLess、StylusといったいわゆるCSSメタ言語のこと。CSSメタ言語とはCSSと異なる文法でCSSを記述できる言語です。 たとえば、通常のCSSでは #bar{ width:100%; } #bar .foo{ color:red; } #
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
連続した半角英数字を改行させる｜シラサヤ備忘館
HTML＋CSSです。 連続した半角英数字を表示しようとすると、枠内でキチンと改行されずにレイアウトが崩れたり、枠からはみ出たりという現象が起ることがあります。 ユーザが入力できるシステムだった場合、こちらが想定もしないような長～い半角英数字を連続して入力することがあり得、結果全てのレイアウトに影響が出てしまいます。 -- そもそもこれはブラウザが、 連続した文字列のどこで文章を折り返して良いかを判断できない為に起こる問題です。 英語では文字列の単語と単語の間に半角スペースが入るので、文字列が1行で表示出来ないとブラウザに判断された場合、文章の意味が壊れないようにこの半角スペース部分で折り返しをしてくれます。 日本語の場合、半角スペースを入れるという文化がありませんが、連続した日本語の文字列は適当な所で自動改行がなされます。 これは単語の区切りを認識することは出来ないものの、日本語は一文字
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OFFICE AVANTE, LLC. | WEB制作・WordPress・ITトレーニング・WEBシステム開発
Free Website Builder | Free Website Maker | White label - IM Creator
JW Player Support
【年の初め】目標達成を実現するために、心得ておくべき4つのコツとは - IRORIO（イロリオ）
dncl : web用素材サイト デンクラ | CSSを使った角丸ボックスの表現法あれこれ : CSSテクニック