*TENTEN★くらぶ*

ブログ用テンプレート作成サイト♪

12月≪ 03月/12345678910111213141516171819202122232425262728293031≫01月

スポンサーサイト

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

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

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

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

<1> 画像の縦幅を罫線の倍数数値で作成する。
  * 罫線幅は『20px』です。

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







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

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

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

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

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

Q11-1.罫線のあるテンプレートでの、絵文字使用の罫線ズレの解決方法は?

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>ずれるのは我慢する。
で、お使いくださるか、他のテンプレートに変更してください。

Q&A:mobile版:記事と画像を一度に表示させる方法

Q18.mobile版テンプレートで、タイトルをクリックで、記事と画像を一度に表示させられませんか?

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

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

「HTMLの編集」内の以下の2箇所を新タグに変更してください。
(これは、「ayu-mobile-03」でのタグですが、他のテンプレートも変わりないと思います)

<!--エントリー表示開始-->
<!--topentry--><br>
<img src="http://blog-imgs-17.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-17.fc2.com/z/u/t/zuttoissyodayo2/kamera.gif" border="0"></a><br>

↓↓↓↓

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

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

カレンダー

12 | 2017/03 | 01
- - - 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 31 -

最近の記事&コメント

カテゴリー
プロフィール

杏
Author:杏
(前HN:鮎)

パソコンは少々囓った程度の
知識しか持っていませんので
期待なさらずに…。

テンプレの感想・ご意見が
あれば是非聞かせてください。

御訪問者様人数


現在の閲覧者数:

アーカイブ

リンク
ブログ内検索

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