2009年08月20日

❤ソラマメブログカスタマイズ、個別記事の事・・・❤

10:38



修正前


修正後




divをpタグに交換します。
<div class="blogbody">
<div class="main">
<div class="posted">
<div class="menu">


前の記事で新しいテンプレートに使うタグの抽出で書いた部分で、ただ個別記事のタグを抽出してテンプレートに貼るだけではdviタグがテンプレートのレイアウトを崩してしまうのでpタグにすればそれは解消されるので交換してくださいw

まだ見落としがあるかもですがお願いします。

あらなんか文字が変な場所に・・・なおりますた(´ヘ`;)  

2009年08月19日

❤ブログカスタマイズ簡単にブログヘッダにメニュー❤

19:52




メニュー

サンプル







小さな画像は拡大出来ます。



HTMLの<div id="container">の下に以下のメニュー用のタグを入れてください


<div id="menu2">


<ulgt;
<li><a href="URL">Home</a></li>
<li class="current_page_item"><a href="">OfficialBlog</a></li>
<li><a href=" ">usagi</a></li>
<li><a href=" ">kitune</a></li>
<li><a href="http://www.slmame.com/admin/login.php">Log in</a></li>
              <li><a href="http://slmame.com/index.xml">RSS2.0</a></li>

</ul>

</div>



CSSスタイルシートをデフォルトテンプレートのスタイルシートの一番下に入れてください

/* Menu2 */

#menu2 {
float: left;
width: 999px; 
height: 40px;
}

#menu2 ul {

height: 40px;
margin: 0px;
padding: 0px 0px 0px 10px;
background: url(img001B.jpg) repeat-x;
list-style: none;
}

#menu2 li {
float: left;
padding: 0px 25px 20px 0px;

}

#menu2 a {
float: left;
height: 40px;
padding: 10px 0px 10px 30px;
text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: url(redskuma.jpg) no-repeat;
color: #F5A9C3;
}

#menu2 a:hover {
padding-top: 10px 0px 0px 15px;
    background: url(blueskuma.jpg) no-repeat;
       color: #9CF5F9;
}


#menu2 .current_page_item a {
width: 100px;
height: 40px;
text-align: center;
padding: 10px 0px 0px 0px;
background: url(img_orange.jpg) no-repeat;
color: #FFFFFF;
}



説明
まずHTMLを所定の場所に入れます。
次にCSSを所定の場所に入れます。
CSSでの位置調整の説明
CSSの最初の部分から順に説明します。
width: 999px; をご自分の選んだテンプレートの横幅に合わせます。
background: url(img001B.jpg) repeat-x; メニューの背景画像 こちらはrepeat-xをno-repeatにする事で画像を固定する事も出来ます。
background: url(redskuma.jpg) no-repeat; 赤い熊の画像です。 ご自分の好みの画像に変えてください
background: url(blueskuma.jpg) no-repeat; マウスが通過した時の画像(青い熊)
background: url(img_orange.jpg) no-repeat; 固定画像です。ご自分のブログのバナーの色に合わせて色を変更してください。
height: 40px; どうしても画像などの高さを変更したい場合は個の部分も合わせて調整してください
熊アイコン
青い熊
赤い熊
デフォルトテンプレート用のメニュー固定画像4種類
空色
赤
オレンジ
緑





固定画像 色編集用 
大きい










メニュー背景画像 







上記の画像などの無断転載は(´・д・`) ヤダ

  

2009年08月17日

❤ソラマメブログカスタマイズ 必要なソース部分❤

04:55

前の記事で書いたのですが、このブログに使っているFreeCSSTemplates.orgのテンプレートに限定したカスタマイズの仕方なのでご了承ください。

今回は前の記事の続きですが今回のが一番重要な記事などの部分の話です。

以下の部分はHTMLに貼るのに必要な部分で、ソラマメブログのHTMLから取り出す記述部分を書いています。

ソラマメブログの中から取り出した部分をヘッダ以外の部分ではpタグというタグの間に入れるだけです。

↓この矢印部分はここまで必要ですと言う事です。

サイドバーについては前の記事を見てください。

HTML上部 <head>  ヘッダ部分に下記の取り出した箇所を入れます。
                  
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

</head>


ココからは記事部分の3箇所についてです。抽出したソースを新しいテンプレートの<p></p>の間に貼ります。

トップページ: 記事部分<div id="content"> <p></p>
<!-- Loop Start --> 
<IndexEntrysLoop>

