mysticdiary

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

メタリックな感じで・・・

さて、前回がメルヘンチックだったので、今回はクールな感じで行きたい!と思い メタリックテイストにしてみた。

metaldiary.jpg

上部のナビゲーションのアイコン以外は、極力画像は少なめにし、シンプルに徹した。
前々回の上部にスライドパネルがついているテンプレートで苦労したのだが、 グレーで統一したテンプレートはいつか作り直したいと思っていたので 今回はなんとか完了できてよかった(笑)。

一つオプションとして、背景画像を木目に変更することができるようにした。
グレーにするとあまり木目はめだたないのだが、メタリックよりも少し落ち着いた感じになるので、 こちらの方が好みのかたは是非。


body {
font-size : 14px;
font-family : Geneva,Hiragino Maru Gothic Pro,
VERDANA,ARIAL,SANS-SERIF;
line-height : 1.5em;
color : #333333;
background-color:#666666;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/metalwood2.jpg);
}
bodyの背景画像のファイル名をmetalwood2.jpgに変更するだけです。

それから、上部のナビゲーションの編集について。

一番上部のHOMEとかABOUT MEとかは、いつもと同じなので前回の記事を参考にして いただきたいのだが、


<ul id="nav">
	<li class="home"><a href="">HOME</a></li>
	<li class="about"><a href="">ABOUT ME</a></li>
	<li class="services"><a href="">SERVICES</a></li>
           <li class="portfolio"><a href="">PORTFOLIO</a></li>
           <li class="sitemap"><a href="">SITEMAP</a></li>
</ul>

今回はその下のツイッターとか、メールとかのナビゲーションの編集についてちょっと補足。
まずhtml編集画面で以下のソースを見つけ(上部の方にあります)

<ul id="nav2">
	<li class="twitter"><a href="" title="TWITTER">twitter</a></li>
	<li class="rss"><a href="?xml" title="RSS">rss</a></li>
	<li class="mail"><a href="mailto:#?subject=Hello!" title="MAIL">mail</a></li>
</ul>

デフォルトでは上のようになっていますが、 2行目のツイッターは単純に任意のアドレスを挿入するだけです。
3行目のrssは、各人のrssアドレスを挿入します。
fc2blogの場合は、ブログのアドレスの後に?xmlをつけるだけみたいです。
(アドレスについては、fc2ブログの公式マニュアルを参照してください)
4行目のメールについては、mailto:#の#の部分をメールアドレスに置き換えます。
その後のsubject=Hello!となっている部分は、メールの件名となります。
この部分は必要なければ、削除してもかまいませんし、Hello!の部分をお好きな言葉に 変更できます。(日本語だと文字化けする可能性はありますが・・・)

さて、上記の説明をふまえて、実際に編集すると、例えばこうなります。

<ul id="nav2">
	<li class="twitter"><a href="http://twitter.com/" title="TWITTER">twitter</a></li>
	<li class="rss"><a href="http://mysticdiary.blog99.fc2.com/?xml" title="RSS">rss</a></li>
	<li class="mail"><a href="mailto:baorin@aaa.com?subject=Hello!" title="MAIL">mail</a></li>
</ul>
ちょいと、ややこしいですが、がんばってください(笑)。

●コメント欄にurl記入欄を追加する

html編集画面で2カ所変更します。
名前にurlをリンクさせる。

<div class="comname"><a href="<%comment_url>"><%comment_name></a></div>
url記入欄を追加。<br>

<li>url</li>
          <li><input id="comurl" type="text" name="comment[url]" size="30" value="<%cookie_url>"></li>

次にcss編集画面で、以下のcssを適当な位置に追加します。

#comurl{
width:300px;
color : #333333;
background-color:#eeeeee;
border:1px #cccccc solid;
padding:5px;
}
cssはお好みで変更してください。

コメント欄カスタマイズについての詳しい解説はこちらの記事を参考にしてみてください。
関連記事
baorin

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

20 Comments

おりぃーぶちゃん says...""
こちらのテンプレートとってもかわいくて☆
お借りしたのですが…上部ナビゲーション(てんとう虫の)は
クリックして表示することってできますか?
例えば
ABOUTME→クリックすると管理人のプロフィールとか
LINK→クリックで管理画面やリンク先等
よろしくお願いします。
2010.02.19 16:36 | URL | #- [edit]
管理人 says...""
おりぃーぶちゃんさん、こんにちは。

