gooの簡単HPでHPを作り始めた初心者です。

HP内になんかテキストを用いたコンテンツを増やしたいのですが、どうすればよのかわかりません。
簡単HP内にあるDiaryとBBSを用いないでなんか他に方法はありますか?

どこかからテキストをうつものをレンタルするんでしょうか?
ワード等でうったものをそのまま簡単HPで使ったりはできないのでしょうか?

教えてください。
おねがいします。

A 回答 (2件)

『趣味のページ』にでも書くしかないでしょうね。


『お知らせ』の部分に書けばテキストをそのままコピーすれば
ある意味出来ますが

そうでなければ、何処かに借りるしかないでしょう。
そこにリンクする事は可能ですがねf(^_^)
http://www.hoops.ne.jp/
http://www.freett.com/
http://www.tripod.co.jp/
http://www.cool.ne.jp/
等借りて、HTMLをはじめから作る気なら、エディターが必要です。

『TepaEditor』
手軽に編集環境を切り替え可能な高機能エディタ
http://www.vector.co.jp/soft/win95/writing/se216 …

『PIGYEDIT』
ユーザが自由にボタンの内容を設定できてお洒落なHTMLエディタ
http://www.vector.co.jp/soft/win95/net/se056685. …

等々、FTP転送ソフトは
『FFFTP』
漢字コードの変換もできるFTPクライアントソフト
http://www.vector.co.jp/soft/win95/net/se061839. …
これは有名です。

では、p(^-^)qガンバって下さい。


          X1turboの友達 hiro。
    • good
    • 0

簡単ホームページの場合、最初から用意されているページを書き換える以外は基本的には出来ません。



それ以外のページを作るなら、自分で全部作ってアップロードして、簡単ホームページのメニューからリンクさせるしかありません。

1.まず、スペースを確保する。
簡単ホームページ以外のサービス……たとえばどこか他の無料のスペースサービス等……を借りなければいけません。
2.タグを打つなり、ソフトを使うなりして、ページを作る。
Wordでも出来なくはありませんが……Wordでしか通用しない記述を吐き出されるのであまり良いとは言えないかも(最近のヴァージョンでは確かめていないので自信なし)。
3.出来たページをアップする。
4.簡単ホームページにログインして、メニューのところで、別の場所にアップしたページへのリンクを作る。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qヘッダとフッダはそのままでメインコンテンツだけ変更したい

一つのHTMLファイルにおいて、
現在
<tabel>
<tr>
<td hight="**">ヘッダ領域</td>
</tr>
<tr>
<td>メインコンテンツ領域</td>
</tr>
<tr>
<td hight="**">フッダ領域</td>
</tr>
</table>
というレイアウト構造を採用しています。
ヘッダ領域で、メニュー項目として、
|<a haref="a.html">項目A</a>| |<a haref="b.html">項目B</a>| |<a haref="c.html">項目C</a>|
を設置した時のリンク先ターゲットとしてメインコンテンツ領域を指定したいのですが、どうしたら良いのでしょうか?
メインコンテンツ領域にインラインフレームを設置するのが、良策かと思いますが、インラインフレーム内にスクロールバーを表示せずリンク先のページに応じてメインコンテンツ領域の高さを変更して表示させたいのです。
抜本的にテーブル構造を使用しないほうが良いのであればその方法を教えてください。

Aベストアンサー

ヘッダやフッタはそのまま(URL自体が不変)なら、インラインフレーム以外にAjaxがあります。

最近はレイアウトにテーブルは使わない方がいいです。
CSSでレイアウトする方がよいでしょう。
方法は「 CSS レイアウト」でググれば大量に出てきます。

Qコンテンツとコンテンツの詰まり

Windows XP あるいは8
HTML 4.01

コピー ~ TOP.html copyTOP.css
あああああ と  いいいいいの間隔はあいているのに
いいいいい と  うううううの間隔はなぜか詰ってしまっています。
間隔を空けるにはどうしたらいいでしょうか?
コードは以下の通りです。