</IndexEntrysLoop>
<!-- Loop End -->

下部のページ移動の部分<div id="content"> <p></p>
<div class="menu"> 

<div class="pagetop"> <a class="aposted" href="#top"> このページの上へ▲</a> 

個別記事:記事部分<div id="content"> <p></p>
<%TrackBackAutoDiscovery%>

<div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a >

アーカイブ:記事部分<div id="content"> <p></p>

<EntrysLoop>
<%TrackBackAutoDiscovery%>

<div class="pagetop"<a class="aposted" href="#top">このページの上へ▲</a>

ここがHTMLの最下部で最後に下記の部分をフッターに貼り付けます。

HTML最下部<div id="footer"> <p></p>

Copyright(C)<%Year%/<%BlogTitle% ALL Rights Reserved

補足

これさえ貼ればゴールは近いですよ?ちょっとだけCSSの事を書くと、このFreeCSSTemplates.orgさんのテンプレートは分かりやすいので覚えやすいと思います。

それとCSSはHTMLの各ブロックごとのレイアウトなどを確定するのですが、基本的に完全なオリジナルテンプレートを作るので無く、借り物のテンプレートならmargin: padding:さえ調整できれば殆どの事は出来ると思います。

おまけ

0.3em これは文字のサイズですこれは%やpxでも表示出来ますが、私はpxが多いですが、テンプレートの作者さん次第ですねw

例として下記のCSSの一部のブロックですが、/*LOGO */からスタートで}で終わります。

次にコンテンツのレイアウトをする場合はHTMLにContents部分を書いてCSSでも/*Content*/を書いて調整する事になります。

私もCSSやHTMLの世界では初級クラスでこれは永久に変わらないと思いますが、全てうる覚えで3年もまったく触らないと忘れると思いますが、誰でも人のテンプレートを参考にしながらすれば何とかなると思います。

下記の部分はロゴのスタイルですね、多少説明部分は間違ってるかもですが、ご了承くださいw

CSSはこの様に各ブロックに区切って書いているので、修正が必要な時は各ブロックを修正する事になります。

昔はHTMLにCSSを直接書いて設定(javascriptなど一部は今も)ですが、現在はCSSとHTMLを分割してるんです。



/** LOGO */

#logo {
width: 240px; ここは背景画像の設定と全体のサイズ height: 135px;
margin: 0 auto; 例えばこの意味が分からない時はそのまま検索すると何らかの答えが出てきます。
background: url(img004.jpg) no-repeat left bottom;

}

#logo h1, #logo p { ここはロゴの表示位置_?たぶん(゚Д゚;)
margin: 0;
padding: 0;
line-height: normal;
text-align: center;
}

#logo h1 { 文字指定 font-family: Georgia, "Times New Roman", Times, serif;
}

#logo h1 a { ここはロゴに下線とか入れるかとか色とか text-decoration: none;
text-transform: lowercase;
color: #F7A9C3;
}

#logo h1 a:hover {  文字をマウスが通過した時の反応
text-decoration: none;
}

#logo p { 
margin: 0;  小文字の位置とかサイズなどなど
padding: 100px 0 0 10px;
font: italic 10px Georgia, "Times New Roman", Times, serif;
color: #BF7D7F;
}

#logo p a { 小文字のデコレーションと文字色 text-decoration: none;
color: #BF7D7F;
}

#logo p a:hover { text-decoration: underline; } 小文字のマウスオーバーの反応下線なし
  

2009年08月16日

❤豆ブログカスタマイズ サイドバーの巻❤

22:22

寝ようと思ったら眠れないので前の記事の続きを書きます。

サイドバーの続きなので前の記事もご覧ください。

まずはじめに交換するテンプレートのHTMLにカテゴリやお気に入りが個別で表示されていても、基本的に豆ブログのサイドバーのプラグインのタグは少なく一括でbackground-image(うちのブログでは熊さんマーク)などを表示する仕組みになってます。(HTMLのソース編集で個別も可能かも?)

通常ではその短いプラグインのタグを貼ってもbackground-imageやカテゴリやお気に入りなどを個別で反映されないのでCSS(スタイルシート)を編集します。

下のソースがそうですが、→/* サイドタイトル */この部分は私が通常使う英語のみのテンプレートではsidebar?などとなっているのですが、おそらく/* サイドタイトル */とカタカナで書かないとスタイルシートが反映されないのかなと思います。

