Web制作関連の記事一覧



Bootstrapをグリッドレイアウトっぽくする


みなさん、ウェブページの制作にBootstrap使っていますか。

最初から色々とclassが用意されていて便利に使えますよね。


しかし、Bootstrapは基本的にキレイに四角に並んだレイアウトをするのには向いていますが、並びに高さが違うものがあったりすると、あまりキレイに見えないのが難点です。


例えばこんな感じです。

Bootstrapで隙間が空いてしまう例


1行だけならまだ気にならないかもしれませんが、これが数行になると、高さが低い要素の下の隙間が気になります。この高さが違う要素をうまく処理できないものでしょうか。


そうした場合にMasonryという手法があります。

高さや幅が異なる要素のものを隙間なく敷き詰めるレイアウトの方法です。jQueryを使ったJavaScriptが有名ですね。


Masonry-01


今回はBootstrapを使いつつ、Masonryのようなグリッドレイアウトにする方法を紹介します。

スクリプト不要で、CSSを追加するだけなので、簡単に準備できる点がおすすめです。


ただ今回紹介する方法は、本格的なものではない簡易的なものなので、「幅が同じ」で高さが異なる要素を並べることに限定した使い方を想定しています。

具体的な使用例としては、TwitterやInstagramなどのSNS投稿をウェブページに埋め込むときに使います。

記事の続きを読む



20181125-HubSpotのフォームのスタイルCSSを変える-00

皆さん、HubSpot使っていますか?


ウェブのMA(Marketing Automation/マーケティング・オートメーション)でよく聞くツールのひとつがHubSpotです。

HubSpotの簡単な説明をすると、ベースにCRM(Customer Relationship Management/顧客とのやり取りを管理すること)としての機能がベースにあって、訪問客を惹き付け(アトラクト)、関係を築き(エンゲージ)、満足させる(ディライト)機能(※)があり、この流れを自動化も含め、より効果的に進めていくためのツールです。

もう少し知りたい方は以下のページをご覧ください。

インバウンドマーケティングとは? | ハブスポット

※ー罎付ける(アトラクト) 見込み客に転換する(コンバート) 8楜匆修垢襦淵ローズ) じ楜劼鯔足させる(ディライト)という定義もあります。


HubSpotのCRMは便利です。複数の営業担当がいる場合、お客様とのやりとりを自動で記録でき、コメントや売上情報なども残せるので、他の担当者がHubSpotのサイトで記録されたやり取りを見ることで引き継ぎが簡単に行えます。HubSpotのCRMはサインアップ(登録)すれば、無料ですぐに使えます。


さて、検索エンジンやSNSからウェブサイトへ訪問した方が、資料請求やお問い合わせをするときに必要となるのはフォームの機能です。HubSpotでは、資料請求やお問い合わせなどで使えるフォーム作成の機能を持っていて、フォームに入力された情報はCRMへそのまま記録することができます。

フォームのレイアウトはドラッグ&ドロップで簡単にできるので、複雑なプログラムがわからない方にもオススメです。


このフォームですが、標準のままだとフォームのスタイルの関係で、入力欄やエラー表示がわかりづらいのです。


HubSpotの有料版(HubSpot Marketing Starter以上)を契約していると、簡単に直せるようですが、まだそこまで本格導入するまでは…という方向けに、今回は無料版のままでも、フォームのスタイルの変更をできる方法を紹介します。

記事の続きを読む



マーケティングオートメーションの基礎 卩愀覆篳類、マーケティングの変化を学ぶ〉

最近ウェブ制作の界隈でマーケティングオートメーション(Marketing Automation:MAと書かれることも)という言葉を聞くようになってきました。

マーケティングの自動化というと、人が介在しないというイメージからAIとかプログラミング的なことなのかなとも思ってしまいますが、どういうものなのでしょうか。


詳しくわかっていないので、オンライン学習サイトの「スクー」で「成果を最大化するマーケティングオートメーション」という授業があったので、受講して学習してみることにしました。

このページはその授業を受講して、調べたことや、学んだことのメモになります。横文字や略字が結構出てくるので、調べながら授業に臨みました。

 

第1回の授業は「マーケティングオートメーション基礎」と題して、マーケティングオートメーションが生まれた背景や歴史、マーケティングオートメーションに必要とされる価値や機能などを学べます。

  • マーケティングオートメーション発祥の背景/歴史
  • ルーツから辿るマーケティングオートメーションの分類
  • 顧客中心時代に起きている4Pの変化
  • 顧客中心時代のマーケティングオートメーションとは
  • マーケティングオートメーションに求められている機能/価値
  • マーケティングオートメーションを活用したエンゲージメント構築の例
成果を最大化するマーケティングオートメーション(スクー)


講師は株式会社マルケト(Marketo)の弘中 丈巳さんです。



記事の続きを読む




20160726-jQueryでiframeの高さを自動調整-01

Webページの制作でiframeで他のページの情報を埋め込んだり、ウィジェットを埋め込んだりすることってありますよね。

