2013/02/25

Normalize.cssの「すすめ」

なるほどです。
ブラウザの使用はそのままで、
normalize.cssで誤差を修正するんですね…

なるほど、たしかに自分もulとかのタグにlist-style:noneとかしてた(笑)
ってか今でもしている(笑)

少し意識して作るようにしようやっさ。

http://yomotsu.net/blog/2013/02/23/normalize.html

2013/02/22

wordpress SEOのヤーツ

Akismetを有効化してスパムコメントを防ぐ設定とAPIキーの取得方法

初期導入されているプラグイン「Akismet」の設定方法

http://whitehatseo.jp/setup-of-akismet/

うん、英語はわからんな…

2013/02/19

じゃあいつやるのか?○○でしょ!

オチもしっかりとした感じで好きです。
http://blog.livedoor.jp/goldennews/archives/51766526.html

2013/02/18

facebookページ統合方法

Facebookページでスポット対応前に制作したページを統合したい場合や重複したページを統合したい場合のやり方。

ファンページにログイン



リソースを選択

そしたら何か統合~みたいなアレが出ていたんだけど…
見当たらない…申請中だからかも(笑)

まぁ、それで申請したら後からメールくるっていうからそのメールみて判断(笑)

SEO…じゃなくて、アナリティクスの設定

アナリティクス解析の設定方法はこっちみてやろうかな。

http://jyouhosyozai.com/bloggers-festival-13292.html

使い方全然わからんからよ~

2013/02/17

フリーランスのための契約書!

フリーランスのための契約書

色々分かんないことだらけだけど、この契約書類があればOK!

これ

うん、ありがたいことこの上なし。

角丸の使い方に注意

kadomaru、おっと、角丸の使用法に制限

角丸を利用する時に、注意する事がかいてあったのでメモ

徐々に角丸具合を小さくしていく

定番が6px。んでそれに沿って中は小さくしてく(ちょうざっくりw)

ここで書いてる≫http://designcolor-web.com/2013/02/12/kadomaru/

2013/02/13

動きのあるgif動画をリンクボタンにする

最近良く見かけるので忘れんうちに。

gif動画を用意。

んで、

HTML

<p><a href="#">テキスト</a></p>

CSS

text-indent: -999em;
background: url(画像) repeat;

テキストインデントでテキストを飛ばす方法。 なんか昔は、ダメ!絶対!とかなっていたけど、まぁ、使いやすいならOKなのかも。

※あ、でもだめぽいね(笑)

text-indent-9999pxによる画像置換えと隠しテキスト

2013/02/07

Google Driveで静的なウェブページが公開可能!


すげ!
ステップ式に下記に掲載

1.Google Driveでフォルダを作り、共有設定を「ウェブ上での一般公開」を選択。

2.
作成したHTMLファイルをGoogle Driveでにアップロードする。この時点で公開される。

3.公開したページを見るには、アップロードしたファイルをGoogle Drive上で閲覧し、閲覧しているページのアドレスのユニークの値(例えば、私の場合はhttps://docs.google.com/file/d/以下の値)をコピー。

4. 「https://www.googledrive.com/host/」以下に先ほどコピーした値を入れるとアップロードしたページが見られる。

■テストページ
Google Driveでのテストページ

■引用元

P2P Today ダブルスラッシュ


2013/02/05

【5分で出来た】英語(外国語含)の文章(word、pdf)を翻訳方法

外国語を簡単翻訳

HTML形式で保存する

① まず、外国語で書かれた文書(Word)を開き、HTML形式で保存します。  [オフィスボタン]⇒[名前を付けて保存]⇒[ファイルの種類] で[Webページ(フィルタ後)]を選択 ⇒ [ファイル名]で拡張子をhtmlにします。(htmlです。お間違えなく)

拡張子を[.html]に変換

チョロメで翻訳

右クリックで[日本語に翻訳]と出るのでクリックして翻訳。

wordにコピペ

んで、精度の低い翻訳を一斉置換し、精度(読めるレベル)まで上げて完了。

見出しスタイルコピペ用

切り取り線

/* 01.切り取り線 */
#heading01{
 position:relative;
 padding:5px;
 font:bold 24px/1.6 Arial, Helvetica, sans-serif;
 text-align:center;
 color:#655;
 border-top:1px dashed #aaa;
 border-bottom:1px dashed #aaa;
 background:#eee;
 text-shadow:1px 1px 0 rgba(255,255,255,1);
 box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
} 

