HTML/CSS
HTML
直接、HTMLタグを使って入力できる方は、カスタムHTML エレメントをコンテンツにドラッグし、HTMLで記述します。(表形式の入力をしたい場合には、現状ではHTMLでの入力しかありません)
なお、Weeblyの独自タグがあります。http://themedocs.weebly.com/html.htmlに説明されていますので、興味のある方はご参照ください。
なお、Weeblyの独自タグがあります。http://themedocs.weebly.com/html.htmlに説明されていますので、興味のある方はご参照ください。
CSS
HTMLで記述する場合、HTMLタグにclassやidなどの独自のスタイルを設定しておきたいということが生じます。デザインタブをクリックすると、「HTML/CSSを編集する」というタブが表示されますので、ここでスタイルを追加します。
「HTML/CSSを編集する」タブをクリックすると、背景色が黒のエリア(初期設定の場合)が表示されますので、ここにCSSを書き加えた後、右上の「保存」ボタンをクリックします。
CSSを書き加えても、その通りの書式にならない場合があります。元のCSSが優先されるなどの影響があるためです。従い、HTMLを記述する場合は、例えば、<div class="sample">~</div>としておき、CSSの記述は、「.sample table {~}」などとします。
ページ毎に背景を変える
サイト全体のすべてのページの背景色,背景画像は、上記cssファイル(上記の場合、main-style.css)内に以下のように指定されています。
body {background: #516b00 url(body-bg.gif);}
特定のページのみに、異なる背景色,背景画像を指定する場合は、ページタブ →リストにある中から特定のページを指定 → 高度な設定 → ヘッダーコード欄に例えば、body {background: #000000;} と書きます。同じスタイルの指定がある場合、ヘッダーコード欄のスタイルが優先されます。
body {background: #516b00 url(body-bg.gif);}
特定のページのみに、異なる背景色,背景画像を指定する場合は、ページタブ →リストにある中から特定のページを指定 → 高度な設定 → ヘッダーコード欄に例えば、body {background: #000000;} と書きます。同じスタイルの指定がある場合、ヘッダーコード欄のスタイルが優先されます。
CSSを修正しても意図した結果にならない場合
共通のCSS(ファイル名:main-style.css)を正しく修正しても意図した通りに機能しない時は何らかの理由があるのですが、どうしてもその原因を特定できない場合は、ページ毎にCSSを記述してみて下さい。 「ページ」タブ → 「高度な設定」からヘッダーコード欄にCSSを記述します。こちらに記述したCSSは、共通のCSSより優先します。
footerの「Create a free website with weebly」の
削除
規定では、フッターに「Create a free website with weebly」の表示が出ます。
有料ユーザーになれば、「設定」タブから簡単にこれを修正または削除できます。無料ユーザーのままでこれを削除するには、CSSを修正しなければなりません。
まず、「デザイン」タブ → 「Edit HTML/CSS」 → 左サイドにある「ページレイアウト」からtall-header.htmlをクリックし、HomeページのHTMLソースを参照します。
フッターの「Create a free website with weebly」は、{footer}に書かれていますので、該当のHTMLを探します。本サイトの場合、div id="footer-in">{footer} (省略)にありますので、左サイド CSSのmain-style.cssをクリックし、#footer-inのCSSを非表示にします。
具体的には、
#footer-in {
visibility:hidden; ←これを追加
padding: 7px 20px;
background: #688900;
}
のようにvisibility:hidden; を追加し、「保存」ボタン → 「Publish」する。
但し、このままでは、フッターの非表示部に空きが生じ落ち着かないので、tall-header.htmlのHTMLソースに戻り、表示されるフッター部に、例えば「J-NET ~」等の文字列を追加しておきます。本サイトの場合は、<div id="footer">の次に
J-NET Osaka TEL 072-201-4975 と直接入力しました。
(「保存」ボタン → 「Publish」を忘れないように)
※上記の他に、custom-footerを作る方法もあります。
有料ユーザーになれば、「設定」タブから簡単にこれを修正または削除できます。無料ユーザーのままでこれを削除するには、CSSを修正しなければなりません。
まず、「デザイン」タブ → 「Edit HTML/CSS」 → 左サイドにある「ページレイアウト」からtall-header.htmlをクリックし、HomeページのHTMLソースを参照します。
フッターの「Create a free website with weebly」は、{footer}に書かれていますので、該当のHTMLを探します。本サイトの場合、div id="footer-in">{footer} (省略)にありますので、左サイド CSSのmain-style.cssをクリックし、#footer-inのCSSを非表示にします。
具体的には、
#footer-in {
visibility:hidden; ←これを追加
padding: 7px 20px;
background: #688900;
}
のようにvisibility:hidden; を追加し、「保存」ボタン → 「Publish」する。
但し、このままでは、フッターの非表示部に空きが生じ落ち着かないので、tall-header.htmlのHTMLソースに戻り、表示されるフッター部に、例えば「J-NET ~」等の文字列を追加しておきます。本サイトの場合は、<div id="footer">の次に
J-NET Osaka TEL 072-201-4975 と直接入力しました。
(「保存」ボタン → 「Publish」を忘れないように)
※上記の他に、custom-footerを作る方法もあります。
Javascriptやjqueryの利用
スクリプトを<head>内に書く場合、ページタブ → 当該ページを指定 → 高度な設定をクリック → ヘッダーコード欄に書きます。外部ファイルにする場合も同様にここに書き込みます。外部ファイルそのものは、デザインタブ → html/cssタブをクリック → 左サイドにある「新しいファイルを追加」してアップロードします。なお、Jqueryの場合、
スクリプト本体 https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.jsは、最初から読み込みするように設定されていますので、必要なスクリプトのみをヘッダーコード欄に書き加えます。
※Weeblyでは、phpは使用できません。
スクリプト本体 https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.jsは、最初から読み込みするように設定されていますので、必要なスクリプトのみをヘッダーコード欄に書き加えます。
※Weeblyでは、phpは使用できません。
(例1)パスワードで保護されたページ
Sample (パスワード: j-net で保護されたページにリンクしています)
(例2)ページ毎にサイドバーをカスタマイズ
基本的にサイドバーのコンテンツは全ページ共通です。あるページのみ、コンテンツを追加したい場合には、ちょっとしたプログラムを組み込む必要があります。本ページ(ファイル名:htmlcss.html)のみ、左サイドバーに「J-NETでは、スマートフォン用ホームページの制作も承っております。」といった文字列を追加する場合
1. ヘッダーコードにファイル名を取得する関数を記述します。
<script>
function GetFileName(file_url) {
file_url = file_url.substring(file_url.lastIndexOf("/")+1,file_url.length)
return file_url;
}
</script>
<script>
function GetFileName(file_url) {
file_url = file_url.substring(file_url.lastIndexOf("/")+1,file_url.length)
return file_url;
}
</script>
2. 続いて、上記関数を実行し、ファイル名が「htmlcss.html」なら、文字列を書くというスクリプトを挿入します。
<script>
file = GetFileName(location.href);
if (file == 'htmlcss.html')
document.write('<p >J-NETでは、スマートフォン用ホームページの制作も承っております。</p>');
</script>
<script>
file = GetFileName(location.href);
if (file == 'htmlcss.html')
document.write('<p >J-NETでは、スマートフォン用ホームページの制作も承っております。</p>');
</script>
このようなスクリプトに馴染みのない方は、専用のレイアウトを別途準備します。
「新規のPage Layoutの作成」を参照
「新規のPage Layoutの作成」を参照