mysticdiary

更新はLittleDreamでしています。右のバナーからどうぞ

すっごい久しぶりだけど

テンプレート作ったよ~。
つ~か、いろいろ作ってはいたんだけど、共有申請するのは久々です。
雪の白さを意識したっつ~か、冬っぽく無彩色で作ってみました。

monchromesample.jpg

トップの画像は好きなのに変更できます。
これはインデックスページにしか表示しないようになってます。
今回のは、いろいろjqueryのスクリプトがはいってます。
トップ画像はboxgridで、あとはyuga.js入れてみました。
このyuga.jsっていうのがいろいろ便利なのよ~。
トップにするするスクロールしてくれる機能とか、lightboxみたいなthickboxも 入ってるし(写真をクリックするとライトボックス効果が得られる)、 使ってる人も多いみたい。
yuga.jsについて詳しくはこちらを見てね。

●boxgrid写真の変更のしかた。


<div class="box1">
<div class="boxgrid captionfull">
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/monochrome2photo1.jpg" />
<div class="cover boxcaption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/><a href="#">read more</a></p>
</div>
</div>
</div>
この部分の

<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/monochrome2photo1.jpg" />
画像リンクをご自分のものに差し替えます。
画像の大きさは190px×190pxです。


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/><a href="#">read more</a></p>
説明文は<p>~</p>で囲まれていれば何を書いてもオッケーです。
サンプルとおなじようにしたければ、リンク部分(#)にリンクアドレスを挿入してください。
関連記事
baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

26 Comments

rutiler says...""
はじめまして。
新着テンプレをみて かっこいいので使わせてもらっています。
すごく気に入ってます。

あと質問なのですが メインの6枚の写真にマウスを置くと 文字がでますが ここの使い方と 文字の変更をどこですればいいか教えてください
よろしくおねがいします。

回答は このコメントへの返信で結構です。
また見に来させていただきます。
2010.12.22 22:55 | URL | #- [edit]
y. says...""
お久しぶりです。使わせていただいております。上のかたのですが、私はこの意味が何か英字??知りたい。忙しいところすいません。(~~);
2010.12.24 11:14 | URL | #- [edit]
管理人 says..."rutilerさんへ"
こんにちは。

画像の部分はマウスをあてたときに、
説明文が見えるようになっていますが、
説明文にリンクを挿入したりできます。
個別記事にリンクしたり、お好きなページへリンクできます。

あとは上の記事に書いてあることは参考にならないでしょうか?
それを読んだ上で不明なことがあれば
新たに質問してください。
2010.12.26 09:04 | URL | #i4E9Nobc [edit]
管理人 says..."y.さんへ"
こんにちは。

なにやら、管理人のパソコンで見ると、文字化けしております。
サンプルの説明文の意味ということですか?
これはよく利用されるダミーテキストです。
詳しくはこちらを(http://ja.wikipedia.org/wiki/Lorem_ipsum
ご覧ください。
2010.12.26 09:08 | URL | #i4E9Nobc [edit]
says...""
はじめまして!

数ヶ月前にwhiteboxのテンプレートを見つけて以来ずっと使わせていただいてます。
この記事のテンプレートに、

>トップの画像は好きなのに変更できます。
>これはインデックスページにしか表示しないようになってます。

とあるのですが、whiteboxでもインデックスページのみに画像表示をするように変えることはできますか?
もしできるのであれば、変更方法を教えてください。
よろしくお願いいたします。
2010.12.31 00:59 | URL | #L9cprX.c [edit]
管理人 says..."♪さんへ"
こんにちは。

テンプレートはwhitebox2のことでしょうか?
トップの画像をインデックスページのみに表示する場合は、
写真の部分をインデックスページの変数で囲むようにします。
変数についてはfc2ブログのマニュアルを参照してください。

2011.01.10 09:47 | URL | #i4E9Nobc [edit]
管理人 says..."じゃすみんさんへ"
こんにちは。

タイトルの文字の指定は、
cssの
#header h1 {
font-size:35px;
padding:50px 0px 0 30px;
line-height:1.2em;
font-weight:bold;
}
の部分に、
font-family:
を加えてください。
font-familyの指定方法についてはインターネットなどで
検索してください。

よろしくお願いします。
2011.01.10 09:56 | URL | #i4E9Nobc [edit]
まさ says..."こんにちは"
かっこいいので使わせて頂きたいと思っているのですが
背景って変える事できますか?
画像にしたいと思ってるんですが難しいですか?
2011.01.11 05:33 | URL | #NNK/NnEc [edit]
花まつ says..."はじめまして。"
とっても素敵だったので、早速使わせていただいています^^
そこでお尋ねなんですが、トップの画像をインデックスページ以外(全てのページ)に表示することは出来ますか?
可能でしたら、教えてください。
可能でも、変えて欲しくない場合は、教えていただかなくても大丈夫です。
そのまま使わせていただきます。

よろしくお願いいたしますe-466
2011.01.11 23:58 | URL | #- [edit]
says..."たびたびすみません"
monochrome2をダウンロードさせていただいて、<!--index_area-->の位置を確認した上で、教えていただいた通り、写真の部分だと思われる<div id="photo">の直前から<!--topentry-->の直前までを<!--index_area-->で囲ってみましたが、うまくいきません。
(画面が真っ白になってしまいます・・・)
whitebox2では違う場所に入れなければいけないのでしょうか?
教えてください。
2011.01.14 10:48 | URL | #L9cprX.c [edit]
管理人 says..."花まつさんへ"
こんにちは。

トップ画像をすべてのページに表示するには
インデックスページに表示するための変数
(FC2のマニュアルを参考にしてください)
を削除します。
デフォルトでは、画像部分がこの変数で囲まれているはずです。

コメント欄に変数を書き込むと不具合の原因になるので
書きませんが、HTMLを探せばあります。

よろしくお願いします。
2011.01.14 12:18 | URL | #i4E9Nobc [edit]
管理人 says..."♪ さんへ"
こんにちは。

変数には開始タグと終了タグがあります。おそらく
開始タグのみでかこっているのではないでしょうか?
見直してみてください。

それからこれはお願いなのですが、
コメント欄に変数やHTMLを書き込むとテンプレートの不具合が発生する
場合があるので、もしどうしても書き込む場合は、
全角文字にしてください。

よろしくお願いします。
2011.01.14 12:22 | URL | #i4E9Nobc [edit]
管理人 says..."まささんへ"
こんにちは。

画像がシームレスなタイル上のものなら簡単に替えられますが、
(bodyとheaderの背景画像を差し替えるだけ)
そうではなく、一枚写真とか大きな画像を背景に
いれたい場合は、レイアウトの関係もあるので
難しいかもしれません。
2011.01.14 12:30 | URL | #i4E9Nobc [edit]
じゃすみん says...""
早速、ご丁寧に回答を頂いて本当に有難うございました。
結局フォントファミリーについては、よく判らないままですが( ̄_ ̄ i)
それなりにカスタマイズさせて頂きかなり気に入ってます!
それから、このテンプレーとをお借りしてから今までの倍のアクセス数になりました・・・

本当に有難うございましたm(..)m
2011.01.15 04:01 | URL | #UFEZpisc [edit]
says..."ありがとうございました!"
指摘してくださった通り、開始タグのみで囲っていました。
終了タグをつけたら、トップページにのみ写真が表示されるようになりました。
ありがとうございます。

パソコンには詳しくないもので、変数を書き込んだら不具合の原因になるとは知らず、失礼いたしました。
全角文字に書き直そうと思ったものの、全角への切り換え方もわからず・・・。
もしご都合悪ければ、上のメールを削除してくださいませ。
2011.01.18 09:37 | URL | #L9cprX.c [edit]
spring says..."サイドメニュー背景変更について"
記事のテンプレをお借りして 背景など明るく変更しています。
サイドメニューの黒を別な壁紙などに変更したいのですが
中々上手くサイズが調整できません(元画像をDLして色塗り等)

宜しければ 画像を変えずにメニューの
タイトルと背景の変更の仕方を教えて下さい。
画像を使った方法でもサイズ調整を上手に行うのがあれば
宜しくお願いします
2011.02.10 13:55 | URL | #- [edit]
管理人 says..."springさんへ"
こんにちは。

最初にお願いしたいのですが、画像のダウンロード&加工はご遠慮ください。
一応規約がありますので、テンプレートをご利用の方へ、をご一読ください。

サイドバーの幅は250pxなので、その幅にあった画像を作るか、
タイトルの部分は画像ははずして、background-colorなどで色は変えることが
できます。




2011.02.13 08:52 | URL | #- [edit]
spring says..."お手数お掛けします。"
お忙しい中お返事ありがとうございます。
規約は勿論読んだ上で試した事を書きました。
(画像だけで変更可能かを試したかったので・・・)

前回の質問ですが、どこの部分を指しているか
判りにくいので書き直しました。お手数ですが宜しくお願いします。

【質問】
サイドメニューのタイトル?部分の変更は判っていたのですが
サイドメニューの中身?(リンク先などのリスト)の
背景の変更を教えて頂きたいです。

#containerでリストの背景画を変更出来るのは判るのですが、
元の画像(monochrome2back.png)には影がついていて
その画像を使わない場合は、
タイトル部分ではみ出てしまいました。
逆にタイトル部分に合わせると、バランスが悪くなってしまいました。
(なにが良くないのか判らず、そのため元画像をDLして色を変えて確認)

#containerの部分を変更するのだとは思うのですが
画像で調整するのが楽なのか・・・
影付きの画像を用意するのが一番楽なんでしょうが
手持ちのソフトで出来ないので悩んでおります。

判りにくい文章で申し訳ありませんが
アドバイス宜しくお願いします。
2011.02.14 00:55 | URL | #- [edit]
管理人 says..."springさんへ"
こんにちは。

画像を使わないと、色を変更するのは難しいと思います。
menu部分にbackground-colorを指定する場合、内容量によって縦の長さが
変わるため、常に下まで色がついている状態ではなくなります。

menuの部分は横幅が250pxなので(タイトル部分も同じ)、その幅の画像
(縦の長さは自由)を作り、containerの背景画像として縦に繰り返します。
幅250pxで作成すれば、タイトル部分ではみだしたりしないと思います。

影を付ける場合、250px+10~15px(影の部分)として作成します。



2011.02.14 12:34 | URL | #- [edit]
spring says..."ありがとうございます"
やっぱり画像あった方が綺麗ですよね
ペイントしか持ってないので
しばらく影も画像だと気付かずにいましたw
(CSSで影までつけれるようになったのかと)

アドバイスを生かして頑張ってみます
ありがとうございました~~
2011.02.15 14:56 | URL | #- [edit]
クラン says...""
お忙しいところすみません、教えてください。
このテンプレートをDLしたのですが、
画像にマウスを乗せても黒い文字がスライドで
でてこないのですが、DLして自分の画像と差し替え以外に、
何か他に設定する必要があるのでしょうか?

ちなみに、差し替える前(テンプレートDL時点)も
マウスを乗せてもスライドしません。

アドバイスお願い致します。
2011.05.31 01:46 | URL | #- [edit]
管理人 says..."クランさんへ"
こんにちは。

お使いのブラウザの種類を教えてください。
ブラウザの方でjavascriptをオフにしていると
動きません。設定をチェックしてみてください。
2011.05.31 07:53 | URL | #i4E9Nobc [edit]
クラン says...""
さっそくご返事ありがとうございます。
ブラウザはFireFoxとSleipnirを使っていますが両方とも駄目でした。
javascriptの設定は有効になっていると思います。

というのも、この記事のサムネイルサンプルをクリックして
表示されるページでは、きちんとスライドして文字がでてくるのです。

FC2でテンプレートをDLしなおしてみたのですが、
通常なにも変更しないまま、DLした時点でテンプレートを
適用させた時、マウスを乗せるとスライドするものなのでしょうか?

2011.05.31 10:44 | URL | #- [edit]
管理人 says..."クランさんへ"
こんにちは。

通常はダウンロードした時点でサンプルのように動作するように
なってます。ためしにダウンロードしてみた所、管理人のテストした
環境では動作しています。(IE7、Windows2000)

サンプルをお使いのブラウザで見れるのであれば、
ブラウザの問題でもないような気がしますが、
ひとつ考えられるのは、テンプレートやブラウザの問題ではなくて、
記事中やプラグインに問題がある場合です。
それですと、管理人のサンプルは見れるのに、
自分のサーバーにダウンロードした場合は動作しなくなってしまう
可能性はあります。いま一度記事中やプラグインの記述に問題が
ないかどうか見直してみてください。
ためしに新しくブログを作って、なにも記事を書いていない状態で
テンプレートを適用してみるとなにかわかるかも知れません。
2011.05.31 12:33 | URL | #i4E9Nobc [edit]
クラン says...""
度々お返事ありがとうございます。

管理人さんのおっしゃるとおり、すべてのプラグインを
はずしてみたところ動作しました!
どうも別でDLしていたコメント関係のプラグインのせいで
動作していなかったようです。
テンプレートとても気に入ったので、
使えるようになってとってもとっても嬉しいです。
お忙しい中、手間を取っていただきありがとうございました!
2011.05.31 13:20 | URL | #- [edit]
ニハチ says...""
はじめまして*^^*

ずっと連絡出来ないか探しておりました^^;

monochrome2
凄くセンスのあるテンプレートで気に入って使わせて頂いておりますm(_ _)m

お願いがあり、コメントさせて頂きました。。。

左メニューを右メニューに変えたいのですが、あまり詳しく無いので、解りやすくご説明頂けないでしょうか?
色々やったのですが、どんどん解らなくなって来ました><;

お忙しい中申し訳無いですが、何卒宜しくお願い致しますm(_ _)m
2014.10.18 22:41 | URL | #- [edit]

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/358-b733ba1e
← もうすぐ一カ月になろうとしている・・(笑) → # ひさびさに新しいテンプレート