mysticdiary

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

やっと第10弾が・・

アイデアに詰まっていたのだが、やっと第10弾ができた。
今度はごくオーソドックスな型の3カラムに挑戦してみた。

goya.jpg



このなんとも美しい写真は著作権フリーである。ありがたいことこの上ない。
実は、最初ダブリンのトリニティカレッジの図書館の写真を使い、書評用のテンプレートを作りたかったのだが、なにぶん名所の写真のため、無料で使用できるものがなかった。

それで、ケチな管理人はやむなく断念。いや、しかしトリニティカレッジの図書館は美しい。
(知らない方はグーグル画像検索してみるべし)。
いつか、一度は行ってみたい所なのだが。

本題からだいぶ話がずれてしまったが、このテンプレートで苦労した所は、上部のナビゲーションである。ナビゲーションは面倒くさいので避けてきた(笑)のだが、そうも言っていられない。もっとダイナミックに画像で表現したりすることもできるのだが、なにせテンプレートということで、使用者がどういった使い方をするのかわからない。なのでごくごく普通な感じに落ち着いてしまった(爆)。
しかし、こういったスペースを作っておけば、ナビゲーションのhtml部分は全部削除して、このスペースに広告を入れるといった使いかたもできるであろう。

さてさて、これも共有申請してみよう。
管理人の作った、つたないテンプレートを喜んで使用してくださる方々のためにも、さらに技術を磨きたいと思う。

12月20日:追記

●サイドバーの幅を広げたい

実は、中央のメインカラムとサイドバーの背景色には画像を使用しているので、その関係でメインカラムとサイドバーの幅を広げるには限界があります。限界以上に広げると、背景色の幅がカラム幅にあわないといった現象がおきると思います。

しかし、限界値内ならば幅を広げることはできます。
サイドバーを広げられる最大値は205pxです。
幅を広げるにはcss編集欄で幅の数値(width)と、左右の余白の数値(padding)を変更する必要があります。

左サイドバーの変更
menu11.jpg
このcssを下の水色の部分のように変更してみます。
menu12.jpg

すると、幅が20px広がり、左右の余白は10pxに減りました。
お気づきかも知れませんが、widthとpaddingの合計値は
必ず205pxにならないといけません。
逆に、205px以内なら好きなように数値を変更することができます。

右のサイドバーも同じように変更してみます。
menu212.jpg

menu21.jpg

デザインの見栄えを考えると、左右両方同じ数値にした方がいいと思いますが、
片方のサイドバーだけ数値を変更したりしても支障はないと思います。
左右の余白は0にすることもできますし(その場合のwidthは205px!)同じ数値の必要はないと思いますが、
おすすめは同じ数値です(笑)。

●上部ナビゲーションの編集

該当のcssを見つけます。
uemenuhtml.jpg

リスト項目を一つ一つ好きなように編集します。
例:
uemenuhtml2.jpg
左から、クラス名、リンクさせたいurl、実際にブログ上に出る文字、となります。
クラス名はなんでもいいです。便宜上つけているだけです。

●おまけ

上のナビゲーションのhtmlを削除してメッセージを入れたり、
menujiyuu.jpg
水色部分を削除して・・
menujiyuuu2.jpg
しかし、これはcssの編集を独自にしなきゃならないのと、文字化けする可能性大(笑)

あとは、この部分にグーグルの広告を貼付けることもできますね。(横長のリンク広告とか)
こういった場合のcssの編集は各自でどうぞ!(←なげてる)
関連記事
baorin

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

7 Comments

テンプレートユーザー says...""
テンプレート、とても気に入っています。
この写真に写る町はどこなのでしょうか。
行ってみたいです。
2009.11.08 01:48 | URL | #- [edit]
管理人 says...""
テンプレートユーザーさま。

> テンプレート、とても気に入っています。
> この写真に写る町はどこなのでしょうか。
> 行ってみたいです。

ありがとうございます。
この写真は「public domain pictures.net」というサイトから拝借しているのですが、
それによると、スウェーデンのストックフォルムみたいです。
2009.11.09 12:03 | URL | #- [edit]
テンプレートユーザー says...""
管理人 様

教えていただき、どうもありがとうございます。
判明できてとてもうれしいです。
2009.11.10 01:11 | URL | #- [edit]
says...""
こんにちわ♪

このテンプレートがとても気に入っていて
使ってます♪ 有難うございます♪

えっと 質問なのですが チャット機能を付けたいと思い貼り付けたのですが 
少しサイズが大きいようで
ちょっとだけ はみ出してしまってます

小さいタイプのものだと 読みづらいので
少しだけ 幅を大きくしたいのですが
どうすればできますか? 
すみませんが お暇な時でいいので教えてください
お願いします
2009.12.17 17:26 | URL | #- [edit]
管理人 says...""
rさま。

上の記事で説明してみましたので、参考になさってください。
2009.12.20 09:46 | URL | #- [edit]
永碧 says...""
すごく分かりやすく説明してくださってありがとうございます。
とてもきれいなテンプレートで気に入っています。
2010.03.23 10:35 | URL | #- [edit]
管理人 says...""
永碧さん、こんにちは。

テンプレート気に入っていただけてよかったです。
これからもよろしくお願いします。
2010.03.24 13:24 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/106-f238f414
← 世界の奇妙なものを集めたサイト → メルボルンのヴンダーカンマー博物館