清水のブログ

「いち」大学生の日々

HTMLのお勉強② アップロードに詰まる。FFFTPをダウンロード

ちょっと躓いてしまい、このまま放置すると挫折しそうなので、休憩&整理のためにここに書いておきます。

 

僕がTwitterに上げているしょうもない4コマ漫画をまとめたサイトを作ろうとしました。

ページに折りたたみボタンを設置し、押すと漫画が表示されるようにしたかったのです。

 

 Sublimeで折りたたみボタンを設置・展開した中に画像を貼るまではできました。

そこで、HTMLファイルをネット上(サーバー?)にアップロードしたとき、画像がちゃんと表示されるか確認しようと思いました。

自分のパソコンのローカルファイル内にある画像を貼るときは、ファイル名で参照するとアップロードしたときに見えなくなるっぽいからです。(URLで参照しないといけないっぽい)

(↓参考)

blog.codecamp.jp

 

HTMLファイルをアップロードする方法を調べると、「FFFTP」を使う方法がヒットしました。

とりあえずFFFTPのダウンロードをしたものの、使い方がわからずに止まっています。

ユーザー名とパスワードなんて設定した覚えがありません。

f:id:shimizu_blog:20200329092810j:plain

わかんないーーー

レンタルサーバーが必要だったりするのでしょうか???

「FFFTPの使い方」を紹介するサイトはあるけど、なぜか「ユーザー名・パスワード」はさらっといってしまいます。

どうすりゃいいのーーー

まとめ

HTMLでサイトを作ってみる

正しく表示されるか、アップロードして確かめたい

アップロードの仕方がわかんない!!

 

「とりあえず作ってみる」から逸脱している気がしますが、ネットに上げる方法はどのみち知っておいたほうがいいと思うので、そこまでやりたいです。

それに詰まり続けるなら、アップロードじゃなくてスクショ貼り付けでいいからページ制作を優先させます・・・。

 

 

余談

記事中に「折りたたみボタンってこんなの」と説明するために、はてなブログで折りたたみボタンを置くコードを使わせていただいたのですが、うまくいきませんでした。なぜでしょう・・・。

こんなふうに、表示はされるけどクリックしても動きません。

 

(↓使わせていただいたのはこちらです)

ブログ 記事中のコードなどを折りたたむ方法の紹介と解説[コピペ可能] - はかせのラボ

<div onclick="obj=document.getElementById('oritatami_part').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▶クリックで展開</a>
</div>
<div id="oritatami_part" style="display:none;clear:both;">
「この中にあるものが折りたたまれる」
</div>

追記

↑のコードの作者の、はかせさんにコメントを頂き、はてなブログの記法をMarkdownにしたらちゃんと表示されました。ありがとうございます!!