My Vector Space

人生は寄り道してなんぼ

はてなブログ 」のデータを「 WordPress 」へ移行する手順

はてなブログのデータをWordPressへ移行するまでの手順まとめ。 「 はてなブログ 」のデータを「 WordPress 」へ移行する手順 1. 「 はてな 」のデータをダウンロードする 「はてな」のデータをダウンロードするために、まずは設定画面を開く。 「 設定 」 →…

「良いWEBサイトとは」「良いWEBサイトを作るためには」

まず、「良いWEBサイト」とは、 特定のユーザー層が、特定の状況で、特定のゴールを達成しやすいサイトであること。 そして良いサイトを作るためには、定めておくべき3つの要素がある。 1 そのサイトは、どんなユーザー層をターゲットにしているのか 2 その…

文字を変形させる ( 拡大 / 縮小 )

WEB上で縦横比を無視して文字の形を変形させるには、CSS3のtransformプロパティを使う。 transformプロパティの値には「scale」という値を指定してコードを以下のように記述する。 【 html 】 1 transform:scale(x,y); 「x」には横方向の倍率を、「y」には縦…

「落ち着き」「安らぐ雰囲気」のデザインにする際のポイント

WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していこうと思います。 この記事では、「落ち着き」「安らぐ雰囲気」のデザインにする際に押さえておくことをまとめておきます…

デザインのセオリーについて

~参考サイト~ デザイナーなら読んでおきたい!デザインに関する6つのスライド・企画書 | creive【クリーブ】

「 functions.php とは」

【進捗メモ&備忘録】「functions.php」ファイルについてのまとめ。 「functions.php」ファイルの機能 役割とは? サイドバーを作成する際、そこに様々なメニュー ( カテゴリーメニュー、月別メニュー等など )を表示するためにはウィジェットという機能が必…

CSSで作るリボン風の見出し

~CSSでリボンを作るまでの大まかな流れ~ まず、リボン風にしたい部分の要素をhtmlに設定。 そこにスタイルを適用させ、borderプロパティでリボンの影に見せる部分の三角形を作成し positionプロパティで位置の調整をしていく、という流れ。 まずは、htmlか…

JPEG、PNG、GIF形式の画像を、SVGのベクターに変換できるサービス

これは便利!! JPEG,PNG,GIF形式の画像を、SVGのベクターに変換できるサービス。 写真画像を指定してクリックするだけで、ベクターデータ (svg) が生成される。 ファイルサイズは1Mb(1000Kb)までアップロード可能。 参考サイト Convert Picture to Svg - Pics…

【 CSSが効かない時の対処法 】 セレクタ名の書き方で「 優先順位 」が決まる

CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。 ● タグの前後や間に全角スペースが入っている ● セミコロン ( ; ) の記述が抜けている ● 閉じカッコ ( } ) の記述が抜けている ● 編集したファイルを保存し忘…

CSSだけで改行する方法

ワードプレスのサイドバーのカスタマイズをしている際、とあるプラグインを設定したら、レイアウト上どうしても改行させて表示させたい部分なのに、プラグインなのでhtmlをいじれなくて どうすればいいか困っていました。 とくに致命的な問題ではないですが…

文字を斜めに傾ける

CSS3の「transform」プロパティを使って対象物を斜めに傾けることができます。 この指定は、テキストだけでなく画像に対しても適用できます。 CSSの記述は、transformプロパティの値に「rotate」という値を指定。 記述のしかたは以下のようになります。 記述…

マウスオーバーした時、背景カラーをふわっと変える設定

「マウスオーバーした時、背景カラーをふわっと変える設定」をまとめておきます。CSSで、元になる色と、マウスオーバーした時の色を設定するだけです。 以下で細かく見ていきます。 マウスオーバーした時、背景カラーをふわっと変える設定 1. もとの色を設定…

画像にマウスオーバーした時、CSSで半透明の白をふわっと乗せる

画像にマウスオーバーした時、CSSで半透明の白をふわっと乗せる設定。 やり方は色々あると思いますが この記事で紹介するのは、まず背景を白にしてから画像の透明度をつけることで ふわっとみせる、という方法です。 画像ホバーした時、半透明の白色レイヤー…

斜め上をいく文の里商店街のポスター25点

