Dreamers!でお小遣い稼ごう 今すぐ無料登録

Dreamersをつかいこなそう!【テキスト装飾編】

Dreamers!

Dreamersをつかいこなそう!【テキスト装飾編】
日本で一番簡単にビットコインが買える取引所 coincheck bitcoin

あなたもこれで装飾男子/女子【テキスト装飾編】

Dreamersでアンカーサイトを作っている時
記事の中のテキストのサイズを大きく(小さく)
したい、色をつけたいアンダーライン
ラインマーカーのようにしたい。


でも、やり方がよくわからない?


HTMLタグ?セレクタ?プロパティって何?

ネットで調べても言葉の意味がよくわからない!
まるで呪文!そんなお悩みありませんか?


今回は、テキストの装飾に関するいくつかの
方法を紹介します

仕組みがわかれば、な〜んだ簡単!

記事の中のテキストに色を付けたり、サイズ
を変えた、下線をひいたりするのは、
Chromeやインターネットエクスプローラー
等のWebブラウザーに、そのテキストを
どのように表示させたいのかを指示する
命令(属性)を付け加えてあげればOKです。

色をつけたい」そして
下線も引きたい」さらに
ラインマーカーも入れたい
といった場合も、色をつける color属性、
下線をひく text-decoration属性、
マーカーをひく、background-color属性
をお作法に従って指定してあげます。

Dreamers!では、どこに書けばいいの?

この、呪文のようなHTMLタグをDreamersの
アンカーサイトに反映させるには、
HTMLタグ」のところに書いて下さい。

いつも書いている「テキスト」のところに
書いても反映しませんので注意して下さい!

HTMLはここに書く

色をつける際に注意すること

テキストに色をつけると、記事にアクセント
がついて華やかになり見栄えも良くなります
しかし、あまり彩色に凝りすぎると記事を
書くことよりも彩色に時間をとられてしまい
がちになります。
経験者談(^_^;)

また、色を使いすぎると、かえって記事が
読みづらくなりますので、彩色はホドホドに!

それでは、さっそく始めましょう

テキストの途中で改行するには?

やりかた改行したい位置に <br> を入れます
サンプルこれは1行目です<br>ここから2行目です
結  果これは1行目です
ここから2行目です

文字を強調(太字に)するのは?

やりかた強調したいところを<strong></strong>で挟みます
サンプルこれは、<strong>サンプル</strong>です
結  果これは、サンプルです

部分的に文字のサイズを変えるには?

やりかたサイズを変えたいところを<span style = "font-size: サイズ;"></span>で挟みます
サンプルテキストを部分的に<span style = "font-size: 20px;">20ポイント</span>にします
結  果テキストを部分的に20ポイントにします

テキストの一部に色をつけるには?

やりかた色をつけたいところを<span style= "color:xxxxxx;" ></span>で挟みます。
xxxxxxのところは、下の表の色コード または カラー名を入れて下さい。
サンプルテキストに<span style= "color: red;" >赤い色</span>をつけます
結  果テキストに赤い色をつけます

テキストにラインマーカーをひくには?

やりかたラインマーカーしたいところを<span style= " background-color:xxxxxx;" ></span>で挟みます。
xxxxxxのところは、下の表の色コード または カラー名を入れて下さい。
サンプルテキストの一部に<span style= "background-color: #yellow;" >黄色いマーカー</span>をひきます
結  果テキストの一部に黄色いマーカーをひきます

テキストに下線・取り消し線・上線をひくには?

やりかた下線や上線をひきたいところを<span style=" text-decoration: xxxxxxxxx;" ></span>で挟みます。
xxxxxxxxxの部分には、underline 下線
または line-through 取り消し線
または overline 上線を入れて下さい。

線に色をつけるには、text-decoration-color:色;を指定して下さい。
サンプル <span style= "text-decoration: underline; text-decoration-color:red;" >下線を赤色でひいています</span>

<span style= "text-decoration: line-through; text-decoration-color:red;" >取り消し線を赤色でひいています</span>

