タグ

タグ:カスタマイズ

スマートフォン向け表示のブログタイトルを画像に変更しました

カテゴリ:

(ブログタイトルを画像表示にして、PC版のTOPと合わせてみました)

お気づきの方もいらっしゃったかもしれませんが
当ブログのスマートフォン向けのタイトルを画像に変更しました。
設定は簡単で(スマートフォン向けのデザインはデフォルトのものを使用)、
『ブログ設定』→『スマートフォン』→『レイアウト』→『ブログタイトル』の設定を
テキストから画像へ変更するだけです。
画像のサイズは幅320pixelで作りましたが、もう少し大きくても良いかもしれません。
ただ、画像そのものが重たいとスマートフォンの電池消耗の一因にもなりますので
綺麗で軽いものが良いのかなと思います。
画像の種類はpngでもjpgでもお好きな方で良いと思います。
これで、PC版での表示と統一感が少しだけ出せたかなと思いますが
どうなのかなと思いを巡らせつつ。
そんな感じのちょっとしたカスタマイズのご報告でした。

カテゴリ:
現在、ブログデザイン【DLsite】でのみ対応している
『かんたんタイトル画像』の設定について

【参照】http://blog.blogpark.jp/archives/1326060.html

上記の説明だけでは若干不十分かと思いましたので、追記させていただきます。

※カスタマイズを行う前に、修復が可能なように
 事前に現在のデザインを保存しておくと便利であるかもしれません

【ブログデザイン『DLsite』のタイトル画像と、同じ大きさのタイトル画像を挿入する場合】

・サイズ: 837px × 160px の画像(jpg、gif、png)を用意
・『ブログ設定』→『基本設定』・『かんたんタイトル画像』から、
 作成した画像をアップロードする(変更ボタンを押す)


画像をアップした後、
『ブログ設定』→『デザイン』・『カスタマイズ』→『デザインカスタマイズ』タブ内の
『トップページ』タブ内の記述にあります
<!-- ..... Title ..... --> と書かれた一文のすぐ下の箇所を、
以下のように変更します。


<div class="blog-title-outer" style="background:url(http://parts.blog.livedoor.jp/img/usr/dlsite/header.gif) no-repeat left top;height:160px;">



<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background:url(<$BlogHeaderImageUrl$>) no-repeat left top;height:<$BlogHeaderImageHeight$>px;"</IfBlogHeaderImageUrl>>



この記述で下部にある『保存する』ボタンを押すと、
設定が有効になり、タイトル画像が変更されます。

※※『トップページ』タブのほか、
  『個別記事ページ』、『カテゴリアーカイブ』、『個別記事ページ』タブ内にある
  同様の記述も、変更する必要があります。


レイアウトをさほど気にせず、簡単にタイトルの画像だけを差し替えることができるので
比較的お勧めの方法です。

(Firefox3.5.2および、IE8にて確認済み)

カテゴリ:
また、ブログデザイン【DLsite】の初期状態では【サークルプロフィール】の
サークルHPバナー(200ピクセル幅)の画像の右端がやはり切れているので
『ブログ設定』→『デザイン』・『カスタマイズ』→『CSS』タブ内の
記述を一部変更しました。



カスタマイズ

CSS


/* =============================================== */
/** 08. Sub & Extra - プラグインエリア */
/* ----------------------------------------------- */

(略)

div.side {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px;
text-align: center;
font-size: 83%;
margin-bottom: 10px;
}





/* =============================================== */
/** 08. Sub & Extra - プラグインエリア */
/* ----------------------------------------------- */

(略)

div.side {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 9px;
text-align: center;
font-size: 83%;
margin-bottom: 10px;
}



この記述で下部にある『保存する』ボタンを押すと、
スタイルシートが有効になり、200ピクセル幅のバナーが
枠内に収まるようになります。
(Firefox3.5.2および、IE8にて確認済み)

カテゴリ:
ブログデザイン【DLsite】初期状態では、560ピクセル幅の画像の端が切れるので
『ブログ設定』→『デザイン』・『カスタマイズ』→『CSS』タブ内の
記述を一部変更しました。



カスタマイズ

CSS

/* ----------------------------------------------- */
/** 記事本文 */

div.article-body {
padding: 20px 20px 5px;
line-height: 140%;
font-size: 83%;
}




/* ----------------------------------------------- */
/** 記事本文 */

div.article-body {
padding: 20px 12px 5px;
line-height: 140%;
font-size: 83%;
}



この記述で下部にある『保存する』ボタンを押すと、
スタイルシートが有効になり、560ピクセル幅の画像が記事内に収まるようになります。
(Firefox3.5.2および、IE8にて確認済み)

このページのトップヘ

見出し画像
×