My Vector Space

  人生は寄り道してなんぼ

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

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

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

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

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

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

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

次世代型デバイス「ウェアラブルデバイス」について、気になったものをまとめておきます。 ウェアラブルデバイスは、スマートフォン、タブレットに次ぐ小型コンピュータとして、今後 様々な製品開発が進み新たなビジネスチャンスを生み出すと期待されている…

【 活用術11選 】Gmailの特徴、利便性について

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

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

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

【 機能と特徴を徹底比較! 】無料で始められる国内のブログサービス17選

それぞれのブログサービスの機能・特徴を把握して、目的・用途に合ったものを選びやすいように、代表的な17選をまとめておきます。※ 2015年10月時点のデータ 目 次 1. FC2ブログ 2. アメーバブログ 3. はてなブログ 4. ライブドアブログ 5. シーサーブロ…

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

アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo 「ズームスライダー」の設置手順 htmlファイル内にCSSファイルとJSファイルをリンクさせる まず、以下のサイトから外部ファイルをダウンロードする。 元サイト http://tympanus…

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

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

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

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

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

僕はワードプレスを始めてまだ浅いですが、今の段階で すでにプラグイン同士のバッティングによる不具合と思われる現象が起きていて、ワードプレスの拡張性や自由度の高さを実感している一方で、同じように不安要素も尽きません。 プラグインにしても なるべ…

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

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

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

CSSだけで表現できるエレガンチックな「LIGHT BOX」3パターン。 記述の手順は、以下のサイトからソースをダウンロードし、対象とする画像の<img>タグにコードをつけて、あとはパターンごとの個別のCSSをリンクさせるという流れ。 http://tympanus.net/codr…

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

プラグインを使わずにコードを追加するだけで「パンくずリスト」を設定する方法をまとめておきます。 手順としては まず「functions.php」ファイルに記述する作業になるので その際の注意点から。 この「functions.php」ファイルは、関数ファイルが集約され…

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

MOOC ( ムーク:MassiveOpenOnlineCourse。直訳すると「大規模オンライン公開講座」)とは、近年アメリカの教育現場で浸透し始めているオンライン学習のこと。 ハーバード、スタンフォード、MITなどをはじめ、世界中の一流大学が提供するオンライン講義を無料…

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

「WP Social Bookmarking Light」は、ソーシャルメディアの共有ボタンを一元管理できるプラグインです。 ほとんどのソーシャルボタンに対応しています。 「WP Social Bookmarking Light」をインストールする まず、Wordpress管理画面のプラグイン新規追加の…

「リビジョン」機能について

リビジョン機能は、ワードプレスに基本機能として備わっていて、記事の編集中に内容を自動で保存してくれるという機能です。 これは非常に便利なもので、例えば、 「 記述ミスや操作ミス、また不具合が生じたからデータが消えてしまった! どうしても前のデ…

パーマリンクについて

サイト構築をする際、最初の準備段階で注意しておかなければいけないことの1つにパーマリンクの設定があります。 この記事の中では、パーマリンクとはどういったものか、設定時に使える構造タグ、設定する際に注意しておきたいことなどをまとめておきます。 …

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

画像を4枚のパネルに分割してエフェクトをかけたスライダー4パターン。 まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。 共通のhtmlを記述を記述 まずは共通のhtmlを記述していく。 画像内のテキストは、<div class=”cr-ti…

【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 </link></noscript></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>

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

スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。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パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK…

「食品」「飲料」を扱ったサイトを作る際のポイント

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

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

【進捗メモ&備忘録】「パーツテンプレート」についてのまとめ。 目 次 1. パーツテンプレートについて 1-1. パーツテンプレートとは 1-2. パーツテンプレートを作ることのメリット 2. パーツテンプレートの種類 ( 主なもの ) 2-1. 「header.php」について 2…

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

サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする<img>タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCS…

PAGE TOP