[ HTML 側 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="~">
<title>aaaaaaaaaa</title>

<link rel="stylesheet" href="copyTOP.css" type="text/css">


</head>


<body>

<div id="zentai">



<div id="part">
<p class="title">あああああ</p>
<div id="partnerwaku">
<div id="partnerimage">
<a href="" alt="のロゴ" class=""></a>
<a href="" alt="のロゴ" class=""></a>
<a href=""><img src=".gif" alt="のロゴ" class=""></a>
<a href=""><img src=".jpg" alt="のロゴ" class="A"></a>
<a href=""><img src=".jpg" alt="のロゴ" class=""></a>
</div>
</div>
</div>

<div id="PR">
&lt;PR&gt;
<br>
<div id="PRsection">
<br>
<a href="">
<img src="" alt="" class="PRimage01"></a>
</div>
</div>


<div id="PR2">
<br>
&lt;PR&gt;
<br>
<div id="PRsection2">
<br>
<a href="">
<img src="" alt="" class="PRimage02"></a>
</div>
</div>


<div id="columnwaku">
<div id="columnbun">
<p class="title">いいいいい</p>
<div id="columncontents">
<p><a href=""><img src =".jpg" class="columnarticle01"></a></p>
</div>
</div>
</div>

<br>
<br>
<br>
<br>


<div id="PR3">
<br>
&lt;PR&gt;
<br>
<div id="PRsection3">
<br>
<a href=""><img src="" alt="" class="PRimage03"></a>
</div>
</div>

<br>
<br>
<br>
<br>
<br>


<div id="questionnairesection">
<div id="questionnaire">
<p class="title">ううううう</p>
<div id="questionnairecontents">えええええ</div>
</div>
</div>

<div id="PR4">
<br>
&lt;ddd&gt;
<br>
<div id="PRsection4">
<br>
<a href="">
<img src="" alt="" class="PRimage04"></a>
</div>
</div>


<div id="pagetop">
<br>
<br>
<a href="#logoimage">ページの先頭へ▲</a>
</div>

<hr class="beforefooter">

<div id="aboutus">
<div id="aboutussection">
<p class="aboutustitle">管理会社</p>
<p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p>
</div>
</div>

<br>
<br>

<hr class="beforefooter">


</div> <!--全体のdiv-->

</body>
</html>

[ css側]
@charset "Shift_Jis";

body {
overflow-y:auto
overflow-x:auto
text-align:center;
cursor:url("images/.png");
}

#allitem{
cursor:url("images/.png");
}

#zentai{
width:1000px;
margin-left:auto;
margin-right:auto;
}

.title{
margin-top:0px;
margin-bottom:0px;
font-size : 20px;
border-style:solid;
width:592px;
background-color:#FFFF99;
padding:3px;
}


#part{
clear:left;
float:left;
height:180px;
width:642px;
padding-right:147px;
font-size : 20px;
}

#partnerwaku{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}


#PR{
float:left;
width:180px;
height:120px;
}

#PRsection{
border-style:solid;
border-color: #000099;
}

#PR2{
float:left;
width:185px;
height:150px;
}

#PRsection2{
border-style:solid;
border-color: #000099;
}

.PRimage01{
width:170px;
height:80px;
}

.PRimage02{
width:165px;
height:100px;
}

#kuhaku{
clear:left;
height:20px;
}

#columnwaku{
float:left;
clear:left;
height:130px;
width:790px;
}

#columnbun{
height:120px;
width:600px;
}

#columncontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}

.columnarticle01{
height:70px;
width:400px;
background-color:#CC99CC;
}

#PR3{
float:left;
width:185px;
height:150px;
}

#PRsection3{
border-style:solid;
border-color: #000099;
}

.PRimage03{
width:165px;
height:100px;
}

#questionnairesection{
clear:left;
float:left;
height:130px;
width:1050px;
}

#questionnaire{
width:600px;
border-radius: 20px;
}

#questionnairecontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}

#PR4{
float:left;
width:185px;
height:150px;
}

#PRsection4{
border-style:solid;
border-color: #000099;
}

.PRimage04{
width:165px;
height:100px;
}

文字制限のため省略

Windows XP あるいは8
HTML 4.01

コピー ~ TOP.html copyTOP.css
あああああ と  いいいいいの間隔はあいているのに
いいいいい と  うううううの間隔はなぜか詰ってしまっています。
間隔を空けるにはどうしたらいいでしょうか?
コードは以下の通りです。

