vanillaice (Akira)

vanillaice (Akira)

2017.10.5 配布終了致しました

長い間ご利用頂きありがとうございました


----------- 以下本文
2016.10.22 ブログ限定配布に切り替え致しました

公式の登録を取り下げまして ブログ内限定配布にさせて頂きました
ぶっちゃけた話し メンテナンスできていません ヘ(゚∀゚ヘ)
表示に問題等ありませんので それでも良いや という方だけお願いします ←


----------- 以下本文


paradiso.jpg


名称 Paradiso
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ ブラウザ縮小・スマホ 下
記事幅 可変 最大760px(内寸 720px)
サイドバー幅 300px
Windows/ Mac
Chrome Firefox Safari Opera IE11/ 10 IE9/ 8以下
11/ 10 フリップに難あり 9 フリップしない(笑)
8以下 お話にならない
推奨カスタム 背景変更



更新履歴 2016.9.9


● リストマーカーの位置を調整しました

参考記事
list-item横の隙間について


● 最優先フォントを游ゴシック体に変更しました
● 主要公式プラグインの整形を行いました


--------- 以下本文



更新履歴 2015.9.22


iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
(Colorbox適用版は記事の最後に掲載しています)


更新履歴 2015.9.9


・ 公式化に伴うOGP削除

テンプレ付随のSNSボタンをご利用の方は ブログ個人環境のメタタグ設定をお願いします


--------- 以下本文


更新履歴 2015.8.30


修正版配信

・ ページtop/bottomボタン変更
・ スマホからのテキスト入力時に画面が自動でズームしないよう調整
・ FC2検索バーがタブレットでレイアウトを壊す問題に対処
・ その他微調整

リリース済テンプレ随時更新のお知らせ

ご迷惑おかけします よろしくお願いします


更新履歴 2015.6.5


iOS Safari でブラウザバックするとホワイトアウトする問題があったため
現在は修正版をリリースしておりますのでご参照ください

Ivoryその他過去テンプレ修正版配信のお知らせ

以下本文 ---------------


夏到来 ( ゚Д゚)ノ

2015.5.25 申請しました 2016.10.22 公式配布からブログ内限定に切り替えました

Sample トップ
Sample 個別
DOWNLOAD(ZIP)


FAQ



th_45758.jpg


仕様
・ トップページ最新記事だけ大きめ表示
・ 写真にマウスオンで記事要約
・ 個別記事にパン屑リストをつけました
・ ページ遷移のフェードイン・アウト効果をつけました(削除可)
・ RSS最新記事をサイドバーに設けました
・ コメント欄をわかりやすくしました emo
・ コメント欄を折りたためるようにしました emo


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更



*****************************
ページ遷移エフェクトについて
*****************************

私のテンプレでは基本的にフェードイン・アウトの効果がついているものだと思って頂けると(笑)
パフォーマンス重視の方は削除してください

Ctrl + F キーで以下の文字列を検索して削除(2箇所)

 <script src="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/fademover400.js"></script>
  <script>
    $("head").append('<style>body { opacity: 0;-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 ); }</style>');
    $(function(){
      $("body").fadeMover();
    });
  </script>

同じく以下を検索して削除

<script>
  $(function(){
    $('.side_bar a').addClass("nonmover");
    $('a[target=_blank]').addClass("nonmover");
  });
</script>


*********************
IEでの表示について
*********************

ieなんともなりませんわー (´・ω・`)
トップページのマウスオンで記事要約がフリップというエフェクトですが
ieだとただボヤーっと出てくるだけ (;´-ω-`)yヾ
Windows10のMicrosoft Edge なる新ブラウザに期待
ieユーザーさん 毎度とぅいまてん (´・ω・`)


*****************************
コメント入力フォームについて
*****************************

特にコメント内容を入れるスペースを広めにとって欲しい
というご要望を頂きましたので工夫したつもりですが
どうでしょうか (´・ω・`)
まだ小さいかしら ^^;


************************************
コメント欄を「折りたためます」について
************************************

