老後に備えるパソコン活用

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

簡単に使えるCSS　パート�B




Font Awesome
http://fontawesome.io/


「Font Awesome」＆CSSを使ってWebフォントをブログに掲載出来るテクニックをご紹介します。

Webフォントは、写真でもなく、フォント（文字）扱いなので、写真のようにアップロード＆加工する必要もありません。

決まったTAGをブログに貼り付けるだけで、絵文字のように簡単に可愛いキャラクタなどを文章に追加できます。


では、早速、どのようなものか見てみましょう。




まず最初に、以下のおまじないのようなコードをブログの中に貼り付けます。※なるべく、先頭に貼り付けましょう。

※リンクも含めた赤い部分、全部です。

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">


これは何をしているかと言うと、font-awesomeのサイトから、WEBフォントの部品を使う許可をもらっていると考えてください。この初期設定をしないと、以下のソースコードをいくら貼り付けしても無効になって使えません。


では、具体的なアイコンを見てみましょう。




fa-lg
fa-2x
fa-3x
fa-4x
fa-5x


ソースコード
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>


※fa-lg、fa-2x〜fa-5xというのは、WEBフォントの大きさを意味しています。分かりやすいように右側に書きました。
　
　好きな大きさの行をコピーして、ご自身のブログに貼り付けしてください。





fa-lg
fa-2x
fa-3x
fa-4x
fa-5x


ソースコード
<i class="fa fa-hand-o-right fa-lg" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-2x" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-3x" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-4x" aria-hidden="true"></i>
<i class="fa fa-hand-o-right fa-5x" aria-hidden="true"></i>





fa-lg
fa-2x
fa-3x
fa-4x
fa-5x


ソースコード
<i class="fa fa-taxi fa-lg" aria-hidden="true"></i>
<i class="fa fa-taxi fa-2x" aria-hidden="true"></i>
<i class="fa fa-taxi fa-3x" aria-hidden="true"></i>
<i class="fa fa-taxi fa-4x" aria-hidden="true"></i>
<i class="fa fa-taxi fa-5x" aria-hidden="true"></i>



どうですか？

Font AwesomeのWEBフォント、アイコンは、６００種類以上あるようです。以下のサイトでお好きなものを選んで見てくださいね。

http://fontawesome.io/icons/


また、フォントですので、色を簡単につけることも出来ます。

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

※色を付けるコードの書き方例
<span style="color:#006565;"><i class="fa fa-taxi fa-lg" aria-hidden="true"></i></span>
<span style="color:#FF0032;"><i class="fa fa-taxi fa-2x" aria-hidden="true"></i></span>
<span style="color:#32CB00;"><i class="fa fa-taxi fa-3x" aria-hidden="true"></i></span>
<span style="color:#32CBFF;"><i class="fa fa-taxi fa-4x" aria-hidden="true"></i></span>
<span style="color:#FF9832;"><i class="fa fa-taxi fa-5x" aria-hidden="true"></i></span>



color:#FF9832の部分をHTMLのカラーコードを変更することで、お好きな色に変更できます。

HTMLカラーコードのサイト
HTML color codes



補足：以下のようにすると、回転も出来ます。ご参考まで。

90度回転
180度回転
270度回転
左右反転
上下反転

ソースコード
<span style="color:#006565;"><i class="fa fa-taxi fa-lg fa-rotate-90" aria-hidden="true"></i> 90度回転</span>
<span style="color:#FF0032;"><i class="fa fa-taxi fa-2x fa-rotate-180" aria-hidden="true"></i> 180度回転</span>
<span style="color:#32CB00;"><i class="fa fa-taxi fa-3x fa-rotate-270" aria-hidden="true"></i> 270度回転</span>
<span style="color:#32CBFF;"><i class="fa fa-taxi fa-4x fa-flip-horizontal" aria-hidden="true"></i> 左右反転</span>
<span style="color:#FF9832;"><i class="fa fa-taxi fa-5x fa-flip-vertical" aria-hidden="true"></i> 上下反転</span>




ブログの文章の装飾に是非つかって見てください。(^^)/

簡単に使えるCSS　パート�A





前回からの引き続きです。数回に分けて、ブログで簡単に使える便利なCSSをご紹介します。

※CSSというのは、ホームページの装飾を補うプログラム言語と思ってください。


では、さっそく以下の例を表示します。


ご自身のブログやホームページに、ソースコードをコピー＆ペーストして貼り付ければOKです。

