TEMTEM★倶楽部

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

07月« 2017年08月 /  12345678910111213141516171819202122232425262728293031»09月
BLOGTOP » CATEGORY … カスタマQ&A

スポンサーサイト

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

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:記事タイトルに『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:サイドメニュー位置(左右)の変更

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:コメントの時間表示

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:記事上にフリースペース作成

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:画像の枠

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。