ウェブ制作 一覧

昨年からECサイトの作成にCS-CARTを使っています。フリーでも使えるし多言語対応もできるということで、使ってみました。

今回とある取引先とのミーティングでうちのサイトで受注した商品をお客様に直送してもらう話がまとまったので、早速そのサイト作りを開始しております。

今回使うサーバーはcoreserver。とりあえずいつも通りにアプロード・設定・商品登録と進んでおります。

アドオンの設定中にSEOアドオンが有効にならないことに気がつきました。どうやらmod_rewriteの設定に問題があるらしく、その旨のメッセージ「SEO URLが動作しないため無効化されました。サーバーおよびURL書き換えエンジンの設定を確認してください。」が表示されます。

続きを読む

Box Shadowサンプル

素敵な一覧です。

このように一覧にしておくと、あとが楽ですね〜。ぼくも見習います。
Box Shadowのエフェクトサンプル & 便利な素材まとめ

素敵無料素材50+

これは素敵コレクションです。
そして無料で使用させていただける。早速ダウンロードさせていただきます。

50+ INCREDIBLE FREEBIES FOR WEB DESIGNERS, APRIL 2015

error.png

先日納品したウェブサイトで、画像をアップロードしようとすると上の画像のような表示で、アップロードできなくなる事例が発生しました。
とりあえず別ディレクトリに新しくMTをインストールしDBをコピーしてみる。やはり同じか・・・

データベースをチェックしても特に異常はなく、プラグインのミスもない。どうやらサーバに問題があるような予感。

サーバそのものを移転する方法も検討しましたが、逃げちゃうのもどうかと思い、少し格闘してみました。使っているのはCoreserver.jp。

画像関係以外は普通に動作しているよう。ということは画像を扱うドライバ関連か?という結論に落ち着きました。
通常はImageDriverにImageMagicを指定してあるウチのMT。これをGDに変更してみる。変更はいたって簡単で、mt-config.cgiの当該記述を書き換えるだけ。

ImageDriver ImageMagick
  ↓
ImageDriver GD

これで問題解決となりました。

まあ、表題の通りです。

RSSを表示する:ウェビメモさま
Google Feed APIを読み込んで表示する方法をわかりやすく解説してあります。

Google Map をレスポンシブ対応に:Web Design Leavesさま
レスポンシブ対応させる際に、デバイスに合わせた最適なマップサイズを可能にします。

簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」:Black Flagさま
なんていうんですか、するするってスクロールするアレ。あれの実装方法をわかりやすく説明してあります。


皆様、いつもありがとうございます!

トップページにエントリーの中に画像がある場合はその画像を、ない場合には指定した画像を貼る場合のメモ。

ちょっとズルな方法ではありますが・・・

<img src="
<mt:SetVarBlock name="items"><mt:EntryAssets lastn="1"><mt:AssetThumbnailURL></mt:EntryAssets></mt:SetVarBlock>
<mt:If name="items" eq="">
/img/sample1.jpg" alt="サンプル
<mt:Else>
<mt:EntryAssets lastn="1"><mt:AssetThumbnailURL width="290" square="1"></mt:EntryAssets></mt:If>">

説明:

1)エントリにアイテムがあるかどうかを判別する
2行目mt:SetVarBlockタグの中にサムネイルのURLを出力する(name="items")。画像がない場合にはこの値は空となる。

2)分岐する
3行目mt:Ifタグでmt:SetVarBlockタグの値を判別する。出力した値が空の場合は指定画像のパス(4行目)を、値がある場合はその値(6行目)を出力する。


空の値を参照するってトコがミソ。ズルさ百倍な方法です。

スマートフォンでウェブサイトを閲覧中に掲載の電話番号へ電話をかけたいことありますよね。iPhoneは結構お節介でSafariだと電話番号とおぼしき数字列は自動的に【 href=tel: 】になります。たまに電話番号じゃない数字列にまでtelリンクついていることもありますが。これがChromeだと無視したまんまでタップできない。

かといってHTMLにベタに、<a href="tel:**-****-*****">電話はこちら</a>って書いちゃうと、デスクトップで見たときに不格好だしクリックした時のエラーも気になる。つまりスマホの時はタップできて、デスクトップの時は単なる文字列になるようにしたいわけですな。

こちらで詳しく紹介されていました。

まずヘッダ内に、

<script type='text/javascript'>
function smtel(telno){
if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){
document.write('<a href="tel:'+telno+'">'+telno+'</a>');
}else{
document.write(telno);
}
}
</script>