テープ

 /* 02.テープ */
#heading02{
 position:relative;
 margin:0 -1px;
 font:bold 30px/1.6 Arial, Helvetica, sans-serif;
 text-align:center;
 color:#333;
 background:#f0e800;
 -webkit-transform: rotate(-3deg) skew(-3deg);
 -moz-transform: rotate(-3deg) skew(-3deg);
 -o-transform: rotate(-3deg) skew(-3deg);
 -ms-transform: rotate(-3deg) skew(-3deg);
 transform: rotate(-3deg) skew(-3deg);
 text-shadow:1px 1px 0 rgba(255,255,255,1);
 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
 30px 0 0 0 #f0e800,
 -30px 0 0 0 #f0e800;
} 

リボン

 /* 03.リボン */
#heading03{
 position:relative;
 margin:0 -10px;
 padding:5px;
 font:normal 28px/1.6 "Times New Roman", Times, serif;
 text-align:center;
 color:#ffe8e8;
 background:#f99;
 -webkit-transform: rotate(-3deg) skew(-3deg);
 -moz-transform: rotate(-3deg) skew(-3deg);
 -o-transform: rotate(-3deg) skew(-3deg);
 transform: rotate(-3deg) skew(-3deg);
 box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
    background-image: -webkit-gradient(linear, left top, left bottom,
   from(   rgba(0, 0, 0, 0.0)), 
   color-stop(0.08, rgba(255, 255, 255, 0.5)),
   color-stop(0.12, rgba(255, 255, 255, 0.5)),
   color-stop(0.12, rgba(0, 0, 0, 0.0)),
   color-stop(0.88, rgba(0, 0, 0, 0.0)),
   color-stop(0.88, rgba(255, 255, 255, 0.5)),
   color-stop(0.92, rgba(255, 255, 255, 0.5)),
   color-stop(0.92, rgba(0, 0, 0, 0.0)),
   to(    rgba(0, 0, 0, 0.0))
   );
 background-image: -moz-linear-gradient(top,
   transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92% 
   );
 background-image: -o-linear-gradient(top,
   transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92% 
   );
 background-image: linear-gradient(to bottom,
   transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92% 
   );
}
#heading03:before{
 content:" ";
 position:absolute;
 top:-5px;
 left:0;
 width:0;
 height:0;
 border-width:0 0 5px 10px;
 border-style:solid;
 border-color:transparent;
 border-bottom-color:#c66;
}
#heading03:after{
 content:" ";
 position:absolute;
 top:100%;
 right:0;
 width:0;
 height:0;
 border-width:5px 10px 0 0;
 border-style:solid;
 border-color:transparent;
 border-top-color:#c66;
} 

吹き出し

 /* 04.吹き出し */
#heading04{
 position:relative;
 margin:0 15px;
 padding:10px 20px;
 font:bold 24px/1.6 Arial, Helvetica, sans-serif;
 color:#333;
 border:#333 solid 3px;
 border-radius:18px;
 background:#fff;
 box-shadow:
  -7px -5px 0 0 #e8e8e8 inset,
  2px 3px 0 0 #000;
}
#heading04:before{
 content:" ";
 position:absolute;
 top:100%;
 left:14px;
 width:0;
 height:0;
 border-width:20px;
 border-style:solid;
 border-color:transparent;
 border-top-color:#333;
}
#heading04:after{
 content:" ";
 position:absolute;
 bottom:-27px;
 left:18px;
 width:0;
 height:0;
 border-width:14px;
 border-style:solid;
 border-color:transparent;
 border-top-color:#e8e8e8;
} 

アメリカン風吹き出し

 /* 05.アメリカンな(?)吹き出し */
#heading05{
 position:relative;
 padding:5px 20px;
 font:bold 28px/1.6 Arial, Helvetica, sans-serif;
 color:#333;
 background:#fff;
 text-shadow:
  1px 1px 0 #fff,
  2px 2px 0 #999;
 border-top:#333 solid 3px;
 border-bottom:#333 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
   from(   rgba(255, 255, 255, 0.0)), 
   color-stop(0.4, rgba(255, 255, 255, 0.0)), 
   color-stop(0.4, rgba(0, 0, 0, 0.1)), 
   color-stop(0.6, rgba(0, 0, 0, 0.1)), 
   color-stop(0.6, rgba(255, 255, 255, 0.0)),
   to(    rgba(255, 255, 255, 0.0))
   );
 background-image: -webkit-linear-gradient(top -45deg,
   transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
   );
 background-image: -moz-linear-gradient(top -45deg,
   transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
   );
 background-image: -o-linear-gradient(top -45deg,
   transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
   );
 background-image: linear-gradient(to bottom -45deg,
   transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
   );
 background-size:4px 4px;
}
#heading05:before{
 content:" ";
 position:absolute;
 top:100%;
 left:24px;
 width:0;
 height:0;
 border-width:12px;
 border-style:solid;
 border-color:transparent;
 border-top-color:#333;
}
#heading05:after{
 content:" ";
 position:absolute;
 top:100%;
 left:28px;
 width:0;
 height:0;
 border-width:8px;
 border-style:solid;
 border-color:transparent;
 border-top-color:#f0f0f0;
 z-index:1;
} 

