ブログの記事を書いていて、“こうしたいけど、どうしたら良いのだろう?”と思うことが多々あります。オリジナル・デザインを求めてhtmlやcssを書き直すなど、本格的な事は簡単にはいきませんが、初歩的な事であればコメントやトラックバックで、教え合うことができるかなと思います。僕も以前少し質問を頂いて、コメント上でお応えしたことがありました。
そこでこの「ブログ伝道師」カテゴリーを利用して、主としてブログに関するちょっとした情報のやり取りをする、コメントやトラックバックを利用した、Q&Aコーナーを作りたいと思います。
ちなみに参考として、最近良く聞かれるミニTIPSを2.3書いておきます。
記事の書き込み欄は基本的にhtmlのフィールドですので、タグ < > </> の使用によって記事をコントロールする事ができます。
先ず、リンク文字や画像を取り込む(リンクも付ける)ことは、それぞれのブログに機能ボタンなどが備わっていると思います。しかしリンクする場合に、多くは画面が直接リンク先に切り替わるようになっていないでしょうか? それだと読者がリンク先へ流れていってしまいます。
そんな時はtarget=_blankをタグの必要ヶ所に手動で追加して、別ウィンドウでリンク先が開くようにしてみましょう。
<a href="http://www.skyfull-stars.com">スカイフルスターズ</a>
に、target=_blankを挿入しておくと、
<a href="http://www.skyfull-stars.com"target=_blank>スカイフルスターズ</a>
となります。スカイフルスターズと、スカイフルスターズのリンクタイプの違いです。画像にリンクを付ける時も、その応用で別ウィンドウでリンク先が開きます。
Amazonアフィリエイトなどの場合のタグも、デフォルトでは画面がリンク先に切り替わる設定になっていますが、商品画像とリンク文字とを表すタグ部分の相当ヶ所にtarget=_blankをそれぞれ挿入することにより、別ウィンドウでリンク先を開く事ができます。
下の例が別ウィンドウでリンク先ページを開くタイプです。
次に、画像取り込みに関してですが、画像をセンター(左・右)に配置したいというニーズがあると思います。その場合は、
<p align="center(left・right)">と、</p>というタグで画像取り込みの一連のタグ群を挟みますと、画像の配置がコントロールできます。
続いて、画像の横に文字を流し込む場合ですが、画像取り込みのタグ群の中にalign="left(right)"を挿入することで、画像の位置が左・右になり、文字がその横に流し込まれます。その時、画像と文字との間を空ける為にhspace="10"(ピクセル数値は適宜)を追加します。
このように色々とhtmlのタグを使って記事の微調整ができますので、試してみて下さい。
最後に、この文の途中に区切り線が入っていますが、それは<hr>というタグを書けば実現します。必要であれば、<tr> </tr>といったテーブルタグを使って表作りもできます(表を非表示にしてアルバム的な写真のレイアウトも可能です)。
ブログサービスの競争が行われていけば、ユーザーの細かなニーズに対応して、いつか自動化されることだと思いますが、それまでは手動で記事づくりをせざるを得ません。その意味でも基礎的なhtmlは学んだ方が楽しいと思います。
そこでこの「ブログ伝道師」カテゴリーを利用して、主としてブログに関するちょっとした情報のやり取りをする、コメントやトラックバックを利用した、Q&Aコーナーを作りたいと思います。
ちなみに参考として、最近良く聞かれるミニTIPSを2.3書いておきます。
記事の書き込み欄は基本的にhtmlのフィールドですので、タグ < > </> の使用によって記事をコントロールする事ができます。
先ず、リンク文字や画像を取り込む(リンクも付ける)ことは、それぞれのブログに機能ボタンなどが備わっていると思います。しかしリンクする場合に、多くは画面が直接リンク先に切り替わるようになっていないでしょうか? それだと読者がリンク先へ流れていってしまいます。
そんな時はtarget=_blankをタグの必要ヶ所に手動で追加して、別ウィンドウでリンク先が開くようにしてみましょう。
<a href="http://www.skyfull-stars.com">スカイフルスターズ</a>
に、target=_blankを挿入しておくと、
<a href="http://www.skyfull-stars.com"target=_blank>スカイフルスターズ</a>
となります。スカイフルスターズと、スカイフルスターズのリンクタイプの違いです。画像にリンクを付ける時も、その応用で別ウィンドウでリンク先が開きます。
Amazonアフィリエイトなどの場合のタグも、デフォルトでは画面がリンク先に切り替わる設定になっていますが、商品画像とリンク文字とを表すタグ部分の相当ヶ所にtarget=_blankをそれぞれ挿入することにより、別ウィンドウでリンク先を開く事ができます。
| 速効!図解ホームページ作成 (HTML&CSS編)毎日コミュニケーションズこのアイテムの詳細を見る |
| 速効!図解ホームページ作成 (HTML&CSS編)毎日コミュニケーションズこのアイテムの詳細を見る |
下の例が別ウィンドウでリンク先ページを開くタイプです。
次に、画像取り込みに関してですが、画像をセンター(左・右)に配置したいというニーズがあると思います。その場合は、
<p align="center(left・right)">と、</p>というタグで画像取り込みの一連のタグ群を挟みますと、画像の配置がコントロールできます。
続いて、画像の横に文字を流し込む場合ですが、画像取り込みのタグ群の中にalign="left(right)"を挿入することで、画像の位置が左・右になり、文字がその横に流し込まれます。その時、画像と文字との間を空ける為にhspace="10"(ピクセル数値は適宜)を追加します。続いて、他の文章や資料を引用する場合ですが、小さな部分であれば「 」で囲むなどで良いと思いますが、長い文章になりますと出来るだけ明確にしておく方が良いと思います。そのような時には、
<blockquote>と、</blockquote>というタグではさむと、両サイドがインデント処理されて、引用部分として明確に分かります。又、基本的には引用情報を添える必要があります。
このように色々とhtmlのタグを使って記事の微調整ができますので、試してみて下さい。
最後に、この文の途中に区切り線が入っていますが、それは<hr>というタグを書けば実現します。必要であれば、<tr> </tr>といったテーブルタグを使って表作りもできます(表を非表示にしてアルバム的な写真のレイアウトも可能です)。
ブログサービスの競争が行われていけば、ユーザーの細かなニーズに対応して、いつか自動化されることだと思いますが、それまでは手動で記事づくりをせざるを得ません。その意味でも基礎的なhtmlは学んだ方が楽しいと思います。
