タグ

ブックマーク / www.webdesignleaves.com (5)

  • スマホのレスポンシブデザインで右側に余白ができる場合 | Web Design Leaves

    レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白(空間)ができていた。 HTML の構造は以下のようなもの。 <body> <div id="header" class="clearfix"> <div id="header_inner"> <h1 id="logo">タイトル</h1> </div> <div id="navi"> <ul id="navi_menu" class="clearfix"> <li><a href="index.html">Home</a></li> <li><a href="works.html">Works</a></li> <li><a href="statement.html">Statement</a></li> <li><a href="#" class="disabled">Resume</a></li> <li

    cooshin
    cooshin 2015/10/07
  • カスタム投稿タイプの一覧ページの作成 | Web Design Leaves

    WordPress で作成した個々のカスタム投稿タイプの一覧ページ作成に関するメモ。 個々のカスタム投稿タイプの一覧ページを作成する場合、以下のような方法がある。 固定ページを作成して表示 アーカイブページを作成して表示 カスタム分類のページを作成して表示 以下はそれぞれの方法を使って一覧ページを表示する場合の例(概要。詳細は省略) 目次 カスタム投稿タイプの作成 このサンプルでは以下のようなカスタム投稿タイプを作成 投稿タイプ名:events カテゴリー:events_cat タグ:events_tag functions.php(抜粋) //カスタム投稿タイプを登録 function new_post_type() { register_post_type( 'events',//投稿タイプ名(識別子) array( 'label' => 'イベント', 'labels' => arr

  • WordPress プラグイン Visual Composer | Web Design Leaves

    用意されているモジュールをドラッグ&ドロップで簡単にページレイアウトができるプラグイン Visual Composer (WordPress 用のページビルダー)のインストールや基的な使い方についてのメモ。 目次 オンライン・ドキュメント Visual Composer の特徴 HTMLCSS の知識がなくてもモジュールをドラッグ&ドロップで簡単にページレイアウトが可能 固定ページ、投稿、カスタム投稿タイプに対応 とのようなテーマにも対応(100% ではないと思う) (また、Frontend Editor の機能はテーマによっては使用できない。バグ?) 用意されているモジュール(40以上あり)はデフォルトのレイアウトや色が設定されているが、それらを変更することが可能 レスポンシブ対応 インストール このプラグイン:Visual Composer は有料($25)なので CodeCa

    WordPress プラグイン Visual Composer | Web Design Leaves
  • Viewport と Media Queries に関するメモ | Web Design Leaves

    Viewport の指定 スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。 Viewport ブラウザの表示領域のことで、デバイスごとに異なる。(デバイス幅や解像度とは別)「Viewport」にはブラウザの表示領域をピクセル単位(何px X 何px)での値が設定されている。 デバイスの解像度(device-width や device-height) デバイスの解像度は、デバイスピクセル比を持つスマートフォンなどではデバイスピクセル比から求められた解像度の値を指す。これは「デバイスの画面解像度 ÷ デバイスピクセル比」で求められる。 画面解像度が 320px X 480px、デバイスピクセル比「1」の iPhone 3GS では 320px X 480px。 画面解像度が 6

  • アイキャッチ画像 | Web Design Leaves

    概要 アイキャッチ画像はコンテンツごとに1つだけ指定することができ、文に挿入した画像とは別に扱うことができる。 アイキャッチ画像として画像をアップロードすると、add_image_size 等で指定した大きさの画像を自動生成することができる。 但し、自動生成では、上部をトリミングするということはできないので(トリミングする場合は中央部が切り出される)、CSSなどを利用して表示する。(画像を囲む div 要素に、heightを指定して、overflow を hidden にするなど) アイキャッチ画像は、記事や固定ページごとに指定できるものなので、月別ページやカテゴリー別ページでは、アイキャッチ画像はないものとして扱われる。それらのページで特定のアイキャッチ画像を表示するには、get_the_post_thumbnail()に、表示したいアイキャッチ画像の属するページのIDを指定する。 ア

  • 1