はてなブックマーク

やり方はかんたん！紹介するコードをコピーして、CSSファイルに貼りつけるだけです。 WordPressをお使いの方は「style.css」（テーマを使っている方は子テーマの「style.css」）に貼りつければOKです。 アコーディオンボックスのコードまずは基本となるアコーディオンボックスを表示させてみましょう。 こんな感じ↓のボックスです。 /*--------------------------------- アコーディオンボックス --------------------------------*/ .acbox{ width: auto; font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */ margin:0 10px; /* ボックス全体の位置調整 */ } .acbox label{ width: auto; font-size: 16px; /

今回はPhotoshopでゴールド（金色）の文字を作る方法をお届けします。 この方法を使うと、いろいろなタイプの金色の文字ができます。 ゴールドの文字は、ロゴやテロップなどいろいろな場面で使えるかと思います。よかったら参考にしてみてください。 金色の文字の作り方今回は「一攫千金」という文字を作ってみます。 1.新規カンバスを作成します。 2.ゴールドにしたい文字を入れます。ここでは「一攫千金」としてみます。 ここから様々な効果を加えていきます。 文字にグラデーションをかける1.レイヤーパネルで、文字を入れたレイヤーをダブルクリックします。 2.レイヤースタイルのダイアログが開きます。「グラデーションオーバーレイ」を選択し、カラーバーをクリックします。 3.グラデーションを設定できる画面になります。まずは1と2の色を設定します。 □をクリックしてから「カラー」をクリックすると、それぞれの色を

Photoshopで斜めのストライプを作る方法を紹介します。 サイズを自由に変えられるので、1つつくっておくと、背景やロゴなどいろいろなところに使えます。 というわけで今回は、Photoshopで斜めのストライプを作る方法をお届けします。 簡単にできますので、よかったら参考にしてみてください。 斜めのストライプの作り方ストライプをつくる準備1.新規カンバスを作成します。 このカンバスのサイズが、ストライプの大きさの基準になります。今回は、100×100pxでつくってみます。 2.レイヤーパレットの赤で囲んだ部分をクリックして、新規レイヤーを作成します。 新規レイヤーができました。このレイヤーで作業をしていきます。 3.メニューバーの「表示」から「新規ガイド」を選択します。 4.ダイアログが出ますので、「水平方向」にチェックを入れ、「位置」にカンバスサイズの半分の数字（ここでは50px）を入

今回は、ぱくたそさんのフリー素材を使って加工してみます。 この画像を こんな感じのイラスト調にします。 ベースとなるデザインをつくる1.元にする画像をPhotoshopで開きます。 2.「イメージ」→「色調補正」から「HDRトーン」を選択します。 3.各数値を入力する画面になります。 パラメーターがいろいろありますが、「半径」「ガンマ」「ディティール」をいじるだけでそれらしい雰囲気になります。 今回の作例では、上の画像のように入力しています。自分でやりたい方は次の点を参考に調整してみてください。 「半径」は、画面のおおよその雰囲気を調整する部分です。スライダーを動かすと描写が変わっていきますので、自分好みの雰囲気になったところでストップします。 「ガンマ」は明暗差が変わります。右方向に動かすと、画面内の明暗差が小さくなります。画面全体も暗くなりますが、暗くなりすぎた時は「露光量」を上げると

Firefoxは、サイトに新しいファビコン（favicon）を設定しても、ブックマークのファビコンが反映されない場合があります。 私もその現象にずいぶんと悩まされました。 新しいファビコンが反映されるまでかなり苦戦したので、その方法を書いておきます。 Firefoxのファビコンが表示されない・反映されない原因まず最初に「ファビコン（favicon）」について簡単に説明しておきます。 ファビコンとは、サイト名の左に出る小さなアイコンのことです。 サイトを表示した際のタブや、ブックマークをした画面によく出ていますね。 が、Firefoxでは、サイトに新しいファビコン（favicon）を設定しても、ブックマークのファビコンが反映されないことがあります。 これは次の理由によるものです。 原因はFirefoxのキャッシュFirefoxは、サイトを一度ブックマークすると、その際に記憶したファビコンを使