ブログテンプレ『white blog』『black blog』アイコン変更方法
そしてご検討中のみなさん!ありがとうございます!!
この記事では、テンプレート名「12_whiteblog」「13_blackblog」の
簡単カスタマイズ(1)「アイコン変更」方法についてご説明します。
投稿日時部分にはそれぞれ、マグカップとカメラアイコンを使用しています。
このアイコンをお好きな画像に変更していただけます。


まずは画像をご用意ください。
切り抜きタイプにしたい場合は透過画像を、
サイズは横35~40ピクセル×縦35ピクセルがベストです。
用意できたら、ファイルをアップロードしてください。
変更はHTML編集になります。
テンプレートのHTMLには<!-- コメント -->がついているのですが、
<!-- メインコンテンツ/エントリーここから -->
<!-- メインコンテンツ/エントリーここまで -->
の途中にある、
<!-- ◎投稿日時部分のアイコン変更はココ。詳しくはhttp://uraraka01.blog27.fc2.com/にて◎ -->
の箇所を探してください。
<img src="http://blog-imgs-46.fc2.com/u/r/a/uraraka01/12_cup.png" alt="" width="40" height="35" />
↑赤字の部分をアップロードした画像のパス(URL)に替えます。
必要であれば幅(width)を画像に合わせて変更します。
正方形であれば35pxにしてみてください。
おすすめは、プロフィール画像です♪
その場合は、
<img src="<%image>" alt="<%author_name>" width="35" height="35" />
としてみてくださいね!
ツイッターもしている方なら、ツイッター用のプロフィール画像にしてはいかがでしょう!
わからない点がございましたら、
コメントでもメールフォームからでも、
お気軽にお問い合わせくださいね~
- 関連記事
-
- ブログテンプレ『white blog』『black blog』アクセントカラー変更方法
- ブログテンプレ『white blog』『black blog』アイコン変更方法
- ブログテンプレート『iPod black』『iPod white』CDジャケット表示方法
CM TB の文字・場所を変えたい
大変 気に入ってます ありがとうございます。
CM TB のところを コメント ラックバック と 文字を変えたいのですが・・
それと 記事の 一番 下 に 置くことは出来ますか?
みんな コメントを書く 場所を 見つけにくい見たいです。
よろしければ 変え方を 教えてください。
よろしくお願いします。
Re: CM TB の文字・場所を変えたい
コメントありがとうございます!
お問い合わせの件ですが、テンプレートのHTML編集になります。
現在、CM、TBの欄は以下のように記述されています。
<!-- メインコンテンツ/エントリーここから -->
の下を辿っていき、以下の部分
<div class="entry_info">
<!--allow_comment--><a href="<%topentry_link>#cm" title="">CM : <%topentry_comment_num></a><!--/allow_comment--><!--deny_comment--><!--/deny_comment--><br /><!--allow_tb--><a href="<%topentry_link>#tb" title="">TB : <%topentry_tb_num></a><!--/allow_tb--><!--deny_tb--><!--/deny_tb-->
</div>
まず、CMをコメント、TBをトラックバックなどと表示する場合は、
赤字の部分を変更してください。
位置の移動は、
そのままの文字色や文字サイズで移動する場合にはdivごと、
そうでなければdivで挟まれた<!--allow_comment-->~<!--/deny_tb-->までを
移動してください。
恐れ入りますが、個別のカスタマイズについては
ユーザー様におまかせしています。
ぜひ、チャレンジしてみてくださいね。
今後ともよろしくお願いいたします。
ありがとうございます
本当にわかりやすい説明をしてくださり ありがとうございます
ぜんぜんわからない 私でも すぐにわかりました。
うららんさまは こういうことを 無料でやっているのですよね。。
これはあたりまえではなく 心から 感動して 温かくなりました。
ご親切さが 伝わってきました。
素敵な テンプレート に出会えた事に 感謝です。
ありがとうございます。
背景に画像を入れたいです。
ブログ名が書いてある所(黒い背景になっている所)に好きな画像を入れたいのですが、それは可能なのでしょうか?
もし、できるのであればそのやり方を教えてください(>人<)
お願いいたします。
Re: 背景に画像を入れたいです。
コメントありがとうございます♪
ヘッダー部分に背景画像を、とのお問い合わせですが、
八ミツさんのイメージされているのが、
http://blog-imgs-37.fc2.com/u/r/a/uraraka01/ss1.png
のようなトップ画像だとすると、
このテンプレートではかなりの改変が必要になり、難しいです。
というのは、管理画面へのリンクなどのメニュー部分を実現するために、
ヘッダーは高さを固定した仕様(背景画像)になっているからです。
できるとすれば、
http://blog-imgs-37.fc2.com/u/r/a/uraraka01/ss2.png
のようには、比較的簡単にカスタマイズできます。
まず、テンプレートのHTML編集で、
<!-- ヘッダーここから -->
<div id="header" class="png_bg">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p>
↓
<!-- ヘッダーここから -->
<div id="header" class="png_bg">
<div id="gazo">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p>
</div>
として背景画像の表示されるエリアをつくります。
"gazo"はお好きな名前で構いません。
次に、スタイルシート編集で
/* ヘッダー
------------------------------------------------------------ */
div#header h1 {
padding-top: 15px;
margin-left:20px;
margin-right:20px;
font-size: 120%;
letter-spacing: 0.2em;
}
div#header p {
margin: 5px 20px 0 20px;
font-size: 80%;
line-height: 110%;
color: #c9c9c9;
}
の続きに下記の記述を追加します。
div#gazo {
background: url(http://~アップロードした画像のパス) no-repeat;
height: 70px;
}
高さは80pxまででしたら、お好きな値に調整してください。
用意していただく画像の幅は940pxでぴったり、
小さい背景画像を繰り返し表示したい場合は「no-repeat」を削除してくださいね。
カスタマイズ用にはしていないので、簡単にいかずすみませんm(_ _)m
拡張性というのも、今後の勉強にさせていただきます。
今後とも、よろしくお願いいたします。
お願いいたします。
カスタムについて
白ベースのスッキリして見やすいデザインのテンプレを探していて、
こちらのデザインとても気に入って使用させていただいております!
HTMLやJAVAは少しかじった程度でそこまで知識がないのですが、
もう少しカスタムしたいのでどうか教えてください!
1)タイトル下のブログ説明文を改行する方法
2)記事のタイトルの色・サイズを変える方法
3)サイドバーの横幅を変える方法(うららんさんのブログくらいの幅が欲しいです)
初心者的な質問で申し訳ありませんが、アドバイスよろしくお願い致します。
Re: カスタムについて
はじめまして。
コメント&ご質問ありがとうございます。
> 1)タイトル下のブログ説明文を改行する方法
わたしもわかりません(;^_^A
どうしてもの場合はHTMLに直接書いてしまい、改行タグ<br>を入れるしかないかもしれませんね。
> 2)記事のタイトルの色・サイズを変える方法
スタイルシートの
/* メインコンテンツ
------------------------------------------------------------ */
の欄からh2の記述部分を探し、変更してみてください。
記事のタイトルになります。
h2.entry_header{
margin: 25px 0 0 0;
font-size: 110%; ←文字サイズ
letter-spacing: 0.2em;
color: #666666; ←文字色
line-height: 1.1em;
border-bottom: solid 1px #eeeeee;
padding: 0 15px 2px 15px;
}
> 3)サイドバーの横幅を変える方法(うららんさんのブログくらいの幅が欲しいです)
私のブログも特にカスタマイズはしていませんよ。
リストなど一行ずつ改行されるものは短く感じるのかなと思います。
参考になればいいのですが…
今後ともよろしくお願いいたします。
投稿日時を付けたい
ブログテンプレートを見ていて、一瞬でblackblogに心惹かれました。HTMLが全然わからないので、申し訳ないですが質問させて頂きます。
・投稿時の日付とCategoryの表示場所
投稿時のカメラアイコンや日付表示を消すことは出来たのですが、
指定の位置に投稿時間を表示させる方法がわかりません。
後Categoryの表示位置を右端にもっていきたいです。
[2011/04/25 00:00] [Category:○○]
といった順序で右揃えで表示したいと思っています。
よろしく願いします。
Re: 投稿日時を付けたい
はじめまして。うららんです。
コメントありがとうございます♪
早速ですが、
記事ごとの投稿日時とカテゴリーの表示位置についてお答えします。
まずは、投稿日時をカテゴリの前に表示させるため、テンプレートのHTML編集をします。
場所は
<!-- メインコンテンツ/エントリーここから -->
の下をたどり、
<div class="kizi_main">
のすぐ下の以下の部分になります。
<h2 id="e<%topentry_no>" class="entry_header"><!--not_permanent_area--><a href="<%topentry_link>" title=""><!--/not_permanent_area--><%topentry_title><!--not_permanent_area--></a><!--/not_permanent_area--></h2>
<div class="entry_cate">Category : <a href="<%topentry_category_link>" title="<%template_view_category>"><%topentry_category></a></div>
下線を次のように書き足してください。
<div class="entry_cate">
[<%topentry_year>/<%topentry_month>/<%topentry_day> <%topentry_hour>:<%topentry_minute>]
[Category : <a href="<%topentry_category_link>" title="<%template_view_category>"><%topentry_category></a>]
</div>
続いて、右揃えはスタイルシート編集になります。
/* メインコンテンツ
------------------------------------------------------------ */
の下をたどり、
div.entry_cate {
font-size: 80%;
margin: 2px 15px 0 15px;
}
と書いてあるところを探してください。
次の下線のように書き足します。
div.entry_cate {
font-size: 80%;
margin: 2px 15px 0 15px;
text-align: right;
}
わたしの記述があまりきれいでないので大変見にくいかと思いますが、
目をこらして(笑)ぜひカスタマイズしてみてくださいね。
お返事が遅くなってすみません。
今後ともよろしくお願いいたします。
文字の大きさについて
ありがとうございます。
一つだけ私も含め、読者にご高齢の方が多いので、文字の大きさを変更したいので、ご教示願います。
目安としては、このブログの文字の大きさくらいあればと思います。
また、コメント欄の文字の大きさはさらにもう少し大きくできないでしょうか。よろしくお願い致します。
Re: 文字の大きさについて
はじめまして。うららんと申します。
コメントありがとうございます。
さっそく、文字サイズの変更についてですが、
テンプレートのスタイルシートを編集してください。
/* 全体
------------------------------------------------------------ */
の部分、以下で「ココ」と示した箇所を修正してください。
body {
background: url(http://blog-imgs-46.fc2.com/u/r/a/uraraka01/02_bg.jpg) fixed;
color: #777777;
font-family: serif;
font-size: x-small; ←ーーココ(一段階大きくはsmall)
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; ←ーーココ(一段階大きくはmedium)
}
html>body {
font-size: small; ←ーーココ(一段階大きくはmedium)
}
/* for IE \*/
* html body {
font-size: 78%; ←ーーココ(一段階大きくは100%)
}
/**/
各種ブラウザバージョンに対応するため複数箇所手を入れないといけませんが、
ぜひお試しください!
これでサイト全体の基準サイズを操作します。
今後ともよろしくお願いいたします。
ありがとうございました。
わかりやすい説明をありがとうございました。
No title
こちらのテンプレートを拝見して、シンプルで素敵♡
一目でとても気に入り、お借りしています(*^^*)
ブログもPCも初心者です。
下記の件、教えていただけると助かります。
記事の終わりに
FC2の FC拍手を毎回、表示させたいです。
(ブログ拍手ではお礼ページが表示されないことに気づきました。
お礼ページが表示できるFC拍手のほうを、表示させていきたいのですが、
FC拍手のほうは、毎回、拍手パーツを張り付けなくてはならないようなので、
テンプレートに あらかじめ 設定出来たら・・・と、思うのですが・・・・ )
もしよろしければ・・・教えてもらえると助かります。。
拍手について
はじめまして♪
コメントありがとうございます。
ご質問の拍手の件ですが、正直にいうと…
ブログ拍手とFC2拍手の違いがいまいちよくわかっていませんでした。
すみません。
nonnoさんのご指摘を受けてはじめて「FC2サービス/拍手」をみてみました。
タグを生成して貼付けるようですね。
これは一度テンプレートに組み込めば、毎回貼付けなくて大丈夫です。
指示どおりHTML編集で<!--topentry--><!--/topentry-->の間の好きな位置に、
(たいていは本文のあとになるかと思いますが)
タグを貼付ければOKです。
これは個別カスタマイズになりますので、
ご自身でお願いできればと思います。
拍手にお礼機能があるんですね!
大変勉強になりましたm(_ _)m
よろしくお願いいたします。
背景について
『white blog』を使わせていただいてます。
先に質問されている方がいらっしゃいますが、タイトルの部分の背景画像を差し替えたかったのですが
こちらに記載の方法ではカスタマイズ出来ませんでした。
タグをいれてプレビューで見る限りでは成功しているのですが
実際、更新をかけると反映されておらず、変更することが出来てないようです。
『white blog』ではカスタマイズ出来ないのでしょうか。。。
お忙しいところ恐れ入りますが、教えていただけると助かります。
よろしくお願いいたします。
No title
アイコンを変更できるのも良いですね^^
写真を大きくUPする為に記事エリアを
大きくすることは可能なのでしょうか?
御伝授下さい。
Re: 背景について
はじめまして!
コメントありがとうございます。
お返事が遅くなりました。
お問い合わせの件でリンク先を拝見しましたが、
今はタイトルのところに画像が入っているようですので直りましたでしょうか?
以前も書きましたが、高さの変更はこのテンプレでは難しいです。
その辺りのカスタマイズを前提としてつくっていなくてすみません。
コンテンツがとてもすてきなブログですね。
今後ともよろしくお願いいたします。
なすび 様
記事幅ですが、このころはカスタマイズを意識せずつくっており、
背景の影を表現するのに画像でつくってしまっているため、幅を広げるのは困難なのです。
ご希望にそえずに申し訳ありません。
写真はサムネイル600pxにしていただくとぴったりになっています。
よろしくお願いいたします。
No title
お返事ありがとうございます。
色々やっているうちに(FC2の反映も遅いのかもしれませんが…)なんとか表示されたようです。
ありがとうございました。
高さはこのくらいでいいかなと思っていますので…問題ないです。
素敵なテンプレートをありがとうございました。
No title
幅を広げることは出来ないのですね、
このテンプレートで幅を大きく出来、大きな写真をUP出来れば
完璧に好みのテンプレートだったのですが・・・残念です。
でも今、1番のお気に入りなので使わせて頂きますね^^
うららんさんのテンプレートで写真画像を大きくUP出来、
文字サイズが小さめで可愛い字体のものはありますか?
なすび 様
お返事ありがとうございました。
幅が広げられず、すみません。。。
今、わたしが共有しているテンプレートの中では、
この『white blog』『balck blog』がいちばん写真を大きく載せられると思います。
サイドバーを設けると、この600pxくらいがMAXになってしまいます。
大きいモニタで見れたとしても、ブログに見にくる方たちの中には小さいモニタの人もいらっしゃるので、
どうしても間をとるような形になってしまうんですね。
なすびさんの写真は幅がどのくらいなのかな?
今後の参考にさせてもらいたいので、よかったら教えてくださいね~
No title
私のブログでは550でUPしています。
希望のサイズは800くらいです。
ブロ友さんは大きな写真をUPしてる方が多くて
大きな写真を載せられるテンプレートを探していました。
でもこちらのテンプレートの可愛さに負けましたw
もし今後の参考になるなら大きな写真を載せられる
「可愛い~っ」テンプレートもお願いしますね♪
なすび 様
800pxですね!
今後の参考にさせていただきます。
ありがとうござます。
(1カラムに近いイメージで…境界を設けなければいけるかな。メモメモ。)
今後ともよろしくお願いいたします。
投稿日時部分のアイコンについて
ありがとうございます。
カスタムなのですが、すべてが初心者なので、ここのコメント等を参考に
しながら、ちょこっとしております。
どーしても変更したいのが、投稿日時のアイコンの色なのです。
あらかじめ他の色を選べる様になっていると思いますが、
うすいグレーにしたいのです。
お手数をお掛け致しますが、アドバイスの程、よろしくお願い致します。
Re: 投稿日時部分のアイコンについて
はじめまして。
『white blog』を選んでいただいてありがとうございます。
投稿日時のタブ型の画像はオレンジの他にイエローグリーンとライトブルー、それからウッド調はご用意していますが、グレーはありません。
グレーにカスタマイズしていただくには、現在のオレンジの画像をダウンロードして、
それを何らかの画像編集ソフトでグレーにしていただくことになります。
(ダウンロードは右クリックで「背景画像を保存」を選びます。念のため。)
カスタマイズした画像はアップロードして、スタイルシートのパス(ファイル名)を書き直してくださいね。
このあたりは個別のカスタマイズになりますので、ご自身でお願いしております。
どうぞご理解くださいね。
よろしくお願いいたします。
No title
ご返答有難うございます。
画像(色だけを替えて)を差し替えれば良かったのですね。
さっそくやってみましたが、実際に見てみるとイメージが違いました、、、、。
ただ、色ではなく画像そのものを替えてみるのもおもしろそーだなと
思いました。
親切な対応で、感謝しております。
サイドメニューの文字について
さっそくですが、サイドメニューの文字サイズだけを大きくすることは可能でしょうか?
過去の質問をみたのですがブログ全体の文字サイズ変更は見つかったのですが、サイドメニューだけはなかったので質問しました。
よろしくお願いします。
Re: サイドメニューの文字について
はじめまして。
white blog、使ってくださってありがとうございます。
サイドメニューに関してのスタイルシートは
/* サイドバー(プラグイン)
------------------------------------------------------------ */
以下に記述してあります。
サイドメニューのタイトル↓
dt.plg_title {
color: #666666;
font-size: 90%;
font-weight: bold;
margin-bottom: 5px;
}
サイドメニューの本文↓
dd.plg_header,
dd.plg_body,
dd.plg_footer {
font-size: 80%;
line-height: 1.6em;
margin: 0 0 0 10px;
}
です。
全体の基準を12pxに指定した上での90%、80%になっていますので、
お好みのサイズに大きくしてください。
よろしくお願いいたします。
No title
おかげさまで上手く調整することができました。m(_ _)m
No title
こちらのシンプルなデザインがとても気に入り使わせて頂きたいのですが
マグカップ下の時刻と西暦を消し、日付だけにしたいのですが、
どのようにすればいいのでしょうか?
よろしくお願い致します。
Re: No title
はじめまして。
ご質問をいただいていたのに、お返事が大変遅くなりました。
申し訳ございませんでした。
他のテンプレートに変更されたかもしれませんが、お答えしておきます。
HTML編集で該当箇所を探します。
時刻と西暦の記述を削除します。
削除すると行間が詰まってしまいますので、代わりに全角スペースを入れておいてください。
<!-- メインコンテンツ/エントリーここから -->
(略)
<div class="entry_date"><span class="date_s">
よろしくお願いいたします。
はじめまして。
「プラグインのカテゴリー」の部分を、折りたたみ式に
変えることは可能でしょうか?
以前は、今うららんさんが使っているテンプレートです。
見た目がとてもすっきりしていて、気に入っていたのです。
でも、写真なのでやはり黒のテンプレートで、と思っていたところに
うららんさんが黒のテンプレートを作ったことを知りました。
今、コメント欄を見ながらあれこれとカスタマイズをさせてもらっています。
それと、ブログのタイトルの文字を大きくするにはどうしたら
いいでしょうか?
お忙しいところ、本当にすみません。
Re: はじめまして。
はじめまして。
ご利用ありがとうございます。
ご質問からだいぶ時間が経ってしまい、申し訳ありませんでした。
折りたたみについては、このテンプレートは対応していません。
初期の頃作ったもので、まだカスタマイズとかあまり意識していませんでした。
すみませんが、ご了承下さい。
ブログのタイトルの文字サイズはスタイルシートの以下の箇所で変更できます。
/* ヘッダー
------------------------------------------------------------ */
div#header h1 {
padding-top: 15px;
margin-left:20px;
margin-right:20px;
font-size: 120%; ←ココ
letter-spacing: 0.2em;
}
お好きな大きさにしてみてください。
ダウンロードコメントのほうも読みました。
ありがとうございました。