WEB制作

WEB制作に関する記事は、372件あります。

サイトのURLを変更して、管理画面が表示されなくなった場合 → functions.phpの一時修正

DBを修正する必要はなかった! WordPressの管理画面で、メニューの「設定」→「一般」にある、WordPress アドレス (URL) を変更する・・・

WordPress

記事ページで、前後リンクは祖先カテゴリーを対象にする

前後記事ページを表示するのは、あらかじめ用意された関数を使うことで簡単に実装できる。ただし、記事のカテゴリーの祖先カテゴリ(*1)を対象にした前後記事ページを・・・

WordPress

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

ホーム画面からの起動か判別する

便利なプロトタイプツールはたくさんある。その中でも、AdobeのXDとSketchは、個人的にはトップ2。でも導線確認するには、もっとリアルな感じで作った方がい・・・

JavaScript

Gulpのgulp-sassインストールでエラーが出てしまった…→–unsafe-perm=true –allow-root

この一年で最低3回は同じエラーにハマって、解決するのに結構な時間を費やしてしまったので、ここに備忘録として残しておく。 sudo npm install --・・・

お役立ちツール

Gulpはなくてはならない存在になってます

GruntからGulpに乗り換えて、3年くらい経つだろうか。 サイトを新規で作るたびに、Gulpをインストールしている。 毎回インストールしなくてもコピペで再利・・・

制作効率化

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

他デバイス・ブラウザでログインした際のメール通知

セキュリティ観点において、他デバイス・ブラウザでログインした際にメール通知がくるのはとても良いことだと思う。 ただその内容というか、文面はとても大事。その書き方・・・

実例編

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

Sassファイルを保存するとcssファイルが自動作成されて困る→サイト管理

sassファイルを保存すると、cssファイルが自動生成されるという症状でしばらくの間、ストレスだったがようやく解決。 例えば、var.scssを修正して保存す・・・

Dreamweaver

WordPressでシングルコーテーションの半角が全角になってて困る

サンプルソースコードをコピペして使おうと思ったら、うまくいかない。アレ?コード間違えたかな、と確認するも間違いがない。だがしかし、書き出されたソースで半角が全・・・

WordPress

WordPressでAMP対応して、Googleアナリティクスを設定する → プラグイン「AMP for WordPress」

