タグ

cssとコーディングに関するmarugotobanana1のブックマーク (5)

  • WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm(プラズム)

    これがずっとやりたかったんだよ!すべてのソリューションはかちびとで問題ない。@shintarowfreshです。 もうとにかくWordPressでアイキャッチ画像を用意するのが面倒極まりない。とはいえ設定しないとみっともない。という2重苦を抱えていたのですが、これからは開放されます、気持ちいい!! WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.netWordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.net 設定に必要なIDの調べ方はコチラに。 Quick Tip: Saving a Default Post Thumbnail | Wptuts+ 後はもう書いているコードをコピペして終わり、イッツダン! すると こんなかんじで、新規投稿の際、指定のデフォルトの画像がハマっているわけで。 上書きしたかったら、新し

    WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm(プラズム)
  • width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。(CSS おれおれ Advent Calendar 2012 – 05日目) | Ginpen.com

    CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか? その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。

    width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。(CSS おれおれ Advent Calendar 2012 – 05日目) | Ginpen.com
  • CSSスプライトについてあれこれ。

    CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

    CSSスプライトについてあれこれ。
  • パララックスサイトの作り方の初歩

    最近パララックス(視差効果)を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量:" + y);//表示用 }); }); サンプルペー

    パララックスサイトの作り方の初歩
  • 【CSS 初級】 ブログの記事で使いやすい 「画像の回り込み」 サンプルCSS : サブカルシート

    さて、今回のCSSサンプルは画像の回り込みです。 まぁこれには色々な方法があるのですが、今回はブログの記事で簡単に使えるように、CSSに追加するだけで使いたい時にパパッと簡単に使えるような、そんなサンプルを作りました。 これをスタイルシートに入れておけば、下記のような回り込みの動作をパパっと呼び出す事が出来ます。 「パターン1」 文字を右と下に回り込みさせる 多くのサイトで見かける事があるでしょうが、このように文字を右に回り込ませるサンプルです。 このサンプルCSSを使えばとても簡単に呼び出す事が出来るので重宝します。 余った文字は画像の下に移動しますので、ごくごく自然に下の文章と繋ぐ事が出来ますね。 ブログの記事などで使う画像の回り込みとしては、現在では最も多く使われているパターンではないでしょうか?

  • 1