そこでこの下のを交換する新しいテンプレートのCSSの何処でも良いので貼ります。(一番下でもOK)

そうするとbackground-imageも反映され、カテゴリやお気に入りのタイトルの後ろに画像が現れて、全ての箇所に適用されます。

もし一箇所ずつ違う画像にしたいとかいう場合はHTMLやCSSを物凄く修正したりするひっつようが有るのでとても疲れると思います。

どうしても簡単にだけどしてみたい時はHTMLにカテゴリやリンク先などを書いて表示させる方法もあります。

このサイドバーと記事などのソースをHTMLに貼れば殆どの場合それなりのブログに変身できる筈なので頑張ってください。

もしかするとまた続きを書くかもです。

↓これはCSS(スタイルシート)の一番下にでも貼ります。
/* サイドタイトル */
.sidetitle{
       height: 25px; 高さ
margin: 0 0 20px 0px; 位置関係
padding: 8px 0 2px 30px; 位置関係
background: url(img003.jpg) no-repeat left 6px; 画像
border-bottom: 1px #F0D5DE solid; 下線 
font-weight: bold; 文字の太さ
font-size: 14px; 文字のサイズ
color: #B6275F; 文字色
}
  

2009年08月16日

❤豆ブログテンプレートカスタマイズ、検索フォーム❤

14:31

①交換するテンプレートの検索フォームの元のHTMLソース

<!-- end #menu -->
<div id="search">
<form method="get" action=" ">
<fieldset>
<input type="text" name="s" id="search-text" size="15" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</div>
<!-- end #search -->

②お豆ブログから具を足したソース
<!-- end #menu -->
<div id="search">
<form method="get" action="search.php">
<fieldset>
<input type="text" name="search" id="search-text" size="15" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</div>
<!-- end #search -->



見比べると分かりますがsearch.phpくらいしか入れてません、簡単でしょ?

先日にちょっとテンプレート編集で検索結果やカテゴリが表示されないと記事に書いたのですが、基本的な事を忘れてたのが原因で今回修正が終わったついでにお奨めテンプレートと検索フォームのカスタマイズについて書きます。

私はかなりいい加減なやり方でやってるのですが、FreeCSSTemplates.orgさんのテンプレートは扱いやすいしお奨めなのでそのテンプレートに限定した感じでお話します。

ブログテンプレートを全く別の物に修正するのは難しいイメージがありますが、基本的にソラマメの場合ではトップページ:アーカイブ:個別記事:の記事を表示するためのタグ、個別記事を表示するタグ、アーカイブを表示するタグを新しいテンプレートに貼り付けたり、サイドバーのプラグインのタグを新しいテンプレートのHTMLのサイドバーの部分に入れると表示されます。

記事の部分に貼るタグはcontentsなどと書かれた部分のpタグなどの中に入れるだけで、もし間違っている場合はテンプレートのレイアウトが崩れるので分かります。

サイドバーのタグ<!--%PluginListLeft%><%PluginListRight>これらのタグはHTMLのサイドバーのcategoryなどの中に入れるだけです。

話を戻しますが、一番上の②のソースのタグは検索に必要なsearch.phpタグをソラマメのブログソースから移植した物です。

次に検索フォームのボタンをイメージにしたい時はCSSスタイルシートのこの様な箇所の* Search * のsearch-submit background: url(img093.jpg) という風にイメージの記述を探してきて}でくくられる手前の何処でも良いので貼ると画像で表示出来ます。

その場合にテキストの文字を消したいなら、HTMLのvalue="Searchの文字を消せば画像のみになります。

補足

今回は特定のテンプレートに限定した話なので、別のサイトのテンプレートでは記述が違い検索が出来ない場合があるので違う方法を調べてください。

下記のサイトのテンプレートでも違う場合はあると思いますが、デザイナーが同じ場合は似たものが多いと思います。

テンプレートの交換をする時は必ずメモ帳に貼り付けたり、予備のテンプレートを作って確認しながら作業する事をお奨めします。

サイドバーに関してはプラグインを個別に出来る数が2個なので、スタイルシートなどの修正をする知識は必要になるので、面倒な場合ははしょってください。
FreeCSSTemplates.org









  

2009年08月15日

❤ソラマメブログの記事タイトルをチョットだけカスタマイズ?❤

19:57



1<h3><style="text-decoration: none"><%EntryTitle%> </h3>