[ HTML 側 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTE...続きを読む

Aベストアンサー

スタイルシート部分です。
 CSS2の本来の書き方に則しています。
CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。
 #PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。
しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。
★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にしたがってセレクタを書く技術を身につけましょう。ものすごく分かりやすくなります。極端に言うとHTMLを見なくてもデザインできるようになります。
[例]
div.section div.section p.Logo{
 はsection(本文)ブロックの内=子孫(半角スペース)のsectionブロック内のclass属性にLogoを持つp要素と読みます。
div.section div.section+div.section{margin-top:50px;}
 は、そのうちのdiv.sectionと隣接した(+)sectionについてのmargin-topの指定です。
div.section div.section{}で指定したmargin:0を上書きでます。
 詳細度が大きいからです。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
div.section div.section+div.section  詳細度 [0 0 3 3] ・・・33
div.section div.section  詳細度[0 0 2 2] ・・・22
div.section  詳細度[0 0 1 1] ・・・11

 ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
 ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
 はスタイルシートを理解する時に必須です。これを知っていると知らないとでは、まるで違います。いちいちidやclassを書かなくて良くなるので楽です。メンテナンス性が劇的に改善される。

以下、スタイルシート部分
★タブは_に置換してあるので戻す。

_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
/* ディスプレイ幅に影響されないようリキッドにしておく */
/* スマホでも超幅広ディスプレイでも利用可能 */
div.header,
div.section,
div.footer{
_width:90%;min-width:630px;max-width:890px;
_margin:0 auto;padding:5px;
}
div.header div#contentTable h3,
div.section div.section h3{
_margin:0;line-height:1.8em;
_border-bottom:2px gray solid;
_padding:0 0.5em;
_background-color:rgb(255,255,200);
}
div.header div#contentTable ol,
div.header div#contentTable ol li{
_list-style:none;margin:0;padding:0;
_text-align:ceter;
}
div.header div#contentTable ol li{
_margin:3px;
}
div.header div#contentTable ol li{
_display:inline-block;
_width:22%;
_position:relative;
}
div.header div#contentTable ol li img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
}
div.section{position:relative;}
div.header div#contentTable,
div.section div.section{
_min-width:0;width:auto;
_margin-right:170px;
_border:solid 2px gray;
_min-height:160px;/* 挿絵画像のサイズが大きい場合はHTML側で指定 */
_padding:0;
_position:relative;/* 子孫のサイズ基にするためrelative */
}
div.section p{
_margin:0 1em;
_text-indent:1em;
_line-height:1.6em;
}
/* 二つ目以降(隣接セレクタ)のsub sectionの上マージンを指定*/
div.section div.section+div.section{
_margin-top:50px;
}
div.header div#contentTable p.Logo,
div.section div.section p.Logo{
_margin:0;height:100%;/* relativeな親ブロックのサイズを基準 */
_position:absolute;
_top:0;right:-170px;
_width:160px;
_text-align:center;
}
p.Logo img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
_margin:5px auto;
}
div.guest h3:before{content:"Gest ";}/* ゲスト記事の目印 */

/* 分かりやすいように色をつけておく */
div.header{background-color:yellow;}
div.section{background-color:silver;}
div.footer{background-color:aqua;}
div.section div.section{background-color:white;}
div.header div#contentTable{background-color:lime;}
div.section div.section p.Logo{background-color:fuchsia;}
div.header div#contentTable p.Logo{background-color:orange;}
div.section div.column h3{background-color:red;}
-->
_</style>

スタイルシート部分です。
 CSS2の本来の書き方に則しています。
CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。
 #PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。
しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。
★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にした...続きを読む

QHPで増えすぎたコンテンツを整理する場合に良い方法を教えていただきたいです。

私、趣味で自分のHPをつくっているのですが、
ページも100ページを超えてしまい、
現在は左にたてにメニューをズラッと並べて、
右側に各コンテンツの内容という風になっていまして、
とても縦長になっています。

そこでとても見にくいですし操作性も悪いので、
できればすっきり整理したいとおもっているのですが、
良い方法がみつかりません。

ソフトはDreamweaver8を使用してつくっています。

何か良い方法などありましたら、
教えてくださいm(_ _)m

Aベストアンサー

コンテンツを種類別に分け、最初は種類だけを表示するようにして、各コンテンツをその下にぶら下げればいいかと思います

Q同一フォルダ内の別ページの特定のフレーム内に、別のHPのURLを表示したい、、

