Ameba Owndで 文章の色を変える方法

今回は、Ameba Ownd を使って、美容室のホームページを作りました。


https://sentier.themedia.jp/

Ameba Owndは簡単にホームページを作ることができるシステムで、

選べるテンプレートの種類も多数、デザインセンスがいいということで、

経験を兼ねて 制作をしました。
 
美容室 sentier


 
sentier 美容室 (サンプル)
https://sentier.themedia.jp/
 

経験した中で、わかったことは、

文章の色の調節がしづらいという点です。

例えば、Ameba Owndで文章は、
 
文章の色や濃さなどが調節できません。

例えば、MAPと書かれた左側の文章がそれになります。

 
fontblack
 

今回は美容室のホームページということもあり、 

以下のように、左側の文章の色を薄めに
したかったので、

HTML

を使う方法で 左側の文章を表示することにしました。

明るい色

 



 

文章の色を変える方法
 
ページ編集画面にて、

住所や電話番号が書いてある部分を

選択すると、緑の枠が表示されます。

右上に、

ゴミ箱が表示されますので、

 
テキストボックスを消去

 
ゴミ箱クリックして消します。

すると以下の様になります。
 
becameonlymap

 

次に、

左側にある緑のhtmlブロックをクリックします。

地図だけになった

 
すると画面上にブロックが現れます。


HTMLのブロックを近づけた。

 
設置したい 地図の左側に近づけます。

緑の線が表示されたら、

クリックします。
 
すると、以下のようになります。
 
変わった。  

黒枠のHTML記入画面が現れますので。
 
HTML記入枠

 
以下のHTMLを記入していきます。


<span style="font-size:14px;color:#444;line-height:210%;">住所</span><br />
<span style="font-size:14px;color:#777;line-height:210%;">1491 Orange Street</span><br />
<span style=”font-size:14px;color:#777;line-height:210%;">Santa Monica, CA 90403</span><br />
<span style="font-size:14px;color:#444;line-height:210%;">電話番号</span><br />
<span style=”font-size:14px;color:#777;line-height:210%;”>001-415-928-3947</span>
 
 
うまくいきましたらOKボタンを押して下さい。
 

 
++++++++++++++++++++++++++++++

Macの テキストエディト から入力する場合

黒枠のHTMLの記入画面で、
1行目を return (リターン)を押し 改行します。

次に、
2行目の左側が点滅していた部分に、

HTMLを全て選択したままスライドすると、

簡単に、貼り付けができます。

++++++++++++++++++++++++++++++
 

HTMLコード入力

 
++++++++++++++++++++++++++++++
 
この状態を保存するために

画面右上にある、「ページの更新」 ボタンを押します。
 
ページを更新ボタン

 



 

 
次に、
 
画面 左上側にある「サイトを確認ボタン」を押して、
 
サイトの確認



表示を確認します。

MAPの左側にあった文字の黒色が、白っぽくなっていたら成功です。
 

成功です。

 



 

今回使った、HTMLの説明。
 
住所


span は文章に直接 色やサイズを変更したい時に使います。

<span style="  ">で始めて </span>で終わります。

font-size: は文字の大きさを表すことができます。

color: は文字色のこと、以下のホームページを使えば カラーが分かります。

原色大辞典
http://www.colordic.org

line-height: は文字と文字の下側の高さ合計して%で表示したもののです。


を使うと改行できます。

*太字の場合font-weight: bold;
 
参考ホームページ
HTMLクイックリファレンス
http://www.htmq.com/html/span.shtml
 

 



 

こちらのブログを読んでいただき
ありがとうございました。