2013-03-01から1ヶ月間の記事一覧
HTML5実力テスト nav要素 nav要素の用法として、最も不適切なものを選べ サイトのグローバルナビゲーション フッターに設置したグローバルナビゲーション グローバルナビゲーションの下に設置したパンくずナビゲーション サイトマップページのサイト内リンク…
CSS3用リセット 《reset.css》 @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, str…
機能別にまとめたCSS3ジェネレーター28選 ウェブ学のすすめ 多機能型 CSS3プロパティジェネレーター CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator CSS3 GENERATOR CSS3 Playground by Mike Plate CSS3 Generator ボタン特化型 CSS…
サイト名をリボン状に表示する フッターを罫線で区切って表示する footer { clear: both; color: #888; margin: 25px 0 0 0; padding: 8px 0 8px 0; border-top: solid 1px #aaa; } small { font-size: 0.75em; font-style: normal; text-align: left; displ…
背景と区切り線の色を半透明にする ColorSchemer 背景色を半透明にする RGB（赤, 緑, 青）で色指定：rgb(1, 122, 205) 不透明度（alpha）：a(0.3) nav ul li a:hover { background-color: rgba(1, 122, 205, 0.3); } 区切り線の色をRGBで指定し半透明にする …
背景画像を表示する #container { width: 900px; margin: 0 auto; background-color: #fff; padding: 0 40px; -webkit-box-shadow: 0 0 30px #bbb; box-shadow: 0 0 30px #bbb; background-image: url(images/circle.png); } 背景画像を繰り返しなしで表示す…
枠に影をつける 「box-shadow」プロパティ article header { border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px; border-radius: 10px; box-shadow: 10px 10px #ccc; } 影をぼかす ぼかしの大きさ「5px」 article header { border: solid 1px #…
ナビゲーションバーを角丸にする 記事枠と同じように角を丸くする nav ul { font-size: 0.75em; margin: 0 0 10px 0; height: 30px; background-color: #005087; border-radius: 6px; } 角丸が全体に反映されない原因のリンクの背景色を削除する nav ul li a…
ページ全体のデザイン article、microdataを記述した例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>森の工房について</title> <link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'> <link href="base.css" rel="stylesheet" type="text/css" media="all"> </link></link></meta></head></html>
Time要素 <section> <h1>今日のできごと</h1> <time datetime="2013-03-22" pubdate="pubdate">2013年3月22日</time> <p>今日の帰り道に見かけたカフェがいい雰囲気だったので、今度本を持って行ってみよう。</p> </section> cite要素、q要素、blockquote要素、mark要素 <section> <h1>読書メモ</h1> <p>宮沢賢治作品を読みました。</p> <cite>オツベルと象</cite> <p>牛飼いが話す物語で、 <q>オツ</q></p></section>…
ヘッダーをマークアップ <header> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Green Leaf</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html></header>
そもそも まだまだブラウザ間での実装差異もあるので、Javascript などを使って対応させる必要がある プログレッシブ・エンハンスメント（対応してないブラウザには、必要最低限の機能を確保しておく）という考え方が前提 HTML5, きちんと。 HTML5は勧告候補…
DOCTYPE宣言 必須 ルート要素 html要素 lang属性も含める <html lang="ja"> 基本情報の記述場所 head要素 <head>〜</head> エンコードの種類の指定 meta要素 charset Unicode（UTF-8） <meta charset="UTF-8"> ページのタイトル title要素 検索対象にするキーワードから書き始める <title></title> スタイルシートの設定 style</meta></html>…
文書構造をマークアップする 《div要素を使ったマークアップ》 <div id="header"> <p>ホームページ</p> <div id="nav"> <ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> </ul> </div> <div id="content"> <h1>大見出し</h1> <p>本文</p> </div> <div id="footer"> <p>(c)2013</p> </div> コンテンツモデル <header> <p>ホームページ</p> <nav> <ul> <li>メニュー１</li> <li>メニュー２<…</li></ul></nav></header></div>
新しい要素・属性 要素（element）・属性（attribute） 文書構造を明確にするための要素 section要素 header要素 nav要素 など テキストの意味を明確にするための要素・属性 time要素 mark要素 など 動画と音楽のための要素・属性 video要素 audio要素 など …
HTML HTML(HyperText Markup Language) テキストで記述される HTMLドキュメントがブラウザに読み込まれるとWebページが表示される ハイパーリンクが特徴 タグを入れてテキストをマークアップ（意味づけ）する <html> <head> <title>ページタイトル</title> </head> <body> <h1>見出し</h1> <p>本文本文 <a href="link.html">リンク</a> 本</p></body></html>…
HTML5 Web広告研究会セミナーレポート（Web担当者Forum） HTML5 http://www.w3.org/TR/html5/ W3Cがリリースしている規格 2012年12月17日に勧告候補がリリースされ、今後新しい機能が追加されることはなくなり安定した規格として実装と検証が進められます HT…
URLからサムネイルを生成するWPプラグイン「BM Shots」 FTPでアップロードします 管理画面のプラグインで有効可します ショートコード 記事中に下記コードを記述する 例：http://www.binarymoon.co.uk/projects/bm-shots-automated-screenshots-website/のサ…
themeのフォルダー内にアップロード FTPでアップロード header.phpを編集 以下の記述を追加する の上に挿入 <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivoSlider/themes/default/default.css" type="text/css" media="screen" /> </link>
Slider サイト訪問者に対し、視覚的にサイトのイチオシ情報をアピールする サイト訪問者をイチオシのコンテンツに誘導する Easy Slider
記事IDとカテゴリIDの調べ方 プラグインの中には、記事やカテゴリのIDを指定し特定の記事やカテゴリのみに対して処理を加えるものもあります http://〜/?p=4109 この「4109」が該当記事のID http://〜/edit-tags.php?action=edit&taxonomy=category&tag_ID=7…
Ktai Style 日本の携帯電話に最適化して表示させるプラグイン テーマ Ktai Style テーマ（最新のテーマを入手） ※「wp_content」内に「ktai-themes」フォルダーを作りアップロードする。 Breadcrumb NavXT パンくずリストを自動設定するプラグイン パンくず…
必須プラグイン WordPressを初導入したら まず最初にやるべき24の設定 Akismet コメントのスパムを防ぐプラグイン Personalプランを選択します 「$0」にスライドします 登録完了後、「Alismet API キー」がメールで届きます Akismet API キーを入力 「Akisme…
Contact Form 7 お問い合わせフォームを設置するプラグイン 使い方 Contact Form 7 の基本的な使い方 設定 編集をクリック これが基本形です。 現在は、p要素ですが「table要素」に変更してCSSを適用させます。 「保存」ボタンを押して、コードをコピーしま…
ソーシャルボタン設置用プラグイン Share Buttons by Lockerz / AddToAny WP Social Bookmarking Light Tweet, Like, Google +1 and Share Share Buttons by Lockerz / AddToAny はてなブックマークボタンの設置 http://b.hatena.ne.jp/guide/bbutton
Like Box いいねを設置 いいね(Facebook)ボタン：コード生成ページ http://developers.facebook.com/docs/reference/plugins/like/ ※アカウントが認証されていない場合は、以下の画面が表示されます。 ボタンのオプション URL to Like 「いいね！」ボタンの…
ツイートボタンを設置 アカウント→「素材」 ツイートボタン：コード生成ページ http://twitter.com/about/resources/buttons#tweet ボタンの選択 表示名（指定項目） 説明 リンクを共有する ツイートボタンと呼ばれるボタンを作成する。 特定のWebページから…
Maps JavaScript API http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無> ルート検索マップ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> </meta></head></html>
Search API を利用する 認証不要 IPベースでのリクエスト制限があります ツイートの表示 表示用のモジュールを作成します <div id="twitterModule"> <p class="title">Twitter Module</p> <div id="area-tweets"> </div> ツイートがエリアからはみ出さないように設定 /* ツイッターモジュール */ #twitterModule { overflow: hidden; } </div>…
位置情報の取得 「iPhone3G(S)」「iPhone4(S)」には、「Wi-Fi」「携帯電話ネットワーク」「GPS」を組み合わせて現在位置を割り出す機能がついています 「iPhone > 設定 > 一般」から「位置情報サービス：オン」に設定しておく必要があります Geolocation API…