「折りたためます」であって「折りたたみです」ではありません
こちらもリクエスト項目ですが 恐らくご本人様は「最初から折りたたんだ状態にしてほしい」
というのが本来の希望かと思います
こちらについては動作環境・利便性の観点から採用しませんでした ごめんなさい (*_ _)
特に別ページから最新コメントを押してジャンプした際
目的のコメントまでスムーズに移動することが難しいです
それが一点
そして コメント欄が最初に可視状態になっていないと コメントをされた方が
私のコメント削除された? と誤解することもあるのではないかと思います
要らぬトラブルの素にもなりそうなのであまりおすすめできません (´・ω・`)

以上を踏まえて今回の形を取らせて頂きました
コメントの多い方はスマホからの閲覧時にスクロールが大変ですので
閲覧される方に適宜折りたたんで頂く ということでお願いします(笑)




最後にオマケ的なことですが
ビジターさんのコメントと管理人のコメントを視覚的に分ける方法を別記事でUPしておきます
そのカスタマイズをされる方のために 別アイコンをこちらで配布しますので
右クリック「名前をつけて保存」あるいはドラッグ&ドロップでご自分のパソコンに一旦保存して頂いて
FC2に画像をアップロードするなり 他サイトからの直リンするなりしてご利用ください
改変や再配布だけはNGでお願いします (*_ _)


------------- 追記 2015.11.28

コメントマーク背景を分けるにあたり
裏ワザ的なCSSで実装しています
ご利用頂けない場合もあります
使えないハンドルネームのパターンは以下の通り

・文字列最初の文字が「記号」
・最初の文字が「数字」
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)

------------ 以下本文



みなさんいつもありがとうございます!



★ コメント欄用アイコン
該当記事 訪問者コメントと管理人コメントを区別する
comment-icon

★ Colorbox適用済htmlファイル×1 (2015.9.22 現在最新版)
(公式からDL後にhtml内容差し替え)


*** Colorbox版配布終了致しました ***
関連記事

Comments 38

There are no comments yet.
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/05/27 (Wed) 00:58 | EDIT | REPLY |   
Akira  
内緒「き」さん

そうそう。意味違いますよね(笑)
日本語って難しいe-452

カスタマイズなんかをやってるうちになんとな~くわかってきたりするかもですよ。
私なぞ完全に独学ですもの (´・ω・`)
教室に通ったこともなければ、学校で習ったこともないです(笑)
独学の我流です。
ある意味恐ろしい ( ̄∀ ̄;)

これ言わない方が良かったか ←

2015/05/27 (Wed) 02:39 | EDIT | REPLY |   
tak  
メインカラム サイズ等

はじめまして。Paradisoをダウンロードして使わせていただいております。
メインカラムのサイズを変更するにはどこを変えたらよろしいでしょうか?
私としては横800pxの画像をそのままの大きさで掲載し、小さめの画像は640pxで表示したく思っております。
ご教示いただければ幸いです。
よろしくお願いいたします。

2015/05/28 (Thu) 12:10 | EDIT | REPLY |   
Akira  

こんにちは。ありがとうございますe-257

> 記事幅を横800pxにしたい件

以下の文字列を Ctrl + F キーで検索

#container {
width: 80%;
margin: 0 auto -100px;
max-width: 1100px;
}

数値を修正して以下の通り

#container {
width: 80%;
margin: 0 auto -100px;
max-width: 1180px;
}


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

検索

#banner {
max-width: 1100px;
margin: 0 auto;
background-image: url(http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/compass.png);
background-position: 0 20px;
background-repeat: no-repeat;
padding: 40px 0 70px;
}

修正

#banner {
max-width: 1180px;
margin: 0 auto;
background-image: url(http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/compass.png);
background-position: 0 20px;
background-repeat: no-repeat;
padding: 40px 0 70px;
}


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

検索

#afterMasonry {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}

修正

#afterMasonry {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}


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

以上3修正です。

