TEMTEM★倶楽部

FC2・テンプレート制作用ブログ♪ 管理不届きで申し訳ありません~~∑(>д<)

08月« 2007年08月 /  12345678910111213141516171819202122232425262728293031»09月
BLOGTOP » ARCHIVE … 2007年08月

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

商用について

▼商用サイトが管理するブログでの使用は、お断りさせて頂きます。

* 企業・店舗・個人販売などのブログ。

* 販売を目的として作成されたブログ。

* 注文仕様のブログ。

* 商品の紹介(ハンドメイド作品含む)を載せたブログ。

* 商品の値段が記載されたブログ。

* 金銭の授受が絡むブログ。




スポンサーサイト

公序良俗に反するブログ

▼公序良俗に反するブログでのテンプレート使用は、絶対禁止です。

* アダルト系ブログ。
  特に、実写画像の載っているブログはご法度。
* 犯罪関係記事ブログ。
  特に、犯罪幇助ブログはご法度。
* 宗教関係のブログ。
  特に、宗教への勧誘はご法度。
* 暴力系関係のブログ。
* 営利目的サイトのブログ。

同人系・二次創作系・オリジナル創作系・BL系について

▼同人系・二次創作系・BL系の小説やイラストを扱ってみえるブログでの、当テンプレート使用については以下の通りです。
『キス以上』を問題定義とします

【パソコン用テンプレートの場合】
** 小説ブログ **********
小説のみを扱っているブログは、使用可能(一部制限あり)

『文字』は、“その人が読まないといけない”のですから、その内容が、BL小説でも、官能小説でも、『読むという行為を行った本人の責任』となります。

但し、TOPページの装飾にイラストを挿入したり、お友達からイラストを貰ってUPしたりする場合は、イラストブログ同様の方法を守って頂きます。

** イラストブログ **********
制限付きで使用可能(一部制限あり)

杏の考えとしては、『見る人の意思が介在するかどうか』だと思ってます。
イラストの場合、“本人の意思(見たいor見たくない)が入らないTOPページ”にそれを持ってくるのは『×』で、“注意書きをしたその先に入って見る画像なら、責任は、『注意書きを読んでまでそこに入り、それを見た人』にある”ので『○』となります。
例えば、本文記事に注意書きをし、追記記事にH画像を入れるのはOKってことです。

但し、今までの記事ではそのように作成してなく、今更変更できないって方は、テンプレートを使用しないでください。

『ブロとも』対象記事のみにイラストを置く場合など、ブログ管理者が閲覧を管理できる場合は、問題なく使用可能です。


【モバイル用テンプレートの場合】
** 小説ブログ **********
小説のみを扱っているブログは、使用可能(一部制限あり)

「パソコン用テンプレートの場合」の「小説ブログ」の規定と同様です。

** イラストブログ **********
使用不可

杏のモバイルテンプレートは、TOPページの記事タイトルクリックで、記事本文と画像が一緒に出るように作成されてます。
これだと、追記記事もイラストごと表示されるので、ワンクッション(注意書き)がないことになり、ご使用できません。


《一部制限あり》
写真素材をお借りして作成してあるテンプレートは、素材サイト様の規約に準じますので、お使い頂けない場合もあります。
素材サイト様にて、規約をご確認ください。

△上記は、あくまでも、杏的見解です。

アフィリエイトブログでのテンプレート使用

▼アフィリエイト・ブログでのテンプレート使用は、以下の通りです。

* アフィリエイトブログ(アフィリエイトを載せているブログ)は、DLの際に一言コメントを残して下さる事を条件に使用可能。
  但し、以下の場合は、禁止します。
   ・アフィリエイトだけのブログ。
   ・アダルト関係のアフィリエイトを載せているブログ。
   ・アフィリエイトの情報サイトとして運営しているブログ。
   ・ブログジャンルにおいて『アフィリエイト』に設定しているブログ。

Q&A:【モバイル版】記事と画像を一度に表示

Q10.【モバイル版】記事タイトルクリックで、記事と画像を一度に表示する方法…

A.モバイルテンプレートでは、記事タイトルを押すと、記事詳細ページでは、記事のみ表示され、画像は[画像]と表示され、更にその[画像]を押すと、次ページでは、画像のみが表示されます。
でも、カメラマークを押すと、記事と画像が一緒に出ますよね。

今回のカスタマイズは、カメラマークを押さなくても、記事タイトルクリックだけで、記事と画像を同時に出す方法です。

「HTML編集」内の以下の2箇所を新タグに変更してください。