HPビルダー6,5で、同一フォルダ内の別ページの特定のフレーム内に、別のHPのURLを表示したいのですが、うまくいきません。
まず、リンクをはる部分から、挿入、リンク、ファイル名は、表示したいHPのURL記述、ターゲットは、表示するページにあらかじめつけてあるターゲット名、というふうにしたのですが、いざ、リンクさせてみると、単に、新しいURLのページが全画面に表示されるだけでした。(ページが別の、特定フレームに表示するという行為は、まず、ページが飛んで、そして、更に、その飛んだページの、特定フレームに、URLのHPを表示、させるという、2段階の行為ですよね、やはり、こんなことはできないのでしょうか?

Aベストアンサー

やりたいことは、Aというウィンドウがあって、そこから別のウィンドウBにあるフレームB2の中身を、ウィンドウA内のページからのリンクで切り替えられないか、ということでしょうか。

もしそういうことでしたら、おそらくフレーム名のターゲット指定を正確に行えば、HTMLのみで可能な範囲なのではないかと思います。 フレームセットの際にフレームにつけた名前と、ターゲット指定した名前が一致していれば、別ウィンドウ内のフレームであっても、ターゲット指定したフレーム内に新しいページを読み込むはずです。
できなかったとしたら、ターゲット指定を間違えている可能性があると思います。 すくなくとも、IEでは別ウィンドウのフレーム内のページをリンクで変更することができるはずですので、一度ご確認ください。
なお、そのターゲットのフレームを含むウィンドウがあらかじめ開かれていなかった場合、その別ウィンドウ内のフレームにページを読み出すリンクをクリックすると、新しいウィンドウを開いてページを読み出すようになっていますので、その点に関しても一度ご確認くださいね。

もし、そのターゲットになるフレームを持つウィンドウが開かれていない状態から、別ウィンドウにフレームを切って、その一部に特定のページを読み出すということでしたら、別にフレームセットをするHTMLファイルを用意してそれを別ウィンドウに読み出すようにするか、JavaScriptなどで少々複雑な処理を組む必要があると思います。

見当違いでしたら、ごめんなさい。

やりたいことは、Aというウィンドウがあって、そこから別のウィンドウBにあるフレームB2の中身を、ウィンドウA内のページからのリンクで切り替えられないか、ということでしょうか。

もしそういうことでしたら、おそらくフレーム名のターゲット指定を正確に行えば、HTMLのみで可能な範囲なのではないかと思います。 フレームセットの際にフレームにつけた名前と、ターゲット指定した名前が一致していれば、別ウィンドウ内のフレームであっても、ターゲット指定したフレーム内に新しいページを読み込むはずです...続きを読む

Q四角い角が丸い枠線内にコンテンツが入れる正しい方法

角が丸く四角い枠線を作り、
その中に画像やコメントを入れたいと思っています。
イメージ的には添付ファイルのような感じです。

プログラムでその枠線を作れるなら背景画像を使わずに
画像とコメントをそれぞれhtmlに入力したいと思いましたが、
その方法はありますか?

自分がやった方法は、
画像とコメントの全てを枠線で囲い方が分からなかったので、
枠線と枠線の中に入れる画像をまとめた画像を1枚作り、
それを背景画像として表示させました。
コメントだけをhtmlに入力し、marginで位置を設定しました。
しかし、ページの下側に5000px以上の余白ができてしまいます。

背景画像を設定したときに、
コメントの配置位置をmarginで設定するのは間違いでしょうか。

Aベストアンサー

私ならこう書きます。
あらかじめ、htmlのコメント部の要素ははpタグにし、imgタグにもidをつけてcssファイルで指定します。
なお、css内のインデント(タブ)は、便宜的に全角スペースにしているので、そのままコピペして使うなら、タブなどに置き換えてください。
文法などの詳細はGoogleなどでじっくり調べてみてください。


~ CSS ~

/********************
角丸にするボックス
*********************/
div#sample{
 /* Safari,Chrome */
 -webkit-border-bottom-right-radius: 20px;
 -webkit-border-bottom-left-radius: 20px;
 /* Firefox */
 -moz-border-radius-bottomright: 20px;
 -moz-border-radius-bottomleft: 20px;
 /* CSS3*/
 border-bottom-right-radius: 20px;
 border-bottom-left-radius: 20px;
}

 /********************
 コメント部
 *********************/
 div#sample p{
  margin:0 0 0 0;
  padding:0 0 0 0;
  color: #333333;
  font-size: 15px;
 }
 div#sample p#text1{
  text-align: center;
 }
 div#sample p#text3{
  font-size: 10px;
 }
 div#sample p#text4{
  color: #444444;
 }
 div#sample p#text5{
  font-weight: bold;
 }
 div#sample p#text5{
  color: #444444;
  font-weight: bold;
  text-align: right;
 }

 /********************
 イメージ部
 *********************/
 div#sample img#img1{
  margin: 5px 0 0 450px;
 }
 div#sample img#img2{
  margin: -30px 0 0 250px;
 }
 div#sample img#img3{
  margin: 10px 0 0 60px;
 }
 div#sample img#img4{
  margin: 5px 0 0 0;
 }
 div#sample img#img5{
  margin: -175px 0 0 250px;
 }
 div#sample img#img6{
  margin: 0 0 0 500px;
 }

私ならこう書きます。
あらかじめ、htmlのコメント部の要素ははpタグにし、imgタグにもidをつけてcssファイルで指定します。
なお、css内のインデント(タブ)は、便宜的に全角スペースにしているので、そのままコピペして使うなら、タブなどに置き換えてください。
文法などの詳細はGoogleなどでじっくり調べてみてください。


~ CSS ~

/********************
角丸にするボックス
*********************/
div#sample{
 /* Safari,Chrome */
 -webkit-border-bottom-right-radius: 20px;
 -webkit-border-b...続きを読む


このカテゴリの人気Q&Aランキング

おすすめ情報