フと思ったのですが。
仮に800pxで掲載なさったとしても、閲覧される方がブラウザの幅を縮小されていたりなどして、
例えば記事の幅が800px未満 600pxとか700pxとか。
そんなときにも必ず記事内に画像が収まるように縮尺されますので、必ずしも800pxで見てもらえるわけではないんですね (´・ω・`)
画面総幅が 1024px というパソコンもまだまだ数が多いです(現在の最大流通は 1366px)
1024pxパソコンだと記事幅800pxはちょっと厳しいかもしれません ^^;
おわかりだとは思いますが一応確認でございました。

もしあれでしたら、当該記事の一番下にColorboxというプラグインつきのhtmlファイルを掲載しています。
クリックしたら拡大して実寸表示を同ページ内で行うものなのですが、よろしければ一度お試しくださいませe-257
(サンプルは当記事内の一番上Paradisoパソコン画像をクリックで確認できます)

2015/05/28 (Thu) 13:00 | EDIT | REPLY |   
tak  

Akiraさま。ご教授いただきありがとうございます。

ご指示の通りいたしましたが、画像が800pxの原寸で表示は出来ないです。
このままでも良いのですが、別の方法とありましたらまた教えていただければ幸いです。

別件ですが、好きな画像をサムネイルにするには も参考にさせていただき
最新記事等をそのようにいたしましたが、個別記事表示にしたとき、最初の画像をクリックすると
隠しているはずのmargin 0の画像が別タブで表示されてしまいます。

大変ご面倒とは存じますが、これの対策あれば教えていただければ幸いです。

2015/05/28 (Thu) 16:05 | EDIT | REPLY |   
tak  

追記です。
例えばこの記事で
http://sgourmet.blog94.fc2.com/blog-entry-2156.html

一番上の画像(飲食店の入り口)をクリックすると
margin 0で仕込んでいるサムネイル画像の原寸大が表示されてしまいます。

2015/05/28 (Thu) 16:16 | EDIT | REPLY |   
Akira  

えっと。まずですね。
画像拡大の件。
FC2のサーバーおかしくありませんでしたか (´・ω・`)
なんかね…(笑)
このコメント拝見して、私も試したんです。
確かに拡大されずそのまま別タブで開いてしまいました。
でもその後ちょっと出かける用事がありまして、今帰宅して同じ作業したんです。
ソース状態を保存した上で、元ソースに戻し、再度ZIPファイル内のソース差し替え。
いつもどおりにFC2の画像貼り付けを行ったら…。
フツーに開けた ( ̄∀ ̄;)
なんでや… ( ̄∀ ̄;)

これ恐らくですね、FC2サーバーが変更を受け付けない時間帯があったのではないかと推測します。
比較しましたら、私の保存ソースも変更「前」の状態でした。
つまり変更したのに実際は反映されていなかった、ということだと思います。
ソース内容を置き換えたにも関わらずー!
で、takさんの記事も拝見しますと、元ソースのままなんです。
colorbox用の記述が一つも含まれていない状態です。

ちょっと私も困惑していますが、同じファイルを再度差し替えてみて頂けませんでしょうか。
お手数おかけします ^^;

2015/05/28 (Thu) 21:21 | EDIT | REPLY |   
Akira  
To takさん

ごめんなさい。
二件目のご質問、私が取り違えしておりましたもので、返信をひとつ削除しました。
もう読まれたかもしれませんので、一応記しておきます。
画像サムネイルの件でしたね。
コメント画像と勘違いしました。
少しお待ちくださいませ!

2015/05/28 (Thu) 21:43 | EDIT | REPLY |   
Akira  
To takさん

こちらの件は、サムネイルにしたい画像を「一番はじめに」入れてください。
リンク先記事を例にとりますと、

『オーキッドコートに移って』

という文章よりも「前」に入れてしまいます。
より安全に入れるには<a>タグを取り払うと良いと思います。

<a href~省略><img src~省略 style="width: 0; height: auto;"></a>

こうすると絶対にリンクされません。

でもなんか不思議な現象が起こりましたね。
初めて見た ^^;

2015/05/28 (Thu) 22:03 | EDIT | REPLY |   
Akira  
To takさん

余計なお世話で二点よろしいでしょうか。
スマホでの閲覧について。

❶ サイドバー内プラグイン「画RSS」の横幅が350px設定になっており、サイドバー300pxからオーバーフロー(超過)しています。
ですからスマホから閲覧した際に右側に余幅ができてしまい、スクロール時に画面が左右に振られてしまいます。
スマホユーザーさんにとって画面のブレというのはとっても大きなストレスになりますので修正されると良いかな と思います。
(画RSSは作成時に確かwidthの指定ができたと思います)

❷ 公式プラグインのメールフォームが崩れてしまっています。
これはこのプラグインの書き方が悪いせいでございます(笑)
以下の通りに修正して頂くと、スマホ閲覧時にも崩れませんのでお試しください。 ↓