<!--エントリー表示開始-->
<!--topentry--><br>
<img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/03-04.gif"><a href="<%topentry_link><%tail_url>"><%topentry_title></a>
<a href="<%topentry_link>&photo=true<%tail_url>"><img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/kamera.gif" border="0"></a><br>

↓↓↓↓

<新>
<!--エントリー表示開始-->
<!--topentry--><br>
<img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/03-04.gif"><a href="<%topentry_link>&photo=true<%tail_url>"><%topentry_title></a><br>

     + + + + + + + +

<!--個別エントリー表示開始-->
<!--mobile_other_area--><br>
<!--/mobile_other_area-->
<!--mobile_phs_area--><img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/03-04.gif">
<!--/mobile_phs_area-->
<img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/03-04.gif"><a href="<%topentry_link><%tail_url>"><%topentry_title></a>
<a href="<%topentry_link>&photo=true<%tail_url>"><img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/kamera.gif" border="0">
</a><br>

↓↓↓↓

<新>
<!--個別エントリー表示開始-->
<!--mobile_other_area--><br>
<!--/mobile_other_area-->
<!--mobile_phs_area--><img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/03-04.gif">
<!--/mobile_phs_area-->
<img src="http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/03-04.gif"><a href="<%topentry_link>&photo=true <%tail_url>"><%topentry_title>
</a><br>

変更して、正確に機能しなかったり、他に影響があるようでしたら、教えてください。

Q&A:「続きを読む」の誤文字表示

Q6.「続きを読む」の文字表示が『 」の続きを読む">続きを読む » 』と表示されてしまうのは?

A.記事タイトルに、絵文字を使うとそうなります。

「続きを読む」の上にマウスを持っていくと、【「記事タイトル名」の続きを読む】と出ます。
タグで自動にタイトル名を読み込んでいるのだけど、そのタイトルに絵文字が使われていると、絵文字のimgタグも読み込むので、タグがおかしくなるのだと思います(専門家じゃないので断定はできません)。

解決方法は、
①記事タイトルに絵文字を挿入しない。
②「続きを読む」機能を使わない。
③「続きを読む」のマウス説明をなくす。
の3通りです。

③の場合は、「HTMLの編集」内、
<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->
の線部分を消してください。

タイトルに絵文字を使われる場合、この「続きを読む」タグだけではなく、その他にもタイトル名を自動で読み込むタグはありますので、それらに影響する可能性はない、とは言えないと思います。

Q&A:記事タイトルに『NEWアイコン』の設置

Q9.記事タイトルに、NEWアイコンをつける方法…

A.設置は簡単ですので、お試し下さい。
但し、IEしか反映されません。

〔1〕NEWアイコンをアップロードします。
どこかの素材屋さんで借りてきた場合は、貴方のブログでファイルアップします。
杏作成のアイコンを使う場合は、不要です(NEWアイコン素材参照)。

〔2〕「HTML編集」内の〔head~/head〕の中に、
<!--記事タイトルのNEWアイコン-->
<script type="text/javascript"><!--
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="NEWアイコンのURL">')}
}
--></script>
赤太文字を入れてください。
下線部分は、NEWアイコンのURLを入れてください。
アイコンURLを知るには、UPした画像の上で右クリック→プロパティ→アドレス:(URL)をコピーします。

〔3〕同じく「HTML編集」内の
<!--topentry-->
<div class="section" id="a<%topentry_no>">

<div class="entry-header"><h2><%topentry_title>
&nbsp;<script type="text/javascript">
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
</script>

</h2></div>
の青太文字を追加してください。
上の場合は、記事タイトルの後に表示されます。
記事タイトル前に表示したい場合は、
<%topentry_title>
の前に貼り付けてください。

Q&A:「続きを読む」のリンク先と改行

Q5-1.『続きを読む』(文字が違うテンプレもあり)を押すと、続きの記事ではなく、記事のTOPが表示されるのは?

Q5-2.本文と続き文が改行されずに、くっついて表示されるのは?


A.杏のミスです。

以下の場所に追加タグ(赤文字)を入れてください。
(このまま、全部をコピペでもOK~)

「HTML編集」内、
<div class="entry-body"><%topentry_body>

<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>#more"
title="「<%topentry_title>」の続きを読む">続きを読む &raquo;</a></p>
<!--/more_link-->

<!--more--><br /><a name="more" id="more"></a><br />
<%topentry_more>
<!--/more-->
</div>

<!-- 記事フッター部分 -->
<ul class="entry-footer">


