サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
blog.ryodesign.net
やりたいこと よくありますよね。「トップへ戻る」ボタン。サイトの右下辺りにあって、画面をスクロールしても右下に固定されてるアレ。あれをちょちょいと実装しましょう。 フッターまでスクロールすると追従解除 タイトルの「フッター固定」ってちょっと分かりにくいかもですね。今回やりたいのは、フッターまでスクロールするとスクロール追従を解除して、フッターのいい感じの位置に収まるボタンの実装です。 例えば、フッターまで行ったときは、ボタンをフッターの上に置いておきたい。でもフッターの高さは300pxくらいある。でもスクロール追従している時はブラウザのウインドウの下から30pxくらいにボタンを置いておきたい。ただposition:fixed;しただけでは、フッターに行った時もウインドウの下から30pxにボタンが固定されてしまう…死にたい…。というような場合に使えるかと思います。 コード HTML <div
そういう時ってありますよね。たとえば、トップページの記事一覧では抜粋の文字数は150文字にして、タグ一覧などのアーカイブページでは100文字にしたい、みたいな。さらに、抜粋が指定文字数以上ある時は末尾に「…」と三点リーダーをつけて、ない時は三点リーダーをつけない、みたいな。 僕もちょうどそれをやりたいと思ってたんですが、割と簡単に実装できました。 コード <?php $count = 150; // 文字数の指定 $excerpt = mb_substr(get_the_excerpt(), 0, $count); if( mb_strlen(get_the_excerpt()) > $count ){ echo '<p class="excerpt">', $excerpt, '...</p>'; }else{ echo '<p class="excerpt">', $excerpt,
やりたいこと なんかよく分からん説明で申し訳ないですが…。 つまりどういうことをやりたいかというと、WordPressのトップページや記事一覧ページなどで画像のサムネイルを表示するときに、画像をいい感じにリサイズして配置したい、ということです。 つまり…どういうことだってばよ…? 画像のリストがある状況 画像でリストを作る感じです。複数のliタグの中にそれぞれ大きさの異なる画像があるという状況。liの幅と高さは400x200pxとします。 そのままリサイズすると…? imgの横幅を400pxにリサイズするとします。例えば800x600pxの画像は400x300pxにリサイズされて、ちゃんと表示されます。 でも、800x300pxの画像だと、400x150pxにリサイズされて、50pxの余白ができちゃうわけですね。 これを解決したいなぁと。 画像が横長の場合 先ほどの800x300px
先日ポートフォリオサイトをリニューアルした時に、CSSフレームワークであるLESSを初めて使いました。まぁ普通のCSSに比べてその便利さに感動したんですけど(今さらすぎてアレですけど)、「これってレスポンシブなサイト作る時にすげぇ楽だよな」と思ったので、その辺をちょっとまとめてみます。 お先に先人の方々 レスポンシブ対応に使えそうなLESS/Sassの書き方 | Good thinking 【Sass】Sassでレスポンシブ!メディアクエリを便利に書こう。 | バシャログ。 Sassを使ってレスポンシブウェブデザインにする時に覚えておいた方がいいこと4つ | howtohp いやもう参考になりすぎて…なんで僕こんなエントリー書いてるんだろ…。 下2つはSass(SCSS)についてのエントリーですが、書き方が違うだけで考え方はだいたい同じです。 ブレークポイントの設定やらなんやら レス
「iPadの定番アプリ」と言えばFlipboardの名前がよく挙がるかと思います。美しいアイコンと同じく美麗で、かつ使いやすいUI。これが無料だというのだから恐ろしい話です…。 そんなFlipboard、僕も初代iPadの購入時からインストールしていました。ただ、色々サイトなどを登録してみるものの、結局いつも「なんだかなぁ」という感じになり、使わず…。という状態になっていました。最近ちょっと考え直して、サイトの登録をやり直して見たところ、なかなかいい感じになりました。 ということで今日は僕がFlipboardをどんな感じに使っているかをご紹介。 現在のFlipboardの画面。2ページ目もありますが特筆すべきことはないので割愛。 「Flipboardで読みたいサイト」を登録するのが重要 Flipboardを使い始めた当初は、あまりのかっこ良さに手当たり次第にSNSのアカウントやサイトを登録
スマートフォンサイトのデザインの表示確認をするのが面倒だったので、手軽に確認ができるようにするためのサイトをPHP+jQueryで作りました。僕の環境では現時点で一番お手軽な方法かなと思います。 「sp_test」として適当な名前でファイルも公開しますので、ご自身のサーバに設置していただければ、簡単にデザインチェックができるようになります。たぶん便利。 制作の理由 スマートフォンサイトのデザイン確認が面倒だなぁと思ったので。 例えば、画像をサーバーに上げて、画像のURLに直接アクセスしても、iPhoneだとうまく表示できないんですよね。横640pxの画像を上げても、2倍に拡大されたボケボケの画像になります。 htmlを用意してimgタグで画像を表示すればちゃんとRetina対応した表示を確認することができますが、htmlを用意するのが面倒です。 Adobe Edge Inspectを使えば
PCに比べて低スペックなスマートフォンでも、滑らかなアニメーションが可能なCSS3のtransition。それをjQueryのanimateメソッドのような書き方で実装できる「jquery.animate3.js」を試してみました。 このブログでは、ヘッダーの右上端の矢印をクリックすると、なんだかプルダウンしてきます(2012年8月現在)。これはjQueryで実装しているんですけど、スマートフォン表示(スマートフォンで見てください)でも同じ動きをやりたいなぁと思い、同じくjQueryのanimateメソッドを使用してやってみました。ところが凄い動きがカクカクに…。 僕はよく知らなかったんですけど、色々調べたところ、jQueryのanimateメソッドって凄く重いということを知りました。知らんかった…。PCだと全く気になりませんしね。 で、さらに調べると、CSS3のtransitionプロ
このブログはスマートフォン表示に対応しています。いろいろと面倒でしたが、開発を簡単にしてくれたのがGoogle Chromeでした。今日はChromeを使用して簡単にWebサイトのスマートフォン表示を確認する方法をご紹介します。 開発者ツールを起動 まずはChromeの開発者ツールを起動します。WindowsならF12、MacならCommand+Option+Iで起動できます。 開発者ツールのオプションを起動 オプションを起動します。右下の歯車ツールです。 ユーザーエージェントと画面解像度を変更 まず、「Override User Agent」にチェックを入れます。色々とUAを選択することができるので、iPhoneやiPad、Androidなどを選択します。 この状態でページをリロードすれば、サイトのスマートフォン表示を確認することが出来るはずですが、UAではなく画面解像度で表示を変更して
WordPressでブログをやっている際に、トップページやカテゴリーの記事一覧ページなどで記事のサムネイルを表示させている人が多いかと思います。WordPressでは、記事にアイキャッチ画像を設定すると、それをthe_post_thumbnailという関数を利用して簡単に取得することができます。 でも、アイキャッチ画像が設定されていない場合はどうすればいいでしょうか。僕だったら、そういう場合は記事の1枚目の画像を表示させたいですね。 また、記事に画像が1枚もなかったら?なにも表示しないというのも寂しいので、「No Image」的な画像を表示させたいところです。 そういった、場合よって表示する内容を変えるには、PHPのif構文を使用します。WordPressはPHPで動いているので。 僕もPHPとかはあまりよく分かっていないのですが、簡単なif構文くらいならなんとか理解できます。今日は、そ
ついにiPhone、iPadでiOS 5.1.1の紐無し脱獄が可能になり、僕もiPhone 4Sをアップデートして脱獄しました。iPhone 4をiOS 5.1で脱獄した時のエントリーとは、多少インストールしているアプリの構成も変わっていますので、まとめてみます。 脱獄に使用したiPhone au版iPhone 4S、32GBのホワイトモデルです。 Apple iPhone 4S 32GB White (au) | ryodesignblog 脱獄に使用したツール カンタンお手軽なAbsintheを使用しました。 Absinthe v2.0 追加したリポジトリ一覧 ichitaso repository http://ichitaso.appspot.com/apt/ ipon3g http://cydia.myrepospace.com/ipon3g/ moyashi repositor
ryodesignblogは、Ryo Nakaeのブログです。Webデザイン、プロダクトデザイン、Apple製品、写真、音楽、本、文房具、自転車、コーヒーなど。日々の暮らし、僕の人生をデザインしてくれる素晴らしいモノ達。そういうものを紹介していこうと思っています。About ryodesignblogは、Ryo Nakaeのブログです。Webデザイン、プロダクトデザイン、Apple製品、写真、音楽、本、文房具、自転車、コーヒーなど。日々の暮らし、僕の人生をデザインしてくれる素晴らしいモノ達。そういうものを紹介していこうと思っています。 より詳細なAboutへ Ryo Nakae 1989年京都生まれ。京都在住大阪勤務。 Webデザインとマークアップ、WordPressサイトの構築などができます。Apple製品、カメラ、音楽、自転車、文房具、コーヒー、京都などが好き。 Contact
このページを最初にブックマークしてみませんか?
『ryodesignblog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く