2<h3 class="title"><style="text-decoration: none"><%EntryTitle%> </h3>

3<h3 class="title"style="text-decoration: none"><%EntryTitle%></h3>

4<h3 class="title"><style="text-decoration: none">★<%EntryTitle%>★</h3>

5<h3 class="title"><style="text-decoration: none">❤<%EntryTitle%>❤</h3>



ブログ記事のタイトルをチョットだけカスタマイズする方法を書きます。

HTMLに直接タグの記述をする方法で進めて行くので初めての方も簡単に出来ると思います。

まずはじめにブログ管理画面左下のブログ設定のテンプレートを開き、カスタマイズから(トップページ:アーカイブ:個別記事:)の<h3 class="title"> <%EntryTitle%> </h3> をスクロールして探します。

上の画像のような位置に表示されている部分が<h3 class="title"> <%EntryTitle%> </h3> ですが、多少の位置の違いがあるので注意してください。

この画像下の<style="text-decoration: none">タグを間に入れる事でタイトルの下線を消すことが出来ます。

1,2、3は記述方法が違うだけで表示(下線非表示)には変わり有りません。

4,5は見たままに★と❤をタグの間に入れただけです。(このブログの記事タイトルの表示)

パソコンやOSによってはこの★と❤が表示されない事をあるかも知れないので、心配な方は(HTML 特殊文字タグ)で表示すると良いと思います。

特殊文字検索キーワード (HTML 特殊文字)(HTML 特殊文字 サンプル)

❤マークなどの特殊文字をタグで表示する参考サイト
Webページ作りのお勉強 HTMLタグでHP作り

補足 一応ですが、underline(下線)の削除はテンプレートのCSSスタイルシートのtext-decoration: underline;と書かれている部分のunderlineの部分をnoneに変更する事でも可能です。



  

2009年04月23日

❤危険なブログのコメントやトラックバックの管理!❤

09:37

ブログをしてるとコメントやトラックバックがあります。

この2つについて今回は少しだけお話します。

コメントやトラックバックはとても有り難いのですが、時として迷惑な場合も有ります。

それは記事と関係ないコメントとURLを貼ったり、一方的にトラックバックだけしてリンクを稼ぐと言われう方法です。

これはSEO対策という物で、知っておられる方も増えてるとは思いますが、トラックバックなどを一方的にされている場合、される側にはメリットはほぼありません、当然迷惑なトラックバックを削除や私の様に最初から受け付けない方法も有ります。

しかし、受け付けない事でのデメリットも多いのでお奨め出来ません、トラックバックの最低のマナーとしてトラバ先のURLを貼るのは世界的なマナーです。

これがスパム(無断で送信)する様なトラックバックなどは論外です。

ただこの事は対処してる方も多いと思いますが、問題は放置する事、コメントなどの認証を表示を自動にしてる場合は問題です。

それは人気ブログなら特に言える事で、放置する事で正式にリンクしてるサイトやブログに迷惑を掛けるからです。

迷惑なトラックバックをするサイトなどはページランクも低い、悪質サイト、スパムとして検索エンジンから制裁として削除される場合もあります、そしてそこにリンクするサイトやブログの評価を下げます。

つまり迷惑なコメントやトラバを放置すれば他人のブログやサイトに迷惑が掛かるから削除やIP禁止指定を必ずするようにおすすめします。

  

2009年03月21日

❤久々にブログカスタマイズネタ、レイアウト崩れ!❤

15:25

margin: 0 auto;
 ホームページ作成 Note2カラムCSSレイアウト例


今回はレイアウト崩れしてて気になったブログさんがあったので書いてみました。

うちのブログもそうですが色々とレイアウト崩れになる原因はあるのでこれだけで必ず治るという事もないので参考までにどうぞ。

詳しくはここに紹介してるサイトさんで見ると分りやすいかも、私もHTMLの事はどんどん忘れてるので私が説明するより確実ですw

それと私流ブログカスタマイズのヒントを知りたくなくてもちょっとだけかきますw

私のブログのヘッダー右上のBy Free CSS Templatesと書かれてるlinkからNodeThirtyThree Design. さんというFREEのテンプレート配布サイトのを今は使わせてもらってます。

それでブログのカスタマイズって事なんですが、実は私流というのは、このソラマメに限らず必ずPHPの記事などの部分はプラグインのタグと同じでHTMLの何処に貼り付けても表示されます。

たとえばサイドバーのカテゴリを記事の所に表示するとか(意味はないですが)

