tumblrのhtml,css.jsについて
- tumblrでサイトを作っています。トップページにあるメニューを他のページでも使いたいがうまくできません。
- html,css,javaを貼り付けてもソースが長すぎてエラーが出ます。類似のメニューのコードを教えてください。
- tumblrのhtml,css.jsでメニューをカスタマイズする方法が知りたいです。
- ベストアンサー
tumblrのhtml,css.jsについて
tumblrでサイトを作っています。 テンプレートを利用して何ページか作っているのですが、 トップページにある、押すと出てくるメニューを他のページ（カスタマイズデザイン）で使いたいと思い、該当部分をコピペしてみたのですがうまくできませんでした。 html,cssド素人の上にjavaはよくわからないもので、、、 添付した画像の矢印の部分です。 三本線のとこをクリックすると画像のようにメニューが出てくるようになっています。 これをカスタマイズページで表示させるにはどうコードをかけばいいのでしょうか？ ソースを全部張り付けて該当部分を教えていただければ早いんだと思うのですが、 ソースが長すぎて貼り付けられず。 全く同じものでなくても、同じような感じのメニューになるようなもののhtml,css,javaを教えていただけますでしょうか？ どうぞよろしくお願いいたします。
- runway173
- お礼率54% (37/68)
- CSS
- 回答数1
- ありがとう数7
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞テンプレートを利用して何ページか作っているのですが、 それでは絶対に不可能!!根本的に間違っている。 最初の最初からきちんと本道を歩むと、決して難しくもなんともない事です。 ＞ テンプレートをつかって文字を入替えるのは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には文書構造だけを書きます。 文書を構成する要素(部品)をタグを用いてマークアップします。 <h1>ここは見出し</h1><p>ここから新しい段落で、<strong>ここは重要</strong>なところ</p> とね。これをブラウザで見ると<h1>は大きな太字で、<p>で間隔をあけて改行され、<strong>は太字。スクリーンリーダーは<h1>ぱ男声の大きめな声で、<p>で間を空けて<strong>でアクセントをつけて・・・。それらの機能はHTMLを利用するソフトによるもので、HTMLがそれを指定しているわけではない。 その上で、スタイルシートでscreenメディア(PCやスマホ)向けに、携帯電話向けに、あるいはプリンター向けにデザインして行きます。 ＞三本線のとこをクリックすると画像のようにメニューが出てくるようになっています。 三本線らしきところはないし、メニューらしきものもないので分からないですが、はじめはデザインではなく、ひたすらHTMLをきちんとマークアップすることを身につけましょう。検索エンジンは無論、誰しもページのデザインでサイトを訪問してくれるわけではありません。決め手になるのは内容ですから。 この説明の意味・・多分、急には理解できないと思いますので、(Chrome以外)のブラウザで下記サイトをご覧ください。 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) ・最初にHTMLソースを確認する。 ・次に、ブラウザの[表示]メニューから[スタイル(シート)]に進んで、色々なスタイルを選択してみる。 ・それぞれウィンドウ幅を変えたりフォントを大きくしたり小さくしたり ・印刷プレビューでプリントアウト時の状態を確認 HTMLさえ、きちんと書けていたら後はスタイルシートで自在にデザインできるのですよ。
関連するQ&A
- Tumblrテーマのcssが読めません
https://www.tumblr.com/theme/38637 上記テーマでサイトを制作しています。 トップページのスライド部分の画像はどこに投稿したものが表示されるのでしょうか？ div id="slide_cnt" の部分がそうだとは思うのですがその先がよくわからなくて… どうぞよろしくお願いいたします。
- 締切済み
- CSS
- Tumblrでjsが適用されない
Tumblrをカスタマイズしています。 webデザインド素人です。ご教授いただけますと助かります。 http://codepen.io/gabrielbrettas/pen/vtmdE このサイトのメニューをつけたいと思い、コピペしてみたのですがｊｓが適用されず、 http://shisakusonoic.tumblr.com/ ↑パスワードは3212173です このように、ただの文字だけになってしまいます。 何が問題なのでしょうか？ どうぞよろしくお願いいたします。 下記、ソースコードです。 <!doctype html> <html> <head> <style> body { /* 画像ファイルの指定 */ background-image: url(URL); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #464646; } * {text-decoration: none; transition: all 0.3s; transform: all 0.3s; } body {padding: 50px;} li {list-style: none;} .menu { display: inline-block; position: relative; .btn { display: block; cursor: pointer; padding: 10px; .bar { width: 30px; height: 5px; background: #000; margin-bottom: 5px; } .bar:last-child {margin-bottom: 0px;} } nav { position: absolute; left: 10px; background-color: whitesmoke; border: 3px solid #000; visibility: hidden; opacity: 0; -webkit-transform: scale(0.7); a { font-family: 'Open Sans'; color: #222; padding: 10px 20px; display: block; border-bottom: 1px solid #ddd; white-space: nowrap; } li:last-child a {border-bottom: 0px;} a:hover {color: whitesmoke; background: #000;} } .menu_show { visibility: visible; opacity: 1; -webkit-transform: scale(1); } } </style> </head> <body> <div class="menu"> <div class="btn"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> <nav id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> <script type="text/javascript"> $(document).ready(function(){ $('.menu .btn').on('click', function() { $('#nav').toggleClass('menu_show'); }); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- CSSでのページ構築について
CSSでのページ構築について CSSでのサイト制作に挑戦しています。 まずは、テンプレートをつかってカスタマイズしてみようとおもい、テンプレートをDLしました。 「フッタ／左メニュー／メインコンテンツ／フッタ」というブログなどでよくあるものです。 （縦三段で、真ん中が左右２つに別れている2カラム） CSSファイルは、外部読み込み形式です。 トップページを作って、いざメニューからメインページのリンクを貼ろうと思ってつまずきました。 左ページのコンテンツメニューに設定したリンクを、右側の枠内に表示したいのですが、そういった場合は、どうすれよいでしょうか。普通に右側の内容をいれたHTMLにリンクすると、全画面がそのページになってしまって、ヘッダ／左メニュー／フッタは消えて（隠れて）しまいます。 ヘッダや左メニューをそのままにしてページ数を増やしたいときは、トップページをひたすらコピーして、右側の要素部分だけを変更していくのでしょうか？ でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 左メニューの項目が増えた時など、全ページを修正しなければならなくなりますし。 自分なりにCSS関連のサイトを検索して調べてみたのですが、どこも「トップページをそのままコピーしているようにしかみえない」のです。 右側ページ内容のHTMLに、ヘッダやメニューも読み込ませるような設定が必要なのでしょうか？ ソフトはDW CS4を使っています。 どなたか、CSSの達人さま、教えてくださいませ。 お願い致します。
- 締切済み
- ホームページ作成ソフト
- Tumblrの画像投稿で勝手にリサイズされる
先日からTumblrで画像投稿しようとすると、勝手に500pixelほどに縮小されてしまいます。 縮小されてしまう間までに何か設定を変更してはいません。 カスタマイズの問題かと思い、テンプレートももう一度変更してみましたが無理でした。 投稿の際にリサイズされてしまうので、テンプレートよりも投稿設定の問題かと思うのですが 自分の力ではどうにもできなかったので、質問させて頂きます。 ご存知のかたいらっしゃれば、よろしくお願い致します。 ・画像投稿最大サイズ、フォーマットは理解しております。 ・アカウント設定でフルサイズを表示にチェックを入れています。 ・使用テンプレート【http://sanographix.github.io/tumblr/illustfolio2/】 そのまま使用しており、いじっておりません。
- 締切済み
- ブログ
- Tumblrで記事中にリンクが貼れない
Tumblrで「Aa テキスト」の所から記事を書く際に、 記事中にリンクを貼ろうとしたら、うまく表示されません。 例えば「パソコン」という文字にリンクを貼って、パソコンの画像検索ページに飛ばそうとする時。 「この<a href="画像検索ページのURL">パソコン</a>がおすすめ！」 と記事を書いて保存すると、Tumblrの自分のサイト上で 「この<a href="画像検索ページのURL">パソコン</a>がおすすめ！」 とそのままタグが表示されてしまいます。 ダッシュボードで保存した記事を見てもそのままタグが表示されたり、</a>以降の「がおすすめ！」の部分までリンクの下線が続いたりします。 わかりにくくてすみませんが、どうしてTumblrの記事上でリンクが貼れないのでしょうか？ 記事中の文字を押すとその言葉に関連したページなどに飛べるようにしたいので、Tumblrの「リンク」ではなくhtmlで組み込めるようにしたいです。 どうかご示唆のほどよろしくお願い致します。
- 締切済み
- ブログ
- CSSでHP作成したい。メニューコンテンツはどのように作ったらいいですか？
CSSでHP作成したい。メニューコンテンツはどのように作ったらいいですか？ こんにちは。 今まで、ホームページビルダーを使って、HTMLでウェブページを作ってきました。 左カラムをメニュー部分として、インラインフレームで作成していました。 この度、SEO対策から、 CSSを使ったテンプレートに代えて作り変えようと思っています。 でも、いまいちよくわからないのですが、 スタイルシートで左カラム(メニュー)を書くとなると、 全てのページを作った後にリンクを貼って、 そのメニュー部分をすべてのページにまた複製しないとならないですよね？？ 私のウェブサイトは、100ページ弱あるので、 なかなか考えただけで大変そうです。。。 スタイルシートで、2カラム形式左メニューのページを作成したことのある方、 もし良かったら方法を教えて下さい。 ※ちなみに、ブログは自己カスタマイズが大変なので利用しない方向です。 FC2で持っていますが、やっぱりHTMLの方が使いやすいので・・・
- ベストアンサー
- SEO
- ＣＳＳ、ＨＴＭＬのメニューリストの解説をお願いします
宜しくお願い致します、趣味でホームページ制作をはじめました。 http://www.b-architects.com/ 上記のサイトのトップページの 「メニューの部分だけ（リスト）」、 構造を理解して自分もこんな感じでメニューを作りたいと思っています。 ちなみに私の知識としては、ＨＴＭＬの記述は非常に初心者レベルで記述できる程度、ＣＳＳに関しても同じであります。 上記サイトを理解する上でまず、上記サイトのトップ画面を開いた上で、 ファイル→名前を付けて保存する 事で、上記サイトの構成しているファイルと部品（ＣＳＳファイルやら 画像）を保存して、上記サイトのＨＴＭＬソースを眺めながら、 「メニュー（リスト）の部分だけ」 理解し、自分も同じように記述して習得しようとしているのですが、 「ちんぷんかんぷん」です。 まず、メニュー（リスト）にあるサービス～ケーススタディの左横の 縦の棒ですが、これは画像なんでしょうか？ソースで記述されたものなのでしょうか？ 先ほども私が書いたように、トップページからファイル→保存をすると このページを構成するファイルと部品（ＣＳＳファイルやら画像）は確かに 保存されてますが、縦の棒に該当する画像は保存されてませんでした。では ソースでＣＳＳか何かで記述されているのだろうか？と思い外部ＣＳＳファイルを睨めっこしたのですが、そんな形跡がありません。 このサイトはプロのデザイン制作会社のページなのでコード文字数が多く なかなか私も完全に構造内容を確実に把握できません。 「メニュー（リスト）部分のみ」でいいのでどなた様かどうか解説して 頂けないでしょうか？ また私もどうも地頭が悪いので、メニュー（リスト）の部分を構成する ＨＴＭＬとＣＳＳを抜粋して説明して頂けると本当に有難いです。 友人には、そんな難しいサイトで勉強せず、適当にテーブルで作ればい いだろうが！と言われますが、なんとかこのサイトで理解したいんです。 上記サイトの構造を眺めて２週間ですが、全然わかりません。 助けて下さい。宜しくお願い致します。
- ベストアンサー
- CSS
- ブログのＣＳＳ編集について教えてください
ＣＳＳ編集初心者です。 ウェブリブブログのカスタマイズを教えてください。最初デザインテンプレートを使っていましたが、カスタマイズしようと思いトップページの背景の変更はできました。記事ページもカスタマイズしたいのですができません。初心者で言葉が変かもしれませんが・・・記事ページをまっさらにしてからカスタマイズしなくてはいけないのですか？ 元のプレートのままで何も変わりません。どなたか初心者用の解説をお願いいたします。
- 締切済み
- ブログ
- CSSを用いたレイアウト（メニュー部分の幅指定）についての質問です
無料配布CSSテンプレートを用いてホームページ作成しているほぼ初心者です。 入門書を片手に文字の大きさや背景画像の位置などに微調整を加えいていたのですが、メニュー部分（擬似フレームと言うのでしょうか？）の幅の変更についてのみ、どの記述をいじればいいのかがわかりません。 配布元サイトは既に閉鎖しており、そちらへの質問は不可です。ネットでも検索しましたが、元制作者が使っているような記述がみつかりませんでした（テンプレートの該当部分はほぼ<body>と<menu>のみです）。 該当しそうなところに<wight=〇%>を書いては確認、という作業を繰り返しましたが、どうしてもうまくいかないので質問しました。どうぞよろしくお願いします。
- ベストアンサー
- HTML
- アメーバブログ スキンCSS編集のことについて
こんにちは。私はアメーバブログを使用しています。 だいぶんアメブロにも慣れてきて、スキンCSS編集をやってみようと思っています。 amebaヘルプの[スキンをカスタマイズしよう]というページを見て、色々と頑張っているのですが、スキンCSS編集のことがなかなか分かりません。 amebaヘルプのスキンCSS編集を利用する・・準備(http://helps.ameba.jp/qguide/blog/post_323.html#step3)というところに、『CSSソース内の「☆かんたんスキンカスタマイズはこちら☆」に進みます。』と書いてあったのですが、実際ソース内にはそう書いてあるところはありませんでした。なぜなのでしょうか。 ページ背景の画像を入れたくて、色々と試行錯誤しているのですが、まだよく分かりません。amebaヘルプにも「☆かんたんスキンカスタマイズはこちら☆」のほうの説明なので、あまり役に立ちません。 何か少しでも知っていらっしゃる方お見えでしたら、回答よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
お礼
ご丁寧にありがとうございました ついこの間始めたばかりで何もわからず、初歩的なことまで教えていただき助かりました 教えていただいたところを見て頑張ってみます また投稿するかもしれませんので、その際はよろしくお願いいたします