固定と可変で作る。スマホサイトで片方を横幅可変にするやり方
スマートフォンサイトで、２つの要素を並べている場合、 デバイスの違いで、横幅が変わるときに、片方を固定幅、もう片方を可変幅にしたい場合があります。 左固定、右固定の場合と、vertical-align: middle;を使いたい場合との３種類のサンプルを作りました。 方法1 ネガティブmarginを利用する ネガティブマージンを指定することでfloatでちょうど回り込むようにするやり方です。 cssでやること 固定するdivには、widthをpx指定します。 可変するdivには、widthを100%指定します。 可変するdivに、固定するdivのwidthのサイズ分のmargin-leftを-(ネガティブマージン)で指定します。 可変するdivの中にdivを作ります。 中のdivに固定するdivのwidthのサイズ分のmargin-leftを指定します。 テキストだとわかりづらいと思うので
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
特定のカスタムフィールドにフックして記事をランダム表示させる方法
今回は任意の記事をランダム表示させるWordPressカスタマイズを紹介します。自分がオススメしたいという記事や、ソーシャルで注目を集めた記事だけを見せたいという場合にとっても便利ですよ。 カテゴリやタグをベースにせず、カスタムフィールドを使っていきます。 Double Spiral with Random Outgrowth 1 Photo by ehsanul 当ブログでは記事エリアの上に、特定記事をランダム表示させるようにしていますが、もともとはjavascriptを使って実装していました。 これはこれで良かったといえば良かったのですが、手動で記事を追加していくのがやや面倒くさかったんですね。 1件の記事を追加するのに、記事のタイトル、URL、アイキャッチ画像のパスを書き足す必要がありました。 また、記事件数が増える分だけ当然jsファイルの容量も大きくなるので、読み込み速度にも影響が
WordPress かなり手軽なクライアントに納品する際の管理画面カスタマイズ | 誰かのためのホームページ制作
WordPressでウェブサイトを構築しクライアントに納品する際の、ありがちな悩み。管理画面をどのようにカスタマイズしようか…。 管理画面がデフォルトのままだとよろしくない。メニュー項目が多すぎるため、一見してどこに何があるのかわかりづらい。技術者ならともかく、あまりWordpressに慣れていないクライアントの立場からしたら気が重くなる。そこで納品時には、ある程度管理画面をカスタマイズするほうがよい。 本稿では、手軽にできて後の案件にも使いまわせる、比較的あっさりめなカスタマイズ手段を紹介しよう。 簡易的な管理画面カスタマイズ：メニュー項目を少し見にくくする 完成図 完成図は下記スクリーンショットをご覧いただきたい。 やっていることは非常に単純で、管理画面内のあまりクライアントに触れてほしくないメニュー項目を見にくくしている。文字サイズを小さくし、文字色を薄くしているだけだ。 補足だがメ
【WordPress】ウィジェットのタグクラウドをプラグインを使わずにカスタマイズする方法
タグクラウドをウィジェットを使って表示させたのですが、ウィジェット側では文字の大きさや並び順等を操作することができません。 設定値のまま使うと少々見栄え的に好きではないので、少しだけカスタマイズして使用しています。 今日は、そのカスタマイズ方法を。 ウィジェットのタグクラウドの初期値 まだ少ない投稿数だと変化がよくわからないのですが、ウィジェットのタグクラウドは、書いた記事数によって文字の大きさが違ったり、並び順も昇順で表示されます。 それは、WordPressであらかじめそれぞれの値が決められているからなのですが、その値というのが以下になります。 <?php $defaults = array( 'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45, 'format' => 'flat', 'orderby' =
WordPressで通販サイトやダウンロード販売サイトを構築できるプラグイン4選 | ネタワン
ECサイト・ネットショップを構築・運営できるWordPressプラグインを紹介します。 WordPressのプラグインを利用して機能を拡張すれば、中小規模のECサイトを構築できます。 または、デジタル商品のダウンロード販売サイトを構築できます。 企業の自社サイトとECサイトをWordPressで一緒に運用したいという場合に最適です。 日本製と海外製のプラグインがあるので分けて紹介します。 海外製のプラグインでも管理画面が日本語化されているものもあります。 あなたの利用目的に合うプラグインを探してみましょう。 はじめに ECサイトとは？ ECサイト（Electronic Commerce Site）とは、 インターネット上で電子商取引ができるWebサイトのことです。 ネットショップ・通販サイトとも呼ばれます。 インターネット上に構築したシステムを利用して、商品やサービスを販売できます。 現物
Webデザインのアイデアに困ったら！参考になるさまざまなコンポーネントやレイアウトをまとめた -Call to Idea
Webページによく使用される、アイテムを並べるリスト、ギャラリー、タブ、ナビゲーションといったさまざまなコンポーネントをはじめ、打ち出しコンテンツのレイアウト、サンプルの表示方法、AdWordsの配置、データがない状態のレイアウトなど、Webデザインのアイデアをまとめているサイトを紹介します。
[M] Jetpackのサイト統計情報からカテゴリごとの人気記事を表示するカスタマイズ | mbdb (モバデビ)
RSS購読 Feedly 377 users Facebook Twitter tumblr flickr Instagram Linkedin 前回の記事でWordPressプラグイン「JetPack」を使って人気記事を表示させるカスタマイズを書きましたが、今回はその続編。 基本的なやり方はあんまり変わらんのですが、カテゴリ配列を取得してカテゴリ別人気記事を表示させる方法を紹介します。 スポンサーリンク <img class="alignnone" src="http://i2.wp.com/farm2.static.flickr.com/1065/4612512118_4afbe8e1d9_z.jpg?w=604" alt="Day 280" px" data-recalc-dims="1"/>Day 280 Photo by pasukaru76 前回の記事 WordPressオフィ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressからFacebookに自動投稿して連携するには？とてもかんたんなJetpackの設定のしかた – Factory70 Blog
GitHub - icebreaker/floppybird: Floppy Bird (OS)
会社に Github導入した話