つまりそれを正しい位置に配置し、ソラマメのカテゴリなどのプラグインが表示してもはみ出したりしないwideなどにする事でプロ仕様の無料テンプレートでカスタマイズできます。

ソラマメは忘れましたが、一部では広告のタグを削除してカスタマイズするとブログを削除されたりするレンタルサーバーもあるし、広告タグを削除するとえらーが出るブログレンタルもあるので注意が必要です。

ソラマメの場合はちょっと特殊?トップページ:個別記事:アーカイブ:と分れてるのでそれぞれから必要なタグを抽出してテンプレートの記事の場所などにはめ込む必要があります。

そのタグをどの様に抽出するかですが、慣れないと分らないと思うのでもしホームページビルダーなどがあるならそれで見ると分りやすいです。

ただ多少の知識は必要ですが、必死でやればなんとかなると思います。

この方法を覚えるとタグを殆ど覚えなくてもどこのブログでも簡単にカスタマイズできるようになります。
(逆引きの様な仕方です)

注意点メタタグなるものがありますが、これはFREEのテンプレートのを使うかまめのを使うか選択できます(たしか)私のブログは両方貼ってますがそれはただ削除してないで毛です。

コツとしてはある程度抽出したらブログに抽出したタグだけを貼り付けて最小限でブログとして表示できるまで不要箇所を削除します。

その状態で保存しても記事などが表示されればOK、表示されずえらーが出たらタグを削除しすぎてます。

次にFREEのテンプレートをCSSとHTMLの4箇所に貼り付けます。

記事の部分やカテゴリなどのサイドバー部分をはめ込んであとはサイズやズレ、画像の調整などをします。

それとあまり複雑そうなCSSのテンプレートはお勧めしません、それとどちらかというと日本語の含まれるものより英語のテンプレートを使うほうが初心者には分りやすいと思います。

あとは何処に在ったか忘れましたが、海外のサイトでスクロールバー付きの記事とカテゴリ少しのハートマークなどの小さくてシンプルな可愛いテンプレートなどもあぅたりするので探してみるのも良いかも(もし見つけたら書きます)

それと途中でテンプレートを保存したりメモ帳に貼り付けて保存するなどの必要があります。

ソラマメに貼ってタグの不足でエラー出たら保存されないので、テストの前に必ずメモ帳に保存するなどしましょう!

ホームページビルダーが無くてもCSSやプレビュー出来る無料エディタがあったと思うので探すのも良いと思います。

無料のテンプレートを見ると分りますが、通常は最初からダミーの記事やカテゴリががはめ込んであります。

つまりその箇所にはめ込むだけなんです。




  

2009年01月29日

❤ブログの古い記事は捨てるべき?❤

14:48


時々ブログの容量オーバーしたらどうしようかなと考えます。でも今のペースと使用量ならまだ5年は大丈夫なのかなと思います。

たまに容量の関係で新しくブログを作ったとか記事を削除したというのを目にします。

これは頻繁に更新していれば仕方ない事です。

じゃあ出来るだけ記事を残したり、移転したり、新規に作らなくて済むかを考えてみました。

まず初めに考えれる原因

投稿量が多い

記事内の画像容量が大きい

動画系(ソラマメに保存する)が多い、youTubeなどのリンクの動画は関係ないです。

記事もSLurlを含めてリンク切れの記事などが多く残ってる

そのぐらいですか?

記事の投稿量は仕方ないですね、それだけ書く必要がある事を抑制する必要は無いですね。

次の画像は高画質のbmp pngなどだとあっという間に容量を使い果たします。

画質を落としても問題ない場合はgifやjpgなんかにすると良いと思います。

SLurlはこれが個人的には一番削除の対象かな?って思ってます。

リンク切れのSLurが残ってる場合に、ソラマメだけじゃなくてweb上でもそのリンク切れに辿り着いた人が悲しい思いをすることもあるしwebのSL関連の情報の活性化の妨げにもなります。

webの情報や検索などを考えてもリンク先が主体の記事は削除したりリンクを外して、懐かしい思い出として類似の記事と一緒に投稿しなおすなどが良いかもしれません。

どうしてもSLの場合だと少しだけ特殊かもしれませんね、SLurlなどが代表的ですが、SIM、モール、お店などの閉鎖で飛べないurlこれが普通のウェブ上だとそんなに心配なかったりしますが、SLurlだと閉鎖なのかなんなのかも分らない事が殆どです。

