05« 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.»07

2013 5月用テンプレート 

テンプレート fwind05-3C れん様

今の時期にピッタリなテンプレートです

最近の好みは3カラムです 2カラムに比べて数が少ないのですよ

便利な4個のメニューに省スペースな横カレンダー それとeditボタン!

それとeditボタンを お尋ねして記事下部から移動する事ができましたので
れん様の他の editボタン下部タイプのに使えるかもしれません。

オリジナル

オリジナル幅狭い 


「スタイルシート編集」
----------------------------
#wrap {
width: 860px ・・・・・・・・・・1100px (+240 

-----------------------------

.flash {
margin: 0 auto;
width: 852px; ・・・・・・・・・・・・1100px(+248
height: 150px; ・・・・・・・・・・・ 180px
background-color: #fff;
background-image: url(画像URL);
}

----------------------------

#content {
margin: 0 220px;         変更なし
padding: 0;                 
background: #fff;
}

---------------------------------

#left {
float: left;
width: 200px;
margin: 0 0 0 -851px;  ・・・・・・-851を -1091pxに
padding: 10px 0 0;
}

---------------------------------

#right {
float: left;
width: 200px;              変更なし
margin: 0 0 0 -209px;
padding: 10px 0 0;
}

~~~~~~~~~~~~~~~~~~~~~~~~






れん様に質問
 

『 editボタン 最下部から上部(投稿日時の後に)への移動 』  

「HTML編集」

~~~~省略~~~~~

<!--topentry-->
<div class="entrybody">
<!--same_day-->
<p class="entrydate" id="e<%topentry_no>"><%topentry_year>/<%topentry_month>/<%topentry_day>&nbsp;<%topentry_youbi>.ここへ</p>
<!--/same_day-->

~~~~省略~~~~~

<div class="entrystate">

~~~~省略~~~~~赤文字は削除 青文字はピンク文字に移動
 
<!--deny_comment--> -- comment <!--/deny_comment-->
<span class="edit"><a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" title="<%template_edit>">edit</a></span>
------------------------------



『 FLASHを ただの画像に替えるには赤文字部分を削除する』
フラッシュ部・・・多分丸い木漏れ日の様なものと 白い日付の表示かな
木漏れ日はあっても良かったんだけど 日付の位置が改造の為 半端な位置に
来るのでカットさせて頂きました。
 


「HTML編集」
-----------------------------------

<div class="flash">
<!--index_area-->
<script language="javascript" src="http://blog-imgs-27.fc2.com/f/l/a/flaw/fw05title.js" charset="euc-jp"></script>
<!--/index_area-->
<!--not_index_area-->
<script language="javascript" src="http://blog-imgs-27.fc2.com/f/l/a/flaw/fw05title0.js" charset="euc-jp"></script>
<!--/not_index_area-->

</div>

----------------------------------------

『 そしてスタイルシートのURLを変える 』

