37web|仕事以外でお金を貯める貯金ブログ

貯金なしから、お金をコツコツ貯められる方法を紹介する日記。メルカリや仕事のことなども書いてます。

新しくホームページ案件を行いました

これは小遣い稼ぎとは別ですが、
お世話になっているお寺の方がホームページがほしいということで、
制作しました。

最近のホームページ制作

まずは、デザイン。
自分はエンジニア(コーダー)なので、正直デザインは苦手です。

ただ、最近ではブートストラップがすでに適用された
デザインがフリーダウンロードできたりするので、
デザインが苦手なエンジニアでも簡単にホームページが作れます。

テンプレートをダウンロードして
必要箇所の変更や、
タグの修正、JSのロードタイミングの修正などを行います。

特に無料テンプレートで多いな〜と思うのが
masonryのJSを使った部分です。

masonryは画像をレンガ調に積み重ねてくれるプラグインです。
ただ、無料テンプレートだと大体は記述があるだけ。
うまく画像がレンガ調に並んだり並ばなかったり。

そこでGoogleではこんなキーワードが人気高いと思います。

「masonry 画像 重なる」

結論としては、画像が読み込まれていない状態でプラグインが走ってしまうのが原因。
だから変な重なりが発生します。

 $('.mixcontent').masonry();

無料テンプレートをいくつか使ったことありますが、
大体はコレしか書いてません。

それにロード用の記述を付け加えます。

$(function(){
    $(window).load(function(){
        $('.mixcontent').masonry();
    }) ;
});

こう書いてあげるとうまくいきます。
ページをロード終わってからこのプラグインは動いてねという意味です。

window load 系の記述が抜けてるテンプレートはよく見かけます。
ローカルでは動いてもサーバーでは思うように動かないときは、だいたいloadが抜けてることが多い。

全部コーディングしたわけではないですが、
久々にホームページ制作楽しめました。

この記事が気に入ったら
いいね ! しよう

Twitter で

↓ポチッと押してくれると嬉しいです↓

  • にほんブログ村 その他生活ブログ 家計管理・貯蓄へ
  • にほんブログ村 ライフスタイルブログへ
  • にほんブログ村 その他生活ブログへ


GoogleAdsense

-css, HTML, Web制作