スポンサーサイト

一定期間更新がないため広告を表示しています

【テンプレートNo.005】berrycake

シンプルかわいい、スイーツ系テンプレです。


ベリーケーキテンプレ


画像の横幅は表示の最大値が設定してあるので、レイアウトより大きな画像をアップロードしてもはみ出す事がないようになっています。

画像の背景には自動でシャドウが入ります。(対応ブラウザのみ)

ダウンロード

テンプレート使用上のルールはコチラをお読みください

【テンプレートNo.004】chokocake

シンプルかわいい、スイーツ系テンプレです。


チョコケーキテンプレ


画像の横幅は表示の最大値が設定してあるので、レイアウトより大きな画像をアップロードしてもはみ出す事がないようになっています。

画像の背景には自動でシャドウが入ります。(対応ブラウザのみ)

ダウンロード

テンプレート使用上のルールはコチラをお読みください

関連記事が表示されるようになりました

半年ぶりの更新となり、もう存在すら忘れられていそうですが… 
現在公開している3つのテンプレートに関連記事が表示されるように変更しました。

これからまた少しずつテンプレートを増やしていこうと思いますので、どうぞよろしくお願いしますm(_ _)m

ヘッダーにロゴを設置する方法【対象:Psychedelic / Pink Birds / Manly Stag】

先日公開したテンプレート(Psychedelic / Pink Birds / Manly Stag)に「ナマムギ」ブログのようにロゴをドーン!と設置する方法をざっくりと紹介します。

※編集後にレイアウトなどおかしくなっちゃうと大変です。編集前の内容は必ずどこかに保存してください。


1) ロゴの画像を用意

サイズ
  • 横750ピクセル以内×縦200ピクセル以内
背景色(WEBカラーコード)png画像で背景を透過させる場合は飛ばしてください。
  • Psychedelic #000000
  • Pink Birds #D8C4C7
  • Manly Stag #333333


2) ロゴのアップロード

[データ管理]→[画像管理]からロゴ画像をアップロードしてください。


3) CSSの編集

CSSの中から下記の「変更前」を探して、「変更後」の内容に差し替えてください。
※*****の部分はそれぞれ任意のものにしてください。

変更前======================================
#header h1 {
    padding-top: 75px;
}
#header h1 a {
    font-size: 24px;
    font-weight: bold;
}

変更後======================================
#header h1 {
    background-image: url(http://*****); /*ロゴの画像パス*/
    background-repeat: no-repeat;
    background-position: left center;
    text-indent: -9999px;
    height: 200px;
    width: *****px; /*ロゴの横幅*/
}
#header h1 a {
    display: block;
    height: 100%;
    font-size: 24px;
    font-weight: bold;
}
#header p {
    display: none;
}


4) プレビューで確認

テンプレート一覧ページの[確認]から編集したテンプレートの動作確認をしてください。
これでOK!ってなったら適用させてください。

カスタマイズでデザインが崩れてしまったり元に戻したい場合には、カスタマイズ前に保存した内容に置き換えるか、テンプレートの再設置をしてください。

【テンプレートNo.003】Manly Stag

牡鹿がポイントの、レーシーで上品なJUGEMテンプレートです。







こちらのテンプレートは、ブラウザのサイズによって横幅が可変するので、記事を広く見せることができ、記事が見やすくダイナミックな印象のテンプレートです。





ダウンロード

テンプレート使用上のルールはコチラをお読みください