My Vector Space

  人生は寄り道してなんぼ

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

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

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

表現の幅を一層広げる筆文字のデザインは日常の様々な場面で目にするようになりました。例えば、「社名ロゴ、店舗ロゴ」「webサイトや番組のタイトル」「広告やチラシ」「看板、のれん」「メニューや商品のロゴ」「表札」「名刺」など。 また、書体を変える…

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

WordPressは、CMS (コンテンツ・マネジメント・システム)というプラットフォームのシステムのことで、WEBサイトやブログの構築をすることのできるWEBサービスの1つです。 CMSとは、Content Management Systemの略で、日本語に訳すと「コンテンツ管理システム…

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

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

Gmailの機能、特徴、利便性について【まとめ】

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

オンラインで学べる学習サイト 11選【 Webデザイン / プログラミング編 】

近年、Webデザインやプログラミングをオンラインで学べるサイトが増えてきているので、いくつか気になったものをピックアップしておきます。 どのサービスも無料から有料のものまで様々なカリキュラムが提供されていて、隙間時間を使って学んでいけるような…

無料で始められる国内のブログサービス17選の徹底比較

この記事では、それぞれのブログサービスの機能・特徴を把握して、目的・用途に合ったものを選びやすいように、代表的な17選をまとめてみたので比較してみてください。※ 2015年10月時点のデータ 主な17項目 1: FC2ブログ 2: アメーバブログ 3: はてなブロ…

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

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

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

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

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3

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

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

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

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

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

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

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: 設定するにあたり必ず押さえておくべきこと ・英語表記の投稿名を入れておいた方がいい ・カテゴリ名や日付を入れるのは避けた方がいい ・パーマリンクを変更…

【TIPS】画像を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>

【TIPS】サムネイルプレビュー付きスライダー

サムネイルプレビュー付きスライダー【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>

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

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選

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

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - 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>

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

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

【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - InContent -

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

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

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

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

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

PAGE TOP