はてなブックマーク

6,435views／投稿 2017-03-01／更新 2019-04-30 imgのsrcsetをシンプルにレスポンシブ対応（要は全デバイス）でも大丈夫なルールを我流で定められないか？という思いでまとめました。 PCもRetinaディスプレイになってきたし、srcsetが標準になるだろうし、WordPressとか画像自動化じゃない手打ちのレスポンシブHTMLで統合的に扱える簡単な単一方法はないか？と思ったからです。 サンプルページを用意しました。 画像の用意は２枚まで とにかくシンプルにしたい（sizesとかvwとか嫌だ） レスポンシブでスマホもPCも全部対応したい タブレットはいろんなサイズあるがiPad基準に タブレットはPC側としよう（スマホ／PC＆タブレット） スマホの横持ちは無視！というより軽さ重視 結論はこれです <img src="スマホ画像.jpg" srcset="スマ

24,864views／投稿 2015-10-05／更新 2016-08-10 Dreamweaverが遅い場合に確認しておきたい項目を２つまとめておきます。 サイトキャッシュの削除 フリーズ対策（外部JavaScript対策） 1. サイトキャッシュの削除 起動時にサイトキャッシュを読み込んでいるらしく、サイト設定が膨大にある場合は削除すると多少起動が速くなります。過去の使わなくなったサイトキャッシュが残っていたり、サイト設定は残しておくもののほとんど開かない設定項目のキャッシュファイルは削除してしまいましょう。 公式ペルプ https://helpx.adobe.com/jp/dreamweaver/kb/233329.html Macの場合のパス /Users/＜ユーザ名＞/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP

7,099views／投稿 2014-01-19／更新 2019-04-30 WordPressだとページネーションするテーマ（テンプレート）部分はそのまま繰り返します。 1ページ目のみに しかし、home.phpやcategory.php、date.phpなどで繰り返す最初の1ページ目だけを独自コンテンツを入れたいと言う場合のif条件分岐のphpテーマソースです。 <?php if ( !is_paged() ) : // 1ページ目 ?> 1ページ目だけのコンテンツ <?php else : // 2ページ目以降 ?> 2ページ目以降のコンテンツ（空でもいいですね） <?php endif; ?> これで分岐してその1ページ目のURLだけにオリジナル内容が表示され、繰り返しを防ぐ事ができます。ページ送りをしたいかつ内容を反復しない時に有効ですね。 URL的に /←（1ページ目だけのコン

17,422views／投稿 2015-07-04／更新 2019-04-29 長い１記事を分割してページ数のナビゲーションリンク（ページ送り）を表示するカスタマイズです。インタビュー記事など長めの特集記事でよく見かける機能がWordPressに最初から備わっているんですね。 「MORE」でおなじみの<!--more-->と同じように、<!--nextpage-->とHTMLテキストモードで入力すると「PAGE BREAK」となって分割されます。 <!--nextpage--> オリジナルテーマではPHPカスタマイズ必須 配布テーマには最初から備わってますが、オリジナルでテーマを作っている場合には<!--nextpage-->をしても、そこで分断されるもののページ送りが何も出ないです。 ２ページ目３ページ目と何ページに渡っているのかと、次ページへのリンクが必要です。何だか前後の記事を行き来

5,280views／投稿 2015-09-30／更新 2016-08-16 iOS8までのiPadのSafari横向きランドスケープ時は、viewportをdevice-widthで横幅ピッタリになる仕様でした。 iOS9からiPad Airで見るとノートPCやAndroidと同じ等倍になったようです。 なんで？iPad Pro発売とiOS9のタイミングとみた iPad Proが登場した影響と思われます。iPad ProはMicrosoft SurfaceみたいにノートPCでもありタブレットでもあるので、横向きはノート扱いなのでしょう。私が持っているiPad Airは横向きでdevice-width無視されるのが確認できました。 iPadブラウザサイズ 768×1024（iPad Air／iPad Pro 9.7インチ） 1024×1366（iPad Pro 12.9インチ） iOS8ま

36,087views／投稿 2015-08-16／更新 2019-02-17 ［この問題はiOS9から解消されてます。］ iOSのSafariで、:hoverに事件が起きています。 CSSでaタグに:hoverで何かの変化を施してある場合は、そのマウスオーバー変化が１クリック換算で止まってしまい、リンク先に飛ばない確率が高い感じです。要は２回クリックしないとハイパーリンク先にページ遷移しないです。iOS 8.4.1のiPhoneやiPadなどタッチデバイスでの話です。 １回タップ（a:hover描画処理のみで止まる） ２回タップ（やっとリンク先に飛ぶ） テキストリンク系は大丈夫ですが、「画像の透かし」や「お申込はこちら」的なボタン装飾も該当していそうです。 ［追記］サンプルページを作りました。iOSデバイスで確認してみてください。Chromeもどうやら対象のようです。 :hover事件の

107,369views／投稿 2014-07-23／更新 2019-04-30 Windows8.1に十年以上前のOffice 2003が無事にインストールできた次は、互換パックやSP3がアップデートできたのかどうかって話です。 結果は…、できました！ 一瞬さすがに古くてダメかと思う瞬間は、ヘルプからの「更新のチェック(K)」をクリックした後、アップデートの流れの感じにならず強制的にOfficeのホームが表示されるからです。最新のOffice買えって事かな〜と思ってしまいましたが、Microsoft公式サイトから更新インストーラーをダウンロードすればアップデート可能でした。 更新のチェック 「更新のチェック(K)」をクリックすると… Officeストアに飛ばされる。 サポート終了です、更新はできません、とかのウィザードも出ないで。 ここで無理かと諦めかける。 これでもわかるようにもうOf