AMPとは? AMPは、Accelerated Mobile Pagesの略。詳細はウィキペディア(Accelerated Mobile Pages・・・

WordPress

ロゴデザインの基礎知識

書籍「ロゴデザインのアイデア! 実例で学ぶ!!プロのデザインルール&テクニック」の「Part 1 ロゴの基礎知識」に書かれていることをまとめました。Pa・・・

デザイン

フォントリンク集

25 Free Futuristic Fonts to Jumpstart Your Designs 25 Best Free Business Fonts ・・・

お役立ちツール

CSSのminifyやJSの難読化された圧縮ファイルを戻すWebツール

xxx.min.cssやxxx.min.jsのようなファイル名でCSSのminifyやJSの難読化された一行の圧縮ファイルを見やすくした状態で確認したいとき。 ・・・

お役立ちツール

記事のコメントの投稿と表示をテンプレートに直接書いてみる

記事のコメント部分について、テンプレートに直接書いてみようと思います。 前提は下記のとおりです。 WordPress 4.9.2 で実施 誰でもコメントできる・・・

WordPress

イラストレーターでレイヤーごとにPNGで書き出す

フォトショップでは、レイヤーごとに書き出す設定がありますが、イラストレーターにはありません。そこでレイヤーごとにPNGファイルを書き出すためのスクリプトファイル・・・

Illustorator

「復旧サーバに接続できませんでした」→ Wi-Fi 接続

MacBook Air を売却するため、初期化したときのお話。念のため、バックアップを取ってから、色々ググりながらトライしました。 その際、「macOSを再イン・・・

豆知識

.DS_Storeファイルを削除する

ターミナルを起動して、下記を入力して実行すると、指定したディレクトリ内のDS_Storeファイルをすべて削除することができました。 sudo find ここ・・・

制作効率化

_notesとdwsync.xmlを削除する

普段、dreamweaverを使って制作している。 どうやら、dreamweaverをデフォルトの設定で使用していると、dreamweaverの管理下にあるフォ・・・

Dreamweaver

MAMPでMySQLが起動しなくなった時

もはや自分の制作環境において、なくてはならないツールの一つがMAMP。 それが突然使えなくなってパニクる。具体的には、Apacheは起動するが、MySQLが起動・・・

MAMP

EFO(入力フォーム最適化)について考えてみる

「0から目指すWebマスター」というWeb制作に携わる方に向けての備忘録サイトを不定期に発信しています。さきほど「EFO(入力フォーム最適化)について考えてみ・・・

知識編

EFO(入力フォーム最適化)について考えてみる

EFO(Entry Form Optimization)は、入力フォームを最適化することですが、EFOの施策をやるかどうかで、入力フォームの離脱率を改善すること・・・

実用編

MTOSをサーバー移行したので備忘録

Movable Type Open Source(MTOS)で運営しているこのWebサイトをサーバー移行をしました。 試行錯誤で色々失敗しましたが、整理すると以・・・

MovableType

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

便利なツールを使いすぎて、それが使えなくなった時のテンパり方は半端ない半端ない。 MAMPもそのひとつ。 そんなMAMPを起動しようとしたら、Apache サー・・・

MAMP

【サイト】mov, mp4, webm, f4v など動画を違う拡張子に変換する無料サービス

Webサイトに動画を利用する際には、2017年8月時点では、webmとmp4とどちらにも対応していない場合の静止画像を用意して置くことにしている。 動画を違う拡・・・

お役立ちツール

wp_head() で表示される、CSSやJavaScript(JS、jQuery)を削除する

テンプレートをフルカスタマイズで作ろうとしたとき、wp_head() で表示される内容が不要なのでどうにかできないものか。 はじめは、wp_head() メソッ・・・

WordPress

WordPressで記事の数を取得する

記事の数を取得する際の2つのケース。wp_count_posts() と found_posts を使い分ける。 WordPressで記事の数を取得するには、・・・

WordPress

objectの中身(キーと値)があるか判別する

Object.keys 配列の場合 var a = ["ジョン", "ポール", "ジョージ", "リンゴ"]; a.length; // 4 var・・・

JavaScript

管理画面のカスタム投稿一覧で並び順を変更する

WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・

WordPress

アイキャッチ画像のURL情報だけを知りたい → the_post_thumbnail_url()

アイキャッチ画像のURL情報だけを取得する記事を多くみつけたが、実はWordPress 4.4.0 からデフォルトでアイキャッチ画像のURL情報だけを取得するメ・・・

WordPress

Macでシンボリックリンクの作成と削除

シンボリックリンクを作成すると、たとえば、Aディレクトリのシンボリックを作成(仮にA'ディレクトリと呼ぶ)すると、Aディレクトリ内を修正した場合、A'ディレクト・・・

制作効率化

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

入力フォームを自由にカスタマイズできる「Advanced Custom Fields」

Movable Typeでいうところのカスタムフィールドを使おうとしたら、Wordpressでは「Advanced Custom Fields」というプラグイン・・・

WordPress

「レスポンシブWebデザイン」と「ユーザー視点」

「0から目指すWebマスター」というWeb制作に携わる方に向けての備忘録サイトを不定期に発信しています。さきほど「「レスポンシブWebデザイン」と「ユーザー視点・・・

知識編

画像保存時に画像サイズを軽量にしてくれる「Compress JPEG & PNG images」

画像ファイルの容量は小さいほうがいい。でも大きい画像でRetina対応もしておきたい。そんな要望に答えてくれるWebサービスが、TinyPNG - Compre・・・

WordPress

Custom Post Type UI

この「Custom Post Type UI」というプラグインのおかげで、WordPressは「ただのブログに特化したCMS」というイメージから「あらゆる利用シ・・・

WordPress

管理画面にアイキャッチ画像の入力エリアが表示されない場合

投稿画面にアイキャッチ画像の入力エリアが表示されなくて困りました。 もともと用意されているテーマを選択すると、アイキャッチ画像の入力エリアが表示されることが確認・・・

WordPress

Webフォント Noto Sans

PSDやAIファイルで太さを指定したフォントは、Webでは異なる太さを指定したほうがいい場合があります。 今回は、Noto Sansの3種類のウェイトで調べてみ・・・

html

inputのfocus時にplaceholderの値を非表示にする

inputのplaceholder(プレースホルダー)のテキスト色を変更するでご紹介した内容を踏まえて、修正するだけ。 focus時にplaceholder(・・・

CSS

inputのplaceholder(プレースホルダー)のテキスト色を変更する

いろいろ調べると、疑似クラス「:placeholder」と「:placeholder-shown」というのにいきつく。 ちょっとハマってしまったので備忘録。ハマ・・・

CSS

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

テキスト置換するプラグイン「Search Regex」

Movable Typeの記事をWordPressに移行した際、記事内の画像パスを修正する必要があったのに気づく。 Movable Typeではデフォルトの機能・・・

WordPress

テンプレートの種類と優先度

ホーム index.php home.php フロント 静的フロントページ front-page.php 投稿 single.php sing・・・

WordPress

完全オリジナルテーマを用意する

事前条件:すでにWordPressがインストールされていること。この記事はWordPress4.8で実践しながら書いています。 参考までに。 MAMPをインスト・・・

WordPress

配列のコピー

配列のコピー。また同じ過ちをしてしまったので、備忘録 とりあえず実例 var a = 1; var b = a; a = 300; この結果、b は ・・・

JavaScript

オブジェクト(object)の中身があるか判別する → Object.keys().length

サンプル a = {}; b = { "b1": "value of b1", "b2": "value of b2", "b3": "value of ・・・

JavaScript

文字列を読み上げる → Web Speech API / Speech Synthesis API

まずはこれ。 // 読み上げます var speech = new SpeechSynthesisUtterance(); 基本セット // 読み・・・

JavaScript

配列から値で判別して要素を削除する

配列の「値」で判別して要素を削除する場合、 spliceメソッドやsliceメソッドでは「値」ではなく「何番目」かでの処理をするためできない。shiftメソッド・・・

JavaScript

配列をランダムシャッフルする

ググってよく見かけたのは、Fisher-Yates shuffleというアルゴリズムを利用するもの。ソースのサンプルもほとんどが同じ。 function s・・・

JavaScript

アウトラインが取られていない → 原因は2つ

Webではなく印刷物のお話。印刷会社から「アウトラインが取られていません」という指摘を連続でくらってしまったので、反省の意を込めて備忘録。 アウトラインが取ら・・・

Illustorator

日本測地系←→世界測地系 変換

「日本測地 世界測地 変換」でググってみると、変換する計算式はいろいろあることが分かったが、Google Mapsで使われている(た?)というコードをベースに備・・・

php

日本測地系←→世界測地系 変換

「日本測地 世界測地 変換」でググってみると、変換する計算式はいろいろあることが分かったが、Google Mapsで使われている(た?)というコードをベースに備・・・

JavaScript

Fireworks → Illustorator パス移動

両アプリケーションを開いて、ドラッグ&ドロップすればできると思ったらできなくて焦ったので備忘録。 Fireworksで開いたファイルを、「別名で保存」 Fi・・・

Fireworks

スクロール移動後や画面リサイズ後に処理をする

onscroll や onresize を利用すれば、スクロール時や画面リサイズ時の処理はできるが、スクロールが止まったときや画面リサイズした後にアクションした・・・

JavaScript

2点間の距離を取得する

「2点間 距離 取得 javascript」でググるとそのまま利用できる記事がたくさん見つかる。 いろいろ試したが、どれも数メートルの誤差はあるものの、似通った・・・

JavaScript

実機のシミュレータ実行しようとしたら、突然エラー → App削除!

The maximum number of apps for free development profiles has been reached. 実機のシ・・・

Swift

SNSボタンをリンクで設置する

プラグインやらを使えばいいのだろうけど、わざわざプラグインを使わなくても「共有用にリンクだけ設置したい」ということがよくあります。 そのたびにググッて調べていた・・・

php

touchendがAndroidで効かない?!

数年前にも同じことでハマってしまったのに、同じ過ちを繰り返してしまったので備忘録。 今回の調査端末は、SC-04F(Android 5.0)と iPhone 6・・・

JavaScript

日本語が使える環境かPHPで判別する

ターゲットユーザーが外国人を含む場合、日本語が使える環境がないかもしれません。そこで、日本語が使える環境か判別したり、第一優先言語が日本語か判別してみた。$_S・・・

php

ランディングページを見直す

書籍「ランディングページ・デザインメソッド」に書かれていることをほぼそのまま抜粋して、まとめました。気になった方は本書を読むとさらに深掘りできます。 ランディ・・・

知識編

mampを使ってマルチドメインのローカル環境をつくる

完全備忘録。 新しいマシンで設定するたびにググってはなかなか該当記事を見つけられずにいたので、備忘録がてら記事にします。結局「mamp バーチャルホスト」でググ・・・

MAMP

サービスを提供する際の心構え

「0から目指すWebマスター」というWeb制作に携わる方に向けての備忘録サイトを不定期に発信しています。さきほど「サービスを提供する際の心構え」という記事をアッ・・・

知識編

サービスを提供する際の心構え

タイトル 伝わるWebライティング 著者 Nicole Fenton (著), Kate Kiefer Lee (著), 遠藤 康子 (翻訳)・・・

実用編

連想配列(オブジェクトの値)の並び替え

たとえば下記のような配列(sample)で、配列に格納したオブジェクトの指定したキー(b)の値で並び替えたいとき。また配列(sample2)で、配列に格納した配・・・

JavaScript

SEOを語る前に

「0から目指すWebマスター」というWeb制作に携わる方に向けての備忘録サイトを不定期に発信しています。さきほど「SEOを語る前に」という記事をアップしたので、・・・

知識編

SEOを語る前に

SEOとは、Search Engine Optimization の略で検索エンジン最適化の略です。 GoogleやYahoo!といった検索ボックスにキーワー・・・

SEO

セマンティックWebに便利なツール

セマンティックなページ(構造化されたページ)を制作する際に、microdataを使うことが多かったが、とにかくコーディングが面倒、というわけで、JSON-LD・・・

お役立ちツール

dateで日時取得したら日本時間じゃない場合

dataで日時取得した際に、9時間の時差が出て、日本時間と異なっていた場合 2通りのやり方を備忘録。 php.iniを修正する場合 php.iniのdate.・・・

php

History API を「あらためて」使ってみる

以前、「History API を使ってみる」という記事を書いた。読み返したら非常に分かりにくかったため、History API の使い方をあらためて調べたので・・・

JavaScript

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

Gruntを取り入れてみた

ページ高速化の一つの手段として推奨されるCSS、JavaScript の圧縮。 CSS、JavaScript の圧縮とは、各ファイル内のインデントや改行をすべて・・・

制作効率化

Googleアナリティクス 自宅からのアクセスを除外する

自分自身だけでなく、関係者のPCやスマホ、タブレットからのアクセスも除外したい 新規サイトを制作した際に、Googleアナリティクスを設定して、自宅というか関・・・

Google analytics

ローカル環境MAMPにWordPressをインストール

ローカル環境はMAMPを使いました。 データベースを作成する MAMPを起動し、「サーバを起動」後、「オープンWebStartの」をクリックします。 「ツ・・・

MAMP

MAMPの日時(タイムゾーン)を変更する

MAMPを使用していて、日時の情報を制御しようとしたとき、取得している日時が日本時間ではないことに気がついた。 時差を計算してPHPでプログラミングしていたが、・・・

MAMP

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

MAMPをインストールしてローカル環境を作る

公式サイトからMAMPをダウンロードする MAMP & MAMP PROへアクセスします。 ヘッダー上部メニューの「DOWNLOAD」をクリック 画面真ん・・・

MAMP

JavaScriptで補色や反転色、RGBを取得する

#と6桁(もしくは3桁)の英数字(正確には16進数で表記される0から9、aからfの英数字)からなるカラーを、RGBでの数値に変換、もしくはRGBから16進数に変・・・

JavaScript

ファイルへのリンク PART2

以前、「ファイルへのリンク」については触れ、ファイルへのリンクが便利ということを記述したが、今回はファイルへのリンクを利用する際のトラベルシューティング。 ・・・

MovableType

アーカイブマッピング Part3

アーカイブマッピングでも触れてはいるが、今一度リマインド。 直接テンプレートタグを使用できる! アーカイブマッピングに直接テンプレートタグを使用することができ・・・

MovableType

Facebook Engineering Talk

いつかどこかで見たスライドだったか、誰かがまとめた記事だったのか、すいません、出典元は忘れてしまったのですが、ローカルで見つけたデータをマルっとコピペして公開。・・・

実例編

ジャーニー・マップ

カスタマージャーニーマップ、エクスペリエンスジャーニーマップ、ユーザージャーニーマップ、ジャーニーマッピング、そんな調査法について、まとめてみます。文面はほぼ・・・

実用編

カードソーティング

リサーチ手法のひとつ、カードソーティングについて、まとめてみます。 まず大別して3種類ある。 クローズド・カードソート オープン・カードソート デルファイ・カ・・・

実用編

パラメータ値が数字かどうか判別する

https://www.simplesimplesdesign.com/search.html?p=xxxx たとえば、こんなURLがあって、pの値が数字かど・・・

php

jQueryでformを操る【nameの値を取得する】

form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使・・・

JavaScript

モバイルファースト – モバイルへの対応 –

書籍「デザイニング・インターフェース第2版」の「10章 モバイルへの対応」より抜粋。 課題 ちっぽけな画面サイズ 余分なものはできるだけ取り除く さまざまな画・・・

知識編

SEOとドメイン変更 → 301リダイレクト !

ドメインを変更する場合、GoogleやYahooの検索ボックスを利用した際に表示される順位が下がってしまうのでは!?と不安になる。 そんな不安を消してくれる検・・・

SEO

html5から見送りになりそうなタグ(2012年12月17日付け)

html5をはじめからウォッチしてきたから、この辺りは確実に把握しておきたい。 下記は仕様から削除されるリスクがあるものたち。 動向が明確になるまで、個人的に、・・・

html

スマホでイベントをちゃんと認識するか確認

端末によって画面両サイドのエリアのリンクが認識しづらい現象が発覚。 クリッカブル領域を広げてみたが改善されなかった。 そこでサンプルページを用意し、スマホで調査・・・

JavaScript

[サイト]pngファイルの容量を軽減してくれるサービス

昨今、スマホ用の需要拡大とアルファ画像が使えないブラウザのシェアが減ってきたことが相まって、png画像を取り入れることが多くなりました。アルファ画像をガンガン使・・・

お役立ちツール

[サイト]ローディング画像作成ツールはこれで決まりッ!

Preloaders.net オリジナルにこだわって自分でgifアニメーション作ってたりしてたわけだけど。。これと出会ってもうオリジナルへのこだわりが吹き飛んだ・・・

お役立ちツール

Geolocation API

スマホやタブレットの普及で、現在地を取得するような位置サービスの需要が多くなるのは用意に想像がつく。 そこで、WebブラウザでJavaScriptを使って現在地・・・

JavaScript

History API を使ってみる

この記事を、下記ページに焼き直しました。 「History API を「あらためて」使ってみる」 2015.7.21 History API を使ってみた・・・

JavaScript

文字数を知る(javascriptでいうところのlength)→ mb_strlen

ちょっとハマってしまったので備忘録。 javascriptの「length」に相当する、文字列の長さを得るphpの関数に「strlen」「mb_strlen」が・・・

php

[連想配列]2つ以上のキーで並び替えをする

2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつて・・・

JavaScript

画面が縦向きか横向きかを知る

ブラウザ、モバイルファースト、メディアクエリー、マルチ画面、タブレット・・・ 想定すべき画面サイズ、利用シーンに適した情報のコントロールが崩壊しつつある。 とい・・・

JavaScript

MovableTypeでカテゴリ選択効かない!?

MTOSのバージョンアップをしたところ、記事を保存する際、カテゴリ選択が無効になり焦った。 テーマのエクスポートで失敗したのか、とカテゴリは含まずにテーマをエク・・・

MovableType

Lightbox 2 を使うための最小設定

ライトボックスをお手軽に実装できるためのライブラリは「lightbox」で検索してみると分かるとおりサイト上にたくさんあって、大変ありがたい。 その中で個人的に・・・

ライブラリ

継承(擬似クラス型)

継承(擬似クラス型)のサンプルの一つとして、コードを理解しやすいようにもっともミニマムなカタチで、シンプルに用意してみた。 var Test = funct・・・

JavaScript

マルチカラムをCSS3で実装

CSS3で利用できるマルチカラムについて再確認。 カラムサンプル カラム 幅を指定 column-width: 150px; columns: 150p・・・

CSS

文字列をオブジェクトに変換

文字列をオブジェクトにしたいシチュエーションができてしまい、ajaxでcallbackすればいいのかな?とか、JSON.parseでいけるかな?とかいろいろ試し・・・

JavaScript

スマホでマウスオーバー

スマートフォン(以下スマホ)やタブレットでPCでいうところのマウスオーバー処理をしたいときは、touchイベントを使うことで実現できる。 確かAndroid1.・・・

JavaScript

localStorageでオブジェクトを格納する

localStorageは、近頃のブラウザやスマホで対応しているのでチョー便利。 そして文字列ではなく、オブジェクトを格納しようとするたびに、その方法を検索しち・・・

JavaScript

デバイス別、クロスブラウザ別対応 – not useragent

もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代に・・・

JavaScript

検索エンジン経由の流入を増やすなら

書籍「Google上位表示 64の法則」を踏まえて、データに基づいて「検索エンジン経由での流入を増やしたい」ならを改めてまとめてみます(書籍レビュー:Googl・・・

SEO

html5の要素とコンテンツモデル

html5の要素を調べたことがあれば、下図のようなものを見たことがあるかもしれない。 これは、W3C Editor's Draftを参考に、自分なりかみ砕いたも・・・

html

スマホでアドレスバーを非表示にする

<!DOCTYPE html> <html lang="ja"> <head> <meta ch・・・

JavaScript

スマートフォン用に最適化したサイトを作る際の<実践>最小マークアップ

<!DOCTYPE html> <html lang="ja"> <head> <meta ch・・・

html

offsetTopやらoffsetHeightやら

コンテンツの高さだったり、ページ内の指定した要素を表示するようスクロールさせようとした際とか、毎回同じことをネット検索してしまうので、ここで高さを取得する方法に・・・

JavaScript

ファイル名を拡張子なしで取得するサンプル

変数bnにhtmlファイルのファイル名を拡張子なしで取得するサンプル var bn = location.href.split("/"); bn = bn[b・・・

JavaScript

ファイル名を拡張子なしで取得するサンプル

変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・

php

スクロールバーのカスタマイズ

サンプル スクロールバーは、基本ブラウザが用意してるのを使えばいい、という考えでした。そのため、スクロールバーのデザインをカスタマイズしたいと思ったとき、「いや・・・

JavaScript

html5でマークアップするときの最小設定

1ファイルにまとめると <!DOCTYPE html> <html lang="ja"> <head>・・・

html

Javascriptでカレンダーを作ってみた

ポイントは、「その年月のカレンダーのその日は第何週なのか、第何曜日なのか、何日なのか」をJavaScriptで生成し、祝祭日はCSSで指定していること。 サンプ・・・

JavaScript

borderで背景画像を表示する border-image

border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという・・・

CSS

text-shadowを極める

text-shadowプロパティは、その名から想像するとおり、テキストに影をつける(ドロップシャドウ)ことができます。 仕様 text-shadow:右方向 下・・・

CSS

box-shadowを極める

box-shadowプロパティは、その名から想像するとおり、ボックスエリアに影をつける(ドロップシャドウ)ことができます。 仕様 外側にドロップシャドウ bo・・・

CSS

スマートフォンでも使えるフォトスライド

フォトスライド。 確かに様々な優秀なライブラリがすでにある。 jQueryを使ったもの(たとえば、30 Best jQuery Photo Pluginsで紹介・・・

ライブラリ

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS

紙媒体から電子メディアへ

Web Designing 2011/3 パブリッシング プロジェクト06「新聞・メディア論」が気になったのでピックアップ。 メディアというのは、ちょっとしたき・・・

知識編

IEでhtml5のタグを認識させるJavaScript

IEでは、html5で追加されたタグを使用しても認識してくれません。 そのため、html5でマークアップしたIEでは「CSSが効かない!」とか「レイアウトが崩れ・・・

JavaScript

jQuery Mobileを使ったページ遷移時のトランジション

jQuery Mobileを導入するだけで、同ドメイン内の他ページやページ内リンクを使ってページ遷移するときに右から左へスライドします。デフォルトは「右から左へ・・・

JavaScript

jQuery Mobileを使った最小ソース

jQurey Mobile。まもなくβ版がリリースされるそうですが、現状のα版3を見てみました。 最低限必要なソースまで削り落として、ちょっとjQuery Mo・・・

JavaScript

ページ切り替え時のトランジション効果

スマートフォンが普及し、タッチパネルによるページ切り替えが新たなUIとして浸透してきました。 たとえば、指で横にしゅっとやると画面は右から左にスライドされ、ナビ・・・

html

PING送信

MovableTypeやWordPressといったブログツールを使用する際、設定しておきたいのがPING送信。各サービスのブログ検索結果にヒットされるようになり・・・

SEO

Amazon アソシエイト

Amazon アソシエイトに関する情報は、ここに備忘録として追記していこうと思います。 Amazon Product Advertising API(署名入り・・・

豆知識

Amazon Product Advertising API(署名入り)をアフィリエイトとして使う

AmazonのProduct Advertising APIをアフィリエイトとして使おうと試みて、その概要をつかむまで2,3日かかってしまった。まず、アカウン・・・

php

携帯サイトのターゲット端末

スマートフォンが普及していく様を横目に、携帯サイトに対応しなくてはいけないシーンはまだまだある。 とはいえ、どの端末をターゲットにすればよいか悩みどころだったの・・・

mobile

floatとvertical-align? → display:table-cell; !

上図のように、2カラムレイアウトにおいて、左右のコンテンツ長さが任意で、短い方のカラムの縦位置を長い方のカラムのセンタリングする場合、どうしましょうって話。何・・・

CSS

html拡張子でありながらphpを動作させる

もっとはやくに気づいていたかった・・・。 環境としては、レンタルサーバーhetemlを使用してMovablTypeをインストールしています。 http://he・・・

php

maxlengthで指定されたテキストのlength

inputタグ要素の属性、maxlengthが指定されたテキストの文字数について、ちょっと調べてみた。 調査ポイントは2つ。半角英数と全角でmaxlength値・・・

JavaScript

maxlength属性

inputタグ要素の属性、maxlengthについて、ちょっと調べてみた。 調査ポイントは2つ。半角英数と全角でmaxlength値のカウント方法が異なるか?文・・・

html

JSONP Javascriptがちょっと分かってきたかも

いまどき「マッシュアップ」という言葉を使うこと自体ちょっぴり恥ずかしいのですが、外部APIを連携する際のお覚書き。 これまで外部APIの連携は、「php」と「A・・・

JavaScript

元ファイルなしの画像を修正する

Photoshop、ど素人です。Fireworksばかり使ってきたため、FireworksでやってたことをPhotoshopでやろうとするとやり方がわからず、軽・・・

Photoshop

[サイト]QRコード作成

QRコードを作成するたびに、ググって適当なサービスを見つけて作成させてもらってたのですが、結構使いやすかったのを紹介。 改行とかもそのまま反映されて、余計な文字・・・

お役立ちツール

カテゴリー別に記事一覧を表示する

インデックスアーカイブ、ブログ記事アーカイブにおいて使うのに最適。 ※カテゴリーアーカイブにおいては、コンテキストの関係でうまくいかないので、要注意。 サンプル・・・

MovableType

カスタムフィールドに値がある最新の10 件のブログ記事表示する方法

MTEntriesのモディファイアの組み合わせで実現することはできませんが、 指定したカスタムフィールドに値がある場合のみカウントして 10 件表示させる方法で・・・

MovableType

Ajaxに挑戦!

Ajax、Asynchoronous JavaScript + XMLの略。非同期通信を行ってJavascriptからXMLデータやテキストデータを取得し、その・・・

JavaScript

[ソフト]ファイル一括変換(Mac用)

ファイル一括変換(Mac用) ファイル名を変換、一部を削除したいときがある。しかもフォルダ内のすべてに該当する場合がある。あるフォルダ内のファイルを連番付けたい・・・

お役立ちツール

画像の切れ間と背景をなじませる

画像の端と背景の境が分からないように画像を用意する際の手っ取り早い方法の覚書。 Windows XP CS3で実施。 「レイヤ」追加 ツール「選択範囲」を選・・・

Photoshop

表示オブジェクト

表示オブジェクト オーサリング時に作成できるオブジェクトオブジェクト ボタンインスタンス ムービークリップインスタンス テキストフィールド ダイナミック・・・

ActionScript3

イベント処理

イベント処理 イベント処理の基本書式は下記 オブジェクト.addEventListener(イベント,イベントハンドラ関数名); function イベントハ・・・

ActionScript3

フォーム、送信前にJavascriptで入力チェックを行う方法

通常、送信ボタンが押されるとformのactionが実行されますが、formタグに「onsubmit」、もしくは外部化したJavascript内であれば「sub・・・

JavaScript

selectタグの上にコンテンツを乗せる

selectタグの上にコンテンツを乗せる手法。いろいろネット検索したものを総まとめした「覚書」。 これを参考に応用すると、うまくいく。ただW3Cに準拠していない・・・

html

特定の文字で複数にセルを分割する

たとえば、セルに「テスト左:テスト右」と書かれているのを「テスト左」「テスト右」とセルを分割する方法です。Javascriptでいうところのsplitです。 そ・・・

Excel

矩形の幅と高さを知る

幅と高さを知りたい矩形を選択。そして矩形情報を表示すれば、幅と高さが分かる気がするのだが(下図参照)・・・。 これだけでは、幅と高さだけなぜか表示されない。幅・・・

Photoshop

RSS2.0 フォーマット

<?xml version="1.0" encoding="UTF-8"?> <rss versio・・・

xml

グリッドレイアウト

グリッドレイアウトを作成するたびに、カラム数と幅と余白をちまちま計算していたのですが、フォーマット作っちゃえば、あとは全体幅に合わせてコンテンツエリアの幅を広げ・・・

豆知識

ファイルへのリンク

「Web上ですべてを完結できる」というのは、MTのメリットの一つです。 ただ、実際の制作フローでは、ローカル環境で作業して、それをMTに貼付けるシーンは多いかと・・・

MovableType

よく使われるタグ要素(マークアップの基本)

意味づけされたマークアップをすることは、 将来性の高いコーディングスキルを身につけると同様の価値があると思うのです。 それが、アマチュアとプロとの違いでもあると・・・

html

モブログくんを使えば、携帯からMT記事を投稿できる!

携帯から記事を投稿できるようになったら、もはや無料ブログを凌ぐんだろうなぁ、と思ってたらいろいろありました! ちなみに携帯からブログを更新することと「モブログ」・・・

MovableType

便利ショートカット

「選択できねぇ!」 画面上の要素をクリックしても選択されない。Fireworksではまずそんなことはなかった。Photoshopでは、Fireworksと違って・・・

Photoshop

DOMでswfファイルを呼び出す際の注意

swfファイルをhtmlファイルで指定する際、従来はobjectタグとembedタグをダブルに記述していたが、embedタグはxhtml1.0から非推奨タグとさ・・・

JavaScript

適用されるCSS [CSS初心者向け]

「CSSは記述しているのに適用されない」という質問が多々あるので、あらためて基本をざっくり。 CSSを指定する方法として、大きく分けて2通りの考えをマスターする・・・

CSS

JavaScriptでIEかどうかの判別

Javascriptでブラウザ判別するのはともかく嫌いで、どうにかこれまで避けてきたのだけど。 どうしてもIEかそれ以外の判別をしなければならないシチュエーショ・・・

JavaScript

Javascriptでflash playerのバージョン判別

swfファイルをブラウザ上に表示するために、flash playerの有無やバージョンの判別をする最も普及しているといっても過言ではないライブラリ「swfobj・・・

JavaScript

ブラウザ表示領域の上部(ヘッダー)と下部(フッター)を固定する

コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。 ポイント htmlとbodyに高さ100%を指定する ・・・

CSS

[サイト]配色

微妙なニュアンスにこだわった色決め http://kuler.adobe.com/ Adobeが公開しているカラーピッカー。5色の組み合わせを試すことができる・・・

お役立ちツール

inputタグをコントロールする

inputタグの文字間を上手にコントロールする術を模索している。 百聞は一見にしかず、ということでサンプルを見てほしい。 xhtml <ul> ・・・

html

format属性

mt:entrydateなどを利用して日付を表示させる場合、その形式はformat属性(モディファイア)を使って編集します。 パラメーター 表示例(補足)・・・

MovableType

IE7の拡大機能、仕様?バグ?

IE7でブラウザの右下にある数値を変えて拡大してみる。見事にレイアウトが崩れる場合がある。 IE7の拡大時のレンダリングは、Operaと同じように、bodyその・・・

CSS

ターゲット層

F1層って何歳から何歳までの男女どっちだっけと調べることが多かったので、ここいらで整理しておこうと思ふ、ターゲット層。 もともとは、ビデオリサーチ社が社内用語と・・・

豆知識

xsltとは?

xsltスタイルシートの立ち位置 xml文書とxsltスタイルシートを、xsltプロセッサを通して、別の構造や形式のデータに変換する。 xsltの記述 xslt・・・

xslt

Javascriptの歴史

JavaScript InternetExplorer Netscape 特徴 JavaScript1.0 IE3.0 N2 基本的なオブジェクト・・・

JavaScript

mt-config.cgi

「CGI」という言葉だけで、まだ拒否反応が起きる。 でもどうしても「mt-config.cgi」を修正したくなった。 ただ、config.cgiを修正する際の注・・・

MovableType

検索関連

検索窓やタグクラウドの最もシンプルな記述 インデックステンプレート、すべてのアーカイブテンプレートで利用できます。 検索窓 <form method="g・・・

MovableType

カテゴリごとのエントリ一覧 Part2

エントリーページに、そのエントリーが属するカテゴリ内の最新10件を表示しようとした場合をもう一度考えます。 <mt:categorylabel setva・・・

MovableType

カテゴリごとのエントリ一覧

エントリーページに、そのエントリーが属するカテゴリ内の最新10件を表示しようとした場合を考えます。 特定カテゴリのエントリ一覧 <MTEntries la・・・

MovableType

透明GIF画像の書き出し方法

たとえば、白文字が混じった画像を透明GIFにする場合、背景だけでなく白文字までが透明化されてしまう。 ずっと悩んでいたがようやく解決できたので覚え書き。 形・・・

Fireworks

動作確認

実際に、簡単なサンプルを用いて、xml文書がどのように変化するのか見てみます。 sample.xml <?xml version="1.0" enc・・・

xslt

名前空間

xml文書は別のxml文書と結合することができる。結合した際に同じ要素名があるときの不具合を、名前空間を使用して回避できる。 記述方法 <プリフィックス:・・・

xml

アーカイブテンプレートの自動変数

アーカイブテンプレートには、各々のテンプレートの種類やテンプレートが出力するアーカイブの種類に合わせて自動的に変数が設定され、値として「1」が代入されます。また・・・

MovableType

アーカイブマッピング Part2

アーカイブマッピングは、アーカイブテンプレートをどんな種類で、どこに、どんなファイル名で出力するのかを設定する機能。 同じアーカイブテンプレートや、複数のアーカ・・・

MovableType

テンプレート作成の初歩 Part2

テンプレートは、ブログ単位のテンプレートと全ブログ共通のグローバルテンプレートに大別されます。さらに、ブログ単位のテンプレートは大きく5種類に分類されます。 ・・・

MovableType

MovableTypeをMac環境で 3/3

手順 2 まずは、Movable Type「MT-4_1-ja」フォルダを「mt4」にリネイムし(ネーミングは任意です)、[(ドライブアイコン)] → [アプリ・・・

MovableType

テンプレートタグの書式

タグの書式で守らなければならないルールは2つ。 タグの名前を「MT(またはmt)」からはじめる。 区切り文字を挿入できる位置は「MT」と「タグの名前」の間のみ・・・

MovableType

コメントアウト

テンプレート上の視認性を高め、生成されるファイルには表示されないのが特徴 簡単なコメントを残す場合 <$MTTemplateNote value="ここに・・・

MovableType

MTInclude関連

MTInclude module="テンプレートモジュール名" テンプレートモジュール名を呼び出すことができる。 MTInclude file="ファイル名" ・・・

MovableType

条件処理するコンディショナルタグ

If文 <MTIf 条件式A> 条件式Aが真の場合の処理 </MTIf> <MTIf 条件式A> 条件式Aが真の場合の処理 ・・・

MovableType

変数を設定・参照するテンプレートタグ

MTSetVarファンクションタグとMTVarファンクションタグ MT記述例 <MTSetVar name="thisWebSite" value="0・・・

MovableType

テンプレートタグとコンテキスト

コンテキスト どのブログか?どのカテゴリか?どの記事(ページ)についてか?どの部分のことなのか?を指定する テンプレートタグ データ内容を抽出・出力する モディ・・・

MovableType

MT4.1で何が変わったか

  MT3 MT4.0 MT4.1 ブログ記事カテゴリー管理 / アーカイブ作成 エントリー ○ ○ ウェブページフォルダ管理 / ・・・

MovableType

広告サイズ(Amazonアソシエイト)

これまで、個別商品リンクしか利用したことがなかったが、実は魅力的な広告がたくさん用意されていたことを知り。今度作るサイトでは、広告のことを意識しながら制作できた・・・

豆知識

広告サイズ(adSence)

横長 テキスト イメージ 動画 リンクUnit 紹介ボタン テーマUnit 728 x 90 ○(4) ○ ○ 728 x 15 ・・・

豆知識

MovableTypeをMac環境で 2/3

手順 1 まずは、Movable TypeとMAMPをマッチングさせるためにフォルダを整理します。 Movable Typeをインストールした際に生成されたフ・・・

MovableType

MovableTypeをMac環境で 1/3

Mac OS X に Movable Typeをインストールし、ローカルテスト環境を作りました。実際、ネット検索しながらいろいろ試したのですが、なかなかうまくい・・・

MovableType

MT4.0から4.1への移行

mt4.1へバージョンアップさせるために、「mt4.0 mt4.1」でググって調べつつ作業しました。残念ながら、すんなり移行することができなかったのですが、それ・・・

MovableType

DOMトラブル:getAttribute('class')

記述は間違いない(はずな)のに、ブラウザによって思うように動作しないことがある。 実際にどのようなことがあったのか、そしてどのようにすれば対処できたのかを紹介。・・・

JavaScript

DOMトラブル:getAttribute('href')

記述は間違いない(はずな)のに、ブラウザによって思うように動作しないことがある。 実際にどのようなことがあったのか、そしてどのようにすれば対処できたのかを紹介。・・・

JavaScript

画面サイズ

ウィキペディア、IT用語辞典参照 携帯事情 携帯用サイトは、QVGAを基準にすることが多い。 通称 横×縦 アスペクト比(横:縦) ピクセル数 携帯 ・・・

豆知識

アクセシビリティ事情

以下、2007年12月21日、アップルストア銀座店で開催されたセミナー「CSS Nite x (r)evolution "Shift to 2008"」の中から・・・

知識編

[サイト]SEO対策に役立つ便利ツール

サイト設計前に使う解析ツール 有効キーワードを探す際に便利なツール 無料登録ドットコム(キーワードアドバイスツール) http://www.keywordad・・・

お役立ちツール

コンテンツを開いたり閉じたりする

Level 1 (x)html <p> <a href="#" onclick="openConts();">クリックすると、コン・・・

JavaScript

テンプレート作成の初歩

MTのすごいところは、そのカスタマイズ性。まっさらな状態から作成できるのがこの上ない魅力である。 必要最低限のソースはたった二つ。html要素タグに属性「id=・・・

MovableType

アーカイブマッピング

MTを「ブログ」としてではなく、「CMS」として利用する場合、ディレクトリ名とファイル名は自由に設定したい。 ところが、何の設定もしていないデフォルトの状態で新・・・

MovableType

MovableTypeの基本

MT(MovableType)をカスタマイズするには、まずMTの仕組みを知る必要がある。 公開までの一般的な流れとMTの関係 Webサイトの構成を決める→・・・

MovableType

MovableTypeが熱い!

MovableTypeを利用し始めて1年経った。とはいえ、基本設計は公開時にやったきりで、その後と言えば、ひたすら更新作業だけだった。しかも更新する箇所のコンテ・・・

MovableType

期間を限定した表示 2

掲載から特定の期間が経過すると削除する(「new」マークや「最新情報」など)場合に便利なスクリプト。 「日数」後まで、の表示設定 javascriptソース ・・・

JavaScript

期間を限定した表示

コンテンツのある一部分の掲載削除日が決まっている場合(「new」マークや「本日更新」)に便利なスクリプト。 「いつまで」の表示設定 javascriptソース・・・

JavaScript

リストとナビゲーション「横」編

xhtmlソース <div> <ul> <li>navi1</li> <li>navi2</・・・

CSS

リストとナビゲーション「縦」編

(x)htmlにテキストを記入し、CSSでマウスオーバー時に背景画像を変更させる。 xhtmlソース <div> <ul> <l・・・

CSS

floatを利用した段組み例3

xhtmlの書き順 #cont2(#cont2in) → #cont1 → #cont3 (#cont1と#cont2の書き順はどちらでもよい) widthの・・・

CSS

floatを利用した段組み例2

xhtmlの書き順 #cont2 → #cont1 → #cont3 (#cont1と#cont2の書き順はどちらでもよい) #cont1and2{ f・・・

CSS

floatを利用した段組み例1

xhtmlの書き順 #cont1 → #cont2 → #cont3 #cont1{ float:left; width:○○px; } #cont2{・・・

CSS

positionを利用した3段組み

3段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・

CSS

positionを利用した2段組み

2段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・

CSS

レイアウト全体を画面のセンターに設定する

本来であれば #wrapper{ width:○○px; margin:0 auto; } の設定だけで充分なのだが、これだとIE5が対応せず左寄せのままで・・・

CSS

デフォルトで設定すべき事項

下記に示す全称セレクタを用いた初期化方法の流行りは影を潜め始め、現在は「必要な要素のみに適切なスタイルを示す」方法が流行りはじめているらしいことを聞いた。ただ、・・・

CSS

サイト名の作り方

Webサイトの役割を「見込み客獲得」や「売り上げ獲得」とした場合、サイト名を企業名にしてしまうともうからないことがある。 サイト名が企業名でもOKなのは、大企業・・・

知識編

文字コード変換

記述方法は間違いないのに、文字化けしてしまう。 xhtmlはutf-8で宣言していたのだが、Javascriptで記述された日本語がブラウザで確認すると文字化け・・・

Dreamweaver

line-heightとimgによるWinIEバグ

line-heightを指定してる中にimgが含まれると、WinIE(IE7では修正されている)では行間が狭くなる。 <ul> <li>・・・

CSS

float段組みした場合のclear設定の方法

.group{ overflow:auto !important; overflow /**/:hidden; } または .group{ overflo・・・

CSS

切り抜いた画像を他のアプリケーションで利用する

せっかくPhotoshopである写真を形取ったのに、その画像をIllustreatorやFireworksにコピペすると、入らぬ背景までくっついてきてしまう。 ・・・

Photoshop

ユーザーの不安を打ち消す施策

ユーザーは常に「だまされる」ことを警戒していて、商材価値だけでなく、取引のリスクも考えた上で購入や契約を決めている。これを意識してコンテンツを作成する必要がある・・・

ライティング

ヒアリングのポイント

文章力以上に重要なのが事前のヒアリング コンテンツの原稿が用意されずに書き起こしをしなければならない場合、内容・表現の「正解」を知らないまま、単に用意された資料・・・

実用編

Googleにスニペットやキャッシュを非表示にさせる

使用例:<meta name="robots" content="nosnippet" /> 「nosni・・・

html

クロスブラウザDynamicHTMLを作るには

if(document.getElementById){ IE5.0〜、N6.0〜(「getElementById」をサポートしたブラウザ)用スクリプト } ・・・

JavaScript

DOMの値を取得・設定する方法

DOM値を取得する方法 id属性を使用してタグ要素の属性の属性を取得する document.id名.属性 JavaScriptのオブジェクトと共通のDO・・・

JavaScript

DOMの基本事項

DynamicHTMLとは DOM(Document Object Model)をスクリプトなどを使って操作し、ブラウザに動的な効果を与える技術。 HTMLを・・・

JavaScript

変数のスコープ(領域)

グローバル変数 スクリプトのどこからでも参照できる ローカル変数 ファンクションの中で宣言されたローカル変数はその中にしかない function squa・・・

JavaScript

JavaScriptで取り扱える型の種類

文字列 ダブルクォーテーションマーク(")、シングルコーテーションマーク(')で囲まれた文字や数字や特定の特殊記号 注意!文字列の一部にシングルクォ・・・

JavaScript

オブジェクト、関数、変数などに設定可能な名前

大文字・小文字のアルファベット、あるいはアンダースコア(_)で始まる文字列 変数には文字、数字、ドル記号($)、アンダースコア(_)を含めることができる 日本・・・

JavaScript

scriptを記述する際の注意事項

従来 <script language="javascript">〜 と記述。更に <script language=&・・・

JavaScript

オブジェクト

ナビゲーターオブジェクト navigator Plugin MimeType screen event window frame document ・・・

JavaScript

コンテンツの量によってフッターの位置を変える

具体的には、ブラウザ表示領域(ファーストビュー)とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、ス・・・

CSS

スタイルシートを変更する

スタイル変更ボタンを設置し、スタイルシートごとごっそり置き換える。 これはCSSとJavascriptの組み合わせで実現させる。 動作確認環境 Windows・・・

JavaScript

ケータイサイトにおけるメルマガの基本

わざわざメールマガジンの配信登録してくれた皆さんには特別な情報やオトクな情報をいち早くお届けします」という姿勢が大事。 ユーザがガードを下げるのはページ導線の・・・

知識編

XML Schemaサンプル

sample.xsd <?xml version="1.0" encoding="utf-8" ?> <xsd:schema xmlns:x・・・

xml

XML Schemaの内容モデルをもっと詳細に取り決める

出現順序を指定 要素名 説明 sequence要素 内容が順番に出現する choice要素 内容のいずれか1つが出現する all要素 内容・・・

xml

XML Schema

XML SchemaとDTD XML SchemaはDTDと同じように、xml文書の構造を取り決めるための仕様。以下にDTDとの比較を記述する。 DTDよりも・・・

xml

DTDを別ファイルにする

DTDを別ファイルにして共有することができる。DTDの内容を外部のファイルにしたものは、外部サブセットと呼ばれる。 内部サブセット(internal subse・・・

xml

妥当な文書サンプル

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE m・・・

xml

妥当な文書

妥当な文書(valid XML document)とは、整形式文書の規則を守り、かつタグの取り決めを守っている文書。 文書型定義(DTD:Document Ty・・・

xml

文字参照を使用しない記述方法

<![CDATA[ ここに記号を含めたテキスト ]]> (さらに…)

xml

整形式文書

整形式文書(well-formed XML document)とは、xmlの文法を守った最も簡単な文書。 xml宣言 xhtmlにおいてはxml宣言は必須項目で・・・

xml

xhtmlと同様のルール

文書内にコメントアウトを記述方法 <!--コメントコメントコメント--> 入れ子で構成 &や<、>などの記号は文字参照で・・・

xml

xmlの3つの魅力

さまざまなデータを表すことができる タグは自由に取り決めることができる(対html) 人間にもコンピュータにも分かりやすい(対csv) (さらに&hell・・・

xml

Webサイトが担う経営戦略、Webサイトの種類と基本コンセプト

Webサイトが担う経営戦略 大きく3パターンに分別でき、それぞれが複合したりしてWebサイトが形成される。 売上げを増やす(ECサイト) 見込み客獲得(製・・・

知識編

絶対URIと相対URLと相対パスの関係

http://〜 絶対URI   /〜 相対URL 絶対パス ./〜、../〜 相対パス 絶対URIと相対URLと相対パスの言い方・・・

html

ヒアリングの前にクライアントに準備してもらうこと2

1.社内要件の取りまとめをしてもらう 決済、社内の関係者に要件、注意点、実施希望要項、社内体制・文化(ひとつの物事を決定するのにどのくらいの時間、フローが必要か・・・

実用編

提案書に盛り込む内容

クライアント名 決定責任者、プロジェクト担当者、プレゼン担当者、システム管理者 プロジェクト名 機密に関わる場合はコードネーム プロジェクトの内容 企(企画を説・・・

実用編

<style><script>要素のコメントアウト

<style><script>要素のコメントアウト htmlからコーディングを覚え、xhtmlへ移行したときの落とし穴 実は<st・・・

html

ブランディング

何が企業の価値を高め、知名度・好感度アップするのかを知る 企業に対するイメージ調査から分かること イメージUPには段階がある 会社概要(アピールポイント(AP・・・

知識編

カタカナ語の選び方

ライティングの際に、(文章の雰囲気やテイストを決定づける大きな要因である)カタカナ語や略語、難解語は、ユーザーリテラシー(ユーザーの読み書き能力)をイメージしバ・・・

ライティング

ユーザー中心デザインなライティング

どのようなユーザーが読むのか 同じテーマでも、だれに伝えたいかで中身は変わる どのようなニーズで読むのか 具体化させることが大切 情報の種類(「企業情報を・・・

ライティング

Webサイトの在り方

ユーザー中心デザイン 従来のWebサイト 公開しておけばいい パンフレットやカタログのようなもの 現在のWebサイト サイトで実現したいことは何か ・・・

知識編

[ソフト]ネットショップ

ネットショップ・オーナー2 インクリメント(株) http://www.netdeoshigoto.com/owner/ 0120-349-163 店・・・

お役立ちツール

ユーザビリティチェック(ケータイサイト編)

よいケータイサイトの要素・特徴 トップ画像 訪問者像が分かるデザイン(デザインとサイト内容のマッチング性、視認性) 定期的にデザイン更新されている Fla・・・

実用編

ヒアリングの前の準備(既存サイトがある場合)

基本チェック項目 ユーザビリティ ビジュアルデザイン サービス内容の把握 プロモーション状況チェック項目 SEO対策(便利ツール紹介) リスティングリステ・・・

実用編

Webの特徴

24時間365日アクセス可能 動画や音声を使ったリッチな情報伝達が可能 情報量の制約がない さまざまなデータフォーマット情報流通が可能 ユーザーが必要な情報を・・・

知識編

サイト構築

プロダクトアウト型な発想からの脱却 マスマーケット(膨大な広告予算を展開できる大企業向け)からマインドシェア(より具体的なユーザー動向を意識し広告展開する中小企・・・

知識編

ヒアリングの前にクライアントに準備してもらうこと1

ヒアリング時点で「ターゲットは?」と問うと結局のところ「利益につながるすべて」とターゲットを絞れない返答は多い。 「ターゲットは誰ですか?」という質問の前に 自・・・

実用編

インターネットによる消費者活動の変化

「教えたい人」がキーパーソン 「売りたい(企業側)」と「買いたい(消費者)」の間に「教えたい人」が現れ始めている。 直線的なトラフィックから興味・関心に従って・・・

知識編

emを使ってpx感覚で操作する

文字サイズをemで指定する アクセシビリティに配慮して文字サイズ指定にpx指定を行わない(固定にしない)。そこでデフォルトサイズを10pxになるよう%指定する。・・・

CSS

三井不動産レジデンシャルに学ぶ

ユーザーの一般的動向から、その時期に合うサイトを提供する 「イエラボ」 家のある暮らしへの興味を喚起させ、検討段階へ誘導する 生活をより豊かにする話題などを・・・

実例編

ユーザビリティチェック

詳細コンテンツ関連 製品利用の動機を固められるコンテンツの提供 説得力ある情報を提供しているか? 製品の魅力を伝えるコンテンツか? 安定した使用感を得られ・・・

実用編

tableのこと【CSS編】

テーブルタグの初期設定 table{ border-collapse:collapse; font-size:100%; } セルとセルの間を空けるかどう・・・

CSS

検索エンジンの欠点

検索結果の妥当性・信憑性 検索エンジンへの新たな/継続している対策 Googleでは世界中の情報を「Webにアップロードする」ことにトライしている(YouTu・・・

リスティング

font-family フォントファミリー

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",&quo・・・

CSS

Internet Explorer 7対策

html>body モダンブラウザ用 *;first-child+html*:first-child+html IE7のみ用 ちなみに、 <!-・・・

CSS

ライティングの前に

そのコンテンツ、何のため? 付加価値を上げるため 専門家のコメントをもらう 取材先に「仁義」を尽くす ギャラの目安は「条件付け(しばり)」「取材日程決定時期・・・

ライティング

Webクリエイターが必要な営業スキル

営業は集客された見込み客の疑問点を解消し、条件を設定し契約書を交わすところを行う立場 必要な営業スキルは? 交渉力 お客様の要望とこちら側の条件をまとめる ク・・・

実用編

11_ディレクトリ型検索エンジン対策とフィード対策

サイト登録 サイトを検索エンジンに認識させるのが目的 Googleへの登録 http://www.google.co.jp/addurl/ Yahoo!Jap・・・

SEO

ECサイト実例 Part3

WebSTRATEGYの「実録Webサイト ビフォアフター」で連載されている内容を自分なりにまとめてみました。 サイト制作を独自に一から始めるか?AS・・・

実例編

CMSの基礎知識

CMSの誤解 CMSとは「Webを更新する」ツールと思われがちだが違う。CMSとは「Webコンテンツを管理/運用する」ツールである。つまり、コンテンツが増えれ・・・

知識編

モジュール化の一案

名前空間の名付けは任意に行う(bodyをそのまま名付けることはNG)。 unitモジュールにのみ文書を記述するようにするのがポイント。また固定のレイアウトであ・・・

html

strictに対応するためのiframe代替

strictではiframeの利用は廃止されている。そこでobjectを利用する。 <div> <object type="tex・・・

html

著作権

著作権の種類 著作者の権利(著作権) 著作者人格権 公表権、氏名表示権、同一性保持権 著作権(財産権) 複製権、上映権、演奏権、上演権、公衆送信権、頒布権、・・・

知識編

スタイルガイド(ガイドライン)

カラーコード フォントの種類 サイズ 領域のピクセル数 これはhtmlコーダーや品質チェック担当が必要であり、納品後に必要になることはほとんどない。 なぜ、・・・

実用編

ランダムに選択する

var sentaku = Math.floor(Math.random()*8); document.write(sentaku); 0から7までの数字の中か・・・

JavaScript

[ソフト]Webサイト検証ツール

Website Explorer それは既存のサイトのコンテンツマップを作りたいときに それはリンク切れをチェックするときに それは・・・ これだけでも便利・・・

お役立ちツール

ハイバーリンクを抽出

エクセルを使用時、テキストにリンクが設定されている場合、そのURLのみを別のセルに書き出す場合 ALT+F11で標準モジュールを挿入、下記をコピペする。 Pu・・・

Excel

[サイト]css 文法チェックツール

正しいスタイルシートを学べる非常に貴重なツール。 W3C(英語版) http://validator.w3.org/ W3Cサポート(日本語版) http:/・・・

お役立ちツール

[サイト]xhtml 文法チェックツール

厳しい採点だが、正しいマークアップを学べる非常に貴重なツール。 Another HTML-lint gateway http://openlab.ring.g・・・

お役立ちツール

ファイルをロックする

「ファイル」タブ→「名前をつけて保存」を選択 「ツール」→「全般オプション選択」を選択 「保存オプション」ウィザードが開かれるので、暗証番号などを指定する

Excel

ブラウザ画面の背景もプリントアウトする場合

ブラウザ上(ここではIE6で解説) 「ツール」タブ→「インターネットオプション」を選択 「詳細設定」タブ→「背景の色とイメージを印刷する」にチェックを入れる ・・・

豆知識

用紙1枚に数ページ分をプリントアウトする場合

エクセル・ワードなど上 「ファイル」タブ→「印刷」選択 「プロパティ」ボタンを選択 「用紙」タブ→「Nアップ」から任意を選択

豆知識

dlを使って、dtとddを横並びにする

dl{ width:○○px; } dt{ float:left; width:△△px; } dd{ margin-left:△△px; } float・・・

CSS

フレーム数

NTSC(日本) 29.97フレーム/秒 PAL 25コマ/秒 映画 24コマ/秒 30フレームで制作することが多いが、60フレームで作成す・・・

Flash

リスティングの実践

3つの視点 アクセスログでどんなキーワードで訪問されているのか? そのキーワードが上位表示され、ランディングページが最適であれば問題ないが、どちらかが問題あ・・・

リスティング

loadingバーを作る(こだわり編)

パーツを作る 100%読み込まれた状態を作成。 矩形ツールで線と塗りを設定。 塗りの部分だけを選択し、ムービークリップシンボル(ショートカット「F8」、「名・・・

Flash

loadingバーを作る(続シンプル編)

読み込むバイト数をベースに計算 1〜2フレームにダイナミックテキストを配置し、インスタンス名(per_txt)を設定 2フレーム目にスクリプトを記述 pe・・・

Flash

loadingバーを作る(シンプル編)

読み込むフレーム数をベースに計算 1〜2フレームにダイナミックテキストを配置し、インスタンス名(per_txt)を設定 2フレーム目にスクリプトを記述 p・・・

Flash

[サイト]mailtoを暗号化

maitoを直書きすると迷惑メールが大量に来てしまう原因になります。そこで、mailtoを暗号化するわです。そんなときに便利なツール。完全に迷惑メールを除外する・・・

お役立ちツール

クレジットを利用する際の注意点

基本事項 自動引き落とし 残高が不足すると自動的で引き落とされる。 1日の予算設定 1日の予算設定を利用すれば、1ヶ月バランスよく広告を出してくれるので、気付・・・

リスティング

複数のアカウントを利用したいとき

サブアカウント制 予算設定の異なる複数のリスティングを行いたいときに、1つのID、パスワードで管理ができるので便利。サブアカウントは即日作成してもらえる。管理画・・・

リスティング

[情報]マーケティングコンセプト

Webマーケティングのいろはを学べるサイト、らしい。実際に読んだことがあるわけではないが、情報量が豊富らしい。本で紹介されていたり、人づてに聞いたことがあったの・・・

お役立ちツール

高さをコントロールする

とはいえ、正確にコントロールできるわけではないが、縦幅を認識させたいときに有効。 html,body{ height:100%; } 高さの%指定は親要素に・・・

CSS

「マジックナンバー 7プラスマイナス2」の法則

心理学者のジョージ・A・ミラー氏が提唱する人間が一度に記憶できる要素の数についての概念。 メニューの最適数 5~9つ

ライティング

フォントサイズ

アクセシビリティの観点から文字サイズは固定しない方がいい。 ただ、IE以外のモダンブラウザではフォントサイズを固定しても、実際にはブラウザで拡大表示が可能だ。更・・・

CSS

リキッドレイアウトで画像の背景に一工夫

<div class="bg-cover"><img /></div> 画像を取り囲むdiv上にbg・・・

CSS

必要なのは「編集力」

設計と表現だけではなく、必要なのは「編集力」 設計(仕組み・構造)と表現(見せ方)だけでなく、編集力を駆使することで立体的なサイトとなる。 ここで差がつく編集・・・

ライティング

[ライブラリ]画像のスタイリッシュな拡大表示実現

サムネイル画像をクリックすると画面中央に拡大表示されるだけでなく背景を暗くすることができる。すんげぇお洒落っ! ThickBox 3.1(海外サイト) htt・・・

お役立ちツール

編集の手法

情報という分子 どんな情報(分子)も生活、趣味、産業、文化、芸術(分母)などの上にある 要約力とデザイン 媒体 方法 特徴 絵本 重点化デザイン ・・・

ライティング

ビットレートの目安

ナローバンド(アナログ/ISDN回線)向け 60Kbps ブロードバンド(ADSL/FTTH回線)向け 300Kbps

Flash

リスティングの準備

リスティング広告は万能ではない リスティングに適した(たとえばニッチ(隙間市場)の)商材がある 商材の知名度が高い場合あえてリスティングを行う必要はない イ・・・

リスティング

[情報]契約書サンプル

ソフトウェア開発の際だけど、契約書作成のサンプルになるのでは。mixiで見っけました。 社団法人情報サービス産業協会 http://www.jisa.or.j・・・

お役立ちツール

リスティングの基礎

ユーザが「検索する」結果に連動して広告を掲載 クリックして始めて広告掲載料金が発生(PPC:クリック課金型) 広告掲載料金・掲載期間・掲載順位・広告文(画像)・・・

リスティング

アドワーズのことなら

結局は、アドワーズに聞くのが一番であると考えます。 Googleアドワーズ http://adwords.google.com/support/

リスティング

Webサイトの集客方法

リスティング広告 参考:リスティングの基礎 SEO アフィリエイト メール メールマガジン ユーザーの許諾を得てメール配信(オプトインメール) メール配信・・・

知識編

ネットを利用した広告、特徴と方法

ターゲットユーザにピンポイントで広告が打てる。 ネットを使った広告の大きな特徴であり、マス広告との大きな違いである。 参考:メディアに適したコミュニケーショント・・・

知識編

ケータイサイトの集客方法

ディレクトリ型検索エンジン登録Yahoo!モバイル(http://mobile.yahoo.co.jp/) ランキングサイトの活用モバイル専用ランキン・・・

知識編

「このページのトップへ」に動きをつける

function pageup(){ if(document.all){ posi=document.body.scrollTop; } else{ posi・・・

JavaScript

xhtml strictで新規ウィンドウを開きたい場合

xhtml1.1 strictでは、新規ウィンドウを開くtarget属性を推奨していません。新規ウィンドウを立ち上げるべきかどうかはユーザーが決めるべきだという・・・

JavaScript

広告サイズ(国際標準)

実はバナーサイズには「国際標準」ってのがある。 横幅の小さい順(単位はpx) 88×31 120×60 120×90 120×240 120×600 125×・・・

豆知識

リスト「画像」とナビゲーション「横」編

xhtmlソース <div> <ul><!-- --><li><img alt="navi1" />・・・

CSS

ロールオーバーで画像を切り替える

様々なやり方があるが、どれがベストなんだろう? 気にするポイントは、検索エンジン的に問題がないか?アクセシビリティは確保されているか?ソースが読みづらくないか?・・・

CSS

背景やボーダーが意図した表示をしないとき

そのボックスにfloat付きの子ボックスが含まれていないか? そのボックス(または親ボックス)内で回り込みを解除されているか? 解除できる要素がなく親ボックス・・・

CSS

imgのvertical-align

縦方向のレイアウト崩れ防止、ブラウザによる見え方を統一するため、vertical-alignは「top」の設定がおすすめ。ちなみにデフォルトはbaseline・・・

CSS

idとクラス名

古いブラウザではidやクラス名に「-」と「_」を含まれていると認識できなくなるらしい。アルファベットに始まり、アルファベット、数字で書いた方がよい レイアウトに・・・

html

文字間

/*¥*/ letter-spacing:0.1em; /**/ letter-spacingの指定はMacIE5ではバグがでてしまうため、ハックを利用して・・・

CSS

floatの使用上の注意

floatとwidthはペアで使用する CSS2.1の勧告候補ではwidthなしでも自動的に幅がフィットされる。しかし、Mac IE5ではうまく表示されない。 ・・・

CSS

ブラウザによるwidthプロパティの解釈の違い

正しいCSSを記述しているにもかかわらず、表示が崩れることがある。ブラウザによる解釈の違い(バグ)が原因であるが、IE5や古いブラウザにバグが見られる。・・・

CSS

メディアに適したコミュニケーショントーン

マス広告 「(例)ありがとう日本の女性へ(TSUBAKI)」のように「なんだろう」と思わせるのが狙い ECサイト 「詳細」 「リアル」なコミュニケーション 「・・・

知識編

ECサイト実例 Part2

セミナーで実際に運営している側とサイトを制作した側のお話を聞いたので、その内容をまとめてみました。 輸入レコードショップに見るECサイト展開 特徴 在庫限りの・・・

実例編

ECサイト実例 Part1

iTunesStoreに見るECサイトとしての優位性 UIが使いやすい タイムリーにランキング変動 カスタマーレビュー 試聴できる アルバムの中の1曲単位で購・・・

実例編

ECサイトの立ち位置

従来(否定要因からの利用) 時間がないから 場所が遠いから 2004年頃から(プライオリティ要因からの利用) 他では買えないものがあるから 現在(買う理由を探・・・

実例編

[情報]CSSハック

SEO-Equation ここのサイトで紹介されている内容は凄く分かりやすておすすめ。 CSSバグ回避 CSSハック http://www.seo-・・・

お役立ちツール

Windows/Mac IE version4の排除

@important "test.css"; ポイントは@importantを設定し、1ファイルかますこと。ただし、この設定ではMacI・・・

CSS

Netscape version4の排除

<link href="test.css" rel="stylesheet" type="text/c・・・

html

ケータイの読み込み速度

56Kモデム / 10KB / 6〜9秒 (さらに…)

知識編

ケータイサイト

制作時の注意点 大きくても200×300(20文字×15行) 特殊文字の積極的利用 電話番号入力で直接電話をかけられる 文字入力ではなく、リストから選択できる・・・

知識編

MacIEだけを分離するハック

/*¥*/ MacIE以外 /*/ MacIE用 */ どのブラウザでもOK MacIE以外だけに設定したい場合やMacIEのみに設定したい場合でも、コメント・・・

CSS

tableのこと【xhtml編】

tableタグを利用する際に意外と知られていないのが、列(縦方向)をコントロールする「colgroup」タグ。また、colgroupタグはcaptionタグの次・・・

html

[ソフト]例えるならPhotoshopのフリー版

GIMP 「GIMP」で検索するといろいろヒットするが、その中でも気になったところをピックアップ。どうやらWindows用らしい。実際に使用したことがないから詳・・・

お役立ちツール

検索エンジンユーザ視点

実際に検索エンジンを利用したユーザが検索結果を見てどのような行動を取るのだろう? タイトルを見て、探してる情報があるか判断する 興味あるサイトを絞り込む 絞り・・・

SEO

新規ウィンドウをサイズ指定のセンター表示する

「test.html」をサイズ500×500(px)、新規ウィンドウ、画面中央で開くと仮定 function newWinIconOpen(URL){ var・・・

JavaScript

グラデーション

#006600 #33cc33 #66ff33 #66cc99 #3399ff #3366ff #0033ff #330066 #cc3366 #990033 ・・・

CSS

07_デバック・校正

IDパスワードでアクセス制限された開発用サーバ上で限定者によるデバック・校正 再度ユーザビリティテスト (さらに…)

知識編

06_量産作業

全ページを制作。それ以前のプロセスが終わらないと量産作業は行えない。 (さらに…)

知識編

05_基本デザイン策定

視覚要素をデザイン トップページ、全ページ共通のヘッダ・フッタ部分など インターフェイスのガイドライン作成 ロゴ、マーク、アイコン、タイポグラフィーなどの使・・・

知識編

04_情報アーキテクツ設計

サイトマップ作成(ツリー構造やディレクトリ構成、ページ間のリンク構造を明記) 情報の収集(コンセプトに応じた収集の方針を立てる) 情報の分類(位置、50音順・・・

知識編

03_仕様策定

企画書や仕様書にまとめ、Webサイト開設者と目標のイメージを共有 Webサイトの基本、プランニング 「どのような目的や背景でサイトが維持継続運営されるのか?」・・・

知識編

10_自力本願で外部リンクを獲得するテクニック

サブドメインを利用する 多くの人気ウェブサイトからリンクを貼られると、リンクポピュラリティが上昇し、検索結果上位にランキングされる原動力になる。 SEO対・・・

SEO

09_検索エンジンユーザーの使い勝手を高めるサイトデザイン

SEOに適したサイトデザイン パンくずリスト カテゴリ名を埋め込んだアンカーテキストである →ユーザーを戸惑わせない・メニューの役割も果たす グローバルメニュ・・・

SEO

08_HTMLタグの重要性 2

アンカーテキスト 驚くべきアンカーテキストの影響力 アンカーテキストだけで検索エンジン最上位を確保する例 「18歳未満」→Yahoo!やGoogle 「mis・・・

SEO

02_コンセプトの設定(具体的なキーワード定義)

オリジナリティー、実現できるか判断、最低限の達成目標などを加味 ターゲット(サービスの対象となるユーザ層を指す) ポジショニング(競合サイトや複数のサービス・・・

知識編

01_ヒアリング・サーチ

Web開設者の要望事項、ブランディング、企業戦略、サーバやインフラの仕様の調査 同業他社のWebサイトの分析 分析アプローチ(課題点・問題点を抽出) 環境分・・・

知識編

00_Webサイト制作プロジェクト

Webサイトの構築の第一歩はスケジュールを立てるところからはじまる。 最終目的(決められた期限に、要望とおりのWebサイトの立ち上げ)を果たすために、全体のス・・・

知識編

07_HTMLタグの重要性 1

<title>タグ 「ブラウザのメニューバー」「お気に入りでの登録サイト名」として表示される。 参考:検索エンジンユーザ視点 良い例 <ti・・・

SEO

06_キーワードの決定

目標の設定 検索エンジン経由の訪問をどのくらい増やす?検索結果に表示されることがゴールではなく、クリックを誘導し、集客することがゴール その達成時期はいつ? ・・・

SEO

05_各種キーワードツール

アクセスログに残されたキーワードだけではニーズにマッチしているかどうか判断できない。そこでキーワード選定のために調査すること すべてのキーワードについてKE・・・

SEO

04_ライバルサイトが見つかったとき

戦略1:果敢にそのキーワードで挑戦 上位10サイトは時間をかけしっかりと調査(チェック項目とチェックのポイント) ディレクトリに登録されている Yahoo!・・・

SEO

03_ライバルサイト分析

ライバルサイトを見つける アクセスログから、ユーザーが使っている検索キーワードをピックアップ それらのキーワードで検索 上位表示されれば現状だけはSEO対策必・・・

SEO

02_アクセスログ解析

アクセスログ解析で知りたいこと 各検索エンジンからの訪問はあるか?(URLの保持、リンク構造設計) 全体のどのくらいが検索エンジン利用者か?(リンク構造設計)・・・

SEO

01_検索エンジンでの調査

実際に検索(サイトの登録、表示状況調べ) どれくらいのページが検索対象か? 登録ページ数の調査方法 google allinurl:www.調査URL sit・・・

SEO

00_SEOの進め方

サイトの現状調査とキーワードの策定 検索エンジンでの調査 自サイトのアクセスログ解析 ライバルサイトの分析 各種ツールを用いてのキーワード調査 キーワードの・・・

SEO

検索エンジンの仕組みと誘導方法

ロボット型 ディレクトリ型 自動的に情報収集する お勧めサイト集の進化系 Google YST(Yahoo!Search Technolo・・・

SEO

「/」から始まるパス指定

「/」が意味するのは、どの階層にいようが一番上の階層を基準にすること。ナビゲーションが階層が変わった場合でもリンク先を変更する必要がないので便利。ただアップロー・・・

html

ケータイサイトの特徴

ケータイサイトの利用者は? 一般的には若年層、ECサイトでは若年女性や若い主婦層。しかし、PCとケータイを連動して利用されることが多いことを忘れてはならない。・・・

知識編

デザインカンプ

コンテンツマップ ディレクトリマップ ディレクトリ構造設計指針 重要なのはディレクトリ名称 URIを大切に 盛り込む内容 ページの中の役割 ワイヤーフ・・・

実用編

「設計」という概念(Webサイト構築とSEO対策)

建物をどのように建てるのか(「Webサイト構築」設計) どんな建築物も設計図なしでは作れない。 建物を建てる場合 Webサイトの場合 何階建て? ・・・

知識編

文章作成時の注意点

情報の記憶 情報は「ネガティブな感情の高揚が高い直後」が記憶されやすい。 正しいWebページへ最適化 やさしい漢字・かな表記を 中学生でも分かる難易度で 専門・・・

ライティング

ただ整然と並べられたページって・・・

確かに見やすい。でもなんかつまらない。そこで ストーリーを作らないか? こだわった部分とか

ライティング

ブロガーは

おしつけを嫌う。自分のためにブログを書いていることを忘れてはならない。

ライティング

[サイト]ファビコンの作り方

ファビコンとは ブラウザのアドレスバーやお気に入りのリストに表示される小さなアイコンのことです。 手順 ファビコン用の画像を作成 ファイル形式を変換する ・・・

お役立ちツール

Flash Videoを配信する方法

手順 素材用意 FLV形式に変換 配信メカニズム決め swfファイルに埋め込み 数秒のデータを扱うのに有効 プログレッシブダウンロード ここの操作方法を言及・・・

Flash

アクセシビリティとユーザビリティ

Webアクセシビリティ 「できるだけ多くの人へ情報を正しく伝えるため」 「より多くのユーザーがWebコンテンツを利用できるようにすること」 「見やすい」 「音声・・・

実用編

Javascript無効のメッセージ

Javascript無効時の代替テキストサンプル 本コンテンツをご利用いただくには、Javascriptが有効である必要があります。ご使用のブラウザでは、Jav・・・

ライティング

Flash無効のメッセージ

Flash無効時の代替テキストサンプル 本コンテンツをご利用いただくには、Adobe Flash Playerバージョン8.0以上のプラグインが必要です。大変お・・・

ライティング

[ソフト]パソコン画面の保存・印刷

WinShot(ウィンドウズのみ対応) キーボード上の「PrintScreen」ボタンを押せば画面上をそのままコピーし、画像編集ソフトやらでペーストできる(アク・・・

お役立ちツール

[情報]CSSデザイン

CSS Vault(英語版) 英語で何書いているかよく分からないため、ほぼ活用したことはないのだが、ひょっとすると役立つサイトなのかもと思い、掲載。動作が重く表・・・

お役立ちツール

[情報]Webアクセシビリティ関連に特化

Infoaxia インフォアクシア。いろいろなツールをダウンロードできたり、アクセシビリティ関連の情報が満載。http://www.infoaxia.com/

お役立ちツール

[情報]キーワードの流行をグラフ化

Google Trends(英語版) Googleサービス。ビックワードでないとデータ不足で表示されないことが多々(難点)。見ていて面白いが、どのように活用する・・・

お役立ちツール

[情報]ブログ検索

兆 キーワードからそれにまつわるブログを紹介する。 http://www.kizasi.jp/

お役立ちツール

Webスタンダードのメリットとデメリット

Webスタンダードとは? Webスタンダード=Web標準とは、W3Cの勧告にしたがった文法を遵守し、CSSを利用して文書の構造と見た目を分離させること。 Web・・・

知識編

納品時

制作したファイル一式と運営のためのルールをセットで サンプル テキスト更新時にWebサイト制作ソフトを使用する場合の注意点 Dreamweaver、ホームページ・・・

実用編

契約方法

設計、制作、運用のそれぞれで契約(納品、検収)を結ぶ プロジェクトで行うことと納品物の例 内容詳細 御社データ資料の確認 ヒアリング サービスの体験 ・・・

実用編

同市場への新ブランド立ち上げ

商品プロモーションはもちろん、ブランドイメージの訴求が大きなミッション

知識編

「現在、このキーワードは非表示(検索サイト)です。

表示させるにはキーワードを変更するか単価を上げてください。」ってメッセージがよく出てしまう。 これを改善するにはどうしたらいいか? アナウンス通りに単価を吊り上・・・

リスティング

swfファイルをxhtml1.0 strictに取り組む記述

<object data="○○.swf" width="○○" height="○○" ty・・・

html

SEOの実践の前に

SEOの本質障害の理解 検索結果に表示されない htmlの書き方が悪い キーワードの選び方が悪い 検索結果の説明文が不適切 タイトル、スニペットの理解・・・

SEO

最近の記事

在宅で仕事ができない人へのアドバイス

新型コロナウイルスが世界に猛威を振るっている。在宅でのリモートワークが推奨され、家で仕事している人が増えているとのこと。 そんな中、なぜか家だと仕事にな・・・

徒然なままに

このサイトのリニューアル2020

主な変更点 ・3つのブログ(「0から目指すWebマスター」「シンプルシンプルデザイン」「シンプルシンプルデザイン代表ブログ」)を一つにまとめました ・・・

更新履歴

久しぶりにリニューアルしました

3つのブログを一つに Web業界に足を踏み入れたのが2006年夏。完全アナログ人間がブラインドタッチからのスタート。そこで「0から目指すWebマスター」・・・

お仕事・制作日記

サイトのURLを変更して、管理画面が表示されなくなった場合 → functions.phpの一時修正

DBを修正する必要はなかった! WordPressの管理画面で、メニューの「設定」→「一般」にある、WordPress アドレス (URL) を変更する・・・

WordPress

元号のjsonファイルを作ってみた

制作経緯 4/1 新しい元号が「令和」と知る。これまでの元号って何だろうとWikipediaで調べる。4/2 ある海外の方が「令和の前って江戸時代とか縄・・・

お仕事・制作日記

カラーグレーディング

先日、CP+2019 で行われた、鈴木 佑介(映像作家)さんによるプレゼン「動画もRAWの時代。BenQで作るカラーグレーディング環境」が、ちょうど気になって・・・

学びの部屋

「しょぼい起業で生きていく」を読んで

書籍「しょぼい起業で生きていく」を読んで、共感したことや改めての気づきや新たな発見を書き残しておく。 「嫌なことからは逃げろ」 「やりたくないこと・・・

起業関連の本

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった…

直接URLを入力したり、Googleの検索結果からの遷移時にはまったく問題なかったが、Yahoo Japanの検索ボックスで検索して表示される検索結果一覧から・・・

お仕事・制作日記

CP+2019に行ってきた

開催日 2019年2月28日〜3月3日会場 パシフィコ横浜 / 大さん橋ホール CP+(シーピープラス)とは? CP+はカメラや関連機器の一般ユー・・・

参加セミナー・イベント

「外壁塗装業の集客できるホームページ制作ならゆいまるWeb」の山縣力也さんと座談会

ぼくたちの共通点→「集客」 仕事内容を考えたとき、ぼくたちの共通点は「集客」を意識していることです。山縣力也(以降、やまけん)さんは、外壁塗装業、主に下・・・

対談

人気の記事

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS

イラストレーターでレイヤーごとにPNGで書き出す

フォトショップでは、レイヤーごとに書き出す設定がありますが、イラストレーターにはありません。そこでレイヤーごとにPNGファイルを書き出すためのスクリプトファイル・・・

Illustorator

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

[連想配列]2つ以上のキーで並び替えをする

2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつて・・・

JavaScript

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

WEB制作