作業の覚え書き

Web 制作 Memo

By

Webフォントを使うための設定

参考:日本語フリーフォントをwebフォント化する4ステップ|hirok-k.com

  1. 日本語フリーフォントを探す
  2. フォントのライセンスを確認
  3. webフォントファイルを作成
  4. CSSの指定

By

Copyrightの年度を自動更新

自分用メモ。

Copyright の年度をPHPで自動更新。


Copyright &copy; <?php echo date("Y"); ?> YUKI All Rights Reserved.

PHPが使えるかどうか未確認の環境用
Copyright の年度をJavaScriptで自動更新。


Copyright &copy; <script type="text/javascript">// <![CDATA[
document.write(new Date().getFullYear());
// ]]></script> All Rights Reserved.

By

HTML5マークアップ

今さらながらHTML5をきちんと理解しようと思い、資料を探して再勉強。
コーディングをしながら、謎に思っていたことがいろいろわかってきた。

空要素の文末</>はあってもなくても構わないが、統一する。(紛らわしいし、気持ち悪いよね)

・html要素の指定

<html lang=”ja”>

・文字エンコーディングの指定

・スタイルシート読み込み

・JavaScript読み込み
例:html5をIE8以下に対応
<!– [if lt IE 9]>
<script src=”html5shiv.js”></script>
<![endif]–>

・header、footer、navなどの要素が独立、divで囲む必要がない。

・a要素でブロック要素を囲むことが可能。
<div>
<h3>タイトル</h3>
コメント

</div>
■セクション
・サイトヘッダー → header
・主要なナビゲーション → nav
・メインコンテンツ → article
・ンテンツヘッダー  → header
・メインコンテンツ内のセクション → section
・右カラム → aside
・バナーエリア → aside
・サイトフッター → footer
・フッター内コンテン → section
・コピーライト → smal

・セクションを明示する場合はすべての見出しをh1で書いてもOK。
・見出しはセクションの中に入れる
・古いブラウザではセクション要素はインライン表示になるのでdisplay:block指定する

■新しい要素

・time
日時や期間、タイムゾーンのオフセット
<time>10:00</time>
<time datetime=”10:00″>予約時間</time>

・figure
メインコンテンツから参照されるイラスト、図表、写真、ソースコードなど
※バナーやロゴなどは aside
・mark
ハイライト。検索結果表示など。

・main
1文書につき1カ所しか記述できない。
articleやheaderなど他の要素の中に入れることができない。

 

参照:
HTML5マークアップ 現場で使える最短攻略ガイド

By

[メモ]WebフォントでiOS風タブバーとアイコンを作成

■もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法
http://blog.asial.co.jp/1007

 

 
フォントリストはこちらから
http://fortawesome.github.io/Font-Awesome/icons/

 

By

WordPressの最新記事を新着情報として静的HTMLページに表示させる

WordPressの最新記事のタイムスタンプとタイトルをトップページに表示できるようにしてみた。

一行目はフルパスを記入。


  •  

最新記事を埋め込んだページ
http://studiocue.jp/

By

ウェブマスターツールを見てみた

検索クエリ
検索キーワード 表示回数
バトンタッチ 170
シネマフロンティア メンズデー 10 未満
恋愛能力指数テスト 10 未満
irc 2013 10 未満 10 未満
irc2030 10 未満 10 未満
炊飯器 爆発 10 未満
studiocue 10 未満
smartrollover.js 10 未満
炊飯器料理爆発 10 未満
美瑛 桜 10 未満 10 未満
irc2520 10 未満 10 未満
バトンタッチ イラスト 10 未満
夕陽 10 未満 10 未満
羽山料理店 10 未満
バトンタッチ イラスト 10 未満

バトンタッチ・・・あんなイラストが何故?(汗)

リンク数の最も多いリンク元
vjcatkick.com 13,062
livedoor.jp 1,306
tok2.com 293
blogpeople.net 29
kotonoha.cc 21

最も多くリンクされているコンテンツ
/smilelife/ 14,693
http://studiocue.jp/ 81
/smilelife/2012/01/初詣/ 6
/smilelife/2011/12/hayama/ 4
/blog/2004/04/ichat_3.html

コンテンツ キーワード
キーワード 重要度
1. 国
2. 投稿
3. ない
4. photo
5. 民
6. 旅
7. 写真
8. 海
9. 作
10. 〇
11. 生
12. 観
13. 道
14. blog
15. 金
16. 日時
17. 利
18. 加
19. 成
20. 期