<form action="./" method="post">
<p class="plugin-mail" &align>
<div>名前:</div>
<input type="text" size="10" name="formmail[name]" value="" maxlength="100" style="width:90%;" />
<div>メール:</div>
<input type="text" size="10" name="formmail[mail]" value="" maxlength="150" style="width:90%;" />
<div>件名:</div>
<input type="text" size="10" name="formmail[title]" value="" maxlength="150" style="width:90%;" />
<div>本文:</div>
<textarea name="formmail[body]" cols="10" rows="6" style="width:90%;"></textarea>
<p class="mailformbtn">
<input type="submit" value=" 確認 " />
</p>
<input type="hidden" name="mode" value="formmail" />
<input type="hidden" name="formmail[no]" value="&formno" />
</p>
</form>

「プラグイン設定」で該当プラグインの「詳細」を開いてもらうと
「プラグインの改造」【HTMLの編集】を行います。(上級者向け)
という項目がありますので、そちらからの修正です(複製をおとりください)

せっかく良い記事を書いてらっしゃるので、スマホ読者を失うのはもったいないと思います。
お気に触りましたらごめんなさいね。

2015/05/28 (Thu) 23:19 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/05/29 (Fri) 02:58 | EDIT | REPLY |   
Akira  
To 内緒「K」さん

こんばんは。
まずイニシャル「K」で合ってますでしょうか(笑)
違ってたらごめんなさい ^^;

> Colorbox動作不全の件

トリガー関係あります。
トリガー名が違うと引き金になってくれませんので、ここはちゃんと合わせる必要があります。
で、現在のColorboxスクリプトは僅かなコードで動作するようになってます。
コードは短ければ短いほど良いと思います。
長いとコンフリクト(干渉)の可能性も高くなります。
修正されるのであれば私のコード内容の方ですよねー。
10数行で済むので(笑)

気をつけるべき点は、トリガーは「クラス名である」
というところです。
クラス名はよくよく気をつけないと、テンプレ内クラス名とバッティングすることがありますよね。
例えばColorbox動作のトリガーに youtube を使っているのに、テンプレ内に class="youtube" が入っていると
これもう完全におかしなことになります。

そして今回・先回共に「Fademover」というページ遷移スクリプトを導入しています。
フェードイン・アウト効果ですね。
ページ遷移時のエフェクトの扱いはとても繊細でして、

・ target_blank をどう扱うか
・ ページ遷移先がないhref(TOP/ BOTTOM 等のページ内ハッシュ移動等)の処理

これが大きな点です。

一旦投稿しますね。

2015/05/29 (Fri) 04:27 | EDIT | REPLY |   
Akira  

んで、私の方のスクリプト内容こちらです ↓

<link rel="stylesheet" href="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/colorboxvanilla.css">

これを<head>内、Kさんが書いておられますRSS用link relの上で良いです。
そしてhtmlソースの</body>直前に元々書かれているのが以下の書式。
(スクリプトは<head>内に多ければ多いほど動作が遅くなりますので、できればソース後方に回すのがベスト)

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
});
</script>


ここに追加をしていく形です。
私の使うhtmlバージョンは 5 ですので、script type="text/javascript" という記述は不要です
現在のhtml5 script type初期値は text/javascript になっております。
これ逆に、書いちゃうとW3Cから警告受けます。

まず「クラス自動付加」の場合(フツーに画像を貼るだけで勝手にクラスがつきます)

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$('.contents img').addClass("gazou");
$('.gazou').closest('a').addClass("cpModal");
$('.cpModal').addClass("nonmover");

});
</script>


画像に一旦「gazou」というクラスを与え、その画像にリンクがつけられていた場合に
「トリガー名」のクラスをさらに追加。
という方法です。
Kさんが今までご利用のトリガー名はcpModalだと思いますので、これを加えます。

手書きで毎回クラス付加しておられるのであれば以下の通り

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$('.cpModal').addClass("nonmover");
});
</script>


この一行を追加するだけでオッケーです。
恐らく今回の原因はこの nonmover が含まれていないせいかな? と。
いつも通りのものにこれ追加するだけでもしかしたらいけるかもしれないですね。


…まだまだ続くよ!

2015/05/29 (Fri) 04:44 | EDIT | REPLY |   
Akira  

上記でクラス形成が済みましたので、そのスクリプトの下に続けて以下の通り。

<script src="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/jquerycolorbox.js"></script>
<script>
$(function(){
$("a.cpModal").colorbox();
});
</script>