【追記】
現在のテンプレートは、すべて修正済み、だと思います…。
Q5-2に関しての修正方法は、ここに書いてあるのとは違う方法で直してあります。

Q&A:ブラウザ「Opera」の改行

Q4.ブラウザ「Opera」で改行機能が反映されないのは?

A.答えの前に…言い訳です

ブラウザ「Opera」ですが。
杏のテンプレートでは、改行がされません。
改行反映されるように調べたのですが、それをしちゃうと、なんか、全体文字が細くなっちゃうんです…(T.T)
(↑杏のパソコンだけかも知れませんが…)
なんかそれが杏的には、許せなくて……f(^ー^;

なので、ブラウザ「Opera」の改行問題は、放棄しました。
これから作るテンプレートにも、対処は致しません。
ごめんなさいm(__)m

でも、皆様のブログではOperaの方がお見えかも知れませんので、改善方法だけ書いておきますね。

「スタイルシートの編集」の上の方にある、
*:before,
*:after {
content : "";
}
を消すと、改行が反映されるそうです。

Q&A:サイドメニュー位置(左右)の変更

Q8.右メニューを左側にする方法…

A.メニューの位置って、人それぞれでお好みがあるみたいですね。
杏は、基本テンプレが気に入れば、どちらでも良いのですが、ポリシーがある方もお見えみたいですので、変更方法を書いておきますね。
下記の場所を変更してください。

各記事にて、『変更不可』と書かれているテンプレートは、変更できませんので、ご注意ください。

「スタイルシート編集」内、
/* 記事表示部分ブロック */
div#primary-column {
float : right; →left
width : 500px;
}

/* メニュー部分ブロック */
div#secondary-column {
float : left; →right
width : 260px;
}

↓こういうテンプレートもあります。
記述的に正確ではないので、作り直したいのですが、いつになることやら…。
div#primary-column {
float : left; →right
width : 500px;
padding : 0px 20px 15px 30px; ←赤数字を反対に(左右の空白)
voice-family : ""}"";
voice-family : inherit;
width : 500px;
}

div#secondary-column {
float : right; →left
width : 260px;
padding : 0px 20px 15px 10px; ←赤数字を反対に(左右の空白)
}

paddingの書き方がそれぞれのテンプレで違ってるので、ご注意ください。
(padding:10px←上部 15px←右部 20px←下部 30px←左部;)

Q&A:ブログ名&説明文の位置&幅の変更

Q7.ブログ名&説明文の位置&幅の変更方法…

A.「スタイルシート編集」内の下記の場所をそれぞれ変更してください。

★ブログ名のカスタマ★
/* ブログタイトル文字 */
div#branding h1 {
font-family : "Comis Sans MS",Osaka;
font-weight : bold;
font-size : 25px;
padding : 100px(←上余白) 20px(←右余白) 10px(←下余白) 20px(←左余白);
text-align : center;
}

↓こういうテンプレートも。
/* タイトル */
div#branding h1 {
font-family : "HGP創英角ポップ体",Osaka;
font-weight : normal;
padding-top : 120px; ←上部余白
padding-left : 35px; ←左側余白
padding-right : 400px; ←右側余白

font-size : 25px;
text-align : left;
}


★ブログ説明文のカスタマ★
/* ブログ説明文 */
div#branding p {
font-weight : normal;
padding : 0px(←上余白) 30px(←右余白) 5px(←下余白) 30px(←左余白);
font-size : 12px;
text-align : center;
color : #996666;
}

↓こういうテンプレートも。
/* サイトの説明 */
div#branding p {
font-family : "HGP創英角ポップ体",Osaka;
font-weight : normal;
color : #c2d0de;
padding-left : 40px; ←左側余白
padding-right : 400px; ←右側余白
padding-top : 5px; ← ブログ名との間

padding-bottom : 5px;
font-size : 11px;
text-align : left;
}

〔注意〕
テンプレートに寄って、書き方が違いますが、良く見れば判ると思います。

Q&A:罫線ありテンプレの画像貼付

Q2.罫線のあるテンプレートでの、画像貼り付けによる文字の罫線ズレの解決方法…

A.以下の2通りをお試しください。

<1> 画像の縦幅を罫線の倍数数値で作成する。
  * 罫線幅は『20px』です。
  * 縦幅を「100px」「120px」「140px」「160px」…… で作成。
   但し、画像の多用に寄っては少しずつズレがでる可能性もあります。
   (試してないので判りません)