付箋

 /* 06.付箋 */
#heading06{
 position:relative;
 margin:0 22px 0 10px;
 padding:14px 15px 0px 20px;
 font:normal 24px/1.3 serif;
 color:#009;
 background:#ffc;
 box-shadow:
  12px 0 0 0 #ffc,
  0 12px 0 0 #ffc,
  1px 15px 4px -3px rgba(0,0,0,0.2);
}
#heading06:before{
 content:" ";
 position:absolute;
 top:100%;
 left:100%;
 width:0;
 height:0;
 border-width:12px 12px 0 0;
 border-style:solid;
 border-color:transparent;
 border-top-color:#cc9;
}
#heading06:after{
 content:" ";
 position:absolute;
 padding:0 20px;
 bottom:0;
 left:10px;
 width:120px;
 height:20px;
 background:rgba(255,182,182,0.4);
 -webkit-transform: rotate(-1deg);
 -moz-transform: rotate(-1deg);
 -o-transform: rotate(-1deg);
 transform: rotate(-1deg);
} 

メタリカル

 #heading07{
 position:relative;
 margin:0 10px;
 padding:10px 10px 10px 30px;
 font:bold 22px/1.2 Arial, Helvetica, sans-serif;
 color:#666;
 background:#ccc;
 border-top:#ccc solid 1px;
 border-right:#999 solid 1px;
 border-bottom:#999 solid 1px;
 border-left:#ccc solid 1px;
 text-shadow:1px 1px 0 rgba(255,255,255,1);
 box-shadow:
  0 0 0 1px rgba(255,255,255,0.5) inset;
    background-image: -webkit-gradient(linear, left top, left bottom,
   from(    rgba(220, 220, 220, 1.0)), 
   color-stop(0.25, rgba(240, 240, 240, 1.0)),
   color-stop(0.30, rgba(235, 235, 235, 1.0)),
   color-stop(0.36, rgba(240, 240, 240, 1.0)),
   color-stop(0.50, rgba(235, 235, 235, 1.0)),
   color-stop(0.80, rgba(215, 215, 215, 1.0)),
   to(     rgba(210, 210, 210, 1.0))
   );
 background-image: -webkit-linear-gradient(top,
   rgba(220, 220, 220, 1.0), 
   rgba(240, 240, 240, 1.0) 25%,
   rgba(235, 235, 235, 1.0) 30%,
   rgba(240, 240, 240, 1.0) 36%,
   rgba(235, 235, 235, 1.0) 50%,
   rgba(215, 215, 215, 1.0) 80%,
   rgba(210, 210, 210, 1.0)
   );
 background-image: -moz-linear-gradient(top,
   rgba(220, 220, 220, 1.0), 
   rgba(240, 240, 240, 1.0) 25%,
   rgba(235, 235, 235, 1.0) 30%,
   rgba(240, 240, 240, 1.0) 36%,
   rgba(235, 235, 235, 1.0) 50%,
   rgba(215, 215, 215, 1.0) 80%,
   rgba(210, 210, 210, 1.0)
   );
 background-image: -o-linear-gradient(top,
   rgba(220, 220, 220, 1.0), 
   rgba(240, 240, 240, 1.0) 25%,
   rgba(235, 235, 235, 1.0) 30%,
   rgba(240, 240, 240, 1.0) 36%,
   rgba(235, 235, 235, 1.0) 50%,
   rgba(215, 215, 215, 1.0) 80%,
   rgba(210, 210, 210, 1.0)
   );
 background-image: linear-gradient(to bottom,
   rgba(220, 220, 220, 1.0), 
   rgba(240, 240, 240, 1.0) 25%,
   rgba(235, 235, 235, 1.0) 30%,
   rgba(240, 240, 240, 1.0) 36%,
   rgba(235, 235, 235, 1.0) 50%,
   rgba(215, 215, 215, 1.0) 80%,
   rgba(210, 210, 210, 1.0)
   );
}
#heading07:before{
 content:" ";
 position:absolute;
 top:0;
 left:15px;
 width:0;
 height:100%;
 border-left:#ccc solid 1px;
}
#heading07:after{
 content:" ";
 position:absolute;
 top:0;
 left:16px;
 width:0;
 height:100%;
 border-right:#eee solid 1px;
} 