てんとう虫の、ということはcatapillar(テンプレート名)
のナビゲーションのことでしょうか?

ナビゲーションの編集についてでしたら、
リンクアドレスを該当カ所に挿入するだけです。

http://mysticdiary.blog99.fc2.com/blog-entry-134.html

こちらの記事を参考にしてみてください。
2010.02.19 17:11 | URL | #- [edit]
かける says...""
metaldiaryのコメント欄にURLを記入するスペースが欲しいのですが、
表示させることってできますか?
2010.03.16 18:14 | URL | #- [edit]
管理人 says...""
かけるさん、こんにちは。
url記入欄を追加する方法は記事に追加してみましたので、
そちらを参考になさってください。
2010.03.17 08:24 | URL | #- [edit]
SAS says..."IE6での表示"
はじめまして。
センスのいいテンプレが多く、ぜひ利用させていただこうと思ったのですが、
IE6で表示すると、今回お借りしたかったmetaldiaryをはじめ、
mysticdiary、mysticdiary2、townlight、classichorror、bridgelight、mydiaryあたりのレイアウトがめちゃくちゃに崩れてしまいます。
古いバージョンのIEを使っている訪問者はまだまだいらっしゃるため、テンプレ導入を躊躇しています。
既出の話でしたら申し訳ないのですが、何かそのへんの情報はございますでしょうか。
2010.04.08 14:45 | URL | #JalddpaA [edit]
管理人 says...""
SASさんこんにちは。

すみません、IE6には今後も対応しない方針でやっとります。
なにとぞご理解いただきますようお願いいたします。
2010.04.13 17:15 | URL | #- [edit]
SAS says...""
>管理人さま

了解です。
お返事ありがとうございました!
2010.04.13 22:32 | URL | #- [edit]
jasmine says...""
基本的なことなのですが、教えてください。

シンプルなテンプレで、気に入って使用させていただいていますが、

文字色+太字、文字色+大文字などは併用できませんでしょうか?

文字を赤にして、太字にするという設定をしても、

赤字にはなるものの、太字にならず、困っています。

対策や、やり方があれば教えてください。 よろしくお願いします。
2010.06.07 17:00 | URL | #- [edit]
管理人 says...""
jasmineさんへ。

多分、cssの一番上の方にある設定の

font-style : normal;
font-weight : normal;

これが邪魔してるんだと思います。
削除しちゃってかまわないです。
これでうまくいくんでないかと・・・
2010.06.07 20:14 | URL | #- [edit]
jasmine says...""
管理人様。
早々にお返事いただいてありがとうございました。
できました!

こちらのサイト、編集の仕方がとっても丁寧に載っていて
すごく助かります。
これからもよろしくお願いします。
2010.06.08 09:10 | URL | #- [edit]
necobiyori says...""
管理人様

本テンプレート、DLして使わせていただいています。
ありがとうございます(_ _)

トップページでの記事表示についてお尋ねしたいのですが
デフォルトですと、最新記事が数個表示されていますが
これを最新記事「のみ」、つまり常にトップページには
最新の記事ひとつだけ表示させる、といったことは可能でしょうか?


テンプレートをこのmetaldiaryに変えたばかりなのですが
こちらのHPを拝見して、他にも色々あって気になってしまいました...!
2010.07.02 03:13 | URL | #- [edit]
管理人 says...""
necobiyoriさんへ。

共有プラグインで確かトップページに記事を一つだけ
表示するプラグインというのがあったと思います。

共有プラグインといっても、サイドバーに追加するんじゃなくて、
ソースをHTMLに追加するんだと思いますけど。
記事を一つ、とかのキーワードで検索すると
あるんじゃないかと思います。
2010.07.03 20:16 | URL | #- [edit]
管理人 says..."HIDEさんへ"
こんにちは。

テンプレートをお使いいただきありがとうございます。
ご質問の件についてですが、
大変申し訳ないのですが、今のところ3種類のアイコンの他には
作成していないもので、代わりになる画像がありません。

現在あまり時間の余裕がないもので、メンテナンスできないのが
心苦しいのですが・・。
よろしくお願いします。
2010.09.24 13:23 | URL | #- [edit]
HIDE says..."感謝"
MD 様、多忙な中、返信いただきありがとうございました。
こちらこそ無理申しましてスミマセン(ーー;)