ただ過去記事には幾つかあるのは分ってるけど、実際に削除する事に対してはなかなか重い腰が上がりませんねw

  

2009年01月29日

❤ウェブマメ知識 ブログのトップページ重くない?❤

11:07

SLが落ちるとマメ潰れる現象が定番であります。

じゃあその原因は?

よくインターネットでブログが炎上したっていうのが分りやすいと思いますが、ブログもCGIやPHPというプログラム言語でうごいとりましゅ。

そのプログラムを誰がピコピコ処理するかというと、パソコンサーバーです。

ブログが炎上すると重くなってアクセスできません、それはパソコンがもう来ないでよと言ってるのに大量にお客さんが押し寄せるから。

酷いとブログではなくてサーバーダウンなんて事も昔はありました。

じゃあgoogleやyahooはなぜ落ちないのってありますが、デカイ!それだけです。

そして最近思ったのね、トップページ容量マメのトップより重いよってブログ、例のトップページで右クリックのプロパティのサイズのところのキロバイトね!

これは定かではないですが、重くても6万ぐらいが良いかなと思います。

これも多少負荷の原因にはなってる筈です。

軽いに越した事は無いです。

それとむかしお友達に光が普及し始めた頃に、光だからダウンロードとか早いよね、とか言って貸して貸してって言われて1ギガとか超える容量の音楽?か何かダウンロードしたいとか言われて渋々ダウンロードしたけど時間が掛かりすぎるので無理だからって言った事があります。

大きなサーバーを持ってる所ならダウンロード速度は速くなるけど、規模が小さいとアクセスを考えて転送の制限をしてるからアナログと同じように遅いんです。

光だから全て早いってイメージは間違いです。

簡単に言うと、光の速度で宇宙にでも行ける様な乗り物出来たけど、隕石とかUFOとか飛んでるのは変ってないってことです。

追記

が!


↑稀にこの様な文字だらけのブログも見かけますが、これを多用する事の影響は少ないと思いますが、全部の文字がこんな感じだと少し重くなると思います。

それとホームページやブログのテンプレートの画像(ボタンやアイコン)でpngやbmpなどがヘッダー以外で使われる事が無いのは軽くする為なんですよ。

つまり重くなる原因て色々あるのれす。。。






  

2009年01月14日

❤ソラマメブログカスタマイズ、ブラウザ違うとレイアウト崩れる❤

23:31

私事で気づいた事なのですが、いつか話が出てきそうなので書きます。

昨日?ですかIE8のベータ版を使ってみたんです。でも色々と不具合があってIE7に戻しました。

これは動画サイトのボタンが押せなくなったり、私のブログのレイアウトが崩れたりと色々有ったからです。

このレイアウト崩れは昔から問題になってましたが、解決策は無い?そうこの解決策が無いから諦めましょうって事です。

解決策はありますと反論もあると思いますが、個々のブラウザに対応してレイアウトを修正するのは少し難しいというか面倒だからです。

おそらくサイズなどのスパンに余裕を持たせる事で対応できるかな?とか思いますが、最新のブラウザが変わる度に修正するのも大変です。

一番良いのはシンプルなテンプレートが対応しやすい?それとこの問題の最大原因は規格の解釈の違いだそうです。

つまり仕入れ先は同じお肉屋さんでA店のお肉は新鮮で500円だけど、同じ肉のB店はこの肉は美味しいから550円て感じです。

もし気になる方はこのキーワードなんかでしらべるとモフモフです。

「ブラウザ レイアウト崩れ」  

2009年01月14日

❤ブログカスタマイズあれこれ・・・❤

05:15

何処のブログサービスでもある程度のカスタマイズが出来るようになってきてます。ソラマメも色々と変更する事でオリジナルな感じを出すことが出来ます。

今回はいったいカスタマイズでどんな事が出来るのかちょっとだけ書いてみます。

テンプレートやスタイルシートを編集して全く違う感じにも出来ます。

色や画像を変えるだけでも全然雰囲気が変わります。

このサイトで言うならば、タブメニューが一番分りやすいと思います。

たとえばこのタブメニューもjavascriptでドロップダウンのメニューにする事も出来ます。

flashを貼ってるブログも時々見ますが、商品の一覧なども作れます。

javaでもフォトライブラリーなどが作れます。

これらも詳しく貼り方が説明されていたりするのでそんなに難しく無いかもしれません。