「スタイルシート編集」
------------------------------
.flash {
margin: 0 auto;
width: 852px;
height: 150px;
background-color: #fff;
background-image: url(http://blog-imgs-27.fc2.com/f/l/a/flaw/fwind05-gazou.jpg);
}
------------------------------



改造した結果

このテンプレートは1枚の画像で色々設定されてるそうです それを変えるには
新しく画像を1枚描かないといけないらしいのです
でもそれは できないので諦める。

オリジナルは両サイドにグレーの縦のラインが入るが2と3にラインが来る
それと1で同じパターンを折り返している
画面最下部が 改造したため乱れてしまいました。


最初から れん様のサイトで 幅の改造は難しいとあるのに
無理して広げてしまいました  本当は無理のないキレイなまま使って
欲しいのにね 反省です。
Aここまでしか改造できない あとは画像を作るしかないのコピー 





いつも応援有難うございます
ブログ村5月用 2ひよこデジカメ

スポンサーサイト
テンプレート  /  tb: --  /  cm: 2  /  △top

30 botanical 2カラム 

テンプレートの記事 今月は遅れてしまいました
遅れると 詳細を忘れて・・・・・

≪自分用≫

4月のテンプレートは うららん様の「30 botanical」 2カラム
たいへん春らしいデザインで素敵です


画面左上のキュッと詰まったイラストとサイドカラムのメニューの開閉が
設定できるところ それとこのテンプレートで知ったのですが モニタの幅に
対して流動的に幅を変えるリキッドデザインという物。


このリキッドデザインは好みが分かれると思います
ほんとはこういう感じ(文字)で見せたいのに 動いてしまうから~
文の長さが変わってしまう 折り返されたりして汚く?表示されたりとか
あります リキッドデザインでなければ 見えない部分はカーソルを動かして
見えるのですが  リキッドデザインの方が人に優しいと思う。



オリジナル                  3箇所変更 

ボタニカル狭い ボタニカル変更後   
 

アーカイブ画面             コメント欄 横に広く好み
アーカイブ コメント部
画面最下部の模様
最下部S 



1.ダウンロードした状態で 記事の幅は充分ありましたので変更無し

2.サイドカラムの フェイスブック ツイッター等は 作者様のサイトで
 消し方を知り 消しました

3.サイドカラムのメニューをいつも表示するに変更しました
 作者様のサイトの情報通り

4.記事面の地色が白くてコントラスト強く感じたので 適当な色を探し変更
 色は白から fffafa  へ

 /*--------------------------------------------------
    レイアウト
--------------------------------------------------*/
 途中略

div#main {
        background:#fff;  → #fffafa; 元は 

 

5.忘れていました サイドカラムの文字の大きさを大きくした事を

サイドカラムの文字のサイズの変更
スタイルシート

dt.plg_title { ←プラグインタイトル
font-size: 100%; ←文字サイズ   115%
(略)
}
dd.open_close { ←プラグイン本文全体
(略)
font-size: 90%; ←文字サイズ    100%
line-height: 1.6em;
}



45は うららん様に教えて頂きましたo(_ _)oペコッ 

お忙しいでしょうに 丁寧に質問に答えられていて尊敬いたします 
テンプレートのああいう場は向上心のあるかたには宝の山です。

 



いつも応援ありがとうございます
にほんブログ村 写真ブログ 日常写真へ AA2013年3月FC2用
テンプレート  /  tb: --  /  cm: 2  /  △top

初の1カラムテンプレート 

3月に入っても2月に使ったテンプレを使おうと思って画像の準備もしてたけど
やっぱりつまらなくなって 試したことのない1カラムに手を伸ばす

【改造】

SLUG'S UPPER様の「SUP15-2」
にしたいと思ったが背景の絵が自分向きじゃ
なくこれを変えられたら 使えるが・・・・・不安80%

                      背景替え

SUP15-2元Sデザイン  SUP15-2S機能的1カラム edit上付


スタイルシート5行目のURLを変えたら タイル状にしてくれて万歳でした

body{
 background: #333 url("背景画像URL");


使った画像がとても素敵で なおかつシームレスでgoodです 
画像は「
Robo.Revo.Laboratry」様からお借りしました


       ☆         ☆


【このテンプレートの好きな所】

1.良く見かける1カラムの一番下のカラム?って結構 表示がガタガタだったり
 しますが これ綺麗なんです

2. 2~3カラムから1カラムにすると情報が不足しますが これは上部に
 メニューがズラっと並んでいます ただ並んでいるだけじゃなく
 マウスonでサッと表示してくれます ここが自分的には大事なんです
 好みが分かれるかもしれないけど こうでない場合1クリックが必要になります
 逆に目に障るパターンもあるのですが。

3. 1カラムには珍しく EDIT機能がついてる UPしてから すごい回数
 修正する私にはなくてはならない機能、どれだけ不完全な記事をUP
 しているのかという事でもありますけど。

4. いままでスクロールバーのないテンプレートやコメ欄にスクロールバー
  のないのを嫌に思っていましたが これ逆なんですね
  ああいうタイプは 障った場所がスクロールバーです 透明だけど。

5.勿論 機能的でスタイリッシュだから  

       ☆           ☆

【このテンプレートの気になる点】

1.コメント欄の位置が少しわかづらく感じました マークじゃなくて数字を押します
 検索窓が開いてないからこれも分かりづらい  
 スタイリッシュとわかりやすさは別の物か
 
2.編集画面で画像の周りにラインを設定しても どこが悪さするかしれませんが
 ラインが表示されないみたいです 私の環境だと

3.背景を替えたが為に上部のメニュー部が真っ黒でコントラストがきつくなった

4.返しのコメント時 コメント欄が一番上に配置され 頂いたコメントが下に
 どんどん表示されるから コメント見えないから返事が書きづらいです
 なにかの調節で変わるのかわかりませんが コメント欄は 普通っぽく
 下がいいかなと思います、コメント数が少ない場合は問題ありませんが
 5個以上頂くと きついです。

ABコメ導入部のコピー 


【その他】

テンプレートで左右にタブが付いているものの使い方がわからなかったけど
「BOTTOM」で最下部の情報が見られます いままで長~~~~く
スクロールさせていたけど あれは無駄でした


このテンプレートは5記事を表示してて「NEXT」で次の5記事に移動します
記事の長さも関係するのかな?? 適度な量かな~5記事は

今まで画像をTOPに表示してきたけど 諦めます



コメント欄は普通サイズですが コメント修正欄はかなり大きいです 修正欄

コメ Sコメ修正欄  

 
返しのコメントを書くときにはコメ欄の配置が悪いかも 
ドロップダウンメニューが見えてる状況で画像を最大化すると メニューが
 邪魔します これは嫌な仕様ですね だからメニューを隠してから最大化が〇です


Aコメント欄位置悪い メニューが写真の邪魔をする


毎月テンプレートを替えるからこそ ブログが続くのです 私の場合、
傍迷惑だけかもしれませんが お許しください
こんな私ですから よそ様がいくらテンプレート替えられても平気です。




ランキングに参加していますm(_)m 
 2013年3月村用bag 未使用ひよこレーサ
テンプレート  /  tb: --  /  cm: 0  /  △top

2月のテンプレート  

2月用のテンプレートの改造(自分用) 先月に続き再度3カラム

れん様  darkforest01_3c   画像は最大化できます

オリジナル                  改造 

オリジナルdarkforest013c● 改造済ダークフォレスト3カラム

 

私の中ではベストと言える機能です

1.横カレンダー
1. 4個のメニュー  特にAll archives(全記事)
1.記事のEDITボタンが上にある

不満はブログタイトルの位置くらい






スタイルシート 改造箇所   CTRL+キー 2度押し 150%で作業
-----------------------------

#wrap {
width: 960px;   +310=1270
----------------------------

#container {
width: 920px;   +310=1230
---------------------------

/* 画像URL(920*180) */
#header {
position: relative;
width: 920px;    +310=1230
height: 180px;    +40=220
-----------------------------

#content {
float: left;
width: 460px;    +240=700
margin: 0 0 0 230px; +50=280
}

* html #content {
float: left;
width: 460px;   +240=700
margin: 0 0 0 115px;
}