画像の件は残念ではありますが、それでも、十分今のテンプレで満足しております。
また、今、MD様の既存のテンプレで利用されている画像でうまくやりくりしています(笑)

まだまだ微調整中ではありますが、わたしのサイトもカタチになってきました。
お暇な時に、MD様のお子さんが(テンプレ)がどの様に成長したか見てやってください。(いいすぎッ)

そして、デキ悪いところは遠慮なくご指摘ください。(画像は規約に則って改編していませんがいろいろ使ってマス。規定違反ありましたらご指摘ください)

ありがとうございました。
2010.09.25 12:56 | URL | #- [edit]
HIDE says..."テンプレ画像について"
一点、質問し忘れました。
連投シツレイします。

テンプレの画像は、ダウンロードしたままの状態、つまり、MD様のファイルサーバーをリンクしている状態ですが、利用規定はこれでよろしいのでしょうか?

というのも、もし、MD様のブログ(もしくはファイル)サーバーがダウンした場合、画像の参照ができなくなり、閲覧に支障がでます。

改編しないという規約は勿論ですが、画像はダウンロードしてわたしのファイルサーバーにアップロードするのが通常の使い方になるでしょうか?
2010.09.25 13:02 | URL | #- [edit]
管理人 says..."HIDEさんへ"
こんにちは。

画像の加工さえしなければカスタマイズはなんでも自由なので
お好きにどんどんやってください(笑)

それと、画像はテンプレートをダウンロードした時のアドレスのままで
使用してください。
この辺はテンプレートの作者によって違うと思うのですが、
著作権等がからんでくるので、一応作者が決めた利用規約に準ずる・・という
形になると思います。
管理人のサーバーがダウンした時に画像が見えなくなるのでは?という心配ですが、
その辺は無料ブログの無料テンプレートという性質上、リスクは多少あると
お考えになった方が良いかと思います。

ただ、最近FC2ブログは画像のサーバーが二つあるみたいなので、
ひとつがダウンしてももう一つは生きてるというようなリスク回避の
方法はとられているような気がしますが・・この辺は確認していないので
定かではありません。
よろしくお願いします。
2010.09.27 15:53 | URL | #i4E9Nobc [edit]
HIDE says..."承知しました"
またまた、回答頂きありがとうございます。

> 画像参照先
了解です。

たしかにそうですよね~。
各サーバーをミラーリングとか不測の事態に備えてなければいけませよね(笑)

いろいろ相談させていただき、ありがとうございました。
MDさんのテンプレは永くガッツリと使って行きたいので、今後も、様々相談させてください。


追伸
 現在、ウチのサイトはプライベートでガッツリ編集中です。
 IE の解釈の仕方にてんてこ舞いです(苦笑
2010.09.29 14:10 | URL | #- [edit]
管理人 says..."小夜さんへ"
こんにちは。

お返事遅くなってすみません。
サイドバーの文字色が背景とかぶってしまう不具合ですが、
テンプレートの方で修正しました。
ただ、最近修正しても反映されるまで時間がかかる仕様になったみたいなので、
CSSの方に直接、color:#ffffff;と加えた方が早いです。

#rmenu {
margin: 100px 0px 0 50px ;
width: 250px;
float: right;
overflow: hidden;
font-size:12px;
color:#ffffff;
}

こんな感じにしてください。
よろしくお願いします。



2010.10.02 21:48 | URL | #i4E9Nobc [edit]
周平 says..."とてもいいです。"
管理人様

残暑お見舞い申し上げます。
星の数ほどあるテンプレート中から、このメタリックのテンプレートを選びました。
これに決めようと思っています。
シンプルで美しく見やすく新しさがあり格好いいです。
これからも気品溢れるテンプレートを作って頂きたいと思います。
期待しております。

2011.08.12 21:04 | URL | #- [edit]
管理人 says..."周平さんへ"
こんにちは。

ご丁寧にありがとうございます。
これからもちょくちょくテンプレート作っていきますので、
よろしくお願いします。
2011.08.17 12:51 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/136-0cc92d46
テンプレート作成中
今このFC2ブログのテンプレートを作成中だ。 テーマはSEOに強いテンプレート。 今までは、MDさんMDさんのmetaldiaryというテンプレートがデザイン的に大好きで使わせてもらっていたが、あまりのデザインの...
← テンプレートを変更してみた → やっとできた・・