質問: tumblrのhtml,css.jsについて tumblrでサイトを作っています。 テンプレートを利用して何ページか作っているのですが、 トップページにある、押すと出てくるメニューを他のページ(カスタマイズデザイン)で使いたいと思い、該当部分をコピペしてみたのですがうまくできませんでした。 html,cssド素人の上にjavaはよくわからないもので、、、 添付した画像の矢印の部分です。 三本線のとこをクリックすると画像のようにメニューが出てくるようになっています。 これをカスタマイズページで表示させるにはどうコードをかけばいいのでしょうか? ソースを全部張り付けて該当部分を教えていただければ早いんだと思うのですが、 ソースが長すぎて貼り付けられず。 全く同じものでなくても、同じような感じのメニューになるようなもののhtml,css,javaを教えていただけますでしょうか? どうぞよろしくお願いいたします。
回答: >テンプレートを利用して何ページか作っているのですが、 それでは絶対に不可能!!根本的に間違っている。 最初の最初からきちんと本道を歩むと、決して難しくもなんともない事です。 > テンプレートをつかって文字を入替えるのはdtpです。 絶対に理解すべきこと [htmlはdtp( http://ja.wikipedia.org/wiki/dtp )じゃない] 【引用】____________ここから htmlは、どんな環境からもwebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つpcや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[introduction to html 4 (ja)( http://www.asahi-net.or.jp/%7esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より なぜそうなのかは、htmlが考案されたときのヒントになったのはsgml--背景( http://ja.wikipedia.org/wiki/standard_generalized_markup_language#.e8.83.8c.e6.99.af ) ★htmlには文書構造だけを書きます。 文書を構成する要素(部品)をタグを用いてマークアップします。 ここは見出し ====== ここから新しい段落で、**ここは重要**なところ とね。これをブラウザで見るとは大きな太字で、で間隔をあけて改行され、**は太字。スクリーンリーダーはぱ男声の大きめな声で、で間を空けて**でアクセントをつけて・・・。それらの機能はhtmlを利用するソフトによるもので、htmlがそれを指定しているわけではない。 その上で、スタイルシートでscreenメディア(pcやスマホ)向けに、携帯電話向けに、あるいはプリンター向けにデザインして行きます。 >三本線のとこをクリックすると画像のようにメニューが出てくるようになっています。 三本線らしきところはないし、メニューらしきものもないので分からないですが、はじめはデザインではなく、ひたすらhtmlをきちんとマークアップすることを身につけましょう。検索エンジンは無論、誰しもページのデザインでサイトを訪問してくれるわけではありません。決め手になるのは内容ですから。 この説明の意味・・多分、急には理解できないと思いますので、(chrome以外)のブラウザで下記サイトをご覧ください。 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/webservice/howto/sample/html/nav/navigation1.html ) ・最初にhtmlソースを確認する。 ・次に、ブラウザの[表示]メニューから[スタイル(シート)]に進んで、色々なスタイルを選択してみる。 ・それぞれウィンドウ幅を変えたりフォントを大きくしたり小さくしたり ・印刷プレビューでプリントアウト時の状態を確認 htmlさえ、きちんと書けていたら後はスタイルシートで自在にデザインできるのですよ。**** ====================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================