---------------------------
とここまで普通に結果をみながら改造してきましたが 左カラムが
メインカラムの左端に乗っています

左カラムが 

こういうパターンは初めてで 作者の れん様にお尋ねしたら 
下の回答・・・#leftが少し離れた場所にありまして 


--------------------------------
#left {
float: left;
width: 190px;         +50=240
margin: 0 0 0 -670px;   +290= -960 にしたらうまく納まりましたm(_)m
}

-------------------------------




もっと欲を出せばもっと変えられるのでしょうが 私には十分な気がします
気に入ったテンプレのメインカラムの拡大 TOP画像変更 これだけです
たったこれだけでも できない わからないテンプレートあります。  



ランキングに参加しています <(_ _)>    

 ●ブログ村2013年2月だよ2月AFCバナ候補

テンプレート  /  tb: --  /  cm: 0  /  △top

テンプレート1月 

さて新年のテンプレートは暖色でいきたいな~

pretty Heart-blog ゆみかん様の 「ph-orange3」です m(_)m


オリジナル  画像幅480×250px   改造済み  画像幅700×200px 
                                                                           左サイドカラム幅広に。

ph-orange.jpgph-orange最終版S  
 

オリジナルのミントblueさんの画像を使いたかったのです
この画像が気に入ってのこのテンプレですからね。
破綻のない程度に幅を拡大しましたが横280pxの画像が横に2枚並ばなくて
断念です><


ようやく自前のオレンジ写真用意 可愛さは全くないけど、9月4日の朝日です
これ朝日が眩しくて すこし修正しました 

スタイルシート改造(自分用)
--------------------------------------------- 

全体のレイアウト width 970px ・・・・・・+260=1230

--------------------------------------------------

#center    waidth 760px・・・・・・+250=1010

----------------------------------------------------

ヘッダー    width  510px・・・・・・・・700
         height  250px・・・・・・・200
         画像URL   

---------------------------------------------------

記事エリア   width 550px・・・・・・・・+190=740

------------------------------------------------

サイドナビのleft  width  210px・・・・・+50=260
サイドナビのright  width 210px

------------------------------------------------

現物合わせで いつもと違い数字の整合性が崩れてしまいました。 

カレンダーの数字が小さ目でわかりづらいので別のに差し替え

 元々の画像の著作権者のMintblueさんの名前を消そうと
すこしやりましたが 放置




ほんとに久しぶりの3カラムです
文字はグレーですが   もう少し濃い方が好き。
  



  ランキングに参加しています 応援ありがと~~~~

●玩具カメラ完●完S水ペンシルSIMG_2060
テンプレート  /  tb: --  /  cm: 6  /  △top