デバイスごとにcssを変えなければいけないナビゲーションメニューですが、Bootstrapを使えば簡単にコーディングができます。しかも、ドロップダウンメニューなどの面倒な小技も一瞬で作れてしまう手軽さ。 今回は、Bootstrapで作るいろいろなナビゲーションメニューの例をご紹介します。 続きを読む 続きを読む⇒
前回はアカウント作成後の基本設定についてご紹介しました。今回は、メッセージの一斉配信やタイムライン投稿、送信数のチェック、NGワード設定など投稿に関する基本的な操作方法をご紹介します。 続きを読む 続きを読む⇒
多数のお客さんやファンに向けてメッセージを送ったり商品・サービスのPRができるLINE@。今回は、アカウントを作ったらまずやっておきたい最初の設定についてご紹介します。例えば特定のキーワードを含むメッセージが来たときに応答するメッセージや、友だち追加時のあいさつ文も登録できます。 続きを読む 続きを読む⇒
情報発信のメリットや機能が盛りだくさんの「LINE@」。今回はそんなLINE@のアカウントの作り方についてご紹介します。インストールから管理画面の設定方法まで一連の流れを解説しています。 続きを読む 続きを読む⇒
さまざまな店舗・サービスが情報発信に利用しているLINE@。プライベートなLINEとは違い、フォロワーに向けて効果的な情報発信をできるしくみがあります。今回はこのLINE@の特徴や使い方について、何回かにわけてご紹介します。 続きを読む 続きを読む⇒
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です。 続きを読む 続きを読む⇒