<span style= "text-decoration: overline; text-decoration-color:green;" >上線を緑色でひいています</span>

<span style= "color: green; text-decoration: overline line-through underline; text-decoration-color:red;" >3本ともひいてみました</span>
結  果下線を赤色でひいています

取り消し線を赤色でひいています

上線を緑色でひいています

3本ともひいてみました

テキストにその他の線をひくには?

やりかた特殊な下線をひきたいところを<span style=" text-decoration: underline; text-decoration-style: xxxxxx;" ></span>で挟みます。
xxxxxxには、double 二重線、dotted 点線、dashed 破線、wavy 波線などがあります。
いろいろ試して見てくださいね
サンプル

結  果
<span style= "text-decoration: underline; text-decoration-style: double; text-decoration-color:red;" >赤い二重線をひいています</span> → 赤い二重線をひいています

<span style= "text-decoration: underline; text-decoration-style: dotted; text-decoration-color:blue;" >青い点線をひいています</span> → 青い点線をひいています

<span style= "text-decoration: underline; text-decoration-style: dashed; text-decoration-color:green;" >緑の破線をひいています</span> → 緑の破線をひいています

<span style= "color: blue; text-decoration: underline; text-decoration-style: wavy; text-decoration-color:red;" >青い文字に赤い波線をひいています</span> → 青い文字に赤い波線をひいています

(小)見出しの背景やテキストに色をつけるには?

やりかたDreamersの「見出し」を使わず、「HTMLタグ」に記入して下さい

見出しのテキストを<h2 style= "text-align:center; color: xxxxxx; background-color: xxxxxx" ></span>で挟みます。
xxxxxxのところは、下の表の色コードまたはカラー名を入れて下さい。

小見出しの場合は、<>の中がh2ではなく、h3になります
サンプル
見出し
<h2 style= "text-align:center; color: steelblue; background-color: gainsboro;" >これであなたも装飾男子/女子【テキスト装飾編】</h2>
結  果

これであなたも装飾男子/女子【テキスト装飾編】

サンプル
小見出し
<h3 style= "text-align:center; color: steelblue; background-color: gainsboro;" >仕組みがわかれば、な〜んだ簡単!</h3>
結  果

仕組みがわかれば、な〜んだ簡単!

次回の予定

次回以降、以下のテーマを予定しています。

  • テキスト装飾編 (今回)
  • 表を作ってみよう!
  • 画像を小さくしてみよう!
  • その他、小技紹介

色コード表

以下の表は色コード表です。
各カラムの上段に色コード、
下段にカラー名を表示しています。

色コードを指定する時は#を付けて
指定して下さい。

#000000
black
#000080
navy
#00008b
darkblue
#0000cd
mediumblue

#0000ff
blue
#006400
darkgreen
#008000
green
008080
teal

#008b8b
darkcyan
#00bfff
deepskyblue
#00ced1
darkturquoise
#00fa9a
mediumspringgreen

#00ff00
lime
#00ff7f
springgreen
#00ffff
aqua または cyan

#191970
midnightblue
#1e90ff
dodgerblue
#20b2aa
lightseagreen
#228b22
forestgreen

#2e8b57
seagreen
#2f4f4f
darkslategray
#32cd32
limegreen
#3cb371
mediumseagreen

#40e0d0
turquoise
#4169e1
royalblue
#4682b4
steelblue
#483d8b
darkslateblue

#48d1cc
mediumturquoise
#4b0082
indigo
#556b2f
darkolivegreen
#5f9ea0
cadetblue

#6495ed
cornflowerblue
#66cdaa
mediumaquamarine
#696969
dimgray
#6a5acd
slateblue

#6b8e23
olivedrab
#708090
slategray
#778899
lightslategray
#7b68ee
mediumslateblue

#7cfc00
lawngreen
#7fff00
chartreuse
#7fffd4
aquamarine
#800000
maroon