シンプルでかつ、訴求力があり、インパクトも抜群の「斜め上をいく文の里商店街のポスター25点」の中から一部を抜粋してみました。 どれも売り込み臭さがなくて親しみやすさがあり参考になります。 参考記事

【 Chromeトラブル 】画像が表示されない場合の対処法

サイトを編集中に、画面の一部の画像が表示されないという現象が起きたので、この際の対処法についてをまとめておこうと思います。 使用している環境 ・機種は、sony VAIO ・使用ブラウザは、GoogleChrome ・OSは、Windows7 ・メモリ 8GB 画像が表示されない…

GALLERY - 作品紹介 -

「創造的破壊」 中字の筆ペンで制作 ・背景と書の一体感、全体の色彩や熱量のバランス ・筆ペン特有の人口筆の張りのあるシャープなタッチを表現するなど意識しました。 「 パンダカフェ 茶の花 」 「 パンダカフェ 茶の花 」サイトのタイトル用に書いたもの…

WEBポートフォリオ

▼在学時に制作したWEBポートフォリオです。 http://ooigawa.bitter.jp/portfolio/

「インプット」と「アウトプット」

「 脳は、情報を入れ込む ( インプット ) よりも、その情報を何度も使ったり出力する ( アウトプット ) ことで鍛えられる 」 ということが脳科学でも明らかになっています。 ここからいえることは、アウトプットを前提にしたインプットが重要であるというこ…

これは便利!!CSS3ジェネレーターいろいろ

ブラウザ上でプレビューを見ながら手動で設定できてコードも生成してくれるCSS3ジェネレーターを3サイトピックアップ。 ベンダープレフィックス付きでコピペしてすぐに利用可能。 1. 「 CSS Generator 」http://www.css3generator.in/ ■ カスタマイズできる…

【TIPS】画像をオーバーレイで表示する「LightBox」プラグイン

「LightBox」プラグインはプロトタイプで動いているものが多いらしいけど、ここで紹介するものはJQueryで実装するもの。 手順は、ダウンロードしたファイルからスクリプトを任意の箇所に設置し、対象となる画像にタグを指定すれば完了。 以下、手順の詳細 画…

【TIPS】「FlexSlider」を使用して複数の画像をスライドショーさせる

「FlexSlider」を使用して複数の画像をスライドショーさせる手順をまとめておきます。 「FlexSlider」を設置する際に行なう作業は、以下の三箇所です。 ● htmlのhead内にJQuery本体と各ファイルを読み込ませる。 ● htmlのhead内にスクリプトを記述する。 ● b…

positionプロパティについて

cssでレイアウトをしていく際にpositionプロパティを使う機会は多いので、「static」「relative」「absolute」「fixed」の使い方についてをまとめておきます。 目 次 1. positionプロパティとは 2. 使い方、用途は? 3. 移動させたい要素に「 position : stat…

画面をスクロールさせて、指定した要素がトップの位置に来た時に固定表示させる方法

画面をスクロールさせて、指定した要素がトップの位置に来た時に、トップに固定表示させる方法をまとめておきます。 グローバルナビやサイドバーをはじめ、ページ途中にある要素を固定配置させたい時に便利です。 作業内容は以下の三箇所です。 ● htmlのhead…

「 春爛漫 」

「 ご宴会予約用チラシ 」の制作。

「 寒ぶりづくし 」

イベント誘致用のチラシ チラシ作りました。 テーマ・コンセプトは、イベント誘致用。 ・さり気なく控え目に筆文字を入れる・モダンな仕上がりにする・シズル感を出す・筆文字を書く台紙を和紙風にする といったところを表現しました。

「 彩食健美 」

新店舗オープンの集客用のチラシの制作。

「 大感謝祭 」

大感謝祭用のチラシの制作。

JQueryを使うための準備 手順

JQueryを使うための準備についてをまとめておきます。 手順は以下のようになります。 1 スクリプトを動かすために必要な JQuery のファイル( 本体 )をhead 内に設置する。 2 プラグイン本体を設置し、色々なスクリプト(実行コード) を書いていく。 1. まずは…

CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと

CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。 ここは間違えやすいところでもあるので、ミスしがちな …

PAGE TOP