▼gifアニメでバナー作成
200×200で作成します。
保存版！Photoshop用無料グラデーション750個+まとめ - Photoshop VIP
ここからグラデーションをダウンロード
デスクトップに展開してから、ダブルクリックすると、そのままphotoshopのグラデーションプリセットに追加されます。
▼今回わたしは、こちらをダウンロードしました★
◉文字にグラデーションをかける。
背景の上に新規レイヤーを追加し、文字を黒で書きます。
次に一番後ろに新規でレイヤーを追加し、グラデーションツールで先ほどダウンロードしたモノの中から好きな色のゲラデーションを選択し、適当にこんな感じにします。
これは後から修正できるので、ここでこだわらなくても大丈夫。
2つのレイヤーを結合し、描画モードをスクリーンにし、黒をすかして背景のグラデが文字の色に。
すごく基本中の基本だけど、きっと使う場面は多いと思います！！
小さな事から積み重ねを、ですね★
▼シークレットモード
最近Google Chromeに「シークレットモード」という機能があることをはじめて知ったので調べてみました★
シークレットモードとは、
- 閲覧履歴を残したくないとき
- PC画面を人に見せなくてはいけないとき、友達をPCを共有しているときなど、パスワードや個人情報をPCに記録したくないとき
こんなときに役立ちます！！
ショートカットキーは、Control＋Shift＋N です。
閉じるときは普通にバツでおっけいです！！
▼ちなみに押すとこんな画面が
シークレットモードがあれば、
いろんなものにログインしても×閉じたら全部履歴消えて安全ですね！！
（ただし、プラグイン使えないなどの、機能が減るというネガティブな面も。）
ネッカフェなどでも活用しちゃいましょう★
▼trackback
トラックバックとは、ブログの機能の一つで、別にブログへリンクを張った際に、リンク先の相手に対して「リンクを張った事をはりましたよーーー」と、お知らせする機能のことです。
ブログを書いた人が別のブログの記事を参照して自分のサイトにコメントを載せる場合、元の記事へのリンクをはるのが一般的です。
しかし、単にリンクしただけではもとの記事を書いた人はどこからどうリンクされているのか知る事ができませんよね。
このとき登場するのが、「トラックバック」！！
トラックバックを使えば、リンク記事のURLやタイトル、内容の要約などが送信されます。
トラックバックされはサイトは、この情報をもとに
「この内容の記事を参照している記事一覧」を自動的に作る事が出来るんです！！
ちなみに、相手に送信されるトラックバック通知の事を
「トラックバック ピング」
通知の送信先を
「トラックバックURL」と言います
いまや多くのグログ記事にの隅に
「この記事へのトラックバックURL」という表記があるのを見ますよね！！
今手がけているwordpressでも入れれるようになったので
いつか自分でブログをカスタマイズするときに活用していきたいです★
トラックバックとは 【 trackback 】 - 意味/解説/説明/定義 ： IT用語辞典
▼RSS
RSS：ニュースやブログなどウェブサイトの更新情報を簡単にまとめて
データを配信する機能。
▼下記のように、RSSには名前が同じでも複数の名称があるんです
例えば、ブログの更新情報の配信。
ニュースサイトの最新ニュースや放送局の番組情報の配信。
企業のプレスリリース、新商品情報、サポート情報の配信。
音声データファイルを後悔するためのポッドキャスティング。
こーーーんなにネット上では大活躍しているんですね！
▼RSSに対応しているウェブサイトであることを明確にするために、
下記のような表示で共通化しています。よくみますよね！！
さて、そんなRSSですが、ブログでは一般的に「購読」にあたるものです。
『RSSを購読する』には、必要なものがあるんです。
それは「RSSリーダー」というものです。
これは、現在いくつかの企業が有料または無料で提供しているのですが、1番手軽に使えちゃうのはGoogleリーダーです。
無料、初心者でも簡単。。。わたしにはもってこいの機能です。さすがGoogle先生だ★笑
▼アカウントつくってこちらからどうぞ★
http://www.google.com/reader/about/
以上、何気なく聞いてはいたけどあまりわからなかったRSSを理解しよう！の解説でした！！
参考：「RSS」の検索結果 - Webデザイン初心者の勉強 | 求職者支援訓練 6月9日開講クラス
▼WEBカラー
今までサイトを作る上で、あまり気にしていなかった『Webカラー』ですが、
最近重要な事に気づきました！w
ユーザーの多いWindowsとMacintoshの両方で、ほぼ同じように表示される可能性の高い216色を選んだものを『 Webセーフカラー 』と言います。
Webセーフカラーは、サイト内で共通して使える画像やサイトの新保売るカラーなどどの環境で見ても変わってほしくないというところに使います。
そのため、かならずWebセーフカラーを使わなければならないと言うものではありません。
もしWebセーフカラー以外のものを使う場合は、モニタの表示色数を256色モードなど、色数の少ないモードをにして見たときと、フルカラーにして見たときとで表示結果に大きな差が出る可能性を考えた上でサイトを作る事を意識しましょう！！
目立つ部分は「Webセーフカラー」を使って、どうでもいいような目立たないところにそれ以外の色を使うのはありですよね！！
▼Photoshopでの設定
▼CSS -section-
■section■
<body>
<header>
<h1>私のブログ</h1>
</header>
<article>
<h1>私のブログの投稿</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- この aside は article の中なのでこの aside のコンテンツは、その article そのものに直接的に関係したものだと解釈するはずだ。 -->
<h1>解説</h1>
<dd>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dd>
</aside>
</article>
<aside>
<!-- この aside は記事の外に出してある。そのため、そのコンテンツがページには関係するが、上の articleに深く関係している訳ではない。 -->
<h2>ブログロール</h2>
<ul>
<li><a href="#">私の友達</a></li>
<li><a href="#">私の他の友達</a></li>
<li><a href="#">私の親友</a></li>
</ul>
</aside>
</body>
◉aisde：補足情報
asideは、あまり重要でないコンテンツに使う。
ef) ブログロール、補助的な記事・ナビゲーション、ページに関連するのであれば広告にも。
※article要素の中で使うのであれば、解説など、その記事に関連したコンテンツ。
コンテンツのスタイルのために使わない！
メインのコンテンツほど重要な役割を持たないだけれど、それがページや記事に関連しているなら、ビジュアル、デザインの有無にかかわらずasideが適切。
（asideはサイドバーをコーディングするときに使用してもいい）
◉article：記事
articleは、ブログの記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップするときにつかう
◉nav ：ナビゲーション
◉section（×div）
sectionは、文章の構成を示すもの（本の目次を作る感覚で）
見出しとそれに関する内容と続くように、アウトラインになる範囲を定義する領域
（本来、ドキュメントはセクションの固まり／website blog 書籍）
sectionを使う間迷ったら、章や節を表す、h1~h6の見出しが付けれるかどうか考える
（見出しは必ずならず含まれる）
コンテナ要素ではないので、レイアウト目的で使わない（スタイリングのときはdiv）
※CSSでレイアウトするときは、classやidを使う
▼display:inline▼
liは、floatでなくても横並びに出来ます★
『 inline 』を使います！！
▼やり方
div#footer（BOX）にulでli書き出す
■HTML■
<div id="footer">
<p><small>Copyright © Sample Stylesheet Company All Rights Reserved.</small></p>
<ul class="nav">
<li><a href="#">トップページ</a></li>
<li><a href="#">ソリューション</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">パートナー</a></li>
<li><a href="#">カスタマー</a></li>
<li><a href="#">会社概要</a></li>
<li class="last"><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /#footer -->
■CSS■
#footer {
color: #FFF;
background: #333;
padding: 20px;
height: 120px;
}
#footer p {
color: #CCC;
font-size: 12px;
text-align: center;
margin: 20px auto;
}
#footer ul.nav {
width: 960px;
font-size: 13px;
}
#footer li a:link, #footer li a:visited {
color: #FFF;
padding: 0 8px;
border-right: 1px solid #FFF;
}
#footer li a:hover {
color: #FC0;
}
#footer li.last a {
border-right: none;
}
■SCC■~display:inline~
#footer {
color: #FFF;
background: #333;
padding: 20px;
height: 120px;
}
#footer p {
color: #CCC;
font-size: 12px;
text-align: center;
margin: 20px auto;
}
#footer ul.nav {
width: 960px;
font-size: 13px;
text-align: center;
}
#footer ul.nav li {
display: inline;
}
#footer li a:link, #footer li a:visited {
color: #FFF;
padding: 0 8px;
border-right: 1px solid #FFF;
}
#footer li a:hover {
color: #FC0;
}
#footer li.last a {
border-right: none;
}