中の文章は、ご自由に変更してください。




◇見出し：囲み青


ソースコード
<div style="padding:13px 8px;border-color:#0040FF;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：囲み赤


ソースコード
<div style="padding:13px 8px;border-color:#FF0000;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：囲み緑


ソースコード
<div style="padding:13px 8px;border-color:#01DF01;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：囲み黄


ソースコード
<div style="padding:13px 8px;border-color:#FFBF00;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶし水色


ソースコード
<div style="padding:13px 8px;background:#CEF6F5;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶしピンク


ソースコード
<div style="padding:13px 8px;background:#F6CEF5;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶし薄緑


ソースコード
<div style="padding:13px 8px;background:#80FF00;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶし黄


ソースコード
<div style="padding:13px 8px;background:#F7D358;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>



※線の色を変更する場合には、
border-color:#FFBF00や、background:#F7D358
の#FFBF00の部分をHTMLのカラーコードを変更することで、お好きな色に変更できます。

HTMLカラーコードのサイト
HTML color codes



これから、ブログ作成に使える、簡単CSSテクニックを、数回に分けてご紹介していきます。





TVショッピングでお馴染みの真空パック【FoodSaver】

FoodSaverは日本でのシェアが非常に高い家庭用真空パック機です。

全世界では２０００万台も販売しています！

アウトドア用品メーカーのコールマンジャパンが提供する製品だから安心のブランド。

FoodSaverの真空保存なら鮮度が最大５倍も長持ちするんです！

身近な食材を真空パックで保存するので、目で見て伝わりやすい商品です。

今回から、数回に分けて、ブログで簡単に使える便利なCSSをご紹介します。

※CSSというのは、ホームページの装飾を補うプログラム言語と思ってください。


では、さっそく以下の例を表示します。今回は「囲み線」の装飾です。


ご自身のブログやホームページに、ソースコードをコピー＆ペーストして貼り付ければOKです。

中の文章は、ご自由に変更してくださいね。





ソースコード

<div style="border:2px dotted #555; border-color:#000000";>
<p>　点線（丸い点線） dotted

<p>　文字を入れてください

</div>





ソースコード

<div style="border:2px dashed #555; border-color:#0000FF">
<p>　破線（四角い点線） dashed

<p>　文字を入れてください

</div>





ソースコード

<div style="border:2px solid #555; border-color:#DF7401"">
<p>　実線 solid

<p>　文字を入れてください

</div>





ソースコード

<div style="border:5px double #555; border-color:#B40431"">
<p>　二重線 double

<p>　文字を入れてください

</div>





ソースコード

<div style="border:10px outset #999; border-color:#E6E6E6"">
<p>　立体枠 outset

<p>　文字を入れてください

</div>



※線の色を変更する場合には、
border-color:#E6E6E6""
の#E6E6E6の部分をHTMLのカラーコードを変更することで、お好きな色に変更できますよ。

HTMLカラーコードのサイト
HTML color codes



これから、ブログ作成に使える、簡単CSSテクニックを、数回に分けてご紹介していきます。

ブログを作成するときに、とりあえず文章と写真を用意しましょうと以前書きました。
それが出来たら、ホームページのデザインをちょっと考えてみましょう。

写真は、このブログを作成しているA8.netのFAN BLOGです。
管理画面からデザインを変更することが容易にできます。


※デザインはまだまだ多数用意されいます。

自分の好みに合ったものとするか。
それとも、
読者が好みそうなものとするか。

例えば、化粧品に関するブログを書いている場合には、そのサイトに合ったもので、白やピンクや花柄などを使うのが一般的ですよね。それは、ブログ作成者の好みかもしれないし、読者を考えてそうしているのかもしれません。





しかし、
同じような化粧品のブログを作成している人は星の数ほどあって、それが皆同じようなデザインであったなら、目立ちません。
中には、「OLさんが働いたあと、帰宅して夕飯を食べて、夜中にネットを見ているだろうから、よし！星空のような黒を基調としたデザインにしよう！」などと考えて、黒にする人がいるかもしれません。

特にアフィリエイトで広告収入を考えたり、なるべく一番目立つものにしたいと考えるなら、
あえて人と違うものを選択するのも良いかもしれません。

あなたは、自分の好みのデザインにしますか？　それとも、読者が好みそうなものにしますか？
デザインにおいても、自分主観、読者主観を考える必要があるのかもしれません。


老後に備えるアフィリエイト
A8.netのFAN BLOGで色々試してはいかがですか？