読者です 読者をやめる 読者になる 読者になる

My Vector Space

WEB関連の情報やTIPSなどを中心に、身近なネタ グロースハック 考え方 グルメ 生活に役立つ情報…等など色々と…

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

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

【 汎用性抜群!! 】自作の筆文字をパス化する方法

筆文字を使った表現方法は、書体を変えることで躍動感、静けさ、高級感、可愛らしさ等など、多種多様であらゆる表現が可能なので、ビジネスでもプライベートでも、様々な用途 場面で活用されています。 筆文字の活用方法の例 ・社名ロゴ、店舗ロゴ ・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: 記述 編集のしかた パーツテンプレートとは パーツテンプレートとは、ヘッダーやフッターといっ…

クリエイティブかコンサルティングか、起業か安定か。プログラマに残された4つの未来の可能性

誰にでもできるものではない仕事とは問題解決をすることです。言われた通りに作るのではなく提案ができてこそ、個人として の市場価値を高めていくことができる。 未来に残されるのは、クリエイティブな仕事か、コンサルティングの仕事の2種類。 未来に残さ…

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

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

20年後の世界はこうなる! 大前研一氏と大前創希氏が未来のIT事情を議論

20年後は自動化の心配どころか、AIvs人間の対立が深刻化してそう… 人間の仕事 「今後20年間で、すべての仕事の47パーセントが自動化される可能性がある」 ネットワークによってヒエラルキーが崩壊する 「誰が」というポジションのついた人が言ったかじゃなく…

Google X創設者が語る、人工知能が変える「働き方」と「学び方」の未来

AIによって技術だけでなく、既存のビジネスモデルも破壊される。 今日、アメリカや日本では、労働者の75%以上がオフィスで仕事をしていますが、その作業の大半はスプレッドシートのデータ入力といった反復的なものです。こういった作業をもっとインテリジェ…

大前研一氏が語る、「日本発、世界で通用するイノベーション」の作法

答えのない時代に“0から1”を考える「発想のパターン」と「エコシステム活用」 なんでも「自前主義」でやろうとしないということが重要でしょう。世の中には多くの事例があり、それらをヒントにアイデアが思いついたら外部調達を含めてすぐ実行できる簡素化し…

「自分が見たいものを世の中に生み出せ」 Twitter創業者ジャック・ドーシーが初めて語った”成功のためのリスト”

自己実現は他人との比較や他人からの評価ではなく、自分で決めるところにある。 「受け入れられないかもしれないと心配することはない。その心配は成功者皆が経験したものである。評価されなくても心配することはない。あなたらしさ、人間らしさを出せば、全…

マーケティング業界について

「戦略サイドとクリエイティブサイドが、同じ組織文化として統合されることでてうまくいくのか否か?」 ・新しいイノベーションが猛スピードで進んでいるうちは専門特化した会社がそのノウハウをリードし、新領域の専門性が市場競争力となる。 ・しかし、い…

「温故知新」

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

はてなブログのデータを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>…

PAGE TOP