TAM テクニカルチーム | 【jQuery】連番画像を自動的に表示させる | Tips Note
以下のようなデザインの商品紹介ページを運営していましたが、 頻繁に商品の差し替え・追加・削除があるため、 そのたびに連番画像の並べ替えをするのがとても大変でした。 そこで、jQuery を使用して 左上から順番に、連番画像を自動的に表示させるようにしてみました。 ※商品はダミーです。（クリックで拡大します。） （1） リストでコーディングする <ul id="item"> <li> <div class="icon"><p class="no"></p></div> <div class="image"><a href="#"><img src="images/cushion.jpg" alt="TAMクッション（手編み）" width="168" height="168"></a></div> <div class="spec"><p><a href="#">TAMクッション
TAM テクニカルチーム | Facebook 3枚連続で画像投稿するよ（PHP） | Tips Note
Facebook のアルバム作成＋画像を投稿する PHP スクリプトのご紹介です。 [投稿] ボタン押下で画像を 3枚アップしたいアプリがあったのですが、 Flash だと 1アクション 1画像しかアップできなかった（つまり、[投稿] ボタン押下で 1画像しかアップできなかった）ので 投稿部分のみ PHP にしました。 それをまるっと公開ですー。 ファイル構成 / ├ img_post.php ←これが投稿 PHP ├ base_facebook.php ├ facebook.php └ fb_ca_chain_bundle.crt ※「img_post.php」以外は facebook/php-sdk – GitHub より取得してください。 img_post.php に渡される値 $_FILES['img_1'] // 画像1 $_FILES['img_2']
TAM テクニカルチーム | 【Wordpress】CSVファイルで複数の記事を一括投稿できるプラグイン『CSV Importer』 | Tips Note
記事数が多い場合など、1つ1つ記事を入力していくのは、とても根気のいる作業です。 CSVファイルに複数の記事を保存し、一度に投稿できるプラグイン『CSV Importer』をご紹介します。 【 1.CSV Importerプラグインの設置】 CSV Importerプラグインページよりダウンロードします。 http://wordpress.org/extend/plugins/csv-importer/other_notes/ ダウンロードしたZipファイルを解凍し、「csv-importer」フォルダを /wp-content/pluginsフォルダにアップロードします。 WordPressの管理画面でプラグインを有効化すると、「ツール」に「CSV Importer」が追加されます。 【2.CSVインポートファイルの作成】 サンプルのcsvファイルが「csv-import
TAM テクニカルチーム | 【JQuery】自動切り替え＋サムネイルクリックで画像切り替え | Tips Note
キャプションつきのギャラリーを作りたいときが多々あります。 ・指定した時間で、自動的に画像やテキストが切り替わる ・サムネイルをクリックしても切り替わる ・切り替わるエフェクトはクロスフェード JQueryを使用して、この全てを満たすJavascriptを作ってみました。 イメージとしては以下のようなものです。 【HTMLはこちら】 <!-- images--> <div class="g-inner clfix"> <div id="view"> <p><img src="images/image1.gif" alt="" width="240" height="150"></p> <p><img src="images/image2.gif" alt="" width="240" height="150"></p> <p><img src="images/image3.gif" a
TAM テクニカルチーム | 【Facebook】OGPの画像サイズについて（新ニュースフィード対応） | Tips Note
新しいニュースフィードを使用するようになってから、 サムネイルが切れている画像を目にすることが多くなったため Facebook のOGPで設定する画像サイズについて調べてみました。 ✽ ✽ ✽ ✽ ✽ Facebookの開発者ページで解説されている通り、 「最小値が50×50ピクセル」で「アスペクト比（長辺と短辺の比率）が3:1以下」であれば、 ある程度大きな画像を設定していても ニュースフィードで表示されている最大値である90ピクセルに最適化するよう 横幅90ピクセルで自動的に縮小されていました。 ところが、 新しいニュースフィードでは長辺を90ピクセルで縮小しているようで、 短辺が90ピクセル以上の大きな画像を設定すると、 サムネイルの両端が切れてしまいます。 ※90×80ピクセルの画像でテストしてみたところ、問題なく表示されましたので 短辺が90ピクセルを超
TAM テクニカルチーム | Facebookページに複数の「いいね！」ボタンを設置したい！ | Tips Note
「いいね！」ボタンは、読者からの反応が直接反映されるので 1つだけではなく複数設置したい場面があると思います。 （人気商品を知りたい、ランキングを作りたい など） （例） プラザ/PLAZA（ルミネ有楽町店） ※赤で囲んだ部分が「いいね！」ボタン。 ところが、 Facebookページ 1ページに対し、 「いいね！」ボタンは 1つしか置くことができません。 それでもやっぱり複数の「いいね！」ボタンを置きたかったので、 独自に考えたてみた複数の「いいね！」ボタンを設置するハックを ご紹介いたします。 ※以下 2つの例の「いいね！」ボタンをクリック後、 ご自身のウォールに表示される情報をご確認ください。 （Hack.1） 商品ページなどへ直接リンクを設定する。 （例） ASCII.jp Web Professional 「書籍紹介」 「いいね！」ボタンから、 Facebo
TAM テクニカルチーム | 【facebook】OGPで「いいね！」情報をカスタマイズ | Tips Note
「いいね！」をクリックすると 自分のウォールにその情報が掲載されますが、 以下のような状態になったことはないでしょうか？ サムネイルに、記事の内容とは直接関係のない ブログのプロフィール画像や広告の画像が表示されたり、 タイトルが長くてわかりにくいものが表示されたり。 「もっと見やすければいいのに！」と不満に思うことがあると思います。 この「いいね！」した際の情報は、 OGPを設定することでカスタマイズすることができます。 何もしなくてもFacebook側で設定してくれますが、 ウォールに表示される情報がきちんと設定されていれば、 よりわかりやすく、記憶に残りやすくなり、 「いいね！」をした本人だけでなく、 友達のウォールに表示された記事がクリックされる機会が増えるかもしれません。 ■OGPとは OGP (Open Graph Protocol) といい、
Tips Note by TAM ｜ TAM のテクニカルチームがお届けする WEB技術ブログ！
コーディングスタイルに一貫性をもたせことは重要であると広く認識されています。 プロジェクト全体でEnumの使用を禁止する 関数内でのthisを禁止する インデントにはスペースを使う セミコロンは必要でない場合省略する 上…
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TAM テクニカルチーム | 携帯サイト リンク色と下線 | Tips Note