#800080
purple
#808000
olive
#808080
gray
#87ceeb
skyblue

#87cefa
lightskyblue
#8a2be2
blueviolet
#8b0000
darkred
#8b008b
darkmagenta

#8b4513
saddlebrown
#8fbc8f
darkseagreen
#90ee90
lightgreen
#9370db
mediumpurple

#9400d3
darkviolet
#98fb98
palegreen
#9932cc
darkorchid
#9acd32
yellowgreen

#a0522d
sienna
#a52a2a
brown
#a9a9a9
darkgray
#add8e6
lightblue

#adff2f
greenyellow
#afeeee
paleturquoise
#b0c4de
lightsteelblue
#b0e0e6
powderblue

#b22222
firebrick
#b8860b
darkgoldenrod
#ba55d3
mediumorchid
#bc8f8f
rosybrown

#bdb76b
darkkhaki
#c0c0c0
silver
#c71585
mediumvioletred
#cd5c5c
indianred

#cd853f
peru
#d2691e
chocolate
#d2b48c
tan
#d3d3d3
lightgrey

#d8bfd8
thistle
#da70d6
orchid
#daa520
goldenrod
#db7093
palevioletred

#dc143c
crimson
#dcdcdc
gainsboro
#dda0dd
plum
#deb887
burlywood

#e0ffff
lightcyan
#e6e6fa
lavender
#e9967a
darksalmon
#ee82ee
violet

#eee8aa
palegoldenrod
#f08080
lightcoral
#f0e68c
khaki
#f0f8ff
aliceblue

#f0fff0
honeydew
#f0ffff
azure
#f4a460
sandybrown
#f5deb3
wheat

#f5f5dc
beige
#f5f5f5
whitesmoke
#f5fffa
mintcream
#f8f8ff
ghostwhite

#fa8072
salmon
#faebd7
antiquewhite
#faf0e6
linen
#fafad2
lightgoldenrodyellow

#fdf5e6
oldlace
#ff0000
red
#ff00ff
magenta または fuchsia

#ff1493
deeppink
#ff4500
orangered
#ff6347
tomato
#ff69b4
hotpink

#ff7f50
coral
#ff8c00
darkorange
#ffa07a
lightsalmon
#ffa500
orange

#ffb6c1
lightpink
#ffc0cb
pink
#ffd700
gold
#ffdab9
peachpuff

#ffdead
navajowhite
#ffe4b5
moccasin
#ffe4c4
bisque
#ffe4e1
mistyrose

#ffebcd
blanchedalmond
#ffefd5
papayawhip
#fff0f5
lavenderblush
#fff5ee
seashell

#fff8dc
cornsilk
#fffacd
lemonchiffon
#fffaf0
floralwhite
#fffafa
snow

#ffff00
yellow
#ffffe0
lightyellow
#fffff0
ivory
#ffffff
white

原色大辞典では、もっといろいろな色コードが掲載されています。


無料ブログ作成ツール Dreamersのご紹介

無料キュレーションサイト作成ツール
Dreamers」を使用すれば、いま話題の
おまとめサイト(キュレーションサイト)が、
簡単にしかも無料で作成できます。

あなたが作成する記事に色々な画像や動画、
ツイートを集めてきてくれる機能や、
キーワード入力すると自動で記事を提案
してくれるサジェスト記事作成機能も
備わっており、誰でも簡単に、自分の
キュレーションサイトが無料で作れます。

記事のジャンルは、「旅行」「ニュース」
「美容・健康」「ゲーム」「ノンジャンル」
「ペット」「自動車」の7つがあり、
それぞれのジャンルであなたのサイトを
作ることができます。
(このサイトもDreamers で作成しています。)

1
  • キュレーションサイトが無料で作れる!今すぐDreamersを始めよう

関連記事

ピックアップ!

キュレーションサイトが無料で作れる!今すぐDreamersを始めよう

タグ

月別アーカイブ

藤沢涼×高嶋美里!普通の人が1億円作る為の設計図 無料プレゼント!