このiframeは高さが決まった高さなら、CSSで高さ(height)を事前に決めてあげればよいのですが、昨今のレスポンシブWebデザインでは、iframeの高さがPCとスマホ・タブレットで結構変わってしまうことも多くて、事前に高さを決め打ちで指定できないことも多くあります。


そこで、JavaScript(jQuery)を使って、iframeの高さを自動的に設定してくれるスクリプトを紹介します。



記事の続きを読む



20160716-BootstrapのCSSのclearfixを最新版もチェック-01

みなさん、Bootstrapを使ってWeb制作していますか?

私の勤めている会社もMovable Typeで管理しているサイトはほとんどBootstrapのフレームワークに移行して、制作とメンテナンスがかなり楽になりました。Bootstrapはドキュメントが豊富なので、参考になる情報が多く便利ですね。


さて、そんなBootstrapですが、Bootstrap 3.xのCSSとBootstrap 4(4.0.0-alpha.2)のCSSを見ていたら、float要素を解除するclearfixのCSSが「ああ、ここまで短くなったのか〜」と感じたので、紹介します。



記事の続きを読む



20160629-MovableTypeの正規表現置換のregex_replaceモディファイア-00

タイトルで落ちているような気もしますが、今回はMovable Typeに標準で搭載されているモディファイア「regex_replace」についてです。



この「regex_replace」モディファイアは、変数や値を出力するときに正規表現を使用して置換できる大変強力なモディファイアです。

コンテンツのアドレスをデータベースの中身を書き換えずに出力だけ変化させたい時に便利に使っている方も多いでしょう。

記事の続きを読む



20160621-mtObjectLoopでブログの最新記事を表示する-00

●以前書いたテンプレートコードでエラー

以前、Movable Typeにてウェブサイトのサイドバーにブログの最新記事●件を出す方法として、以下のブログ記事を書きました。

この中で、mt:MultiBlogタグとモディファイアの「ignore_archive_context="1"」を組み合わせて使ったテンプレートコードを紹介しました。

<mt:BlogID setvar="blog_id">
<mt:MultiBlog blog_ids="$blog_id" ignore_archive_context="1">
    <mt:Entries lastn="○○">
        個々のブログ記事の情報を出力するテンプレートタグ
    </mt:Entries>
</mt:MultiBlog>


このテンプレートコードで、正常に動作していたのですが、とあるページを見てみると、ダメなページがありました。

正常に構築できていなかったページはカテゴリーアーカイブのページです。


会社のDTP情報のサイトなどは、月別アーカイブとカテゴリーアーカイブのテンプレートコードを一つにして使用して体裁を一緒にしているのですが、月別アーカイブは正常に構築されているのに、カテゴリーアーカイブは正常に構築されていなくて、内容が最新ではありませんでした。

エラーに気がつかなかったのは公開のタイミングが「公開キュー経由」の構築だったからです。

公開のタイミングを「スタティック」にしてみると「Can't call method "id" on an undefined value」というエラー表示。

20160621-mtObjectLoopでブログの最新記事を表示する-01

記事の続きを読む



20160619-SliderPro-クリックできない問題を修正-00

画像をウェブページ上でスライドのように切り替えるスクリプトは、いわゆるスライダーと呼ばれます。



●高機能スライダースクリプト「Slider Pro」

このスライダーを使うためのスクリプトとして有名で高機能なスクリプトに「Slider Pro」があります。

Slider ProはjQueryと一緒にロードして使うタイプのスライダーのスクリプトです。

20160619-SliderPro-クリックできない問題を修正-02

画像出典:Slider Pro - Elegant and Professional Sliders



Webサイト制作に役立つ情報を発信しているサイト「コリス(Coliss)」でも紹介されていましたね。

Slider Proの特徴

Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。

[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro( コリス)


実際に制作したSlider Proを使ったスライダーはこんな感じ。

20160619-SliderPro-クリックできない問題を修正-01

画像出典:相談できる印刷会社 吉田印刷所

記事の続きを読む



20160514-MovableTypeでこのカテゴリーの記事がなかったら-00

Movable TypeもMovable Type 3からの長いつきあいなのに、まだハマることがあるので、書いてみたネタです。




●やりたいこと

今回は『カテゴリー別の最新記事●●件を表示するが、表示するものがなかった場合に▲▲を表示する』というテンプレートコードを書いてみます。

トップページやお知らせのページなどで、「新製品のお知らせ」「営業日のお知らせ」「キャンペーンについて」などのカテゴリー別の最新記事一覧を表示することがありますが、そういったものを作成します。


以下の画像の様なものですね。以下の画像の例では、「営業日のお知らせ」のカテゴリーで、現在公開されている記事がないので、「現在、お知らせする内容はございません」と表示しています。(ゴールデンウィークやお盆の時期、年末年始などに記事をアップするので、それ以外の時期は公開されている記事がない)

20160514-MovableTypeでこのカテゴリーの記事がなかったら-01

画像出典:お知らせ(吉田印刷所)


記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索