この機能を使ってGIFやJPGで出力したロゴ画像をアップロードした場合、テンプレートによってはロゴ画像の背景が目だってしまう場合があります。


上記は同じロゴ画像を2つのテンプレートで比較した例です。
このように背景透過処理がなされていないGIFやJPG画像をアップロードした場合、テンプレートの背景となじまないケースが出てきます。この症状を改善するためには「背景透過処理を行ったPNG画像」を作成する必要があります。

また、PNG形式の画像は未だ正常に対応していないブラウザがありますので、PNGのロゴ画像が登録されてもそれをそのまま表示せずに、いったん「ロゴ画像表示領域の背景画像」と合成して出力しています。

このロゴ画像合成の仕様は以下の図をご覧ください。


ポイントとしてはロゴ画像背景画像「bg_logo.jpg」のサイズとCSSで指定したロゴ表示領域サイズを合わせることです。このサイズが合っていないときれいにロゴ画像を合成することができません。

また、登録したロゴ画像を合成する位置は
「デザイン」＞「オリジナル追加・編集」よりテンプレートを選択・編集し、「画像編集」＞「システム画像」内の「bg_logo.jpg（EDITORマークが付いています）」サムネイルをクリックすることで調整が可能です。

【ロゴ出力用独自タグについて】

ロゴ出力用独自タグは「ロゴ画像が登録されているかいないか」を判別し、ロゴ画像が登録されている場合は上記合成画像を背景として出力、テキストをネガティヴインデントしたソースに置換されます。

上記はロゴ画像を登録した場合の置換ソース例です。
※ID”indent”はシステム側で登録された独自IDとなります。
ロゴ画像を登録していない（テキスト表示）場合は div id=”indent” のタグは表示されません。

1）　「デザイン」メニューより「オリジナル追加・編集」より
編集したいテンプレートをコピーし、編集可能状態にします。



↓↓



↓↓



2）　テンプレートを選択・編集し、スタイルシート（基本CSSまたはトップCSS）内

#topimage{
}
及び
#topimage a{
}
のwidth/height値を変更してください。

3）　上記で指定したサイズの画像を
「default.jpg」のファイル名で制作し、
テンプレート編集画面内「画像編集→トップイメージ」内にアップロードしてください。

4）　「デザイン」メニュー「テンプレート選択」より、
「選択したテンプレートを適用する」のボタンを押せば完了です。

テンプレートファイル「基本HTML」body直下にはサイト構成に必要な独自タグが埋め込んであります。

今回はこの中の

について解説いたします。

このタグは「lang:」にパラメータを指定することでブログ記事内特定箇所の表示言語を日本語・英語と切り替えることができます。

【記述方法】

表示上記設定が適用される場所は

ブログ記事内　日付表示
ブログ記事内　コメント・トラックバックリンク
ブログ記事内　コメント・トラックバック表示の見出し
となります。
基本的にシステム側で出力される（テンプレートで指定できない）部分について、英語表記と日本語表記を切り替えることができます。

まずベース画像を作る際には、ファイル名は「mobile.png」にて制作する必要があります。
自動生成されたQRコードがこの「mobile.png」上に合成されるわけですが、その合成位置は

X軸：7px / Y軸：27px

の位置となります。
※この位置はシステム側で決められており、変更することはできません

画像ができたらテンプレート編集画面にて「mobile.png」を「QR・アルバム」領域に画像をアップロードします。

QRコード画像にはクリックするとメーラーが立ち上がるリンクも設定されているのですが、このリンク位置は基本CSSで自由に設定することができます。

-------------------------------------------------------------------------
#qr a{ }
-------------------------------------------------------------------------

にてリンク位置を設定してください。
※絶対位置（position:absolute;）及びブロックレベル（display:block;）にてaタグを設定してください

• 基本CSS
• トップページ
• コンテンツエディタ
• ブログエディタ
• フリーメモエディタ

と5つのCSSが編集できるようになっています。

このうち基本CSSとトップページについては問題ないと思いますが残りの3つについては「これ何？」と思われる方もいらっしゃるかと思います。

この3つのスタイルはサイト・ページ表示用としてではなく、「コンテンツエディタ入力エリア」のスタイル設定となっています。

何のためにこれらのスタイルが必要かというと、たとえばテンプレートでコンテンツ背景が濃い色（黒など）の場合、エディタ入力エリアも同じ色に合わせていたほうが何かとトラブルを回避しやすくなります。

上記の例だと、背景処理をしていない画像を挿入したときに、実際にサイトを見て確認しないと気づかないミスを事前に回避しやすいケースです。

また、サイドバーエリア「フリーメモ」など、コンテンツ幅にあわせたエディタ入力エリアを作っておくとコンテンツ制作もスムーズに行えます。

エディタ入力エリアの幅の指定は各CSSのbodyタグ内borderにて指定します。
これは入力エリアが別ファイルにてIframeで呼び出されているためです。

具体的には

body{
	margin:5px;//★
	padding:0;
	background:#fff;
	font-size:0.8em;
	text-align:left;
	line-height:1.4;
	color:#333;
	font-family:verdana,'MS UI Gothic',sans-serif;
	border-left:210px solid #ddd;//★
	border-right:210px solid #ddd;//★
}

上記★マークの部分で幅を指定します。
上記はサイドフリーメモ（入力エリア横180px）の一例ですが、

このようにボーダー幅及びマージンで入力エリアの幅を制限します。

※入力エリア最大値は630pxとなっております。
※上記例ではコンテンツを入力しやすいようにbodyにマージンをとっています。

このCMSではその法則に慣れていないユーザー様の合わせて操作方法を逆にしております。

つまり
・改行タグ（br）挿入では「Enter」
・段落タグ（p）挿入では「Shift+Enter」

という制御になっております。