ブログでホームページを作るって・・?
Movable Typeなら、ブログをまるでHPのように自在に作ることが出来るのです。
自分の好きなように。
私も今、とても興味を感じています。
ブログでアファリエイトをやるなら、人目を惹くサイト作り、これは必須ですよね。
しかし、そんな事は上級者にしか出来ないことだったのです。
コツコツと勉強を続けていけば、いつかは上級者の仲間入りが出来る・・かも知れません。
ちなみに、バシバシ売り上げが上がるようなサイトをプロに作って貰うと、どの位費用が掛かると思いますか?50万円、だそうですよ。
このブログホームページ成功マニュアル・・は
ホームページビルダーしか使えない初心者の為のマニュアルです。
ホームページビルダーの最新バージョンは、
Movable Typeに対応しています。が、バージョン8でも十分です。
アッ、くれぐれも、アファリエイト成功マニュアルではありません!
アファリエイト収入アップに必要な「見栄えの良いサイト」
を作るためのマニュアルです。
ホームページビルダーでMovable Typeを編集できるのです!
今なら35%オフで、68,000円
ハイ!ご説明します!
例えば、このブログのトップページの上の方に、
「目指せ!WEBデザイナー」と題して、ご挨拶の文章を載せてあります。
そこの一番下の行を見ると、「管理人より」だけが右寄せで表示されていますね。
他の行は左寄せになっています。
このように、文章の中で、一部分だけを分割して表示しなさい、と命令するのが<DIV>なのです。
通常、<DIV>タグは単独ではなく、
水平方向の位置を指定する<ALIGN=”位置”>と組み合わせて使います。
当サイトにおよそ関連の無いアダルトサイト等からのトラックバックはお断りします。 こまめにチェックはしておりますが、削除が追いつかない場合もございます。 中には課金される物もあるようですので、うっかりクリックしないようご注意ください。 <DIV ALIGN=”RIGHT”>管理人より</DIV> |
上の記述の中のピンク色の部分を見てください。
上の様に記述すると、結果は下のようになります。
当サイトにおよそ関連の無いアダルトサイト等からのトラックバックはお断りします。 こまめにチェックはしておりますが、削除が追いつかない場合もございます。 中には課金される物もあるようですので、うっかりクリックしないようご注意ください。 管理人より
|
<TABLE>タグと組み合わせると、表が中央に配置されます。
表の中の、一つのマス、「セル」の中で例えば文字列を中央揃えにしたい時、
<TD>と組み合わせます。
<TD ALIGN=”CENTER”>と記述すると、そのセルの中で中央揃えになります。
一行の中に、複数のセルがあり、その行全体に「中央揃え」を適用したい場合は、
<TD>ではなく、<TR>と組み合わせます。
<TR ALIGN=”CENTER”>と記述します。
<TABLE>タグについて書きました。
皆さん、やってみましたか?
メモ帳で、あるいは自分のブログの記事の中で「表」、出現しましたでしょうか?
作った表を、記事の水平方向の真ん中に配置させたい、そういう場合どうしたら良いか?
<TABLE>タグの一番先頭の行を以下のように記述しま~す!
<TABLE ALIGN=”CENTER”>
これで、表は記事の水平方向の中央に配置されます。
それから・・・これは私が度々やってしまうドジなのですが、
表に線を表示させる BORDER=””
私は、最初の「R」をしょっちゅう抜かしてしまうのです。
当然、線は表示されません。
HTMLって英語の勉強になるかも・・学生時代手を抜いたツケが(;´▽`lllA``
3連休も終わりましたね。
休みが続くとついつい、家族の影響もあって、DVD三昧してしまいます。昨日視ていたのは、「24」というアメリカのドラマシリーズ。
知っている人には解説必要なしなのですが、このドラマにはコンピュータのプロ中のプロがゾロゾロ登場します。
な~んか、あこがれてしまうんですよね。
プログラミングだ、ハッキングだなんてのは夢のまた夢・・。
でもテンプレは何時かきっと作るぞ~!
アファイエイト超初心者の人は、他所のサイトを見に行った時、感じることがあると思うんですね。
「どうして、このサイトはこんなにスッキリ、かっこよく整然として見えるんだろう!?」と。
レイアウトに表を使っている場合があります。
今日は、表を作成する<TABLE>タグについて書きます。
例えば、横3列、1行の表を作りたい時は、
<TABLE> <TR> <TD>りんご</TD> <TD>柿</TD> <TD>みかん</TD> </TR> </TABLE> |
という具合に記述します。
<TD>は、「セル」表の中の1マスを定義するタグです。
<TR>は、「行」を定義します。
実際にタグで上のように記述すると、結果は下のようになります。
りんご | 柿 | みかん |
でも、これじゃ、表に見えませんよね?
表らしく見せるためには、線で囲まれていた方が良いですね。
そこで・・。
先ほどの、<TABLE>から始まるタグに、一つ命令を付け足します。
一番先頭を<TABLE BORDER=””>と書きます。
すると、下のようになります。
りんご | 柿 | みかん |
””の間には数字(ピクセル数)を入れます。
上の表の囲みの太さは、3です。
メモ帳を使って、数字を入れ替えて試してみてくださいね。
先日の行頭記号付きリスト、ちょっと解りにくかったですね。
具体的には下のように記述します。
<UL> <LI>チョコレートと猫が好き!半現役ナースの日常</LI>←私のもう一つのサイト( *^。^* ) <LI>愛すべき猫と和の雑貨</LI>←これも私のサイトです <LI>・・・・</LI> </UL> |
ブログのテンプレートでは
行頭記号をどのように表示するか、タグやスタイルシートで定義されています。
フリーエリアのHTML編集で、上の囲みのように記述すると、
ブログの他の部分で表示される行頭記号と同じ記号で表示されます。
これらの作業を、「新しく記事を書く」画面を利用して行うメリットは
- リンクさせる作業がボタン一つで済む!リンクのタグを手打ちする必要が無い。
- プレビューで出来上がりを確認する事が出来る
予定をちょいと変更しました。
昨日のおさらいをしようと思ったのですが、次回にとっておきますね。
私は今日、少しだけ賢くなりました**テレテレ**(*^^*)**テレテレ**
文書を書くだけなら、特に知らなくても影響は無いのですが、
アファリエイトの商品画像などを、<TABLE>というタグを使って表形式で表示させようとすると、困った事が起こります。
どう困るか・・というと、
記事の中で、表の部分と他の文章との間、あるいは表と表の間が、
必要も無いほど、すご~く行間が開いてしまうのです。
その解決方法を見つけました^^
記事の投稿画面の下のほうに、
「設定」というのがありますね。その中に、
「テキストフォーマット」というのがあります。
そこは多分、自分で設定を変えていなければ、
「自動改行+HTML」にチェックが入っていると思います。
そこを、「HTMLのみ」に変更すると、
間抜けなほど行間が開いてしまう、という問題が解決できます。
その代わり、改行の度ごとに<BR>タグを自分で入力しなければなりませんが。
表を作成するタグについては後日、ちゃんと書きますね。
読者の皆様、このブログに一つ記事を書き、一つ学ぶごとに、
私が運営するショッピングサイト「愛すべき猫と和の雑貨」はブログのレイアウトが進化していきます。
リンクしているサイトの数が増えてくると、ズラズラとたくさん並ぶと見る人にとって分り難くなりますね。
例えば、「ビジネス系サイト」、「日記系サイト」、「お友達のサイト」、「お世話になっているサイト」など適当な名前を付けて、グループ分けをすると、管理する方もサイトを見に来てくれる人も解りやすくなります。
☆フリーエリアを利用しよう
プラグインの追加で、「リンク」を追加すると、全く同じリンクが二つ出来てしまいます。
なので、「リンク」を追加するのではなく、フリーエリアを利用します。
その場合も、「リンク」のHTMLをそっくりコピーしてしまうと、結果はプラグインで「リンク」を追加したのと同じ事になってしまいます。
では、どうするか・・?
- フリーエリアを新しく追加、解り易い名前を付ける
- 「新しく記事を書く」画面で作業をします
- 完成したHTMLをフリーエリアの「HTMLの編集」画面に貼り付けます
さて、ここからです。
☆使用するタグ
- <UL>~</UL>「行頭記号付きリスト」を定義します
行頭記号は●になります。 - <UL>~</UL>の~の部分には
<LI>~</LI>タグでリンクするサイトの一つ一つを囲みます。 - <LI>~</LI>の~の部分にはサイト名を記入します
- サイト名の部分に、そのサイトのURLのリンクを貼ります。
- 上の手順で完成したHTMLをそっくり、フリーエリアのHTMLの編集画面にコピー&貼り付けします。
最後にブログを表示させて、確認してみましょう。
行頭記号には●以外に○と□があります。
○と□を指定するタグは、次回にまわしますね。
でもどうしたら貼れるのだろう・・?
アファリエイトのバナーは、殆どの場合、
企業側が提供する「あなた専用のリンクコード」をコピー&貼り付けするだけで、バナーが表示されるようになっています。
ここから先は、テンプレートがプラグイン対応である事を前提に説明しますね。
アファリエイトのバナーや、アクセスカウンターなどは、
フリーエリアに貼ることが出来ます。
☆フリーエリアを表示させよう!
①自分のブログの何処にバナーを貼りたいか、
貼るスペースは有るかを目で見て確認します。
②もし、テンプレートを変更したばかりで、
フリーエリアを一つも表示させていないならば、
管理者ページ→プラグインの設定→プラグインの追加、と進みます。
カレンダーとか、ニュースとか天気予報とか、
いろいろ並んでいる中に、「フリーエリア」があります。
見つける事が出来たら、
表示させたいカテゴリーをドロップダウンリストから選択します。
「フリーエリア」と表示されているところは、
ボックスの中の文字を消去して、自分の好きなように書き換えます。
書き換えない場合は、そのままフリーエリアと表示されます。
「追加」ボタンをクリックします。
ここまで出来たら、表示されているか確認してみてください。
☆フリーエリアにいきなり貼り付けるのは怖い
その場合は、「新しく記事を書く」画面を利用しましょう。
先ず、貼りたいバナーのソースをコピー貼り付けします。
そしてプレビューしてどのように表示されるか見てみましょう。
バナー表示されていれば成功です。
クリックして目的のページにジャンプするか確認しましょう。
確認出来たら、
記事として貼り付けたソースを今度は、フリーエリアにコピー貼り付けします。
プラグインの設定→先ほど追加したフリーエリアの「HTMLの編集」をクリックして画面を開きます。
<!-- &freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>
と書かれている筈です。
<!-- &freeareaの中にHTMLが代入されます。 -->は、コメントといって、画面上には表示されないHTMLファイルの云わばメモ書きです。
&freearea を消去して、ここにバナーのソースを貼り付けます。
ここまで出来たら、ブログの画面で確認しましょう。
ちょっと長くなり過ぎちゃいましたぁ(;^。^A アセアセ・・
二つ以上バナーを貼る場合については、また後日、ご説明することにしま~す。最後まで読んでくださってありがとうございました。
ご感想など頂けましたら幸いです。
明けましておめでとうございます。
決意も新たに、HTMLのお勉強を楽しく♪続けていこうと思います。
今日は紹介したい本があります。↑です。
私がいつもお世話になっている本です。
タイトルどおり、とても解りやすく説明されています。
初心者向きです。
実は私は「これ1冊でわかる!!HTML」という本を2年前、自作のHPを立ち上げる時に買いました。
HPは結局、IBMのホームページビルダーを使って作りましたが、
この本での知識はとても役に立ちました。
でも・・時代は変わり、スタイルシートをある程度知らないと、WEBページの事が解らないようになってきました。
私自身も、サボっている間に大分忘れてしまったので、新しく買い求めました。
この本を買い求めるメリットは、ノマドワークス社のホームページから、サンプルファイルをダウンロード出来る!!という事です。
今流行のブログのスタイルを作るには、この本の知識だけでは
ハッキリ言って、不足かと思います。
そうかといって、この本をすっ飛ばして、他の難しい本を読んでも、
何の事やら・・。と言う事になってしまいます。
私も、ちょこっとHPを作ったことがある程度の経験で、
いきなりブログのテンプレートに噛付いて、
歯が立たなかった一人でアリマス。
なので、HTMLって、何をどうすりゃいいのさ?と思っている皆さん。最初の一歩をこの本で一緒にスタートしましょ♪
そして出来れば、一緒に次のステップへ上っていきましょう!
ところで、HTMLとスタイルシートはどんな風に関わりあうの?
二つの方法があるようです。
一つはHTMLファイルの中の該当する部分に、直接スタイルシートを書き込む。
もう一つは、HTMLファイルとスタイルシートファイルを分けて記述し、必要なところで、HTMLファイルからスタイルシートを呼び出す。「おーい、出番だよ」という具合に。
もちろん呼び出し方にも決まりがあるようです。