※デコもじは2016年11月30日（水）でサービスを終了しましたので、もう使えません。このページでは過去の経緯などを振り返る時に利用する目的で、当時の内容を掲載しています。
みんビズ、なかなか使われている方いらっしゃいますね。この私のブログでも、人気の記事になりつつあります。
少しでも助けになればと思います。大変嬉しく思っています。早速ですが、本題に入りますね。
jimdoのfont（フォント）を少し変更したくありませんか？
私は、フォントはサイトをデザインをする上でとても重要だと思います。
フォントを変更する方法はいくつかありますね。
パッと思いつく方法は以下でしょうか。
- １．単純にcssの「font」で「MSゴシックとかよくあるフォント」を指定する
- ２．css3の「font-face」でwebフォントをサーバなどにアップして読み込んで指定する
- ３．外部webフォントサービスを利用する
今回はその方法の中で比較的導入が簡単な、
- ３．外部webフォントサービスを利用する
この方法を紹介いたしますね。
WEBフォントサービスの「デコもじ」で会員登録しましょう
「デコもじ」はwebフォントの利用を提供してくれるサービスです。
他にもwebフォントを提供しているサービスは沢山ありますが、有名なサイトの１つですよ。
お試し版フォントの利用は無料となっています。
会員登録はページ右上にボタンがあります。OpenIDに対応しています。
twitter,google,seesaaID,認証方法はいろいろあります。
いずれかのアカウントを選んで認証しましょう。
私はtwitterにしました。
【twitterのIDで認証しました】
連携アプリを認証すると利用規約の同意画面になりますので、必要事項を入力しましょう。
登録完了したら下の画面になります。
【登録完了しました】
それでは、フォントを使うwebサイトを登録しましょう。
ここではjimdoサイトのタイトルとURLを入力します。
私の場合は、
- サイト名：みんビズをどこまで活用できるか検証するサイト
- URL：http://0225.jimdo.com/
としています。
【webサイトを追加する】
で、これを登録しますと
- <script type=”text/javascript” src=”http://site.decomoji.jp/js/xxxxx.js” charset=”utf-8″></script>
- <script type=”text/javascript”>try{DecoMoji.load()}catch(e){}</script>
をサイト内に貼り付けましょう。みたい表示が出てきますので、
jimdoのサイトに貼り付けましょう。
jimdoの管理画面から、「ヘッダー編集」をクリックしましょう。
【jimdoのヘッダーにコードを貼り付けましょう】
先ほどのコード
- <script type=”text/javascript” src=”http://site.decomoji.jp/js/xxxxx.js” charset=”utf-8″></script>
- <script type=”text/javascript”>try{DecoMoji.load()}catch(e){}</script>
を、貼り付けましょう。
前回の記事でJQueryのスライドショーを入れたので、すでにコードが書いてありますね。
その記述よりも前に貼り付けてください。
ちなみにjimdoにJQueryのスライドショーをいれる方法はこちらで記事を書きましたので、参考ください。
【みんビズ jimdoでインタラクティブなjQueryスライドショーを入れる】これでjimdoサイトもちょっとはかっこよくなるかな
というわけで話を戻しまして、上の画像のようにコード入れましたでしょうか。
では、次へいきましょう。
フォントを選ぶ画面があったんですが、キャプチャ忘れました。
お試し版のみ無料で1つだけ選んで使えます（無料ですとあまり選択肢がありませんが・・・）
選んだら「編集」をクリックしましょう。
【フォントを選んで編集画面へ移動したところ】
ページ右部に「エディターを使う」とありますので、クリック。
画面がまた出ます。ここは動画で操作説明をしてくれていますね。
わからなくなったらこの動画を見返すと良いと思います。
というわけで、「エディターを開く」をクリック。
【エディターを開くボタンを押しましょう】
すると下の画像のように、登録したサイトが開きます。
【デコもじのエディターをクリックするとこうなります】
ページに線が入っています。これはエリアごとで区切られているようですね。
ページ右側にエディターのメニューがあります。一番上に「編集を開始」とありますので、クリックします。
試しに、ここではタイトルの
「みんビズをどこまで活用できるか検証するサイト」
のフォントを変更したいと思います。
タイトルのエリアをクリックすると新しくウィンドウが開きます。
このウィンドウで
- フォントの適用のON,OFF
- サイズの変更
- 適用範囲
が設定できます。
画像に「h1」とありますが、これはタイトルのタグが「h1」タグで囲まれた要素であるという意味です。
そのまま「適用」しましょう。
ちなみに要素別でフォントを指定することも出来ます。
タイトルのフォントは変更したいが、ブログの記事内容は普通のフォントでいい
なんて場合でも大丈夫です。
見ていただいたほうがわかりやすいですよね。
毎度毎度、説明が下手ですみません・・・・。
試しに私のjimdoサイトをご覧下さい。
jimdoのフォントを変更しました。| http://0225.jimdo.com/
という感じです。
【タイトルのフォントを変更しました】
とりあえず、やりたいところを適用しました。
なんか全体的にかわいらしくなった・・・
フォントがかわいらしいとちょっと乱暴な表現でも許されそうですね＾＾
これは使えるかもしれない！・・・いや、ごまかせないですよね。
まとめ
フォントを変更しただけで、結構イメージが変わったと思います。
それだけ、フォントの選定は重要だと私は認識しています。
「デコもじ」ですと、お手軽にフォントを変更できますね。
有料版ですと、豊富なフォント中から選べます。
もし、お気に入りのフォントがありましたら、有料版への登録も検討されてはいかがでしょうか。
私は、このかわいいフォントが気に入りましたので、このまま無料版を使おうと思います。
この機会にjimdoのご利用を検討されている方、登録はこちらでできます。
このページを共有する