Jimdoで作ったサイトをCSSでカスタマイズする方法

簡単にWebサイトを作れるサービスと言えば、JimdoとWix。

無料で使えて、Webの知識がほとんどいらずに簡単におしゃれなWebページが作れるのはすごいです。

ちょっとしたページならホントにあっという間ですし。

今回はWeb作成サービスのJimdoのお話です。

7、8割までなら簡単

Jimdoを使えば7、8割までならWebページを誰でも作れます。パソコンに拒否感がなければですけど…。

既存のテンプレートを選んで、画像やテキストを入れていくだけ。位置もドラッグすれば簡単に変えられます。

ただ、問題はそこから。

もうちょっとスペースを狭くしたい。ここの色だけを変えたい。とか、細かいところをカスタマイズしようとすると急にハードルが高くなります。

CSSをカスタマイズする

細かいところを変えるためには、CSSファイルをいじる必要があります。

CSSって？

HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
参照：HTMLクイックリファレンス

独自CSSを使うか、テンプレートのCSSを使うか

自分でデザインをしたいという人のためにJimdoだと、自分で一からCSSを組むことができるようになってます。

でも、一からデザインをカスタムするってJimdoを使うメリットがちょっと薄れない？という感じが…。

一番いい方法が、テンプレートのCSSを少しいじってやること。これができればいいんですけどね…。

テンプレートのCSSはいじることができない

JimdoではテンプレートのCSSをいじることができないんです。

確かに下手にいじるとテンプレートのデザインが崩れてしまうリスクがあるのでしょうがないとは思います。

でも、テンプレートのファイルにCSSを追加できる機能はほしいです。

ファイルをいじるんじゃなくて、そのファイルに追加するのであればリスクはあまりないはずですし。

でも、そんなことを言っても今はできないので、今できることで対策するしかないです。

その対策は2つあります。

ヘッダー編集で直書きする

JIMDOの管理メニューにヘッダー編集の項目があります。これはWebページの<head>タグ内を編集する部分です。

<head>タグ内にはタイトルや説明、CSS、Javascriptなどなど、Webサイトのメタ情報を記述します。

普通だったらCSSファイルを作っておいてそのファイルを読み込む指示をここに書いておきます。

ですが、それができないので思い切って直書きしてしまうという方法です。

CSSの使い方にについてわかりやすい記事があったので紹介しておきます。

CSSは外付け？直書き？ マンガでわかるCSS入門

Web上のcssファイルを読み込む

<head>要素内に書くのはごちゃごちゃして、あまりきれいではないです。

そこでもう1コの方法が、別のサーバーにCSSファイルを置いてそこから読み込んでしまおうという方法。

直書きよりはスマートです。ただ、別のサーバーにあるので読み込みが遅くなるという可能性が無きにしもあらずです。

自分が調べたときにでてきたのがこの解決策。あまりいいやり方がでてきませんでした。

他にいいやり方があれば教えてほしい…もしかしたら自分が見逃してるだけかもしれませんが。