すっごい久しぶりだけど

2010

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

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

今回のは、いろいろ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>

説明文は＜ｐ＞～＜／ｐ＞で囲まれていれば何を書いてもオッケーです。
サンプルとおなじようにしたければ、リンク部分（＃）にリンクアドレスを挿入してください。

関連記事

26 Comments

rutiler says...""

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

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

回答は　このコメントへの返信で結構です。
また見に来させていただきます。

y. says..."？"

お久しぶりです。使わせていただいております。上のかたのですが、私はこの意味が何か英字？？知りたい。忙しいところすいません。（～～）；

管理人 says..."rutilerさんへ"

こんにちは。

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

あとは上の記事に書いてあることは参考にならないでしょうか？
それを読んだ上で不明なことがあれば
新たに質問してください。

管理人 says..."y.さんへ"

こんにちは。

なにやら、管理人のパソコンで見ると、文字化けしております。
サンプルの説明文の意味ということですか？
これはよく利用されるダミーテキストです。
詳しくはこちらを（http://ja.wikipedia.org/wiki/Lorem_ipsum）
ご覧ください。

♪ says...""

はじめまして！

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

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

とあるのですが、whiteboxでもインデックスページのみに画像表示をするように変えることはできますか？
もしできるのであれば、変更方法を教えてください。
よろしくお願いいたします。

管理人 says..."♪さんへ"

こんにちは。

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

管理人 says..."じゃすみんさんへ"

こんにちは。

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

よろしくお願いします。

まさ says..."こんにちは"

かっこいいので使わせて頂きたいと思っているのですが
背景って変える事できますか？
画像にしたいと思ってるんですが難しいですか？

花まつ says..."はじめまして。"

とっても素敵だったので、早速使わせていただいています^^
そこでお尋ねなんですが、トップの画像をインデックスページ以外(全てのページ)に表示することは出来ますか？
可能でしたら、教えてください。
可能でも、変えて欲しくない場合は、教えていただかなくても大丈夫です。
そのまま使わせていただきます。

よろしくお願いいたします

♪ says..."たびたびすみません"

monochrome2をダウンロードさせていただいて、の位置を確認した上で、教えていただいた通り、写真の部分だと思われる<div id="photo">の直前からの直前までをで囲ってみましたが、うまくいきません。
（画面が真っ白になってしまいます・・・）
whitebox2では違う場所に入れなければいけないのでしょうか？
教えてください。

管理人 says..."花まつさんへ"

こんにちは。

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

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

よろしくお願いします。

管理人 says..."♪ さんへ"

こんにちは。

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

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

よろしくお願いします。

管理人 says..."まささんへ"

こんにちは。

画像がシームレスなタイル上のものなら簡単に替えられますが、
（bodyとheaderの背景画像を差し替えるだけ）
そうではなく、一枚写真とか大きな画像を背景に
いれたい場合は、レイアウトの関係もあるので
難しいかもしれません。

じゃすみん says...""

早速、ご丁寧に回答を頂いて本当に有難うございました。
結局フォントファミリーについては、よく判らないままですが(￣_￣ i)
それなりにｶｽﾀﾏｲｽﾞさせて頂きかなり気に入ってます！
それから、このﾃﾝﾌﾟﾚーとをお借りしてから今までの倍のｱｸｾｽ数になりました・・・

本当に有難うございましたm(．．)m

♪ says..."ありがとうございました！"

指摘してくださった通り、開始タグのみで囲っていました。
終了タグをつけたら、トップページにのみ写真が表示されるようになりました。
ありがとうございます。

パソコンには詳しくないもので、変数を書き込んだら不具合の原因になるとは知らず、失礼いたしました。
全角文字に書き直そうと思ったものの、全角への切り換え方もわからず・・・。
もしご都合悪ければ、上のメールを削除してくださいませ。

spring says..."サイドメニュー背景変更について"

記事のテンプレをお借りして　背景など明るく変更しています。
サイドメニューの黒を別な壁紙などに変更したいのですが
中々上手くサイズが調整できません（元画像をDLして色塗り等）

宜しければ　画像を変えずにメニューの
タイトルと背景の変更の仕方を教えて下さい。
画像を使った方法でもサイズ調整を上手に行うのがあれば
宜しくお願いします

管理人 says..."springさんへ"

こんにちは。

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

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

spring says..."お手数お掛けします。"

お忙しい中お返事ありがとうございます。
規約は勿論読んだ上で試した事を書きました。
（画像だけで変更可能かを試したかったので･･･）

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

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

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

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

判りにくい文章で申し訳ありませんが
アドバイス宜しくお願いします。

管理人 says..."ｓｐｒｉｎｇさんへ"

こんにちは。

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

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

影を付ける場合、250px＋10～15px（影の部分）として作成します。

spring says..."ありがとうございます"

やっぱり画像あった方が綺麗ですよね
ペイントしか持ってないので
しばらく影も画像だと気付かずにいましたｗ
（CSSで影までつけれるようになったのかと）

アドバイスを生かして頑張ってみます
ありがとうございました～～

クラン says...""

お忙しいところすみません、教えてください。
このテンプレートをDLしたのですが、
画像にマウスを乗せても黒い文字がスライドで
でてこないのですが、DLして自分の画像と差し替え以外に、
何か他に設定する必要があるのでしょうか？

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

アドバイスお願い致します。

管理人 says..."クランさんへ"

こんにちは。

お使いのブラウザの種類を教えてください。
ブラウザの方でjavascriptをオフにしていると
動きません。設定をチェックしてみてください。

クラン says...""

さっそくご返事ありがとうございます。
ブラウザはFireFoxとSleipnirを使っていますが両方とも駄目でした。
javascriptの設定は有効になっていると思います。

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

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

管理人 says..."クランさんへ"

こんにちは。

通常はダウンロードした時点でサンプルのように動作するように
なってます。ためしにダウンロードしてみた所、管理人のテストした
環境では動作しています。（ＩＥ７、Ｗｉｎｄｏｗｓ2000）

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

クラン says...""

度々お返事ありがとうございます。

管理人さんのおっしゃるとおり、すべてのプラグインを
はずしてみたところ動作しました！
どうも別でDLしていたコメント関係のプラグインのせいで
動作していなかったようです。
テンプレートとても気に入ったので、
使えるようになってとってもとっても嬉しいです。
お忙しい中、手間を取っていただきありがとうございました！

ニハチ says...""

はじめまして*＾＾*

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

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

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

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

お忙しい中申し訳無いですが、何卒宜しくお願い致しますm(_ _)m

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/358-b733ba1e

MysticDiary