簡単に貼って利用できる物もあるので使ってみては如何でしょう?

Dynamic Drive. 

このサイトではajaxなど最新の技術?なんかもオープンで紹介されてて簡単に貼り付けて使ったりも出来ます。

でもあんまりjavaとか過度に使うと表示が遅くなって見てる人が不快になるので程ほどで使うと良いです。

重いとか軽いを何処で見分けるかと言うと、そのサイト上で右クリックなりでプロパティを開きサイズを見て何キロバイトだと重いとかという事を判断します。

私のところで34000バイト程度ですが、現在の光通信やADSLなら問題無い程度だと思いますが、100000とかになるとやはり重いと感じるかもしれません。そこら辺を目安にすると良いと思います。

また他のブログも表示されないとかというのとは全く別の事で、個人のブログの問題になります。

他のブログが表示されないなどの原因はブログサービスのサーバーや過度のアクセス等による物だからです。


他にはgoogleなどの外部検索やうちでも紹介記事見て貼った翻訳などいろいろ出来ます。

動画などはその動画の配信先が重いと表示が遅くなるなんて事もあるので沢山貼り付けるとかはお勧めできません。

よそのrssなんかを貼るなんてのも今は一般的になってるのでこれは特に説明は要らないかな?

あとは規約の範囲内ならばその様なカスタマイズも良いのではないでしょうか?  

2008年08月18日

❤ブログテンプレートと画像のサイズについて・・・❤

06:23

何となくよそのブログを見ていて時々見にくいブログがあります。それは上下左右に動くスクロールバーが出てるブログです。

縦にうごかす分は特に問題ないですが、横に移動すると見にくいです。

うちも古い記事ではスクロールバーが出てるのも有ったと思います。直すのは簡単で、記事の記入部分のサイズに収まる画像にすれば良いだけです。

わざとスクロールバーを使う場合もありますが、そうでないなら出ないにこしたこと無いです。

家の場合だと500PXにしてます。これで十分余裕が出来ます。

しかしどうしても大きいサイズの画像が使いたい人も居ると思います。

そこで何をすれば良いか簡単に書きます。最近はテンプレートあまり弄ってないので忘れてる部分もわるのでご了承ください。

まず始めに下のような部分がスタイルシートとかかれた所にあります。

この部分の数字を変える事でサイズの縮小が可能です。

main body?部分が狭いのにcontents部分を大きくするとmainまで崩れて画像なども壊れます。その場合はmainのサイズも変更します。(無理すると画像などに隙間が出来るので、画像修正その他が必要になります。)

記事の部分

#content{
width:590px;ここ
float:right; えー文字かなんかの位置?わすれたw
background-color:#ffffff; 背景色
padding:20px 5px 20px 5px; ここは微調整的な部分です
}

次にLINKとかカテゴリなど横の表示部分です。

殆ど似た感じです。ここも数値を変えれば広く出来たりします。

#links{
width:160px;
float:left;
text-align:left;
margin:0px 0px 0px 0px;
padding:20px 5px 20px 5px;
background-color:#ffffff;
overflow:hidden;
}

main部分

#container{ ←この部分の名前はブログテンプレートの作者によって?色々変わります。
font-size:12px;
width:940px;
background-color:#ffffff;
margin:0px auto;
text-align:left;
}


どちらもmainのサイズに収まるサイズでないとテンプレートデザインが崩れるので、まずはmainのサイズを確認してから広くしてください。

3桁の数字の部分だけ変えれば殆ど出来ることなので覚えると楽です。

それとスタイルシートのテンプレートはこの部分で画像などもある程度は変えられます。

他のブログでも応用が利く場合が多いのです。

追記 画像の修正

sidetitle{
border-top:1px solid #00514D; この様な画像に関する部分が何箇所か有ります。
border-left:1px solid #00514D;
border-right:1px solid #00514D;
border-bottom:1px solid #00514D;
background:#00D2C5 url(http://www.slmame.com/_img/simple_marine/obj.gif) top left←カッコ内URLが画像LINKです。つまり今表示されてるこのブログの一部に使われてる画像です。
この部分を他と差し替えて好みの画像にする事も出来ます。



このブログの場合はどちらかというと容易に変更できると思います。

しかし、表示方法やサイズのこと等いろいろあるので、少しややこしいです。(サイズ指定などなど)

生意気な事書きながらもこのブログは殆ど弄ってませんw