忍者ブログ

ipodtouch,iphoneの脱獄jailbreak、アップグレード、ダウングレード、up&Downgrade、有料アプリ攻略hack app...無料情報information sources...公開中
08 2017/09 1 23 4 5 6 7 8 910 11 12 13 14 15 1617 18 19 20 21 22 2324 25 26 27 28 29 30 10
RECENT ENTRY RECENT COMMENT
[04/04 4s]
[03/27 容量]
[03/26 迷走]
[03/23 4s]
[03/21 NONAME]
[03/21 NONAME]
[03/20 教えてください]
[03/15 NONAME]
[03/12 RP]
[03/11 NONAME]

ようこそ!Pod狂会へ!
Pod狂会はipodtouch,iphoneの様々な情報を扱っているブログです。質問などありましたらコメント・twitterからでも気軽に聞いてみてください。
わたくし管理人も1iphoneユーザーであり、1素人です。間違った情報を書くこともあるかと思いますが、どうかあたたかく見守ってくだされば幸いです。コメントの返信が遅れる場合がありますのでご容赦ください。
suneipuをフォローしましょう



[PR]

【楽天市場】☆iphone売れ筋ランキング
【YAHOO!!ショッピング】ケース3g/3gs☆iphone4

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

☆こちらも応援お願いしまっす!!⇒人気ブログランキング
  • 09/24/01:15



DIM WATER INSIDE 3カラム化

【楽天市場】☆iphone売れ筋ランキング
【YAHOO!!ショッピング】ケース3g/3gs☆iphone4

私のブログのテンプレートDIM WATER INSIDE
2カラムのテンプレートですが、3カラムにしたくて
3カラムにしました。

作者はヨウスケさんでとても頼りになります。
3カラム方法を参考にしたのはカズヒロさんの
ブログですが、カズヒロさんのブログはもう見ることが
できないのですが、検索エンジンのキャッシュなど色々
探して3カラム化にできました。

その方法を紹介します。



スイカとつづきをどうぞ



以下、カズヒロさんのブログ内容を参考しました。


CSSの修正

テンプレートの幅は900ですので、合計で900になるように自由に設定できます。今回は、左右のサイドメニューの幅を200、記事の幅を500としました。

まずは、エントリー部分の「#e-zone」を探してください。見つけたら、以下のように修正します。
赤字の部分が追加箇所で、左に寄せて幅を500に固定しました。
#e-zone{
            width: 500px;
                     float: left;

                    overflow:hidden;
}
次に、左サイド部分の「#menu」を探してください。見つけたら、以下のように修正します。
赤字の部分が追加箇所、桃色の部分が変更箇所です。
幅を200にして、右サイドメニュー「#menu2」を新たに追加しました。「#menu」および「#menu2」のfloatの右左のみ注意してくさい。後はコピペです。
#menu{
                  text-align:center;
                  width: 200px;
                  float: left;
                  overflow: hidden;
                  margin: 0;
                  border: 0px solid #fff;
                  background-color: #000;
                  background-image:url("");
          background-repeat:repeat;
                  background-position:top;
}
#menu2{
         text-align:center;
                     width: 200px;
                    float: right;
                     overflow: hidden;
                    margin: 0;
                     border: 0px solid #fff;
                     background-color: #000;
                     background-image:url("");
                      background-repeat:repeat;
          background-position:top
;
}
#menu h3{
                     color:#59439A;
                     font-size: 100%;
                     padding: 5px;
                     margin: 0;
                     border: 0px solid #fff;
                     background-color: ;
                     background-image: url("");
                     background-repeat: repeat;
}
#menu ul{
                    font-size: 90%;
                    padding: 5px;
                    margin: 0;
                    list-style-type: none;
}
#menu li{
                    margin-bottom: 5px;
}
#menu2 h3{
                      color:#59439A;
                      font-size: 100%;
                      padding: 5px;
          margin: 0;
                      border: 0px solid #fff;
                      background-color: ;
                      background-image: url("");
                      background-repeat: repeat;
}
#menu2 ul{
                     font-size: 90%;
                     padding: 5px;
                      margin: 0;
                      list-style-type: none;
}
#menu2 li{
                     margin-bottom: 5px;
}
以上で、CSSの修正・変更は終了です。

HTMLの修正


まずはHTMLの以下の赤字部分を切り取ってください。
切り取る部分はplugin2から4までの部分です。
<div id = "main">
<div id = "menu">
<!--plugin-->
<!--plugin1-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin1-->
<!--plugin2-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin2-->
<!--plugin3-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin3-->
<!--plugin4-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>

<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin4-->

<!--/plugin-->
</div>
<div id="e-zone">
次に、HTMLの一番下の方にある<!--leftEND-->という記述を探してください。
下記のように</div>を削除し、<!--leftEND-->の下に先ほど切り取った部分を貼り付けます。
</td></tr></table>
</div>        ←ココを消します。
<!--leftEND-->
←ココに切り取った部分を貼り付けます。
<div id="footer"><!--CM1-->&nbsp; / &
すると、次の図のようになります。桃色の部分が貼りつけた部分、赤色はあらたに加えた部分です。
<!--leftEND-->
<!--右サイドメニュー追加-->
<div id = "menu2">

<!--plugin-->
<!--plugin2-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin2-->
<!--plugin3-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin3-->
<!--plugin4-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin4-->

<!--/plugin-->
</div>
<!--右サイドメニュー追加ここまで-->
</div>
補足:(やってもやらなくてもいいコーナー)------------------------------------------

プラグイン部分を左寄せするときは、#menuと#menu2にある

text-align:center;

text-align:left;

に変更します。。

またプラグインが左にピッタリついてしまうのがいやな方は更に

padding-left:10px;

を追加し、

width200pxを

190pxに変更します。

これできれいに収まるはず・・・です。

------------------------------------------------------------------------------------------------
これで完成です。「テンプレートの保存」をしてください。

プラグインの設定ですが、左サイドメニューは「プラグインカテゴリー1」で、右サイドメニューは「プラグインカテゴリー2」で行ってください。

拍手[0回]

PR
☆こちらも応援お願いしまっす!!⇒人気ブログランキング

無題

http://hackers17.blog134.fc2.com/
いつもブログを見させてもらっています。
どうか、↑のブログをリンクしてください。
お願いします。

ぺぺ様
一方的にリンクしてくださいはちょっと困ります^^;

申し込むときは相手先のリンクを設置してから申し込むのが
暗黙のルールだと思いますよ~。
2010/07/02 00:02
URL
FONT COLOR
COMMENT
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
PASS
管理人のみ閲覧(閲覧後表示)
※表示させたくない場合は上記にチェックを入れコメントの最後に"表示(公開)しないで下さい"と入力してください。
 

TRACK BACK

トラックバックURLはこちら