BlueGriffonのテストページ

看板

見出し2は <h2>

見出し1は最上部のタイトルで使用。
「見出し1 <h1>」は見た目に「見出し2」よりも小さくても、Googleのクローラーはしっかりと認識するらしい。

フローニャンコの画像ト(float) は画像などの横に文章が回り込むので、雑誌のような感じで見た目は良いのだが、閲覧するデバイスのサイズに合わせて表示サイズが変わるレスポ ンシブには不向きなこともあり、最近めっきり見なくなった。


ちなみに左のニャンコは、これでも生後6ヶ月ほどの子にゃんこ。
好奇心と食欲が旺盛で、すでに体重が5kgほどあるらしい。

このページでソースを直接編集したのは、タイトル部分のグラデーションと、「見出し2」 の<h2>に書式だけ。
ただ、スタイル プロパティの「ALL PROPERTIES」で追加したマージンなどは、CSSの設定なので、「プレビュー」と「ソース」を比較しながら、デザイン部分のCSSと本文のHTMLを見ていれば、 そのうち何となく理屈が分かってきたりする。

動画のつもり

動画については直接動画ファイルをページに挿入することはできるものの、無料のレンタルサーバではアップ ロード可能なファイルサイズが10MB以下なので、無料サーバを使用するならBlueGriffonで動画ファイルを直接埋め込むのは現実的 ではない。

使用した「忍者ホームページ」はアップロード上限が3MBた、め上の動画はイメージ画像(笑)
クリックしても再生しません。

動画を掲載する現実的な方法としては、YouTubeなどへ一旦アップした後、埋め込みコードをソースへ 追加する。
その場合は、「ソース」を開いて、任意の場所に埋め込みコードの貼り付けが必要。

で、下の動画がYouTubeの埋め込みコードを「ソース」に追加したもの。


 
ページ上でコンテキストメニュー(右クリックメニュー)を表示させ、「ページのソースを表示」で、この ページのソースが確認できる。
ページの先頭部分にあるCSSの設定箇所と動画の部分で文字列がぎっしり詰まっているが、それ以外はシン プルなので、CSSの理屈も分かりやすいかも。


関連リンク

画像編集の定番フリーソフト

Copyright © 2010-2018 Office E.i.Z ALL Rights Reserved.