タグ

関連タグで絞り込む (34)

タグの絞り込みを解除

tipsに関するkuracomのブックマーク (69)

  • 3大「WordPressに慣れていない人がやってしまいがちだけど、こっちのほうがいいのになぁ」って思うこと


    どーもどーも。最近めっきりネタストックの出来ていないマイペースたんです。 この記事は12/1～12/25の期間、毎日ブログ記事を数珠つなぎにしていく﹁WordPress Advent Calendar﹂の第19日目として書いております。18日目の@kamiyamさんから引き継いでの記事でございます。 とはいえ、最近これはいいなぁと思ったネタはもうすでに先月書いてしまったし、V3.3はまだ全然触れてないし、最近理解を新たにしたループについての話はkzさんがさらっとスマートに書いてしまっていたりで、、、困った困った。でも考えました。 ここ最近、ありがたくも自サイトからWordPress関連のちょっとした作業依頼をいただく機会が増えました。 ご依頼内容としては、﹁デザインやプレーンなサイト構築についてはこなれているけれど、どうもWordPressに組み込んだ時に言うことを聞いてくれないからなん
    3大「WordPressに慣れていない人がやってしまいがちだけど、こっちのほうがいいのになぁ」って思うこと

  • [CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート


    あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS‥シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0

  • rotate(360deg)


    WindowsのGoogle ChromeでWebフォントを使うと、その縁がギザギザになることが多い(もちろん非ClearTypeのフォントならローカルフォントでも)。今まではそれの解消のためにtext-shadowプロパティで軽く文字色と同じ影をつけてやって誤魔化していたが、-webkit-transformプロパティでrotate(360deg)として一周回すといい感じにフォントにアンチエイリアスっぽいぼかしがかかることを発見した。少し前に書いたCSS3のtransformを使ったフォントの変形の派生。テクニックというよりもハック寄り。Demo: Beautify MS PMincho on Google Chrome デモではWebフォントではなく、常にギザギザで悲しいＭＳ Ｐ明朝を使ってさしあげた(グリフが細かいためぼかしのかかり方がよく見え、わかりやすいので)。 scaleY(
    rotate(360deg)
    kuracom
    kuracom 2011/04/11
    これはすごい。WinXPでもアンチエイリアスがかけられる。絶大な効果 → http://twitpic.com/4jljta //
    リンク

  • overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

    フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは

    kuracom
    kuracom 2011/03/16
    overflow:hidden;は以前から使ってたけど、imgにmax-widthを入れてなかったのでこれから励行しよう。
    リンク

  • はてなブログ | 無料ブログを作成しよう


    週報 2024/04/28 川はただ流れている 4/20︵土︶ 初期値依存性 さいきん土曜日は寝てばかり。平日で何か消耗しているらしい。やったことと言えば庭いじりと読書くらい。 ベランダの大改造をした。 サンドイッチ 一年前に引っ越してからこんな配置だったのだけど、さいきん鉢を増やしたら洗濯担当大臣の妻氏…
    はてなブログ | 無料ブログを作成しよう

  • CSS display:inline-blockを活用する方法と注意点 | エンタープライズ | マイコミジャーナル

    Robert’s talk Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。 Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インライン

  • floatを使わずにinline-blockで横並びにする方法｜web bibo

    floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。 floatで横並びにするとレイアウトが崩れる場合がある 先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。 <div class="wrap"> <div class="box">float 1</div> <div class="box height">float 2</div> <div class="box">float 3</div> <div class="box">float 4</div> <div class="box">float 5</div> <div

  • パフォーマンス改善やセキュリティに役立つ.htaccessの設定 | コリス


    ウェブサイトのパフォーマンスの改善やSEO、セキュリティに役立つ.htaccessの設定を紹介します。 17 Useful Htaccess Tricks and Tips 備考‥Apache チュートリアル: .htaccess ファイル、Apache コア機能 [ad#ad-2] .htaccessの設定‥パフォーマンスやSEO関連 .htaccessの設定‥セキュリティ関連 .htaccessの設定‥パフォーマンスやSEO関連 .htaccessでタイムゾーンを設定 .htaccessでタイムゾーンを設定します。 例‥東京 SetEnv TZ JST-9 もしくは、 SetEnv TZ Asia/Tokyo .htaccessで301リダイレクトを設定 .htaccessで301リダイレクト︵永続的なリダイレクト︶を設定します。 例‥旧ファイル︵old.html︶、新ファイル︵new

  • modxcms-jp.com

    modxcms-jp.com 2024 著作権. 不許複製 プライバシーポリシー

    kuracom
    kuracom 2010/10/29
    Dittoについて参考になる
    リンク

  • プラグイン無しでページネーションを設置

    WordPressでは多くのページネーションを実装するプラグインがありますが、使用しているテーマにあったデザインで機能も必要なものだけにできるように、プラグイン無しでページネーションを設置する方法を紹介します。 How to build a WordPress Post Pagination without plugin [ad#ad-2] ここでは上記元記事で紹介されているものをノーマル版とし、コメントで投稿されている拡張版の二つを紹介します。 Pagination without plugin：ノーマル版 Pagination without plugin：拡張版 Pagination without plugin：ノーマル版 How to build a WordPress Post Pagination without plugin PHP テーマファイル内の「fuction.ph

  • [JS]実装のロジックを理解して、自分に適したツールチップを作成するチュートリアル


    ツールチップのスクリプトやプラグインは、数多くリリースされています。 ここではjQueryを使用したツールチップをどのようなロジックで実装するかを解説したチュートリアルを紹介します。 Simple Tooltip w/ jQuery & CSS デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 1. マークアップ -HTML 2. スタイル -CSS 3. エフェクト -jQuery 4. スクリプトのロジック 5. 注意点 1. マークアップ -HTML マークアップをする際に気をつけることは可能な限りシンプルするのと同時に、さまざまなシナリオに対応できるよう柔軟にすることです。 メインとなるa要素にはツールチップを表示するために、class名﹁tip_trigger﹂を記述します。また、ツールチップのコンテンツを配置するspan要素には、class名﹁tip﹂を記述

  • InDesign CS5で線の長さを変えると位置がズレる - 帰ってきた💫Unicode刑事〔デカ〕リターンズ

    InDesign CS5では、変形パネルに数値を入力して（ドラッグではなく）オブジェクトのサイズを変更すると、基準点まで動いてしまうことがある*1。これでは使い物にならないので、問題の全体像を把握しようと試み、回避方法を探ってみたい*2。 下図は、InDesign CS4で長さ100pt・幅10ptの線を選択し、基準点を変化させながら、変形パネルで線の長さ（L）を200ptに変更した結果を示す（以下の図では、黒が変更前、グレーが変更後）。ズレは見られない。 InDesign CS5で同じことをしたものが、下図。InDesign CS5では、変形パネルメニューの「境界線の線幅を含む」のチェックの有無によって結果が変わってくるが（CS4なら、線オブジェクトに関してはどちらでもズレない）、下図はチェックのある場合。ヨコ線なら基準点が上（左上、中央上、右上のいずれか）、タテ線なら基準点が左（左上、

    InDesign CS5で線の長さを変えると位置がズレる - 帰ってきた💫Unicode刑事〔デカ〕リターンズ

  • DittoのページングをYahoo!Japanっぽくシンプルにする - ウェブ屋のCMS→modxヒキダス流（備忘録）


    modxスニペット﹁Ditto﹂のページングは、ページ数が少ない間は良いのですが、ページ数が多くなってくると、そのままページ番号がずらずらと並ぶだけで、使いにくくなってきます。 現状のDittoには、10ページ毎にまとめる等の機能がありませんので、直接ソースに手を加えて改造するしかありません。 まず、ページングの仕様ですが、︵Google仕様も検討しましたが、最大20ページ出るのは、ちょっと多すぎだと思うので、︶以下のような現在のYahoo!Japanの仕様を参考にしました。︵Bingになったらどうなるかわかりませんが︶ - ・全体で10ページ以上ある場合、10ページ分の番号表示 ・現在のページより小さい側に5ページ、大きい側に4ページあれば、これを表示 つまり、7ページ目から全体がシフトする 例︶ 　　 [1] 2 3 4 5 6 7 8 9 10 次へ> <前へ 1 [2] 3 4 5
    DittoのページングをYahoo!Japanっぽくシンプルにする - ウェブ屋のCMS→modxヒキダス流（備忘録）

  • [CSS]IEのhasLayout関連のバグと解決方法をまとめたサイト -hasLayout.net


    IE6/7/8のhasLayoutが原因でおきるスタイルシートのバグとその解決方法をまとめたサイトを紹介します。 hasLayoutについては、以前のエントリで紹介しているので参照ください。IEでのCSSのバグを回避するhasLayout hasLayout.net バグは現在、IE6(44個)、IE7(28個)、IE8(19個)登録されており、各ページにバグの解説、バグが生じるデモページ、バグの解決方法とそのデモページなどが掲載されています。IEのCSS Bugs一覧表の一部 また、CSSのチュートリアルでは、IEの便利なトリックも掲載されています。 CSS Tutorial 例えば、下記のようにIEでクリックした際に生じる点線は、他の箇所をクリックしないと消えないため、クリック後しばらくして消したり、元から表示させない方法などが紹介されています。 クリック時に生じる点線の処理方法

  • 均一で単調なシャドウから卒業するPhotoshopのチュートリアル

    均一で単調なシャドウではなく、大きさや不透明度を調整して奥行きのあるシャドウを描くPhotoshopのチュートリアルを紹介します。 Warping Drop Shadows to Give Depth 下記はそのチュートリアルを元に意訳したものです。 Photoshopの標準機能だけで簡単に作成ができます。 Step 1 まずは準備をします。 下記の例では、白い背景と紙のテクスチャを用意しました。 Step 2 シャドウの元になる矩形を描きます。 背景とテクスチャの間に新規レイヤーを作成（Ctrl+Shift+Alt+[N]）します。選択ツール[M]で長方形ツールを選択し、実体の下の方にやや小さめに矩形を選択します。塗りつぶしツール[G]を使用して、選択範囲を黒（#000000）で塗りつぶします。 シャドウの形は後のステップで整形するので、適当で構いません。

    kuracom
    kuracom 2010/06/23
    ワープツールなんてのがあるのか
    リンク

  • 無駄なdiv要素やclassだらけのマークアップから卒業する方法

    グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ

    kuracom
    kuracom 2010/04/02
    フレームワークはともかく、子孫セレクタの活用は当たり前に使われてると思ってた。基本中の基本。
    リンク

  • わずか四文字でIE6/7/8を区別するCSSハック | コリス

    「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 <textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea>

    kuracom
    kuracom 2010/04/02
    「\9」でIE8以下のみ適用とな
    リンク

  • CSSビギナーに気をつけてほしい5つのポイント | コリス


    スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex
    kuracom
    kuracom 2010/03/26
    “絶対配置の乱用”←ホームページビルダーのことですねわかります／スターハックは今でもたまに使う
    リンク

  • [CSS]CSS3の効果的な使い方と陥りやすいワナ

    CSS3で何ができるのかという「CSS3で何ができるの？　という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？　ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を

  • MAC OS X Fireworksで[Osaka アンチエイリアス無し 12pt]を綺麗に表示する方法 | 我流天性 がらくた屋


    MAC OS X Fireworksで[Osaka アンチエイリアス無し 12pt]を綺麗に表示する方法 2007 5/05 MAC OS X(10.4)の Fireworks上でアンチエイリアス無しのビットマップフォントを日本語で作成するのに良いフォントが無いのと悩んでいたのですが、Bowz::Notebookさんのエントリー﹁Mac OS X の Osaka 12px アンチエイリアスなしが汚い﹂を見て目から鱗。 ︵これって結構有名だったのでしょうか？︶ 実際に試してみました。 書体を[Osaka]、[アンチエイリアスをオフ]にして[横比率 101%]。 たったこれだけで汚かったビットマップフォントが綺麗に！ 下が実際に試してみた画像です。 12ptや14ptでははっきり違いがわかると思います。 8ptは元々潰れてダメ、9pt,10ptは特に変化無し。 仕事の中でどうしても12pt程度
    MAC OS X Fireworksで[Osaka アンチエイリアス無し 12pt]を綺麗に表示する方法 | 我流天性 がらくた屋
  • 1 2 3 4 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.