<2> 画像に回り込みタグ『align="☆☆"』を入れる。
  * ☆☆には、記事上の画像の位置:「left(左)」or 「right(右)」。
  * 但し、回り込みですので、画像の横に文字が入ります↓↓。
見本







方法は、「記事を書く」画面で、通常の方法で記事内に画像タグを取り込み、上記タグ(赤文字)を入れてください。

<a href="http://貴方のブログ画像URL.jpg" target="_blank"><img src="http://貴方のブログ画像URL.jpg" alt="画像説明文" border="0" align="left" /></a>

画像の横に文字が入るのがイヤなら、書き込み時に、画像の縦幅分(行幅が20pxなので、画像が200pxなら、200÷20=10で、10行くらい)ほど改行すると画像横から文字が外れるはずです(大体の目安です)。

パソコン機能の『単語登録』などに「align="left"」を入れて、簡単な「読み」(私は、「あ」を押すだけ)で出るように登録しておけば、いちいち全部のタグを入れなくても良いから簡単ですヨ。

Q&A:罫線ありテンプレの絵文字使用

Q1.罫線のあるテンプレートでの、絵文字使用の罫線ズレの解決方法…

A.下記のようにカスタマイズしてください。
「スタイルシート編集」内、
.emoji{
border : 0px;
margin : ①px 0px ②px 0px;
vertical-align : middle;
}

まずは、絵文字タグを上記のように変更してください。

罫線幅は「20px」で、(Docomoで考えると)絵文字の縦幅は12pxなので、『絵文字の幅+①+②=罫線幅』の式に当てはめると、「12+4+4=20」で、①=4・②=4となります。
もちろん、①=3・②=5でも、①=1・②=7でも、①=5・②=3でも、OKです。

各社の絵文字の大きさは以下の通りです。
貴方が主に使用する絵文字の会社のmargin数値を入れてください。
☆Docomo―→[12×12px]→margin : 4px 0px 4px 0px;
☆ソフトバンク-→[15×15px]→margin : 2px 0px 3px 0px;
☆au―――→[14×15px]→margin : 2px 0px 3px 0px;
(数値は任意です。長文でのテストはしていませんので、ズレが出てくる可能性もあります。貴方のブログにあった位置になるように変えてください)

但し、絵文字は、各社仕様の違いで大きさが統一しません。
兼用すると、ズレます(ソフトバンクとauは同じですが、Docomoは特に)。

それ以外の解決法は杏の知識では判りませんので、、
<1>罫線タグを削除する(下記参照)。
<2>ずれるのは我慢する。
<3>他のテンプレートに変更する。

