独自レイアウトの編集

2011年

5月

24日

ヘッダにFlashを追加する

ヘッダにFlashを追加する方法を紹介します。

 

先日Jimdoもスマホに正式対応しましたね!

iPhoneとHTML5の時代になり、Flash自体については正直今更感はあります。

しかし、この方法であればFlash以外にも応用できそうなので、記事として残しておくことにしました。

 

続きを読む 3 コメント

2010年

7月

03日

CSSはどこに書く?

JimdoでCSSを書こうとすると、主に次の2箇所に書くことになります。

  1. レイアウト画面のCSS(「レイアウト」→「独自レイアウト」→「CSS」)
  2. ヘッダー部(「設定」→「ヘッダー部を編集」)

どちらに書いてもちゃんと反映されますが、この2つはどのように使い分けるのがよいのでしょうか?

 

続きを読む

2010年

7月

01日

ヘッダー部のCSSで既製レイアウトのスタイルを上書きする

以前「既製レイアウトでもナビゲーションの文字色を変える」などという記事を書いてしまいましたが、「ヘッダー部を編集」でCSSを記述すれば、簡単に既製レイアウトのスタイルを上書きできることに気がつきました。

 

今まで気がつかなかったのが情けないのですが、書いてしまったものも何かの参考にはなるでしょうから、それはそのままにして、CSSで同様の内容を実現する方法を紹介しておきます。

 

「設定」→「ヘッダー部を編集」 を開いて、次のコードを記述します。

このCSSはナビゲーションの1階層目の文字色を赤くするコードです。

※CDATAはJimdoが勝手に付加します。

 

続きを読む 4 コメント

2010年

6月

18日

海外のテンプレート配布サイト

今回は趣向を変えまして、独自レイアウトのテンプレートを配布している海外のサイトを紹介します。

 

PagePartnerではなく独自レイアウトのHTML,CSS,画像ファイルをまとめて配布しているサイトです。

 

既存のJimdoページにも適用できます。

 

学習用としても役立つと思います。

 

続きを読む

2010年

5月

29日

ナビゲーションをドロップダウンメニューに変更する

以前独自レイアウトでナビゲーションを横書きにする方法を紹介しましたが、jQueryのプラグインを使ってナビゲーションをドロップダウンメニューに変更する方法を考えてみます。

 

続きを読む 3 コメント

2010年

5月

22日

フッターのログインを非表示にする

どうもサイトを訪れる人に無関係な「ログイン」を表示することに違和感を覚えまして、非表示にする方法を調べてみました。

 

まずJimdoのホームページをブラウザで表示して、ソースを見てみます。

 

HTMLのソースを見るだけなので、ブラウザは何でも構いません。

 

文字列「ログイン」で検索し、「ログイン」部分のclassかidを特定します。

 

続きを読む

2010年

5月

20日

Google Font API でフォントを変更する

Google から Google Font API のベータ版がリリースされました。(2010/05/20)

 

Google Font API は指定したフォントがPCにインストールされていなくても、ブラウザ上で美しいフォントを表示するための仕組みを提供してくれます。

 

今日はこれを試してみます。

 

 

続きを読む

2010年

5月

18日

ブログの日付画像(色相)を変更する

訂正記事(212/5/23) 

ブログの日付画像のデザインが標準機能で変更可能に

今は標準機能でもっとお手軽な方法があります!

続きを読む

2010年

5月

13日

コンテナを削除して横幅いっぱいに表示する

最近はJimdoに限らずコンテナ(container)にコンテンツを収め、閲覧する環境の画面の広さ(特に横幅)に影響されにくいレイアウトにするのが主流です。

 

レアなケースかもしれませんが、画面が広ければ広いだけ表示領域に使いたい場合には、コンテナを削除するという単純な方法で、これを実現できます。

 

ちょっと意外ですが、独自レイアウトのcontainerは必須ではないのです。

 


続きを読む

2010年

5月

08日

横書きナビゲーションで2階層目を表示する(解決編)

前回の調査編では"navigation[1|2|3]"を分割して配置できず、既存レイアウトと同じような記述ができないところまでを確認しました。

 

しかし、実は"navigation[1|2|3]"は複数配置することができるのです。

 

これを利用して、簡単に2階層目のメニューを作成する方法を紹介します。

 

続きを読む 3 コメント

2010年

5月

08日

横書きナビゲーションで2階層目を表示する(調査編)

前回の記事ナビゲーション(navigation)を横書きに変更するではナビゲーションをとりあえず横書きにする方法を紹介しました。

 

この方法だと、ナビゲーションの2階層目を表示する場合に、1階層目と同じ行に表示されてしまう問題があります。

 

続きを読む 0 コメント

2010年

5月

05日

ナビゲーション(navigation)を横書きに変更する

ナビゲーションを横書きにしてヘッダーの下に配置する方法を説明します。

 

おそらくJimdoの独自レイアウトを編集し始めて、一番最初に困る部分ではないでしょうか?

 

続きを読む 1 コメント

2010年

4月

30日

ヘッドラインをトップ画像に重ねる

独自レイアウトのヘッドライン(タイトル)はトップ画像の右上に配置されています。

他のレイアウトのようにGUIで移動できないので、困る方が多いのではないでしょうか?

 

ヘッドラインを画像に重ねるには、まずHTMLを編集してHeadlineと画像の順番を変えます。

後に書いた方が重ね合わせの手前に来ます。

続きを読む 0 コメント

2010年

4月

30日

ナビゲーション(navigation)のフォントサイズを変える

ナビゲーションのフォントサイズを変えるには、CSS上で次の箇所を修正します。

続きを読む 0 コメント

2010年

4月

30日

背景の色を変える

背景色を変えるにはCSS上でbodyのbackgroundを変更します。ここでは初期状態グレーの背景色を白に変更しています。

続きを読む 0 コメント

2010年

4月

30日

ナビゲーション(navigation)を右に移動する

ナビゲーションを右に移動するには、CSSの#navigationと#contentのfloatの値を変更します。

続きを読む 3 コメント

2010年

4月

30日

全体(container)の幅を変える

全体(container)の幅を変えるにはCSSの#containerのwidthを変更します。

続きを読む 0 コメント