Colorboxのjsファイルは既にお持ちだと思いますので、ご自身のものと差し替えて構いません。
ただバージョンの違いで動作環境が左右されることもありますので、ダメなら私の使ってください(笑)
クラス名さえ正しければこれで動作するはずです。

続いてyoutubeの方。
(これまでの内容に続けて記述)

<script>
$(function(){
$(".youtube").colorbox({
iframe:true,
innerWidth:400,
innerHeight:275
});
});
</script>


こちらのトリガーはクラス名youtubeだと思いますので上のようになります。
で、width(横) height(縦) はここで決定します。
毎回この大きさを守るようになります。
で、忘れずにこちらも先ほどのクラス成形スクリプトに追加

$('.youtube').addClass("nonmover");

ここまで記した内容で、他スクリプト内容などとクラス名が被っていないかをまず確認されまして
(例えば画像への gazou というクラス名なんか怪しい((((笑))
そして、今までKさんがお使いになっていたトリガー名をどこへ入れるのか、そしてそれが正しいのかどうかも確かめて頂きましたらGO!ってことで。
ダメならまた教えてくださいe-348

2015/05/29 (Fri) 04:53 | EDIT | REPLY |   
tak  

お世話になっております。
。。。。。。。。。。。。。。。

<a href="http://blog-imgs-72.fc2.com/s/g/o/sgourmet/P1150645.jpg" target="_blank"><img src="http://blog-imgs-72.fc2.com/s/g/o/sgourmet/P1150645.jpg" alt="牛しゃぶ" style="width: 0; height: auto; /></a>

オーキッドコートに移って?からは初訪問です。

。。。。。。。。。。。。。

最初このようにしていたのですが、これだとホーム画面でマウスを記事の部分にオンしたときに
「・・・」と表示されていたので、まずテキスト一文を最初に書いたのがきっかけでした。

ご指導の通り画像タグを最初にいれても、料理店入り口の画像をクリックすると
マージンゼロの上記の「牛しゃぶ」画像がでてしまいます。

取り急ぎご報告させていただきます。

2015/05/29 (Fri) 08:36 | EDIT | REPLY |   
Akira  
To takさん

この場合には

<img src="http://blog-imgs-72.fc2.com/s/g/o/sgourmet/P1150645.jpg" alt="牛しゃぶ" style="width: 0; height: auto; />

これでいけると思います。
マージンゼロ
というのはたぶんワイズゼロの書き間違いかな?

んー。で、ちょっとやっぱりFC2に変更入ってますよね (´・ω・`)
以前は見当たらなかった記述がちらほらと…(head内部情報です)
それが関係しているかわかりませんが、
<a> タグは抜いた方が良い、というよりも抜かないといけない、と考えた方が良さそうです。
border="0"
の記述を消される際についでに

<a href="省略"><img src="省略"></a>

赤字の<a>タグ(末尾の終了タグ含む)を消してみてください。

2015/05/29 (Fri) 08:50 | EDIT | REPLY |   
Akira  

今該当記事の方にも追記しておきました。

http://vanillaice000.blog.fc2.com/blog-entry-183.html

で、トップページで



と三点リーダーだけ表示されているのは、もしかしたら記事の本文を「追記」の方に書かれてませんでしょうか?
追記への文章は要約として抽出されない、というのがFC2の仕様です。
一度ご確認くださいね。

2015/05/29 (Fri) 08:57 | EDIT | REPLY |   
tak  

Akiraさま

色々とありがとうございます。
ご指示の通りいたしましたら違う画像の出現は解消されました。

取り急ぎお礼申し上げます。m(_ _)m

2015/05/29 (Fri) 09:53 | EDIT | REPLY |   
Akira  
To takさん

あ、よかったですーe-257
たった今上のコメントを編集してしまいました(笑)
あまりコメント多くても読みづらいかと ( ̄∀ ̄;)

「追記」の件ご確認くださいませー!

2015/05/29 (Fri) 09:54 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/05/29 (Fri) 14:52 | EDIT | REPLY |   
tak  

何度もすいません。
本文のフォントサイズはどこをいじればいいですか?もうすこし大きくしたいので。
(サブタイトルの文字サイズは変更できたのですが・・・)
あと画像も800pxで表示できました。(80%→100%に変更しました。)

2015/05/29 (Fri) 15:42 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/05/29 (Fri) 16:00 | EDIT | REPLY |   
まぁ  

横からすみません

<img src="http://blog-imgs-72.fc2.com/s/g/o/sgourmet/P1150645.jpg" alt="牛しゃぶ" style="width: 0; height: auto;" />

これは関係ないですかね。。。

2015/05/29 (Fri) 17:58 | EDIT | REPLY |   
Akira  
To 内緒「き」さん

そうかな?と思ったらやはり貴女でしたかe-456
度々お手数おかけします!ガンバ ^。・x・)b

2015/05/29 (Fri) 19:34 | EDIT | REPLY |   
Akira  
To takさん

遅くなりました (*_ _)
こちらが該当箇所です ↓

body {
font-size: 13px;
color: rgb(51,51,51);
line-height: 1.7;
font-family: Meiryo, 'Hiragino Kaku Gothic Pro W3', Georgia, 'Times New Roman', Serif; /* 記事基本フォント */
background-color: rgb(249,246,236);
}


お好きな数字にご変更くださいませe-257

2015/05/29 (Fri) 19:35 | EDIT | REPLY |   
Akira  
To 内緒「き」さん

あ、できたんですね。
お疲れ様でした。
ホッとしました!(笑)

2015/05/29 (Fri) 19:37 | EDIT | REPLY |   
Akira  
To まぁさん

ぎゃー!e-447ほんまやぁーe-447
いえもう、横からでも縦からでもお好きなところからお入りください(笑)
ヤッダー全然気が付きませんでした ←
私ホントだめなんです。こういう繊細な気付き(笑)
根っからズボラなものでe-465
こうして教えて頂けると助かります!
今後もどうぞお願い致します(笑)

んで、肝心なtakさんはできた…んですよね?
入れなおして修正されたのかしら。
えっと!!このまぁさんのコメントに気づいて(笑)
"
このチョンが足りてなかったんだー!マジかーe-452
まぁさん、ありがとうー!

2015/05/29 (Fri) 19:41 | EDIT | REPLY |   
tak  

まぁさま
Akiraさま

ご指導ありがとうございます。
上手くいけましたようです。
フォントサイズも調整できました。
画RSSも横幅を変更いたしました。

ありがとうございました^^

2015/05/29 (Fri) 23:54 | EDIT | REPLY |   
tak  
右カラム

おはようございます。

度々すいません

・右カラムのカレンダーのサイズを全体的に小さくするにはどうすればいいですか?

・同じくEntry、なかの人、Mail Formのフォントサイズ(タイトルでなく内容表示)を
小さくするにはどうすればいいですか?

何卒よろしくお願いいたします。m(_ _)m

2015/05/30 (Sat) 08:07 | EDIT | REPLY |   
Akira  

だいぶ体裁整いましたねe-257
スマホからも確認しましたが、画面も左右に振られることなくスムーズに閲覧できました。
まぁさんもご協力ありがとうございましたe-454

ということで次のご質問に進みます(笑)

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

> サイドバー内文字の大きさ変更

二箇所あります。まず

.side_bar li {
list-style-type: square;
list-style-position: inside;
font-size: 任意の数値px;
}


更にもう一箇所

.side_bar, #newest {
position: relative;
background: url(http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/side_ops.png) left top no-repeat;
padding: 48px 0 20px;
z-index: 20;
font-size: 任意の数値px;
}


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

> カレンダーのサイズ変更

.cal {
font-family: 'Libre Baskerville', serif;
margin: 0 auto;
table-layout: fixed;
text-align: center;
width: 100%;
border-collapse: separate;
border-spacing: .1em;
font-size: 任意の数値px;
}



赤字の部分は「追加」です。
ピンクの部分は「変更」です。
カレンダーのサイズ変更のみパーセンテージ指定ですが、80%ぐらいが限界でしょうか。
それ以下にするとなると、全体の構成をちょっと考える必要が出てきます(セル幅等)。
セル幅、というのは各日付の部分のことです。
90%以下にされる場合にはまたご報告ください ^^;
文字のサイズも組み合わせてバランスを見てくださいね。
ということでカレンダー側にも文字の大きさ指定を追加する格好になってます。

2015/05/30 (Sat) 09:50 | EDIT | REPLY |   
tak  

Akiraさま

早速のご教示ありがとうございます。
変更させていただいました。
おかげさまでイメージ通りに上手くいきました。

とり急ぎお礼申し上げます。

2015/05/30 (Sat) 11:21 | EDIT | REPLY |   
Akira  
To takさん

良かったですーe-454
お疲れ様でございましたe-454

2015/05/31 (Sun) 09:47 | EDIT | REPLY |   
ぽんぽん  
質問です

はじめましてm(_ _)m
TOPページの個別記事を、それぞれ枠で囲むことは可能でしょうか?

例えば・・・
border: 3px green solid; /* 枠線を引く */
border-radius: 20px; /* 角丸の指定 */
のようなタグを使ってです。

トライはしたのすが、うまく表示が出来ませんですた。

お忙しいと思いますが、お返事頂けたら助かります。

2015/06/20 (Sat) 11:58 | EDIT | REPLY |   
Akira  
To ぽんぽんさん

こんにちはe-257

>トップページ要約記事をボーダーで囲う件(手順数3)

-------

Ctrl+Fキーで以下の文字列を検索。

.firstChild {
width: 100%;
padding: 0 10px 10px;
margin-bottom: 40px;
}

赤字の行を追加(黒1pxボーダーの例)

.firstChild {
width: 100%;
padding: 0 10px 10px;
margin-bottom: 40px;
border: 1px solid black;
}


---------

検索

.stuff {
width: 100%;
height: auto;
padding: 0;
position: relative;
margin-bottom: 15px;
}

ピンク字を修正及び赤字行を追加

.stuff {
width: 100%;
height: auto;
padding: 10px;
position: relative;
margin-bottom: 15px;
border: 1px solid black;
}


----------

検索

.firstChild .stuff {
margin-bottom: 0;
height: 200px;
}

赤字2行を追加

.firstChild .stuff {
margin-bottom: 0;
height: 200px;
padding: 0;
border: none;

}


-----------

ボーダーの種類に関してはお好きなものを設定してください。
ただ、太さが3pxだとちょっと厳しいかもしれません。
border-radiusの指定はborderを指定した箇所の下に書いてください。
ちょっと角を丸める程度なら2~8pxぐらいが妥当かと思います。

レスポンシブ(スマホ対応)で作成していますので、編集の際にはブラウザを拡大したり縮小したりと、画面の大きさが変化した時にどうなるかを確認しながら作業をしてみてくださいね。
よろしくお願い致しますe-454

2015/06/20 (Sat) 15:25 | EDIT | REPLY |   
遥  
No title

初めまして。
FC2でParadisoを見つけまして、
何と素敵なテンプレート!と、夢中になったのですが、
ブログのトップページで記事ごとにサムネが表示されて、
文がが右寄りになるのは、私には必要ないかなーと思いまして…。

気にいらなければ使わなければいい話ですが、
Paradisoの全体の雰囲気とかが気に入ってしまいまして…(笑)

私のわがままですが、どうしても使いたい…!と、思ってしまったので、
あれを消して、あまりカスタマイズされていないブログのように、
記事の本文をそのままトップに表示する方法があれば
どこをどういじればいいのか、教えていただけたらと思います。

初心者丸出しな質問ですみません…。
自力で何とかしようと、「ご質問の前に」や、
「好きな画像をサムネイルにするには」を見てはみたのですが、
解決には至らず…。

よろしくお願いします…。

2015/08/30 (Sun) 13:18 | EDIT | REPLY |   
Akira  
To 遥さん

こんにちは。ありがとうございますe-257

ご要望の件、こういうことで合ってますかね (´・ω・`)
これでよろしければ記事末尾にZIPファイルを載せておきます。
今ちょうど修正中ですので、しばらくお待ちくださいね。
見た目は大体これで終了ですが、まだ細かい部分を調整したいもので。

DLされましたらファイルは記事から削除しますのでご一報ください。
コレジャナイ感のときにもお知らせください(笑)

デフォルトからこのタイプへの変更は簡単ですので今回私の方で作成しました。
逆ならごめんなさいしますけれども(笑)

2015/08/30 (Sun) 17:31 | EDIT | REPLY |   
遥  

わぁぁぁ!
ありがとうございます!
そうです!その通りです!

早速DLさせて頂きました!
素早い対応、ありがとうございました(´▽`*)

2015/08/30 (Sun) 19:03 | EDIT | REPLY |   
Akira  
To 遥さん

合ってて良かったです(笑)
お疲れさまでしたe-454

2015/08/30 (Sun) 19:35 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