2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集　目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ

アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a

テンプレート内でサムネイルを表示する方法について。 サムネイル（中）をカテゴリーで表示したいと思ったとき、自動でサムネイル作られるならそれ表示するようにすればいいじゃん、と思いませんか。 でもwordpress2.5～2.6ではthumbnailが小、mediumが中という分け方をしてるが、ファイル名にはなぜかファイルサイズが付く。 ギャラリーというサムネイル自動表示の新機能があるんだけど、ショートコードだからテンプレートのソースコードでは使えない。 ファイル名は*-thumbnail.jpgとか*-medium.jpgとかでいいじゃん、という気がする。 というかむしろそちらの方が便利だと思う。ので修正されないかなあ…（期待） 自動作成された、これら名前のバラバラなサムネイルをテンプレートで自動取得する方法があった。 media.phpの関数を使うと、ループ内でサムネイルを表示するようにす

wordpressにはRSSを取得して配列に整形する機能が備わってるらしい。…というのを最近TwitterAPI調べてた時知ったのでそれについてのメモ。 バージョンいくつからか詳しく確認してないんだけど、手元にあるので一番古いvar2.1.3には入ってた。 よく考えたらダッシュボードのRSSもコレだよな…ので、新しい情報ではありません。 外部サイトのRSSを取得するには次のように書く include_once(ABSPATH . WPINC . '/rss.php'); $rss = fetch_rss($uri); で、これだけ書いたら詳しい人にはﾃｨﾝ!と来るかも。 使用されてるのはMagpieRSS and RSSCacheとSnoopy HTTP client。 たとえば、Twitterのコメントを取得する場合は次のようなソースになる。 include_once(ABSPATH .

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

wordpressを一般サイト風にカスタマイズ中なのですが、 他に既存ブログがあって、新着情報として 外部ブログのRSSを表示させることになりました。 通常サイトや、MovableTypeでRSSフィード取得表示したい時に Feed2JSを使用していました。 ※feed2jsの使い方については、小粋空間さんの 「RSSフィードを表示する」が分かりやすく書かれていてオススメです。 wordprpessでは、RSS取得モジュールがあるんですね。 そしてこのモジュール、RSSで記事を表示させるだけでなく、取り込んだRSS Feed をブログ記事として自動投稿してくれるんです。 使い方によっては、とても便利！ 英語版で一瞬戸惑ったので、以下使い方の覚え書きです。 FeedWordPress（英語）へアクセスして、中ほどにある「Download」から最新版のFeedWordPress（zipファイル

以前書いた画像サムネイルを投稿された記事へのリンク付きで表示はギャラリーにある画像を表示するものなのだけど、 Wordpress2.9には投稿サムネイルっていう便利機能が備わっているんだよね。 そろそろ投稿サムネイル使う関数に書き直さねば…と思っていたらフォーラムにそんな感じの質問が投稿されていたのでｗ　さらっと書いてみた。 関数はループ外の使用が有効なので、トップに更新情報を出すもよし、サイドバーに表示するもよしです。 HTML 仕様上リスト要素しか出力されないんで、タイトルとか適当につけてください。 <h3>新着記事</h3> <div id="newposts"> <?php postthumb_ancherlinks('category=16,15');?> </div> CSS デフォルトテーマに書いた超適当なソースだけど以下ポイント。 画像がない場合はnoimageというクラス

前のエントリと同じく文字数制限のメモエントリ。 特定のカテゴリの最新10件を表示し、それぞれのタイトルを文字数制限する方法です。 特定のカテゴリをリストアップする方法はかなり前にこちらで紹介していますが、そのタイトル文字数を制限するのが思ったより大変だったのでメモ。 mb_substr関数やらmb_strimwidth関数やら出てきて同じようなことで悩んでいる方が多いようなのですが、トライ&エラーでいろいろやっていたら上手くいったみたい。 <ul> <?php $posts = get_posts('numberposts=10&category=1'); foreach($posts as $post) : setup_postdata($post); ?> <li><a href="<?php the_permalink() ?>"><?php if(mb_strlen($post->

またまたWordPressネタでスイマセン。 仕事で使うネタを自分のWordPressで確認しつつ、使えそうならそのままパクるシリーズ（笑 気付いた方もいらっしゃるかと思いますが、今度はカテゴリごとに背景を変えてみました。 ポイントはエントリごとにカテゴリのスラッグを取得。 それをCSSのclassに指定して背景を変えています。 <div id="wrap" <?php if (is_single()) { ?> class="<?php $cat = get_the_category(); $cat = $cat[0];{echo $cat->category_nicename;} ?>"<?php } ?>> こんな感じで背景を指定している部分にコード（太字部分）を追加します。 is_single()はエントリの個別ページのみ表示のテンプレートタグ。 これを使って個別ページだけにそのエ

旅行と食べ歩きBLOG v10.0