モザイク

 #heading08{
 position:relative;
 margin:0 10px;
 padding:0 10px 0 55px;
 font:bold 22px/40px Arial, Helvetica, sans-serif;
 color:#666;
 background:#f3f3f3;
 z-index:1;
}
#heading08:before{
 content:" ";
 position:absolute;
 top:0;
 left:0;
 width:40px;
 height:40px;
 border-right:#fff solid 2px;
 background:#f60;
    background-image: -webkit-gradient(linear, left top, left bottom,
   from(    rgba(255, 255, 255, 0.0)), 
   color-stop(0.20, rgba(255, 255, 255, 0.0)), 
   color-stop(0.20, rgba(255, 255, 255, 0.1)), 
   color-stop(0.40, rgba(255, 255, 255, 0.1)), 
   color-stop(0.40, rgba(255, 255, 255, 0.3)), 
   color-stop(0.60, rgba(255, 255, 255, 0.3)), 
   color-stop(0.60, rgba(255, 255, 255, 0.5)), 
   color-stop(0.80, rgba(255, 255, 255, 0.5)), 
   color-stop(0.80, rgba(255, 255, 255, 0.6)), 
   to(     rgba(255, 255, 255, 0.6))
   );
 background-image: -webkit-linear-gradient(top,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
 background-image: -moz-linear-gradient(top,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
 background-image: -o-linear-gradient(top,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
 background-image: linear-gradient(to bottom,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
   z-index:-1;
}
#heading08:after{
 content:" ";
 position:absolute;
 top:0;
 left:0;
 width:40px;
 height:40px;
    background-image: -webkit-gradient(linear, left top, right top,
   from(    rgba(255, 255, 255, 0.0)), 
   color-stop(0.20, rgba(255, 255, 255, 0.0)), 
   color-stop(0.20, rgba(255, 255, 255, 0.1)), 
   color-stop(0.40, rgba(255, 255, 255, 0.1)), 
   color-stop(0.40, rgba(255, 255, 255, 0.3)), 
   color-stop(0.60, rgba(255, 255, 255, 0.3)), 
   color-stop(0.60, rgba(255, 255, 255, 0.5)), 
   color-stop(0.80, rgba(255, 255, 255, 0.5)), 
   color-stop(0.80, rgba(255, 255, 255, 0.6)), 
   to(     rgba(255, 255, 255, 0.6))
   );
 background-image: -webkit-linear-gradient(left,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
 background-image: -moz-linear-gradient(left,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
 background-image: -o-linear-gradient(left,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
 background-image: linear-gradient(to right,
   transparent 20%,
   rgba(255, 255, 255, 0.1) 20%, 
   rgba(255, 255, 255, 0.1) 40%, 
   rgba(255, 255, 255, 0.3) 40%, 
   rgba(255, 255, 255, 0.3) 60%, 
   rgba(255, 255, 255, 0.5) 60%, 
   rgba(255, 255, 255, 0.5) 80%, 
   rgba(255, 255, 255, 0.6) 80%, 
   rgba(255, 255, 255, 0.6) 100%
   );
   z-index:-1;
} 

 /* 09.旗 */
#heading09{
 position:relative;
 margin:0 20px 0 20px;
 padding:10px 15px;
 font:bold 22px/1.2 Arial, Helvetica, sans-serif;
 color:#fff;
 background:#c33;
}
#heading09:before{
 content:"<";
 position:absolute;
 top:middle;
 left:-10px;
 width:0;
 height:0;
 font-size:25px;
 line-height:1.0;
 color:#c96;
}
#heading09:after{
 content:" ";
 position:absolute;
 top:-2px;
 left:-10px;
 width:0;
 height:130%;
 border:#600 solid 2px;
 border-radius:2px;
 -webkit-transform: rotate(-2deg);
 -moz-transform: rotate(-2deg);
 -o-transform: rotate(-2deg);
 transform: rotate(-2deg);

}