Flexboxの便利さは分かったけど、実際にどんな場面で、どのプロパティを使えばいいのか分からない・・・という方にオススメの体験デモをご紹介します。Flexboxでメニューを作るときの参考にしてみてはいかがでしょうか。 続きを読む 続きを読む⇒
Googleが提供するツールを用いてマークアップする方法をご紹介します。 ツールを用いてサイトを更新すると、Googleがサイト上のデータを認識できるようになり、そのデータが検索結果のリッチスニペットに表示されます。ただ、細かな指定には向いていないので、基本的なデータ部分はツールを使い、足りない部分は直接マークアップで補うという使い分けをするのもおすすめです。 続きを読む 続きを読む⇒
構造化データをマークアップする際、記述の文法やプロパティ名が間違っていると、正しく認識されず、効果を発揮することができません。 コードが長くなると、ミスも見落としがちに。スペルミスやカッコの閉じもれ一つで、せっかくのコードも意味がなくなってしまいます。 記述後は必ずテストツールでチェックすることをおすすめします。 そこで今回は、マークアップの確認に役立つテストツールをご紹介します。 続きを読む 続きを読む⇒
Google+ローカルページは削除できない!管理することが大切 Googleで企業やお店を検索すると、右側にGoogle+のローカル情報が表示されることは、多くの方がご存知だと思います。大企業であろうと個人経営の小さな店であろうと、実在の住所を持っていればほとんどの会社 ... 続きを読む⇒
今回は、構造化データをHTMLに追加するため、schema.orgボキャブラリをmicrodataフォーマットに従って記述する方法をご紹介します。 ここ数年の間にもschema.orgの取り組みはどんどん発展しており、今後もこまめにチェックしていく必要がありそうです。 続きを読む 続きを読む⇒
SEO強化!構造化データをマークアップする「schema.org」概要 前回の記事「クリック率が向上する、これからのSEOに不可欠なセマンティックWebと構造化データ」でご紹介した通り、構造化データをマークアップする方法は二つあります。今回はそのうちの一つ、HTMLに直 ... 続きを読む⇒
近年注目されている「セマンティックWeb」。これは、Webページの持つ意味や背景を、人間だけでなくコンピューターにも伝えていこうとする取り組みです。 続きを読む 続きを読む⇒
今回はFlexboxの使い方について、詳しくみていきたいと思います。 まず、flexboxを利用する上で、最初に覚えておきたい用語がいくつかあります。 ここでご紹介した以外にも細かい指定もできます。これからのレスポンシブWebに必須のFlexbox。ぜひ、今のうちに使い方をチェックしてみてください。 続きを読む 続きを読む⇒
これまで頭を悩ませて来たfloat問題やclearfixでの回り込み解除の問題を一気に解決してしまうFlexbox。古いブラウザではサポートされていないので注意が必要ですが、これから先、レスポンシブレイアウトを作る上で主要なモジュールになるはずです。 今から準備しておくといいですね。 続きを読む 続きを読む⇒
Googleがモバイルフレンドリーなサイトを推奨しはじめ、これからのWeb制作にはモバイル対応が必要不可欠になっています。ですが、日々の更新や制作に追われ、既存サイトのモバイル対応にまで手が回らない・・・という急がしいデザイナーさんもいるのではないでしょうか。 そこで今回は、WordPressプラグインをご紹介します。 続きを読む 続きを読む⇒
メニューとしても機能する、おしゃれなスクロールバー「Scrollmenu.js」。縦や横に配置したスクロールバーをクリックすると、ページ内のコンテンツにアクセスします。 シンプルでいながら機能的で、縦長ページのデザインに最適。タッチデバイスにも対応しています。 続きを読む 続きを読む⇒
formタグのactionの値を変更するだけでメールフォームを送信できるサービス。しかも、月1000通までは無料で使えます。面倒な登録もいりません。 続きを読む 続きを読む⇒
以前、WordPressで制作したサイトのメニューをレスポンシブ化する方法をご紹介しました。今回はこの続きとして、フッターをウィジェット化し、レスポンシブに対応させる方法をご紹介します。 続きを読む 続きを読む⇒
WordPressサイトをテストするとき、xamppやapacheを使ってローカル環境を構築することが多いと思います。ただ、これらの方法は設定が面倒です。もっと簡単にローカル環境を作りたい、というときにおすすめなのがこちら。 続きを読む 続きを読む⇒
「Pizza Amore」は、数値を指定するだけで、チャートを作成できるjQueryプラグイン。煩雑な数字を視覚的に表すことでユーザーに分かりやすく説明することができます。 特にこのPizza Amoreはとても使いやすく、機能も十分に揃っています。 続きを読む 続きを読む⇒
Bootstrapで手軽にかっこいいサイトを作りたいときにオススメの無料テーマ8選 デザイン性が高いサイトを手軽に作りたいときには、Bootstrapのテーマを活用するのがおすすめ。レスポンシブ対応されているので、スマホ用、タブレット用とレイアウトに頭を悩ませる必要もあ ... 続きを読む⇒
写真をクリックするとかっこいいポリゴンスタイルのSVGアニメーションを伴って拡大し、コンテンツが開く「Card Expansion Effect with SVG clipPath」。ページ遷移ではなく、元ページの上にコンテンツが広がるようなイメージで、美しい動きをスムーズに楽しむことができます。 続きを読む 続きを読む⇒
今回は、動画だけでなく、PDFやオフィス系文書、ツイート、CodePenのコードまで、さまざまなメディアをページに埋め込んでくれるjQueryプラグインをご紹介します。 これまでは面倒だったり諦めていたようなフォーマットまで埋め込むことができるEmbed.js。 お使いのプラグインでは埋め込みが難しい、というときに試してみてはいかがでしょうか。 続きを読む 続きを読む⇒
Bootstrapと組み合わせると、簡単にエラーメッセージやプログレスバーなどの便利機能が使えるようになるプラグインをご紹介します。 一つの機能ごとにプラグインを実装しなくても、これ一つでよく使う機能がまとまっているので、とても便利です。 興味があればぜひ、Bootstrap導入サイトで試してみてください。 続きを読む 続きを読む⇒
画像の一部を反射させるプリズム効果が美しいスライダー「Prism Effect Slider with Canvas」。HTML5のカンバスとJavaScriptを使って実装されており、IE9にも対応する優れものです。 続きを読む 続きを読む⇒
Webの修正指示を行う際、メールにテキストで説明したり、画面キャプチャした画像にExcelやPowerPointなどのソフトを使って指示を入れたり、印刷して赤字を入れたりすることが多いと思います。 ですが、指示が具体的に伝わらなかったり、指示書作成に時間がかかったり、印刷コストがかかったりと、さまざまな問題があります。複数人で回覧する時はなおさら。そこで今回は、修正時のやりとりに便利なオンラインサービス「AUN」をご紹介します。 続きを読む &rarr続きを読む⇒
SEOにおいて、コンテンツの重複は避けたいものです。ですが、特にECサイトなどではほとんど同じ内容のページが自動生成されてしまうことが当然のようにあります。 そこで活用したいのが、canonicalタグ。 canonicalとは、WebページのURLを正規化するタグです。ほとんど同じコンテンツのページがサイト内に存在する場合に、どちらが正規URLかを検索エンジンに伝え、優先的に検索結果に表示させるものです。 また、301リダイレクトと同じような効果をもち、リンク等のSEO資産を受け渡すことができます。 続きを読む⇒
会員登録やログインフォームをモーダルウィンドウで表示させるサイトが増えてきました。ページ遷移なしに入力ができるので、モバイル端末でも動作がスムーズです。 そこで今回は、モーダルウィンドウでフォームを表示させ、さらにボタンクリックなどのイベントを取得できるjQueryプラグイン「Remodal」をご紹介します。 続きを読む 続きを読む⇒
前回はWordPressでショッピングサイトを構築できる「WooCommerce」についてご紹介しました。とても簡単・便利にECサイトを作ることができ、日本語対応もされている優れたプラグインですが、決済方法が銀行振込と郵便振替の他は、PayPalや代金引換などに限られており、もっとも利用が多いと予想されるクレジットカード決済には対応していません。 そこで今回は、WooCommerceにクレジットカードなど3つの決済機能を追加するECサイトプラグインをご紹介します。 続きを読む 続きを読む⇒
カスタマイズの幅が広く、デザインもブランドイメージに合わせられるWordPress。ECサイトとして利用したい、と考える方は多いのではないでしょうか。ただ、システムを自社で作り上げるにはコストがかかりますし、既存のプラグインを使う場合でも、日本の税率や住所表示などに対応できるものが少ない、という現状でした。 これらの問題を解決してくれるのが、WooCommerceです。 続きを読む 続きを読む⇒
複数枚の写真の加工をしていると、全体の色調を合わせたいことがあると思います。特にサイトに使う写真であれば、同じトーンで揃えた方がキレイですよね。 トーンカーブやレベル補正を使えば微調整ができますが、「この写真と同じ色調にしたい」というときに便利なのが「カラーの適用」です。 写真加工をしていて、思うようなイメージに仕上がらない、というときには、イメージに合う写真と組み合わせてみるといいかもしれません。 ぜひ、試してみてください。 続きを読む &rar続きを読む⇒
HTML5やCSS3が発展を続けている今、Webデザインやアニメーションはますますダイナミックに進化しています。その変化を感じられる要素の一つがナビゲーションメニュー。もはやインデックスとしての役割でなく、サイトのテーマやデザイン全体に関わる重要なパーツになっています。 今回は、大胆で素敵なナビゲーションメニューを使った9つのサイトをご紹介します。 続きを読む 続きを読む⇒
ページの隅にあるボタンをタップorクリックすると、ナビゲーションがスライドしながら出てくるoff-canvasメニュー。Facebookでもおなじみのメニューですね。レスポンシブ対応で、画面の小さなスマホでもコンテンツを邪魔せず、必要な時にシュッと表示させることができるのでとても便利です。 今回はこのoff-canvasメニューに様々なエフェクトを付けることができるプラグインをご紹介します。 続きを読む 続きを読む⇒
前回、子テーマを作成するメリットと、子テーマの作り方についてご紹介しました。今回は、子テーマを利用して、テーマを簡単にレスポンシブ対応させる方法をご紹介します。 続きを読む 続きを読む⇒
WordPressでは、優れたテーマが多くの制作者によって配布されています。 ところが、バージョンアップしてしまうと、それまでカスタマイズも消えてしまうのが難点。 そんなときに便利なのが、子テーマです。 WordPressでは、親テーマと子テーマに同じ名前のファイルが存在すれば、最初に親テーマを読み込み、次に子テーマを読み込んで上書きします。 どういうことなのか、実際にやってみましょう。 続きを読む 続きを読む⇒