こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
どろっぷしっぴんぐ研究所では、7/22（土）に2つのセミナーを開催します。
どちらも、ドロップシッピングを初めて間もない方が対象の講座です。
▼7月22日（土）10:00開講
わずか2,000円で学べるノウハウ初級セミナー（東京・新宿開催）
▼7月22日（土）13:30開講
半日で短期習得！ ショップできすぎくん教室（東京・新宿開催）
午前中に開催するノウハウ初級セミナーは、
研究生制度1ヶ月間の無料体験受講が目玉特典となっています。
また、午後のショップできすぎくん教室は、
PCをお持ちいただける方を対象に、
ショップできすぎくんの操作が学べる貴重な機会です。
ページには記載していませんが、両方をご受講いただいた方には、
ドロップシッピング十戒 PDF版（税込1,980円）をプレゼントいたします。
（参考）ドロップシッピング十戒 PDF版
いずれも、少人数での開催ですので、
興味のある方はお早めにお申込みください。
さて、今週の執筆者はショップできすぎくんカスタマイズでおなじみの岡田祐子さんです。
今週もショップできすぎくんでもできちゃうCSSの話題です。
今回は、初心者でも簡単に文字に影をつけておしゃれなサイトに変身させる方法です。
サンプルページも用意してくれましたので、
参考にして楽しみながらショップ作りに取り組んでください。
では、今週もお楽しみください。
初心者でも簡単！ 文字に影をつけておしゃれなサイトに変身させる方法
皆さま、こんばんは！
岡田です。
前回は画像を丸く切り取るCSS「border-radius」属性を紹介しましたが、
今回も初心者でも簡単、おしゃれなサイトに変身させるCSSを紹介します。
もちろんショップできすぎくんでも可能です。
文字に影をつける「text-shadow」属性です。
影をつけることにより、文字が浮かび上がったように見え、暗い背景でも見やすく目立つようになります。
どんなことができるのか、見本のページを用意しましたのでこちらをご覧ください。
text-shadow属性とは
text-shadow属性とは文字に影を描画するCSSです。
影の<横方向の距離> <縦方向の距離> <ぼかし強度> <色>を指定することができます。
指定する単位は、pxやemやexなどが利用できます。
<横方向の距離>左右方向の影のずれの距離を指定します。
正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
<縦方向の距離>上下方向の影のずれの距離を指定します。
正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
<ぼかし強度>影のぼかし半径を指定します。
値が大きくなるとぼかしが強く広がったようになります。
<色>影の色を指定します。
基本指定
「ショップできすぎくん」というテキストに青い色の影をつけて見ましょう。
<div style=”text-shadow: 3px 3px 2px #0000FF;”>ショップできすぎくん</div>
指定の順番は
横方向・・・右に３px
縦方向・・・下に３px
ぼかし強度・・・２px
影の色・・・#0000FF（青）
応用編１
次に文字を大きくし、文字色を変えてみましょう。
ショップできすぎくんの機能を使い、文字サイズや色を指定します。
ここでは「太文字、文字サイズ32px、文字色をオレンジ色#FF6600」にしました。
書き出されるHTMLコードは次の通り。
<strong><font size=”6″ color=”#FF6600″>ショップできすぎくん</font></strong>
（注）指定する順やブラウザによって書き出されるHTMLコードが異なる場合があります。
これにtext-shadow指定を追加します。ショップできすぎくんで書き出されたHTMLコードを
挟み込むように以下のように指定します。ここでは茶色#663300の影をつけてみます。
最後の</div>を忘れないよう注意してください。
<div style=”text-shadow: 3px 3px 2px #663300;”>
<strong><font size=”6″ color=”#FF6600″>ショップできすぎくん</font></strong>
</div>
応用編２
text-shadow指定では複数の影をつけることも可能です。
以下のようにカンマ（ , ）で区切り指定します。
text-shadow: 2px 2px 1px #FFFFFF, 3px 3px 2px #663300;
応用すれば縁取り（アウトライン）をつけることもできます。
まとめ
画像処理ソフトには、文字に影や縁取りを付ける機能があります。
看板画像や、アイキャッチ画像でよく見かけますよね。
でもちょっとしたテキストの変更があった時、画像を作り直し、アップして、HTMLソースを書き換えて
などなど案外手間がかかります。
text-shadowを使えば、HTMLのテキストを変更するだけで済むので簡単です。
もちろん、画像の方が文字のサイズや太さなどが細かく指定でき、仕上がりも綺麗です。
利用する箇所、更新の頻度などを踏まえ、使い分けると良いのではないでしょうか。
———————————————————–
【今週の執筆者】岡田祐子
（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。
□ぐるめ通販トライアルのブログ
———————————————————–
それでは、次号もお楽しみに。
※この記事は2017年7月13日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。
メルマガのご登録はこちら
ドロップシッピング十戒（pdf版）好評発売中！
どろっぷしっぴんぐ研究所、初のデジタルコンテンツ
pdf版『ドロップシッピング十戒』好評発売中です。
上記のリンク先ではドロップシッピング十戒の一覧や目次も掲載しています。
ご覧いただいてぜひご注文ください。
