写真画像にダウンロードしたオーバーレイの素材を重ねます。 イメージに合うように、サイズやポジションを調整します。 レイヤーの描画モードはまずは「スクリーン」で。 ※他の描画モードも試してみてください。 あとは、レイヤーの不透明度を調整します。 チュートリアルは動画でも見ることができます。
写真画像にダウンロードしたオーバーレイの素材を重ねます。 イメージに合うように、サイズやポジションを調整します。 レイヤーの描画モードはまずは「スクリーン」で。 ※他の描画モードも試してみてください。 あとは、レイヤーの不透明度を調整します。 チュートリアルは動画でも見ることができます。
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
WordPressで運用しているクライアントさんのサイトのトップページに、画像サムネイル入りの新着記事一覧を作りました。 ネット上に意外と情報が少なくて手を焼いたので、メモしておきます。 こんな感じのコードを書きました。 [php] <?php query_posts(‘&posts_per_page=5’); if (have_posts()): while(have_posts()): the_post(); ?> <h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2> <div class="list_day">[<?php echo get_the_date(‘Y年n月j日’); ?>]</div> <?php if (has_post_thumbnail()) { the_post_thumb
CSSのfloatを解除(クリア)する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題(というか仕様)と、その対処方法についてネットで調べた情報を一通りまとめました。 1.floatにより親要素の高さが出なくなる(=背景がなくなる)問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー(iframe)の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
Illustratorで文字の角を丸めるとき、[角を丸くする]効果を利用すると、次のように意図しない形状になってしまうことがあります。 これを避けるために、有料のプラグイン、Xtream Pathの[スマートラウンド]を使う方法をご紹介してきましたが、Illustratorだけで実現する方法をご紹介します。 なお、この方法は、本日のセミナー(「クリ☆ステVol.6」)終了後、参加者の方から教わったものです。お名前を失念してしまいましたが、ありがとうございます(※追記あり)。 実現方法 実現方法は、[パスのオフセット]効果の二度がけ。 一旦、負の値でかけてから、同じ数値で正の値でかけます。 なお、この際、両方とも正の値を設定する効果に[角の形状]を「ラウンド」にしておくのがポイント。 正直、なぜ、これで丸くなるのかよくわからないのですが、結果オーライで。 ただし、細かいところをいうと、"墨だ
MacBook Airなど、モニターの小さなパソコンを効率良く使うなら、アプリのウインドウは極力少なくしたいものです。 そうでないと、パソコンの画面がすぐにいっぱいになってしまい、作業の混乱を招きます。例えるなら、机の上と同じですね。手帳・パソコン・ノート・本などが乱雑した机では、作業が捗らない。それと同じことが言えます。 それを解消するために色んなアイデアやアプリを凝らしています。その1つとして「XtraFinder」が非常にオススメです。 ▶「XtraFinder」のダウンロードページ このアプリは、Macのファイル管理「Finder」に、ウェブブラウザのようなタブ機能を加えられるアプリ。 複数のFinderを開こうとするなら、普通はウインドウを複数開かなければなりません。そうすると結局、どのFinderウインドウに何を表示していたか分からず、結局は画面が乱雑になってしまいます。 それ
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
iTunesを使いたおすために関連する20の項目を集めてみました。普段はほとんどMacを使っているのでMac寄りの記事ではありますが、WindowsのiTunesも使うので知っている限りの情報を掲載していきます。 CDをiTunesに曲を読み込む時の設定について。 10/23追記:この項目に関して色々な意見がありましたので、恥を忍んで書き直しました。 CDを読み込む際の設定は、iTunesの環境設定の「一般→読み込み設定...」から。 音質が良く、非圧縮よりファイルサイズが軽いAppleロスレスで取り込めれば一番いいと思います。ただし注意が必要なのが、ほぼ非圧縮のファイルなのでファイルサイズが大きくなるという点と、再生デバイスが限られるという点があります。Appleロスレスで取り込む際は手持ちのデバイスで再生できるか要確認です。保存用としてはおすすめ。 次に音質が良いのはAAC(256kb
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. Webサイトやブログを構築する際に使えるCMSやWebサービスは数多く存在するが、WordPressは近年、もはやCMSのデファクトスタンダードとしての地位を確立している。(※W3TECHの調査によると、世界のWebサイトの約33.9%がWordPress。CMS市場では60.7%がWordPress。) もちろん、私も、ほとんどのサイトやブログをWordPressで構築しているし、国内でもWordPressの導入例は増え続けている。 従って、WordPressのカスタマイズ方法を知っておくと、何かと有利な場合が多い。そこで、本日は、WordPressをカスタマイズしたい初心者が絶対に読むべき10の記事をご紹介する。 また、私たちバズ部は
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Google Chromeはサクサク動作する軽量で高速なブラウザですが、その代償として非常に多くの量のメモリを消費します。メモリをたくさん積んだPCならば問題になりませんが、そうでない人にとっては結構深刻な悩みのタネかもしれません。 実は、Google Chromeには特別なメモリ解放ツールを使ったりブラウザを再起動しなくても、サクッとメモリ使用量を最適化できる”隠し機能”があるので、非力なマシンのメモリ不足に困っている人はぜひこの方法を試してみましょう。 Google Chromeのメモリを解放する簡単な方法 1、デスクトップのGoogle Chromeショートカットを右クリックし「プロパティ」を開きます。 2、「リンク先」の部分の末尾に「 -purge-memory-button」と追加(ハイフン前の半角スペースに注意)し、「OK」をクリックしてウィンドウを閉じます。 3、Google
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く