このカテゴリは 横ならび目次サンプル(2) で表示させ、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
このカテゴリの記事ページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
 

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する →特定のカテゴリの目次ページのカスタマイズ (4)カタログのように飾り枠付きの画像と説明文を添えて表示する
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png スポンサーサイト
携帯用Novelテンプレート 3kaku_s_L.png スポンサーサイト
表紙ページ 3kaku_s_L.png スポンサーサイト
Novel List 3kaku_s_L.png スポンサーサイト
目次ページ 3kaku_s_L.png スポンサーサイト
小説本文(個別記事)ページ 3kaku_s_L.png スポンサーサイト
イラストリスト 3kaku_s_L.png スポンサーサイト
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png スポンサーサイト
その他・共通ページ 3kaku_s_L.png スポンサーサイト
携帯用テンプレートのカスタマイズ 3kaku_s_L.png スポンサーサイト
テンプレート別のカスタマイズ 3kaku_s_L.png スポンサーサイト
サイト内配布テンプレート 3kaku_s_L.png スポンサーサイト
テンプレートの衣替え 3kaku_s_L.png スポンサーサイト
裏技カスタマイズ 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png スポンサーサイト
novel-tempタイプ 3kaku_s_L.png スポンサーサイト
novel-Sタイプ 3kaku_s_L.png スポンサーサイト
novel-Rタイプ 3kaku_s_L.png スポンサーサイト
novel-Gタイプ 3kaku_s_L.png スポンサーサイト
novel-Jタイプ 3kaku_s_L.png スポンサーサイト
novel-Cタイプ 3kaku_s_L.png スポンサーサイト
素材屋風テンプレート 3kaku_s_L.png スポンサーサイト
疑似フレームテンプレート 3kaku_s_L.png スポンサーサイト
novel-PF2タイプ 3kaku_s_L.png スポンサーサイト
夢小説用テンプレート 3kaku_s_L.png スポンサーサイト
イラストリスト付きテンプレート 3kaku_s_L.png スポンサーサイト
携帯用テンプレート 3kaku_s_L.png スポンサーサイト
一般ブログ用テンプレート 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png スポンサーサイト
不具合の修正 3kaku_s_L.png スポンサーサイト
その他お知らせなど 3kaku_s_L.png スポンサーサイト
管理人のおススメ 3kaku_s_L.png スポンサーサイト
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png スポンサーサイト
雪の女王 3kaku_s_L.png スポンサーサイト
銀河鉄道の夜 3kaku_s_L.png スポンサーサイト
坊っちゃん 3kaku_s_L.png スポンサーサイト
幸福の王子(夢小説サンプル)  3kaku_s_L.png スポンサーサイト
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit
   
 

「テンプレートマニュアル」
目次ページ

特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする

 画像のないテンプレートで記事をご覧になる場合は
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する →特定のカテゴリの目次ページのカスタマイズ (4)カタログのように飾り枠付きの画像と説明文を添えて表示する
 
カスタマイズの難易度4 カスタマイズの難易度4

osirase-ani02.gifこの記事でご紹介しているカスタマイズは少々複雑で、初心者の方は手が出し辛いようでしたので、でご紹介している画像表示のためのカスタマイズが、予め施してある、イラストリスト(Illust List)付きテンプレートを作成致しました。詳しくは「イラストリストの説明」イラストリスト付きテンプレート 特定のカテゴリの目次で画像を一覧させる」をご覧ください。





以下は改訂前の記事ですので折りたたんであります。
一応読んでみる方はここをクリックしてください▼

特定のカテゴリの目次ページのカスタマイズ

1)特定のカテゴリの目次に説明などを追加
2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
3)アルバムのように画像を一覧表示する
4)カタログのように飾り枠付きの画像と説明文を添えて表示する
5)【novel-PF タイプ】特定のカテゴリの目次の背景画像を変更する
6)【novel-R タイプ】特定のカテゴリの目次の背景画像を変更する
7)【novel-PF・novel-R タイプ以外のテンプレート】特定のカテゴリの目次の背景画像を変更する



画像のある記事のカテゴリのために、画像をアルバムのように表示させた例 コチラサンプル

カテゴリの目次をアルバムのように画像が一覧できるスタイルにするこのカスタマイズは、画像がメインのサイト様向きに作成された、ある共有テンプレートの作者さまのアイディアのおかげで実現致しました。
作者さまのご厚意で、そのカスタマイズの方法をご紹介させていただく御許しを戴きました。
どりーみー様、ありがとうございます!

これからご紹介するのは拙作テンプレートの特定のカテゴリの目次ページだけをアルバム風をカスタマイズする方法ですが、画像関連のカテゴリの方が、テキスト系のカテゴリより多いサイトさまの場合には、カテゴリページ以外もサムネイル画像が一覧できる、どりーみー様の写真・イラストサイト様向けのテンプレートが超おススメです。 詳しくはコチラコチラ

