My Vector Space

  人生は寄り道してなんぼ

オンラインストレージを使う際に必ず押さえておきたい事|メリットとデメリットまとめ

職場や自宅外のパソコンで作業したファイルを家で編集したり、メールに添付できない大容量ファイルを他人に渡したいといったことがよくあります。 従来であれば、その都度 USBメモリやCD-Rにコピーして持ち歩いていましたが、受け渡しや持ち運びの際の手間や…

【筆文字デザイン作成TIPS】自作の筆文字をデータ化する方法

目 次 1: 筆文字デザインについて 2: 作業する上で必要なもの 3: 自作の筆文字をデータ化する方法 筆文字デザインについて 表現の幅を一層広げる筆文字のデザインは日常の様々な場面で目にするようになりました。例えば、「社名ロゴ、店舗ロゴ」「webサイト…

WordPressでブログ運営することのメリットとデメリット

WordPressは、オープンソースのブログサービス / CMS (コンテンツ・マネジメント・システム) のプラットフォームです。 CMSは、HTMLやCSSなどの専門知識が必要な部分は 全てシステム側で自動制御され、テキストや画像などの情報だけの操作でWEBサイトの更新…

次世代型デバイス「ウェアラブルデバイス」について【 まとめ 】

ウェアラブルデバイスとは ウェアラブルデバイスは、スマートフォン、タブレットに次ぐ小型コンピュータとして、今後 様々な製品開発が進み、新たなビジネスチャンスを生み出すと期待されています。 ウェアラブルデバイス: ウェアラブルデバイスは、腕や頭…

Gmailとは?機能、特徴、利便性をまとめてみた

Gmailとは、Googleが無料で提供しているWEBサービスで、メール機能を始めとする様々な機能や大容量のストレージを併せ持つサービスです。 2015年時点で月間アクティブユーザー数が10億人を突破し、世界最大規模のメールサービスとしてGoogleの主要サービスの…

無料から有料のものまで、オンラインで学べる学習サイト 11選

近年、オンラインで学べるサイトが増えてきているので、いくつか気になったものをピックアップしておきます。 目次 1: schoo ( スクー ) 2: ShareWis ( シェアウィズ ) 3: ドットインストール 4: ウェブカツ!! 5: SKILLHUB 6: CODEPREP 7: プログラ…

無料で始められる国内のブログサービス17選の徹底比較【2015年10月時点】

国内にある無料ブログサービスの代表的なものを比較してみます。 それぞれのブログサービスの機能・特徴をしっかり把握して、目的・用途によって使い分けていけるように、この記事では代表的な17選を取り上げて、概要 特徴と主な機能を比較しやすいようにま…

【ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大!

アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo まずはhtmlファイル内にCSSファイルとJSファイルをリンクさせる まず、外部ファイル(http://tympanus.net/codrops/2015/07/06/zoom-slider/)をダウンロードして「style.css」「…

無料で利用できるオンラインストレージ (クラウドストレージ) サービスを比較してみた

無料で使えるWEBサービスとして、プライベートでもビジネスにおいても生産性アップ、業務効率化のためにおさえておきたいオンライン ( クラウドストレージ ) サービス。 オンラインストレージ ( クラウドストレージ ) インターネット上で、ストレージ ( 外部…

画像ホバーの際アニメーション効果をつけるCSS3 (10パターン)

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示ができるスタイルシート10パターンのまとめ。 記述はまず、どのパターンでも共通に適用させるCSSを設定して ( ダウンロードした外部ファイルをリンクさせる ) 、あとはパターン…

プラグイン不要!!のページネーション設置方法

ワードプレスを始めてまだ浅いですが、すでにプラグイン同士のバッティングによる不具合と考えられる現象が起きているので、それを考慮しながらなるべくプラグインを使わずに色々と作業を進めている今日この頃‥ということでプラグインを使わずにページネーシ…

サイドバー以外の場所にも複数のウィジェットを設置する方法

サイドバーというひとかたまりのエリアだけでなく、ヘッダー部分などページのあらゆる箇所ウィジェットの機能を複数設置する方法。 設置したいウィジェットの数だけ有効化 functions.phpファイルに、設置したいウィジェットの数だけregister_sidebar();タグ…

CSSだけで実装できる!! エレガンチックな「LIGHT BOX」【3パターン】

CSSだけで表現できる「LIGHT BOX」です。 記述の手順は、http://tympanus.net/codrops/2011/12/26/css3-lightbox/からソースをダウンロードし、対象とする画像の<img>タグにコードをつけたして、あとはパターンごとの個別のCSSをリンクさせるという流れ。 …

プラグインを使わずに、コードを追加するだけでパンくずリストを設定する方法

まずは、以下のコードをテーマ編集のfunctions.phpのphpのタグ内に入れます。(phpファイル は"<?php" で始まり "?>" で終わるので、この間のどこかに入れる) 【 functions.php 】 1 "breadcrumb", "class" =>"clearfix")){ 3 global $post; 4 $str ='';…

世界中にある一流大学の講義を無料で受けられるWEBサービス「MOOC」(ムーク)について

MOOC(ムーク)とは 近年、アメリカの教育現場で浸透し始めているMOOC ( ムーク:MassiveOpenOnlineCourse)。直訳すると「大規模オンライン公開講座」で、いわゆるインターネットを通じた大規模なオンライン講座のこと。ハーバード、スタンフォード、MITなどを…

Facebook,LINEなどのSNSボタンをプラグインを使って設置する方法

WP Social Bookmarking Lightは、ソーシャルメディアの共有」ボタンを一元管理できるプラグインです。投稿や固定ページに共有ボタンを追加できます。 ほとんどのソーシャルボタンに対応していて使い勝手もかなり良いです。 「WP Social Bookmarking Light」の…

リビジョン機能について

リビジョン機能はデフォルトで備わっている機能で、投稿記事や固定ページの編集時に自動保存してくれていつでも復元することができるというかなり助かる機能。 ただ この機能の問題点としては、デフォルトの設定のままだとリビジョンのデータの最大保存数が…

パーマリンクについて

目次 1: パーマリンクについて ・パーマリンクとは ・パーマリンク設定時に使える構造タグ一覧 2: 設定するにあたり必ず押さえておくべきこと ・英語表記の投稿名を入れておいた方がいい ・カテゴリ名や日付を入れるのは避けた方がいい ・パーマリンクを変更…

画像を4枚のパネルに分割してエフェクトをかけたスライダー【4パターン】

画像を4枚のパネルに分割してエフェクトをかけたスライダー4パターン。 まず、共通のhtmlを記述。 画像内のテキストは、<div class="cr-titles">のタグ内で書き換える。 【 html 】 1 <div class="container"> 2 <section class="cr-container"> 3 <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" 4 checked/> 5 </section></div>

サムネイルプレビュー付きスライダー【2パターン】

サムネイルプレビュー付きスライダー【2パターン】 まず、共通の設定部分になるCSSファイルをリンクさせる。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 3 <link rel="stylesheet" type="text/css" href="css/style.css" /> 4 <noscript> 5 <link rel="stylesheet" type="text/css" href="css/noscript.css" /> 6 </noscript> 7 </link></link></head>

ドロップダウンリスト 5パターン【 CSS , Javascript 】

CSS,Javascriptで作るドロップダウンリスト5パターン。 まず、ダウンロードした外部ファイルの中にある5パターン共通のCSSファイルと JSファイルを設定。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css" /> 3 <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' 4 rel='stylesheet' type='text/css' /> 5 </link></link></head>

2015年Web・デザイン界隈で浸透しつつあるデザイントレンド16選

ホームページのデザインはある程度形式化されている部分もありますが、そんな中でもトレンドの変化があります。 特に近年では、スマートフォンが普及したことによりマルチデバイスに配慮する形でデザイントレンドも変わってきました。 その時代に最適なデザ…

画像ホバーの際アニメーション効果をつけるCSS3 (6パターン) - ihover -

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。 もくじ ・hover effect【1】左側と右側からテキストがスライドしてくるエフェクト ・hover effect【2】画像を画面上側に、テキストを下側にエフェク…

気になったWEBデザインのサイト【4】~素材感を活かした手作り風のサイトについて~

グラフィックソフトの機能を駆使することで直線的でシャープ スマートな表現はできるけれど、一見 単調にもなりがちなので、もっと素材感を活かした手作り風の柔らかい雰囲気のデザインで表現する場合には以下のようなポイントを押さえておきたい。 素材感を…

気になったWEBデザインのサイト【3】~大量の商品を見せるデザイン レイアウトについて~

大量の商品を掲載するサイトを作る時のポイント 情報アーキテクチャ ( レイアウト、サイト構造を整え、情報をわかりやすく伝える ) の行き届いた設計 商品 サービス 情報量の豊富さを限られたスペースにいかに効率よく配置 分類して紹介していくか。 行間 各…

画像を4つのパネルに分割&エフェクト効果のスライドショー -Four Boxes Slideshow-

画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターン。 まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とjsファイル(3ファイル)を設定。 【 html 】 1 <head> 2 <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 3 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 4 </link></link></head>

CSSで作るドロップダウンメニューのドロップ表示5パターン

CSSで作るドロップダウンメニューのドロップ表示5パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlを記述 まずは、共通部分になるhtmlを記述してい…

画像ホバーの際アニメーション効果をつけるCSS3 (6パターン・スクリプト不要) - InContent -

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示をするスタイルシート6パターン。 基本的にどのパターンで実装する場合でも、ダウンロードした外部ファイル(https://github.com/brunodsgn/incontent)の中にあるCSSファ…

気になったWEBデザインのサイト [ 2 ]~食品 食材 飲料水を扱ったサイトについて~

食品 食材 飲料水を扱うサイトを作る際のポイント 五感を刺激するデザイン 食品 食材 飲料水を扱うサイトのポイントは、「おいしさ」や「新鮮さ」をいかに伝えるか。 料理をシズル感で感性に訴えるなど、五感を刺激するデザインである方がいい。 ウェブサイ…

パーツテンプレートを作る

《 進捗メモ&備忘録 》 目次 1: パーツテンプレートとは 2: パーツテンプレートの種類 ( 主なもの ) 3: パーツテンプレートを作っておくことのメリット 4: 記述 編集のしかた パーツテンプレートとは パーツテンプレートとは、ヘッダーやフッターといっ…

サムネイルプレビュー付きスライダー 【 Sweet Thumbnails Preview Gallery 】

サムネイルプレビュー付きスライダー。 demo 記述はまず、対象とする<img>タグにhtmlタグを追加してから、ダウンロードした外部ファイル(http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/)のCSS、Javascript、JQueryをリンクさせる、と…

「温故知新」

ワードプレスサイトのトップ画像用に書いたもの。

はてなブログのデータをWordPressへ移行する方法

「はてな」のデータをダウンロードする 「設定」→「詳細設定」→「エクスポート」(記事のバックアップと製本サービス)→「ダウンロード」という順序で、ブログの記事とコメントをMT(MovableType)形式のテキストファイルで書き出す。ただし、記事に掲載してい…

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

「良いWEBサイト」とは 特定のユーザーが、特定の状況で、特定のゴールを達成できるサイト 押さえるべき3つの事 ・ターゲットとなるユーザー層が明確 ・どんな状況で使われるかを想定している ・ユーザーがゴールまで到達しやすい導線作り 単に「 コンバージ…

CSS3のtransformで、文字を変形させる

CSS3のtransformで文字を変形させる WEB上で縦横比を無視して 文字の形を変形させるには、CSS3のtransform プロパティを使う。 transformプロパティの値に「scale」という値を指定して、CSSソースを以下 のように記述

気になったWEBデザインのサイト [ 1 ]~落ち着く 安らぐ雰囲気のあるサイトについて~

落ち着く 安らぐ雰囲気のデザインにする際に押さえておきたいこと 彩度 明度 コントラストの低い色使い 同系色で彩度の低い色使いをベースに配色することで、落ち着きを演出できる。ベージュや茶系の配色や、夜を連想させる明度の低い青などがマッチ。 コン…

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

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

「 functions.php とは」

《 進捗メモ&備忘録 》 機能 役割 サイドバーを作成する際、そこに様々なメニュー ( カテゴリーメニュー、月別メニュー>等など )を表示するためにはウィジェットという機能が必要になる。そのウィジェットの機能を有効にするためのファイル。 index.phpのよ…

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

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

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

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

CSSが効かない!!ときのよくありがちなミス まとめ

CSSが効かない時に考えられること ● タグの前後や間に全角スペースが入っている ● セミコロン ( ; ) の記述なし ● 単純にスペルミス ● CSSの優先順位がおかしい ● class名 id名が数字で始まっている ( もしくは数字のみ ※機械は数字で始まるものに対して、名…

CSSだけで改行する方法

とあるプラグインを設定した際、どうしてもブラウザ表示で改行させたい部分があり困っていました。 とくに致命的な問題ではないですが、やはり見やすさ レイアウトを考えるとだいぶ印象が違ってくるので、どうしても直したい部分です。CSSはいじれるがhtmlが…

CSS3のtransformで文字を斜めに傾ける

CSS3のtransformプロパティを使って対象物を斜めに傾けることができる。テキストだけでなく、画像に対しても適用可能。transformプロパティの値に「rolate」という値を指定する。 htmlとcssの記述例は以下になります。 【 html 】 1 <ul> 2 <li>パスタ</li> 3 <li>カレー</li> 4 <li>牛</li></ul>…

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

まずは、もとの色を設定 【 CSS 】 1 #sample{background-color:#000000; 2 width:○○○px; 3 height:○○○px; 4 } 次にマウスオーバーした時の色とエフェクト効果を設定 【 CSS 】 1 #sample{ 2 background-color:#ffffff; 3 } 4 5 #products-box::before, 6 #p…

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

背景を白にして、画像の透明度を変えていくという設定です。 まずaタグにid名をつけてこの設定 【 CSS 】 1 #sample-anchor{ 2 background-color:#ffffff; /*背景に白を設定*/ 3 display:block; /*ブロック化*/ 4 width:○○○px; 5 height:○○○px; 6 } 次に対象…

【予想外】斜め上をいく文の里商店街のポスター25点

インパクトあるな… 売り込み臭さがなくて親しみやすい 参考記事

GoogleChromeで画像が表示されなかったりデザインが崩れた場合の解決法

症状 ページの一部の画像が表示されない 環境 ・sony VAIO ・使用ブラウザはGoogleChrome ・Windows7 ・メモリ 8GB そもそもは、FFFTPでデータをアップして 更新後の画面を見たら、一部のサムネイル画像が表示されないという状態になってしまった というトラ…

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

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

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

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

「茶の花」「大感謝祭」「彩食健美」

PAGE TOP