jdash 2000 site

DTP・Web制作・CSS・マーケティング・スマートフォン・印刷などの色んなものに四苦八苦しながら次なる営業展開を考える営業部所属の人のブログ



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

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

記事の続きを読む



ブログ著者

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

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

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

ブログ著者について

サイト内検索