広告 おまじない

HP作成ソフト「HAIK」画像上に文字を表示させるおまじない

2019年4月23日

画像に文字を挿入するプラグイン

HAIK(QHM)にてホームページを作成する際に覚えておくと便利なおまじないに、画像に文字を表示するおまじないがございます。

ホームページを作成する際には文字だけのホームページってなんとなく読みづらいので、その文章のイメージにあった画像などを適度に貼りつけますよね。

そしてそのまま画像を貼り付けるだけでもいいのですが、ここで一手間加えて画像に文字(文章)を加えることで更にその書かれている内容をイメージしやすくするために利用するおまじないになります。

 

HAIKの編集画面で画像に文字を挿入することができるおまじない

ホームページ作成時に貼り付ける画像に文字を書き込むことは出来ません。

文字付の画像を貼り付ける際には一旦別の画像編集ソフトを立ち上げ、そのソフト上で画像を加工してからホームページに貼り付けます。

しかしHAIKのおまじないの中には貼り付けた画像に直接文字を書き込める便利なおまじないがございます。

それでは実際にどのように画像に文字が書き込めるのか説明していきます。

 

画像に文字(文章)を書き込む方法

先ずは実際に下記の画像をご覧ください。

今ご覧になられているサイトはホームページの作り方などを説明しているでこの様の画像(パソコンなどの画像)をよく使うのですが、これだけでもパソコンで何かをやろうとしているというイメージはつきやすいかと思います。

しかしこれだけではなんとなく物足りないので更に一手間加えて画像の中に文字(文章)を書き込んでいきます。

画像に文字を書き込めるおまじない

実際に画像に文字を書き込んだ状態

 

先ほどもお伝えいたしましたが、通常この様に画像上に文字を書き込む際には画像編集ソフトを利用し文字を書き込みます。

しかしここでご紹介する「おまじない」を使えば簡単に画像に文字を書き込むことが可能になります。

コチラではホームページ作成時あると便利な画像編集ソフトなどについて説明しています

 

HAIKで画像に文字を書き込むおまじない「#section」

HP作成ソフトのHAIKの編集画面で画像に文字が書き込める「おまじない」は「#section」を使います。

おまじないコード

#section(ここに画像を挿入,,画像の高さを記入 例450){{
ここに文字を書く
}}

コピペして使ってね!!

上記の書き方だけでは分からないという方の為に実際に上記の画像の記述を記載いたします。どこが違うか上の「おまじない」と比較してみると分かりやすいかと思います。

おまじないコード

#section(auto-IwssrU.jpg,,450){{
&deco(#FFFFFF){実際に文字を記入した状態がこちらです。};
&deco(#FFFFFF){この「おまじない」を使うと、少しプロっぽい感じになるか と思います。};
}}

スポンサーリンク

画像に書き込まれた文字の色を変更する

画像の中の文字の色を変えるには、文字の色を変えたい文字を選択し編集画面で文字の変更を行えば文字の色を変えることが出来ます。

因みに文字の色を変える記述は下記の記述になります

おまじないコード

&deco(#FFFFFF){ここに文字を書く};

 

画像を固定するこで文字がスクロールして見えるようにも出来る

さらに、もう少し手を加える場合は画像を固定してしまう方法もあります。

画面をスクロールすると画像は固定されているので、今までとはまた違った感じがするはずです。

あなたのアイデア次第で色々な使い方が出来ると思います。

画像を固定する「おまじない」は「fix」を使います。

おまじないコード

#section(ここに画像を挿入,,画像の高さを450,fix){{
ここに文字を書く
}}

コピペして使ってね!!

ホームページに一手間加えてプロ仕様のホームページを作ろう

ここでご紹介した「おまじない」の利用頻度はそれほど多くないのかも知れませんが、上手に使いこなすと素人が作ったホームページからプロが作った様なホームページへ変化します。

今までなんとなく「素人っぽいホームページだぁ」って思っていた方は画像などにも少し変化を付けてみてはいかがでしょうか!

またコチラでは画像の表示方法を変える「おまじない」や画像を回り込ませる「おまじない」もご紹介していますので是非ご覧になってください

ホームページの作り方手順

-おまじない
-, , ,