と記述しておきます。
番号を表示したいところに
<script type="text/javascript">smtel('***-****-****');</script>

注'***-****-****=電話番号
と記述。

これでスマートフォンではタップでき、デスクトップでは単なる文字列な電話番号が出来上がります。

ありがとうございます!

あ、iPadとかアンドロイドタブレットのときはどうしようか。。

備忘録として投稿。時々追記しています。

UX Comparison Chart:
http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/
iOS7、iOS6、Androidのユーザーインターフェイス一覧が見渡せます。


地方のウェブ制作会社が生き残るために:
http://www.searchengineoptimization.jp/for-local-web-design-company-to-survive


現場のプロがやさしく書いたWebサイト運営・プロデュースの教科書:
http://www.amazon.co.jp/dp/4839945195/


完全無料、レスポンシブWebデザイン対応のHTMLテンプレート素材まとめ:
http://photoshopvip.net/archives/50917


Webサイトのワイヤーフレームを作成するときに役立つツール・素材まとめ:
http://w3q.jp/t/4076


日本の全エンジニアに捧ぐ!現在公開されているAPI一覧【2013年版】:
http://www.find-job.net/startup/api-2013


無料レスポンシブテンプレート:
http://f-tpl.com/template/

tar.gzで圧縮する

tar.gz形式で圧縮するのに、どーするんだっけ?と手間取ったのでメモ。

ターミナルで、

$ tar cf - dirname | gzip -c > dirname.tar.gz


とすればヨロシ。

どんなファイルを圧縮したのか情報表示させたいバヤイは、

$ tar cfv - dirname | gzip -c > dirname.tar.gz

ちなみに、tarのオプションはこんな感じ。


c tarファイルを新しく作る



r tarファイルに追加する



t tarファイルの内容表示する



x tarファイルを展開する





f ファイルを指定する。

本来tarはテープデバイスを読み出すコマンド。ファイルを指定しないとテープドライブを読み出しにいってしまう。



v バーボーズモード。

処理した内容をターミナル上に表示する。

展開はダブルクリックでできるので問題なしー^^

タイトルだけをみるとさっぱり意味が分かりませんね・・・照

なにをしたいかというと、こんな感じ。

イベントの告知をします。 ↓ イベントが終わるとその報告をします。 ↓ ウェブサイトの内容が書きかわります。

具体例はこんな感じ。
image.png

イベントの予定:

本文欄に入力する。
1、「ただいま募集中です」と表示される。
2、本文欄の原稿が緑でかこった部分に表示される(ここでは文字数制限をしている)

イベントのレポート:

追記欄に入力する。
1、「終了しました」と表示される。
2、追記欄の原稿が青でかこった部分に表示される(ここでは文字数制限をしている)

ソースコードはこんなかんじ。

<ul id="hoge" class="kunya"><mt:Blogs include_blogs="children"><mt:Entries lastn="4">
<li>
<div class="news_date"><mt:EntryDate format="%d %b<span>%Y</span>" language="en"></div>
<div class="news_t"><a href="<mt:EntryPermalink>"><mt:EntryTitle></a></div>
<div class="news">Posted by <a href="#"><mt:EntryAuthor></a><br><a href="<mt:EntryPermalink>"><mt:IfNonEmpty tag="Entrymore">終了しました<mt:Else>ただいま募集中です</mt:IfNonEmpty></a></div>
<div class="news_info"><mt:IfNonEmpty tag="entrymore"><mt:EntryMore remove_html="1" words="100"><mt:Else><mt:EntryBody remove_html="1" words="100"></mt:IfNonEmpty><a href="<mt:EntryPermalink>">...詳細はこちら ></a></div>
<div class="clear"></div>
</li>
</mt:Entries></mt:Blogs></ul>


このように、mt:EntryBodyとmt:EntryMoreを使い分けることで、原稿を削除することなく表示を変えられます。表示以外にもリンクのとび先を変えるなどもできますね。

このページの上部へ

About

北陸地方の田舎街でひっそりとくらしているアキのブログ。
30歳からは年齢が減少することにしてはや○○年。そのとおりにいくと現在未成年のはずだけど参政権は剥奪されていません。

プロフィール

性別:♂
血液型:ビール
好きな食べ物:果物、キノコ、マメ
野望:世界征服
宝物:こども
嫌いなもの:薬、タバコ

サイト内検索

最近のピクチャ

  • IMG_0921.jpg
  • error.png

Powered by Movable Type 6.0.3