職場や自宅外のパソコンで作業したファイルを家で編集したり、メールに添付できない大容量ファイルを他人に渡したいといったことがよくあります。 従来であれば、その都度 USBメモリやCD-Rにコピーして持ち歩いていましたが、受け渡しや持ち運びの際の手間や…
【2018年10月17日(水)更新】 筆文字のデザインは、日常の様々な場面で使われています。 よく目にするもの、一般的な使われ方としては、「社名ロゴ、店舗ロゴ」「webサイトや番組のタイトル」「広告やチラシ」「看板、のれん」「メニューや商品のロゴ」「表札…
WordPressは、CMS (コンテンツ・マネジメント・システム)というプラットフォームのシステムのことで、WEBサイトやブログの構築をすることのできるWEBサービスの1つです。 CMSとは、Content Management Systemの略で、日本語に訳すと「コンテンツ管理システム…
次世代型デバイス「ウェアラブルデバイス」について、気になったものをまとめておきます。 ウェアラブルデバイスは、スマートフォン、タブレットに次ぐ小型コンピュータとして、今後 様々な製品開発が進み新たなビジネスチャンスを生み出すと期待されている…
Gmailとは、Googleが無料で提供しているWEBサービスで、メール機能を始めとする様々な機能や大容量のストレージを併せ持つサービスです。 2015年時点で月間アクティブユーザー数が10億人を突破し、世界最大規模のメールサービスとしてGoogleの主要サービスの…
近年、Webデザインやプログラミングをオンラインで学べるサイトが増えてきているので、いくつか気になったものをピックアップしておきます。 どのサービスも無料から有料のものまで様々なカリキュラムが提供されていて、隙間時間を使って学んでいけるような…
※ 2019年5月12日更新 それぞれのブログサービスの機能・特徴を把握して、目的・用途に合ったものを選びやすいように、代表的な17選をまとめておきます。 目 次 1. ＦＣ２ブログ 2. アメーバブログ 3. はてなブログ 4. ライブドアブログ 5. シーサーブログ 6.…
アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。 demo 「ズームスライダー」の設置手順 htmlファイル内にCSSファイルとJSファイルをリンクさせる まず、以下のサイトから外部ファイルをダウンロードする。 元サイト http://tympanus…
【 2018年9月20日(木)更新 】 無料で使えるWEBサービスであり、プライベートでもビジネスにおいても生産性アップ、業務効率化のためにおさえておきたいオンラインストレージ ( クラウドストレージ ) サービスについてまとめておきます。 オンラインストレー…
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示ができるスタイルシート10パターンのまとめ。 記述はまず、どのパターンでも共通に適用させるCSSを設定して ( ダウンロードした外部ファイルをリンクさせる ) 、あとはパターン…
僕はワードプレスを始めてまだ浅いですが、今の段階で すでにプラグイン同士のバッティングによる不具合と思われる現象が起きていて、ワードプレスの拡張性や自由度の高さを実感している一方で、同じように不安要素も尽きません。 プラグインにしても なるべ…
サイドバーというひとかたまりのエリアだけでなく、ヘッダー部分などページのあらゆる箇所ウィジェットの機能を複数設置する方法。 設置したいウィジェットの数だけ「 register_sidebar(); 」の設定を記述して有効化させる まず、functions.phpファイルを開…
CSSだけで表現できるエレガンチックな「LIGHT BOX」3パターン。 記述の手順は、以下のサイトからソースをダウンロードし、対象とする画像の＜img＞タグにコードをつけて、あとはパターンごとの個別のCSSをリンクさせるという流れ。 http://tympanus.net/codr…
プラグインを使わずにコードを追加するだけで「パンくずリスト」を設定する方法をまとめておきます。 手順としては まず「functions.php」ファイルに記述する作業になるので その際の注意点から。 この「functions.php」ファイルは、関数ファイルが集約され…
MOOC ( ムーク：MassiveOpenOnlineCourse。直訳すると「大規模オンライン公開講座」)とは、近年アメリカの教育現場で浸透し始めているオンライン学習のこと。 ハーバード、スタンフォード、MITなどをはじめ、世界中の一流大学が提供するオンライン講義を無料…
「WP Social Bookmarking Light」は、ソーシャルメディアの共有ボタンを一元管理できるプラグインです。 ほとんどのソーシャルボタンに対応しています。 「WP Social Bookmarking Light」をインストールする まず、Wordpress管理画面のプラグイン新規追加の…
リビジョン機能は、ワードプレスに基本機能として備わっていて、記事の編集中に内容を自動で保存してくれるという機能です。 これは非常に便利なもので、例えば、 「 記述ミスや操作ミス、また不具合が生じたからデータが消えてしまった！ どうしても前のデ…
サイト構築をする際、最初の準備段階で注意しておかなければいけないことの1つにパーマリンクの設定があります。 この記事の中では、パーマリンクとはどういったものか、設定時に使える構造タグ、設定する際に注意しておきたいことなどをまとめておきます。 …
画像を４枚のパネルに分割してエフェクトをかけたスライダー４パターン。 まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。 共通のhtmlを記述を記述 まずは共通のhtmlを記述していく。 画像内のテキストは、＜div class=”cr-ti…
サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。 まず、共通の設定部分になるＣＳＳファイルをリンクさせる。 【 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>
CSS,Javascriptで作るドロップダウンリスト５パターン。 まず、ダウンロードした外部ファイルの中にある５パターン共通の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>
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。 目 次 ・hover effect【1】左側と右側からテキストがスライドしてくるエフェクト ・hover effect【2】画像を画面上側に…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第4回目となるこの記事では、「素材感を活かした手作り風のサイトを作る際のポイント」についてをまとめて…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。 今回で第3回目となるこの記事では、「大量の商品を見せるデザイン レイアウトにする際に押さえておくこと」につ…
画像を4つのパネルに分割してエフェクトをかけたスライドショー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で作るドロップダウンメニューのドロップ表示５パターンです。 コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。 共通部分になるhtmlとCSSを記述する まずは、共通部分になるhtmlを…
スクリプト不要で、画像ホバー時にＣＳＳ３アニメーションで様々なキャプション表示をするスタイルシート６パターン。 基本的にどのパターンで実装する場合でも、以下のサイトからダウンロードした外部ファイルの中にあるCSSファイルを一つ設置するだけでOK…
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していこうと思います。 この記事では、「食品」「飲料」を扱ったサイトのデザインについて押さえておくことをまとめておきます…
【進捗メモ＆備忘録】「パーツテンプレート」についてのまとめ。 目 次 1. パーツテンプレートについて 1-1. パーツテンプレートとは 1-2. パーツテンプレートを作ることのメリット 2. パーツテンプレートの種類 ( 主なもの ) 2-1. 「header.php」について 2…
サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする＜img＞タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCS…