どりーみー様のテンプレートもそうですが、画像一覧ページにきれいにサムネイル画像をアルバムのように並べるためには、画像の投稿の仕方に一工夫必要です。画像の前に文章があると、一覧に画像が表示されなかったり、されてもバランスよく表示されません。このレイアウトを生かすためにには、画像を記事本文部分の冒頭にアップさせる必要があります。

必ず記事本文部分冒頭に画像をアップしましょう

(但し、カスタマイズ次第では追記部分冒頭でもOKです)


投稿画像のイメージタグに、幅と高さの指定がある場合は削除します。
<img src="http://blog-imgs-xx.fc2.com/xxx/" alt="" border="0" width="〇〇" height="〇〇" />
画像に表示サイズが指定されていると、サムネイル画像の縮小がうまくいかなくなるようです。

画像の幅と高さの指定は 削除 

注意 表示される画像は縮小されていますが、画像の重さは原形サイズと同じです。表示画像のバイト数総計、ネット環境によっては、ページの表示が重くなることもありますので、ご了承ください。

カテゴリの番号の確認


テンプレートのカスタマイズに取り掛かる前に、表示を変更したいカテゴリのカテゴリ番号を確認しておきます。カテゴリ番号は[カテゴリの編集]画面のカテゴリ一覧リストの一番左、# をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。
☆ カスタマイズの前にはコピーをとりましょう!コピーのとり方は こちら  

 カスタマイズ