HTML の改善 最終更新日: 2013/04/11
以下の問題に対処すると、サイトのユーザー エクスペリエンスとパフォーマンスを向上できる可能性があります。
メタデータ(descriptions) ページ
重複するメタデータ(descriptions) 17
長いメタデータ(descriptions) 0
短いメタデータ(descriptions) 1
タイトルタグ ページ
タイトルタグの記述なし 0
タイトルタグの重複 6
長いタイトルタグ 0
短いタイトルタグ 0
情報が不足しているタイトルタグ 0
インデックス登録できないコンテンツ ページ
サイトからインデックス不可コンテンツに関する問題は検出されませんでした。

descriptionsを再考する必要有り、ですな。

By

Facebookページをつくる

  1. Facebookで表示させたいページを Facebook 外部に用意する。(SSL設定ON)
  2. Facebookからのアクセスが post method なので、postを受け取るため開くページの拡張子は .php とする。
  3. Facebookで表示させたいページと同一ディレクトリに.htaccessを置き、phpファイルをhtmlファイルとして実行させる設定を書く。
    AddType application/x-httpd-php .html( または AddHandler application/x-httpd-php .html ) ※サーバー仕様による
  4. Facebookページを作成する。
    >> http://www.facebook.com/pages/create/?ref_type=sitefooter
  5. 開発
    >> https://developers.facebook.com/ を開いて、Developer登録。
  6. アプリを作成する。
    >> https://developers.facebook.com/apps をクリック。
  7. アプリをFacebookに結合する方法を選択し、必要事項を入力する。
    通常のWebページを表示させる場合は[ページタブ]を選択。
  8. [ページタブ名]:外部に用意したウェブページ名、
    [Page Tab URL]:サイトのURL、
    [Secure Page Tab URL]:SSLページのURL、
    [ページタブの画像]:アイコン画像(111 x 74 ピクセル)
  9. https://www.facebook.com/dialog/pagetab?app_id=(App ID の内容)&next=(Secure Page Tab URL の内容)
    を開く
  10. ダイアログが出るので、タブから登録したURLを選択し、アプリと関連づける。

By

【メモ】PHPで分岐

WordPressではなく本家サイトでこういうことをやろうとしてるんだけどね。
既にインクルードはSSIからPHPに移行済み。

WordPressのテンプレートをカテゴリ別に切り替える

そろそろちゃんとやりますか。

【追記】
最近のソーシャルプラグインは「LINEで送る」が入ってるんだなぁ。

By

デバイス利用の変遷

ケータイ難民って・・・すごい表現だけども、ガラケーはユーザーも端末も明らかに減ってきてるね。電車に乗って周囲を見渡しても、ガラケー使ってる人って確実に減ってる。

どれくらい残ってるのかな?ガラケーしか持っていない人。

スマートフォンの利用率が300%、タブレットは500%というバカみたいなインフレな伸び率

戦後最大のメディアの椅子取りゲームとケータイ難民の引き受け先

iPhone持っててiPadも持ってるとか、スマホ&タブレットを複数台持ってる人も割といるしね。
スマートフォンユーザー増にLINEがけっこう貢献してるとか。
なるほどauの法人営業がせっせとLINEを薦める訳だだ。
LINEはSkypeより敷居が低いし、テレビCMもやってるから知名度高いだろうし、広めやすいよね。

By

写真を効果的に魅せるjQueryプラグイン

jQueryを使って写真を効果的に魅せることのできるプラグインを集めてみました。

SlidesJS
シンプルなスライダー

Slicebox – 3D Image Slider
ルービックキューブのような面白い動きをするスライダー。

Parallax Slider
・背景も動くパララックスなスライダー。

BlocksIt.js
・コンテンツをPinterst風に表示させるプラグイン

bxlider
・多彩なカスタマイズが可能なスライダー

Adaptive Thumbnail Pile Effect
・カードを並べて広げるような楽しい動きをするギャラリープラグイン

Slideshow with jmpress.js
・エフェクトが印象的なスライダー

GalleryView
・サムネイルをクリックすると動くなどカスタマイズできるスライドギャラリー

Slider Kit
ドット、ナンバリング、サムネイル縦・横、サムネイルのみなどインデックスのオプションが選べるスライダー

The Lof JSiderNews

・サムネイルあり、リンクも出せるテキストありのスライダー[ダウンロードページ]

A small map
・複雑な図形や地図もマウスオーバー可能なプラグイン