サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
liyuanslab.jimdofree.com
ヘッダにFlashを追加する方法を紹介します。 先日Jimdoもスマホに正式対応しましたね! iPhoneとHTML5の時代になり、Flash自体については正直今更感はあります。 しかし、この方法であればFlash以外にも応用できそうなので、記事として残しておくことにしました。
私も初め勘違いしていたのですが、 既製のレイアウトの一部(ナビゲーションの色だけなど)を編集するのが独自レイアウトではありません。 どうもこれを勘違いされている方が多いようです。 つまり、「レイアウト」→「レイアウト」で既製レイアウトを選んだ後に「独自レイアウト」を選択すると、選択した既製レイアウトのソースが表示されるものと期待してしまうのですが、実際はそういうことはありません。 独自レイアウト自体が完結した1つのレイアウトであり、既製レイアウトとは完全に別物です。 その点にご注意ください。 また、既製レイアウトの一部を変更することは不可能ではありません。それにはjQueryなどのJavaScriptを使用して、ブラウザがページを読み込んだ後にCSSを変更するような命令を記述します。jQueryについてはこちらを参照してください。 では、独自レイアウトの初期状態を見てみましょう。 独自レイ
<div id="container"> <div id="header"> <h1> Headline </h1> <img src="header.jpg" alt="" /> </div> <div id="navigation"> <var>navigation[1|2|3]</var> <div id="sidebar"> <var>sidebar</var> </div> </div> <div id="content"> <var>content</var> </div> <div id="footer"> <div class="gutter"> <var>footer</var> </div> </div> </div> <div id="container"> <div id="header"> <h1> Headline </h1> <img src="header.
以前独自レイアウトでナビゲーションを横書きにする方法を紹介しましたが、jQueryのプラグインを使ってナビゲーションをドロップダウンメニューに変更する方法を考えてみます。 droppyをダウンロードする まずはこちらのサイトからdroppy-0.1.2.zipをダウンロードしてください。 http://plugins.jquery.com/node/2946/release HTMLを編集する ダウンロードしたzipファイルを解凍すると、docフォルダの下にindex.htmlがあります。これをブラウザで開いてHTMLの枠の中をコピーし、「レイアウト」→「独自レイアウト」→「HTML」のHeadlineとheader.jpgの間にペーストします。 内容はあとで修正するので、とりあえずサンプルのまま貼り付けます。 保存すると右のように表示されます。 この時点ではただのリストです。 CSSを編
JimdoでCSSを書こうとすると、主に次の2箇所に書くことになります。 レイアウト画面のCSS(「レイアウト」→「独自レイアウト」→「CSS」) ヘッダー部(「設定」→「ヘッダー部を編集」) どちらに書いてもちゃんと反映されますが、この2つはどのように使い分けるのがよいのでしょうか? レイアウト画面のCSSに書く内容 レイアウト画面のCSSには、レイアウトに関するものだけを書くようにします。 全体的な配置(ヘッダー,ナビゲーション,サイドバー,コンテント,フッターの位置とサイズ) 背景画像 ヘッダーのスタイル ナビゲーションのスタイル フッターのスタイル ヘッダー部に書く内容 ヘッダー部には、レイアウトが変わっても変わらないもの、つまり見出しや表などコンテンツの内容のスタイルを書くようにします。 コンテントに配置する内容のスタイル(特に見出し,表) サイドバーに配置する内容のスタイル(特
今回は趣向を変えまして、独自レイアウトのテンプレートを配布している海外のサイトを紹介します。 PagePartnerではなく独自レイアウトのHTML,CSS,画像ファイルをまとめて配布しているサイトです。 既存のJimdoページにも適用できます。 学習用としても役立つと思います。 Jimdo Tricks & Tipps ドイツのサイト"Jimdo Tricks & Tipps"です。 非常に完成度の高い テンプレートを配布しています。 色使いにお国柄が出ていますが、いくつかはそのまま日本でもそのまま使用できそうです。 テンプレートの他に 背景画像や ボタンもダウンロードできます。 テンプレート"marketplace"のリンクに間違いがあるので、こちらに正しいリンクを貼りました。 間違いはメールで指摘済みですが、まだ直っていませんね。 また、テンプレート"MyCompaly"は画像だけで
JimdoでjQueryを利用するには通常の使い方通りヘッダにjQueryのライブラリを読み込めばよいのですが、Jimdo自体が別のJavaScriptライブラリであるprototype.jsで動作する為に、衝突が起きて正しく動作しないことがあります。 Jimdoで使う場合にはこの点に注意しなければなりません。 まず、Jimdoの設定→ヘッダー部を編集に次のコードを追加します。 色々な記述方法がありますが、ここでは Google AJAX Libraries API を利用して、jQueryバージョン1.3系の最新版を読み込んでいます。 この方法だとJimdoにjQueryをアップロードする必要がなく、常に最新のライブラリを使用することができます。 <script type="text/javascript" src="http://www.google.com/jsapi"> </scr
JimdoでjQueryを利用するには通常の使い方通りヘッダにjQueryのライブラリを読み込めばよいのですが、Jimdo自体が別のJavaScriptライブラリであるprototype.jsで動作する為に、衝突が起きて正しく動作しないことがあります。 Jimdoで使う場合にはこの点に注意しなければなりません。 まず、Jimdoの設定→ヘッダー部を編集に次のコードを追加します。 色々な記述方法がありますが、ここでは Google AJAX Libraries API を利用して、jQueryバージョン1.3系の最新版を読み込んでいます。 この方法だとJimdoにjQueryをアップロードする必要がなく、常に最新のライブラリを使用することができます。
Jimdoは簡単にホームページを作成できるサービスです。 Web上で簡単にブログを作成するサービスは数多く存在していますが、それのホームページ版と考えていただくとよいと思います。 高機能なPro版,Business版がありますが、無料版がありますので気軽に始められます。 無料版で作ったページをそのままPro版,Business版にアップグレードできます。 Jimdoで無料ホームページを作成する Jimdoには多くのレイアウトが用意されており、選択するだけで美しく一貫性のあるデザインのホームページを作成することができますが、ちょっと凝ったことをやりたい方は「独自レイアウト」で一味違ったホームページを作ることもできます。 しかし、独自レイアウトはHTMLとCSSがわかっている方には簡単ですが、そうでない方にはかなり敷居が高いと思います。 そこで、当サイトでは独自レイアウトの編集方法を中心に、ち
このページを最初にブックマークしてみませんか?
『Liyuan's オープンラボ - Jimdo活用研究室』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く