24,960views／投稿 2014-10-23／更新 2019-04-30 Yosemite（MacOS10.10）にアップグレードするとAdobe CS3が起動しなくなる不具合が起こりました。警告ウィザードでも案内が出てきますが、Java for OS X 2014-001をインストールするとPhotoshop CS3やIllustrator CS3が開くようになります。 ［追記］上図はIllustrator CS6の例。YosemiteにしたMacBook Proに入れていたAdobe CS6もこのJava for OS Xをインストールしないと起動できませんでしたね。 Java for OS X 2014-001 こちらのURLからダウンロードできます。 http://support.apple.com/kb/DL1572 JavaForOSX2014-001.dmg がダウンロ

iPhone Safariブラウザサイズは何px？ viewport width=device-width時 108,078views／投稿 2014-09-19／更新 2017-11-13 ［追記］iPhone 8/8 Plus も7も6と同じブラウザサイズ。iPhone Xも幅は375です。この英語サイトがわかりやすいです。 iPhone 6と6 PlusのSafariブラウザ解像度をAppleストアに行って実機で調べて来ました。 iPhone 6 Plus ブラウザサイズ ： 414 × 736 ピクセル 物理的な解像度 ：1,080 × 1,920 ピクセル解像度、401ppi、5.5インチ iPhone 6 ブラウザサイズ ：375 × 667 ピクセル 物理的な解像度 ：750 × 1,334 ピクセル解像度、326ppi、4.7インチ iPhone 5系 ブラウザサイズ ：3

5,737views／投稿 2013-11-27／更新 2019-02-05 iPhoneサイトやスマホサイトのスクリーンショットは、通常見えている領域しかキャプチャできませんが、アプリを使うことで縦長１枚つづきで画像化できます。 スクロール領域を全て繋げて、はみ出した見えない部分まで画像にして見られるため、サイト構成や順序に間違いや修正箇所はないか？ユーザービリティは良いか？縦長過ぎではないか？などCheckするのにも最適です。 iPhoneサイト全体スクリーンショットアプリでおすすめなのが、 1. WebCollector ウェブサイトのフルサイズスクリーンショットキャプチャー QRコードからのウェブアクセス Safariのアドレス欄の先頭に「wc:」を付けるとWebCollectorに遷移 履歴からのアクセス機能 ブックマーク機能 ソース閲覧機能 画像はiPhoneのレティーナディス

7,393views／投稿 2013-09-01／更新 2019-04-30 Dreamweaverでファイルをアップロード（PUT）する時に依存ファイルを同時にアップ出来るのが非常に便利です。CSSファイルをアップすれば、CSSで使わている画像でリモートサーバーよりも新しいものがあればローカルからアップロードしてくれます。 また通常のimg画像やphp関連ファイルも最新があれば同時にアップしてくれます。

自動インストールは使いません。WordPress移転で今まで通りに使いたい場合はMySQLもそっくり移し替えるのですが、新規インストールするとMySQLも自動的に作られてしまうのでその方法ではなく、まるごとMySQLを移転する方法です。 MySQL移行手順 （キャプチャ画像はクリックすると別ウィンドウで実寸サイズで開きます） ロリポップ！にログイン WEBツール→該当データベース【操作する】 phpMyAdminを開く データベースのユーザー名とパスワードとサーバーを選択 実行する　でログインします。 ※データベース情報を別途管理していない場合は、WordPressインストールフォルダのwp-cofig.phpにあります。 左側のデータベース名をクリック エクスポートをクリック デフォルトの設定でOKで、このようになっています。 エクスポート方法　簡易 フォーマット　SQL エンコーディン

13,335views／投稿 2013-03-15／更新 2014-04-07 テーマフォルダの中にaaa.phpというファイルを作って読み込ませたい場合 <?php get_template_part( 'aaa' ); ?> と書くと読み込むことができます。 またWordPressで決まり事がある.phpファイルはそのままこんな記述で読み込めます。この決まりが無いファイル名は上記のようにget_template_partで読むんですね。 <?php get_header(); ?> <?php get_footer(); ?> <?php get_sidebar(); ?> テーマフォルダ以外のFTPアップロードファイルの場合 WordPressには実質のディレクトリ階層というのが存在しないので、/のホームから読み込むphp includeも/category/bbb などの多階層のテ

3,007views／投稿 2013-04-27／更新 2019-02-05 手当たり次第ボタン用に使えるCSSジェネレーターだけをピックアップしました。 ボタンだけなので選び易いかと思います。特徴としてはカラープリセットがあるものが使い易いです。大体の色を選んで微調整すればいいだけなので。いい感じランキングで並べてあります。 6位と7位のテキスト周りの機能の無いものは下敷きエリアとして部分的にボタンに適用させることもできるし、逆にボタンジェネレーターで下敷き領域を作る事もできて便利です。5位以外全部海外サイトですね。 １位 CSS Button Generator - imageless css buttons maker http://css-button-generator.com カラープリセット テキストシャドウ ボックスシャドウ ボーダー 角丸 バックグラウンドグラデーション

3,383views／投稿 2013-09-30／更新 2019-04-30 iOS7になって以前よりもショートカットアイコンの角丸がさらに丸くなりiPhoneは、114px→120pxと少し大きくなり光沢も消えました。ホーム画面に追加される時の画像でもあり大切なWEBデータです。Illustratorなどで編集できるベクター画像データを作ったので配布します。 配布データのダウンロード ios7-iphoneshortcuticon.zip ホーム画面に追加：ショートカットアイコン設置方法 ドメイン直下の第一階層ディレクトリにPNG画像を１つ設置するだけです。 ファイル名は、 apple-touch-icon.png にします。こうするだけで、iPhoneのSafariが第二階層や第三階層のページ閲覧の時でも第一階層にあるアイコン画像を探して適用させてくれるので１つで済みます。第一階層に画