※罫線の消し方
赤太文字タグを削除。
/* 記事本体部分 */
div.entry-body {
padding : 30px 10px 13px 10px;
margin : 0px 0px 0px 0px;
line-height : 20px;
font-size : 12px;
text-align : left;
background-color : #ffffff;
background-image : url(http://blog-imgs-21.fc2.com/t/e/m/temtemclub/02-1.gif) ;
}

Q&A:コメントの時間表示

Q6.コメントにも投稿時間が出るようにする方法…

A.下記の方法で、ソースを追加してください。

【方法】
「HTMLの編集」内、
<h4 class="comment-header">TITLE:<%comment_title></h4>
<div class="comment-body">
<%comment_body>
</div>
<ul class="comment-footer">
<li>|&nbsp;<%comment_year>-<%comment_month>-<%comment_day>&nbsp;|</li>
<li>[ <%comment_hour>:<%comment_minute> ]</li>
<li><%comment_mail+name> #<%comment_trip></li>
<li><%comment_url+str></li>
<li>[&nbsp;<a href="<%comment_edit_link>" title="コメントの編集">編集</a>&nbsp;]</li>
</ul>
の赤文字ソースを追加してください。

コメントフッターにあるそれぞれのパート(月日・名前・編集ボタンなど)は、ひとつひとつ「<li>~</li>」で囲まれています。
場所は、自分のお好きな位置へどうぞ(上のは、月日の次に入ります)。

Q&A:ブログ説明文に改行

Q5.ブログ説明文を改行する方法…

A.直接「HTMLの編集」の中にブログ説明文を書き込めばできます。

【方法】

「HTMLの編集」内、
<div id="branding"><!-- branding -->
<a name="pagetop"></a>
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
の太文字の場所に、
<div id="branding"><!-- branding -->
<a name="pagetop"></a>
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"> 一行目<br />二行目 </div>
</div><!-- /branding -->
の赤文字のように改行タグ「 <br /> 」を挟んで文字を入れると説明文が改行できます。

Q&A:ブログタイトル名を画像表示

Q4.ブログタイトル名を画像で表示する方法…

A.①まずは、ご自分で用意(作成)したブログタイトル画像を、ファイルアップロードして、画像URLをコピーします。
※コピーの仕方は、ファイルアップロード表示された画像上で右クリックして、プロパティを選択し、アドレス(URL)を「http://~gif」までを反転させ、右クリックでコピーします。

②「HTMLの編集」内の
<div id="branding"><!-- branding -->
<a name="pagetop"></a>
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
の赤文字部分に
<img src="①でコピーした画像URLを貼り付ける">
と挿入してください(↑コピペOK)

以上でOKです。

但し、画像の大きさに寄っては、その下のブログ説明文も下がるので、調整が必要です。

Q&A:ブログタイトルにフラッシュ画像

Q3.ブログタイトルをフラッシュ画像にする方法…

A.画像1枚使用の場合は、普通のHP用の方法で表示されると思いますが、数枚使用の場合は、下記の方法で表示されます。
(と思います…自信はありませ~ん(>_<))

インフレームを使ってください。
下記方法では、ブログ説明文が、フラッシュ画像の下に出ます。

①フラッシュ画像など必要ファイルを「アップロード」します。

②「HTML編集」内、
<div id="branding"><!-- branding -->
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
の青文字部分を消して、
「 <div style="text-align:center;"> <IFRAME src="貴方がUPしたファイル名" border="0px" frameborder="0" width="横幅" height="縦幅" scrolling="NO" name="Flash"> </IFRAME> </div> 」
と入れてください(コピペ)。
青文字は、拡張子「swf」のファイルです。「http://~」から入れてください。
緑文字の、横幅&縦幅は、画像幅数に変えてください。
「style="text-align:center」は、ブログでのフラッシュの位置です。
         (↑これは中央)

③「スタイルシート編集」内、
div#branding {
font-family :"HGP創英角ポップ体",Osaka;
width : 830px;
height : 160px;
float : right;
margin-top : 10px;
padding-top : 10px;
text-align : left;
background-image : url(http://blog-imgs-12.fc2.com/z/u/t/zuttoissyodayo2/04-q09.gif) ;
background-repeat : no-repeat;
background-position : center;

font-weight : normal;
}
の線部分を消してください。

【お願い】
杏が判るのは、フラッシュのアップ方法のみです。
フラッシュ内部のことは解りませんので、フラッシュ素材配布サイトさんで質問してください。
後、フラッシュ素材を使った場合は、ブログにフラッシュ素材配布サイトさんのリンク表示を忘れないでください(詳しいことは、素材サイトさんの利用規約などをご覧ください)。

Q&A:ブログパーツの中央表示

Q3.ブログペットを取り付けましたが、プラグイン設定で変更しても中央表示にならないのは?

A.ブログペット・HOMEサイトで説明してある方法でプラグインに設置すると、「設定の変更」で中央に変更しても反映されません(なぜかは判りません…)。

中央にしたい場合は、「HTMLの変更」の中に入っているソースを全部消さずに、
<!-- &freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>
の赤文字の部分だけを消して、ブログペットソースを入れてください。
緑文字部分は消しても消さなくても構いません。

その上で、「設定の変更」で「中央」に変更してください。

Q&A:記事上にフリースペース作成

Q2.記事の上にフリースペースを作る方法…

A.方法は三通りあります。
もっとあるかも知れませんが、杏が現在判るのはこれだけです(^^ゞ

<1>1番簡単なのは、日付を未来に設定して、記事を書く方法です。
これなら、常に1番上に持ってくることができ、フリースペースとして利用できます。
但し、日付が表示されちゃうのが、難点。

<2>HTML内にソースを書く方法です。
「HTML編集」内の場所に、
<div id="primary-column" class="column"><!-- primary-column -->

<!--index_area-->
<div align="center">
/*←これは文字が中央寄り。左がいいなら、「center」→「left」へ変更*/
<!--TOPフリーエリア-->
<div class="free_area">
お好きな文章をここへ書いてください。<br />
/*←改行は文末に「<br />」と入れてください。*/
<strong>太字にしたい場合はこの中に入れてください</strong>
</div>
<!--/TOPフリーエリア-->
</div>
<!--/index_area-->
と入れてください。

「スタイルシート編集」内にどこでも良いので、
.free_area {
width : 100%;
text-align: left;
font-size: 13px;
padding: 10px 10px;
margin: 15px 15px;
line-height: 130%;
border : 2px dotted #c8b693; /*エリアの枠。「dotted(点線)」or「solid(線)」。不用なら削除*/
}
と入れてください。

フリースペースの内容変更は、常に「HTML編集」内で変えることになります。
TOPページのみに表示されます。
全ページに表示させたい時は、最初「<!--index_area-->」と最後「<!--/index_area-->」のみを消してください。

テンプレートに寄っては、枠の上下位置など変更する必要がありますので、ご注意ください。

<3>プラグイン「3」を使って、HTMLを変える方法です。
ちょっと知識はいりますが、プラグイン「3」HTMLを記事上に編集します。
プラグインに、『フリーエリア』を追加します。
これだと内容の変更は、プラグインの設定の中でできます。

でも、その他のカテゴリーは、プラグイン「3」に持って来れないので、サイドメニューには「3」は使えない不便もありますが、「1」と「2」があるので、さほど問題はないと思います。

ちなみに、杏のテンプレートは、すべてこのタイプです。

Q&A:サイドメニューが落ちる(カラム落ち)

Q2.サイドメニューが下に落ちて、レイアウトが崩れるのは?

A.これに関してはあまり詳しくはないのですが、2通りの原因があります。

〔1〕1番判りやすい原因は、アップ画像の大きさ
記事中、若しくは、メニューエリアに、横幅以上の画像を入れてしまうと、テンプレートに設定した全体幅(記事幅+メニュー幅)を超えてしまうので、レイアウトが崩れてしまうのです。

直すには、“画像の大きさを変更し、再UP”か、“サムネイルを活用”する。

レイアウトが崩れるウンヌン…の前に、大きな画像は、読み込み時間がかかるので、訪れてくれている人を待たせてしまい、読者の足を遠のかせてしまう原因になるのでは、と思います。

〔2〕2番目は、プラグインが原因の時
サイドメニュー欄に、いろいろ機能(プラグインDLなど)を付け足すと思いますが、その中のどれかが原因の場合もあります。

直すには、“原因となるプラグイン機能を削除”することです。
どれが原因かを見つけるには、「プラグインの設定」画面でプラグインカテゴリーの「設定の変更」で、「表示の設定」を“非表示”にします。
必ず、ひとつを非表示にして、画面を確認して、と試してくださいね。
“削除”ではありませんので、お間違いのないように。

Q&A:カレンダーが表示されない

Q1-1.テンプレートにカレンダーが表示されないのは?

Q1-2.前のテンプレートでは表示されてたのに、テンプレートを変えたらカレンダーが表示されないのは?



A.Q1-1の場合……
ブログの開始当初は、プラグインにはカレンダーが設定されていません。
「環境設定」→「プラグインの設定」→「プラグインの追加」でカレンダーを選び、設定してください。

A.Q1-2の場合……
テンプレートには、「プラグイン対応」と「プラグイン非対応」の二通りのタイプがあります。
プラグイン非対応テンプレートは、HTMLにカレンダーが組み込まれているので、プラグインにカレンダーが設定されていなくてもブログには、カレンダーが表示されます。
つまり、プラグイン非対応テンプレートから、プラグイン対応テンプレートに変えた場合に、プラグインのカレンダー設定が必要になるのです。
上記の方法で、設定してください。

以上の2つを試してもカレンダーが表示されない場合は、テンプレート作成者にその旨を明記して、お尋ねください。

ちなみに杏のテンプレートは、すべてプラグイン対応です。

Q&A:画像の枠

Q1.記事内の画像の枠を写真風にする方法…

A.以下の方法で試してください。
(ブログ・ヘルプのカスタマイズ・マニュアルにも載ってます)

【方法】
「スタイルシート編集」内、
.entry-body img {
padding : 3px;
border : 1px solid /*dotted*/ #c8b693;
background-color : #ffffff;
}
のソースをどこでも良いので、入れてください。

「entry-body」は記事内を表しますので、記事内の画像にしか反映されません。
「padding」は、余白の太さ、
「background-color」は、余白の色、
「border」は、外枠の太さ(1px)と枠模様と枠の色、
を指定します。
“solid”は線、“dotted”は点線です。

これだけだと、絵文字にも反映されてしまうので、以下の赤太文字タグを追記してください。
打ち消し線部分は削除。

/* 絵文字 */
.emoji{
border : 0px;
vertical-align : middle;
margin : 2px 0px 0px 0px;
background : none !important;
padding : 0px !important;
border : none !important;

}
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。