[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く


PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名 のHTML編集
テンプレート名 のスタイルシート編集         こんふうに上から順番に並んでいます。

1. HTMLのカスタマイズ


最初に、[HTML編集]部分をカスタマイズします。

以下はこのブログの場合では、カテゴリ番号23「画像のためのカテゴリ」の目次ページをカスタマイズする例です。


1-(1) <head>部分のカスタマイズ


HTMLの冒頭、二三行目あたりに<head>というタグがあると思います。そこから</head>までの間のどこでもよいので以下の内容を追加します。

<style type="text/css"><!--
.c { display: none; }
.gazou<%cno> { display: block ; text-align : left ; font-size : 90% ; margin : 1em ; }
.hidden_cat23 { display: none; }
--></style>


注意 クラス名の前のドットを書き落とさないように注意してください!
.c { display: none; }

1-(2) カテゴリエリアのカスタマイズ



次にHTMLをスクロールしていき、<!--category_area-->~<!--/category_area-->の箇所探し、赤字の部分を追加します。

<!--▽作品目次(カテゴリ)ページ▽-->
<!--category_area-->

<h2>~ Index ~</h2>

<div class="entry">

<div class="c gazou23">
<!--topentry--><div id="gazou_box">
<div class="entry_gazou">
<a href="<%topentry_link>" title="<%topentry_discription>"><%topentry_body><a>
</div><!--/entry_gazou-->
<div class="entry_gazou_title"><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title><a></div>
<br>
<div>[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</div>
</div><!--/gazou_box-->
<!--/topentry-->
</div><!--/c gazou23--><br clear="both">


<div class="entry4">
<div class="hidden_cat<%cno>">
<br />
<!--▼タイプ① 縦ならび目次(一話ごとにサブタイトルをつける場合)▼-->
<p><ul style="list-style-type:square;"><!--topentry--><li>
<a id="<%topentry_no>" name="<%topentry_no>" href="<%topentry_link>"><%topentry_title></a> <script type="text/javascript">
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script></li><!--/topentry--></ul>
<br />
</p>
<!--▲タイプ① 縦ならび目次(一話ごとにサブタイトルをつける場合)▲-->
</div>

<!--DL時は上タイプ?縦並び目次仕様ですが、下のタイプに変更することもできます。詳しくは解説記事をごらんください http://noveltemplate.blog26.fc2.com/blog-entry-48.html -->

<!--▼タイプ② 横ならび目次(サブタイトルではなく数字で表示する場合)▼
~ 中 略 ~
<!--▲タイプ② 横ならび目次(サブタイトルではなく数字で表示する場合)▲--> 

<!--▼タイプ③ 一列目次(サブタイトルではなく数字で表示する場合12話以内推奨)▼
~ 中 略 ~
<!--▲タイプ③ 一列目次 (サブタイトルではなく数字で表示する場合20話以内推奨)▲-->

</div>

</div>

<p><ul class="entry_navi">
<li> <!--prevpage--><a href="<%prevpage_url>">  <i>Back</i>  </a><!--/prevpage--></li><li><!--nextpage--><a href="<%nextpage_url>">  <i>Next</i>  </a><!--/nextpage--> </li>
</ul>
</p>
<!--/category_area-->
<!--△作品目次(カテゴリ)ページ△-->



大文字の数字は、目次ページをこの表示にカスタマイズにするカテゴリのカテゴリ番号をいれます。

上は、記事本文の冒頭にアップされた画像を一覧にして並ぺる場合ですが、記事本文ではなく、追記部分の冒頭にアップさせた画像を表示させる場合は、

<%topentry_body><%topentry_more>に変更します


注意 novel-10-gray以外以外のnovel-10タイプのテンプレートでこのカスタマイズをする場合は、以下の記事をご参考に、左カラムの画像を削除してください。コチラ こちらコチラ こちら



2. スタイルシートLのカスタマイズ



次に、[スタイルシートの編集]部分をカスタマイズします。
スタイルシートに以下の内容を追加します。どこでもよいのですが、わかりやすいように、スタイルシートの最後部分に一行空けて追加するとよいでしょう。

注意 クラス名の前のドットを書き落とさないように注意してください!
.entry_gazou a { display : block;}

/* 画像一覧 */
#gazou_box {
width: 140px;
height: 180px;
overflow: hidden;
float : left;
padding:7px;
margin-top: 0px;
margin-left: 5px;
margin-right: 0px;
margin-bottom: 20px;
border: solid 0px #ccc;
text-align :left;
_width: 145px; /* for ie6 */
_height: 180px;border: solid 1px #ccc;
}
.entry_gazou {
width: 130px;
height: 125px;
overflow: hidden;
border-bottom : 1px solid #ccc;
font-size: 12px;
line-height: 140%;
text-align : center;
color: #808080;
_width: 132px; /* for ie6 */
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/NoImage1.gif");
}
.entry_gazou a { display : block;}
.entry_gazou a:link , .entry_gazou a:visited { color: #ffffff; text-decoration : none;}
.entry_gazou a:active , .entry_gazou a:hover { color: #ffffff; text-decoration : none;border : 2px solid #C2A858 ;}
.entry_gazou_title {
font-size: 13px;
font-weight : bold;
width: 130px;
height: 20px;
padding-left: 2px;
padding-bottom: 2px;
overflow: hidden;
float:left;
_width: 132px; /* for ie6 */
}

/*画像*/
.entry_gazou img{
background-color: #fff;
height: 130px;
overflow: hidden;
}




更新 】 をクリックする。



関連記事
スポンサーサイト
Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
携帯用Novelテンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
表紙ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
Novel List 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
目次ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
小説本文(個別記事)ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
イラストリスト 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
その他・共通ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
携帯用テンプレートのカスタマイズ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
テンプレート別のカスタマイズ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
サイト内配布テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
テンプレートの衣替え 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
裏技カスタマイズ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
novel-tempタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
novel-Sタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
novel-Rタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
novel-Gタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
novel-Jタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
novel-Cタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
素材屋風テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
疑似フレームテンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
novel-PF2タイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
夢小説用テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
イラストリスト付きテンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
携帯用テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
一般ブログ用テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
不具合の修正 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
その他お知らせなど 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
管理人のおススメ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
雪の女王 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
銀河鉄道の夜 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
坊っちゃん 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
幸福の王子(夢小説サンプル)  3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
   

~ Comment ~

サムネイル画像について

いつもお世話になっています。
今回はイラストページの目次のカスタマイズに挑戦してみました。
無事にイラスト画像を並べることが出来たのですが、サムネイル画像で表示するには投稿の段階でサムネイル画像も同時に作成しておかなければならないんでしょうか?それとも画像の縮小(画像サイズの指定)をこのカスタマイズでしてもらえるんでしょうか?今はイラストの左側一部が表示されている状態ですので、教えていただけたらと思うのですが。よろしくお願いします。

Re: サムネイル画像について

コメントありがとうございます。

>サムネイル画像で表示するには投稿の段階でサムネイル画像も同時に作成しておかなければならないんでしょうか?

いいえ、必要ありません。

>それとも画像の縮小(画像サイズの指定)をこのカスタマイズでしてもらえるんでしょうか?

はい、当該ページ(ミスティさまの場合イラストの目次ページ)の画像は、自動的に縮小表示されるはずなのです。
ブログを拝見させていただきましたが、HTML部分は誤りがないようですから、問題はスタイルシート部分のカスタマイズにあるのではないかと思います。
画像の左隅部分だけが表示されているということは、画像の縮小指定が抜けているのではないかと思われます。
スタイルシートの記述内容を再度ご確認ください。
特に表示される画像のサイズを指定した以下の記述に誤りがないかご確認ください。


/*画像*/
.entry_gazou img{
background-color: #fff;
height: 130px;
overflow: hidden;
}

管理人のみ閲覧できます

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

スタイルシートのカスタマイズについて

早速のお返事ありがとうございます。
実は自分で打ち込むと間違うのではないかと思い、最近は記事をコピペさせていただいてます。
なのでスタイルシートには上記の記事をそのままコピペしてスタイルシートの一番下に貼りつけさせていただきました。
画像サイズの記述にも間違いがないようです。
あと、考えられる問題はなんでしょうか?
いつもお手数をおかけして申し訳ありませんがよろしくお願いいたします。

Re: スタイルシートのカスタマイズについて


実は、つい最近管理人自身が同じ様な自体に陥り、
ようようその重大性?を思い知った事象なのですが、

スタイルシートの記述の余白部分に、
全角のスペースが紛れ込むと、設定が反映されなくなるようです。


文字列の前後に入れたスペースが、半角ではなく、全角のスペースだったりすると、記載内容に間違いがなくとも、それらが全て無効になってしまうようです。

管理人自身も以前はその重大性に気づかずそれにさほど留意せずにスタイルシートを書いておりましたし、気づいた今も、全角スペースと半角スペースを視覚的に区別するのは難しいため、チェックもままなりません。

ですから、本当に申しわけない事ですが、コピペ元の管理人の記事のソース自体に余計な全角スペースが紛れ込んでいた…という可能性も大であります。

試しに、反映されていない、画像部分のスタイルシートを、コメントも含めて半角も全角もスペースなしに記述し直してお験しいただけますか?(改行はOKです。)

スタイルシートのカスタマイズについて2

スペースなしを試してみたり、上記の記事を入力し直してみたりしたのですが、全角スペースの個所は見つかりませんでした。それが原因ではないような気がします。
ただ、
/*画像*/
.entry_gazou img{
の個所のスペース(uとiの間)をなくすと、画像の映る範囲がなおさら少なくなってしまいました。
反映されていない、画像部分のスタイルシートというのはこの記事の部分のことですか?それともスタイルシート全体の中にあるのですか?
お手数をおかけしてすみません。

応急処置ができました

本式ではないのですが(歪んでいる画像もあるので)
下記のようにwidh:130px;tを追加することでサムネイルのようになりました。
とりあえずはこれでいこうと思います。
正式なやり方があったらまた教えて下さい。
/*画像*/
.entry_gazou img{
background-color:#fff;
widh:130px;t
height:130px;
overflow:hidden;
}
ありがとうございました。

横からコメント失礼します。

>全角スペースと半角スペースを視覚的に区別するのは難しいため、チェックもままなりません。

これなんですが、エディタによっては、全角スペースに印がついて、容易に判別出来るものがあるんです。
ブログの管理画面、データのバックアップのページで紹介されている「サクラエディタ」は、全角スペースに薄い色の四角が表示されるので、とても判り易いです。
きっと他のエディタでも、そういう機能のあるものがあるんじゃないかなと思います。(私が使っているのがサクラエディタなので、他はちょっとわかりませんが……。WindowsMobile用なら、「jot」や「PocketHpte」も全角半角ともにスペースが色分けされてますよv)

私も、メモ帳時代は、全角スペースに良く泣かされました。最後は検索機能使って、全角スペースを抽出してみたり。苦労しました……orz
なので、サクラエディタ、オススメですv

To : ミスティ様

お返事果てしなく遅くなり御許しください<m(__)m>

そして、自力でのご解決、お見事です。

ご紹介したとおりにカスタマイズなさった上で不具合があったとなると、
管理人のスキルではその原因も対処法も思いつかなかったでしょう。
力不足で、申しわけありません。

但し、画像を一覧表示させるカスタマイズは、皆様ご苦労なさっているご様子ですので、
いずれ、テンプレートのタイプ別に、画像表示用、イラスト展示用のページを特設したHTMLを公開する予定でおります。
ミスティ様は応急処置とはもうせ、きれいに表示なさっておられますので、
本格的?な解決は、できれば、それを待っていただけたらと存じます。

To:GreenBeetle様 



お返事、かくも遅くなり、ご無礼平に平に御許しください。
<m(__)m><m(__)m><m(__)m>

耳寄りな情報、ありがとうございました!
し、知らなかった!
サクラエディタ、使ってみます!
でも、全角ばっかりだったらどうしましょう
全テンプレートの再確認が必要になるかも…(-_-;)

カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。

~ Trackback ~

トラックバックURL


この記事にトラックバックする(FC2ブログユーザー)この記事にトラックバックする(FC2ブログユーザー)

イラストとNovelListのカスタマイズをしました

イラストとNovellistのカスタマイズをしました イラストは文字表示からサムネイルの画像表示に変えました。 NovelListは...
  ↑記事冒頭へ  
←特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する    →特定のカテゴリの目次ページのカスタマイズ (4)カタログのように飾り枠付きの画像と説明文を添えて表示する

名前変換フォーム

Script by
ブログで夢小説!ユメミル?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。