さて、Blog の投稿と、一般的な HTML 文章の大きな違い。
実はこれに翻弄されています。
そう、Blog の投稿には、各 Blog で上位に乗るお決まりのパターンがある ... 。
私の 投稿書き は、Windows 標準の テキストエディタ メモ帳 (notepad.exe) で、です。
はい。 拡張子は普通の .txt です。
Blog の投稿 は HTML 文章です。
ですから、HTML の各種タグも書いています。
Blog の投稿と、一般的な HTML 文章の大きな違い。
はい。
通常、HTML 文章は
<!DOCTYPE HTML>
<HTML lang="jp" xmlns=http://www.w3.org/1999/xHTML>
<head>
<meta charset="utf-8" />
<title>...
と言った形で始まったりします。
まぁ、パターンは様々ですが、似た様な記述が必ずあります。
しかし、Blog (Blogger) の投稿に、そんな部分は ... ありませんね。
いきなり、本文からスタートしますでしょ！。
Blog で投稿を書き出した当初、 この HTML 記述で、相当、悩みました。
オマケに、
HTML + CSS の組み合わせなのですが、 CSS 何所？ なんですよね。
答えは、
採用するテンプレートに基本部分が入っていて、更に、各自が追加で埋め込んでいる訳ですが、
どうも、その辺りは、分かり辛いですねぇ～。
手っ取り早く、
何か投稿の HTML ビュアー からコピペして、そのファイルの拡張子を .html に変えて見て下さい。
既定のブラウザに紐付けられていれば、
ダブルクリックで、 ブラウザに、それらしく、表示される筈です。
でも、 ちょっと（或いは、大幅に）、違いますよね。
文字の背景とか、 引用の表示とか、 ... 。
オマケに、画面一杯を使って表示されている筈です。
う～ん。
これ、皆、（追加設定を含む）テンプレート絡みの差異なのです。
投稿内容 xxx.html を単体で機能させ様とすると大変なのですが、
記述内容を大まかにチェックする為なら、
html としての最低限の体裁を整え、
テンプレートが設定している内容（ CSS 部分 ）も取り込んでやる事で対応が可能になります。
でも、 実際に、投稿書きの手段としては、
これらが盛り込まれたデータでは、不要な部分が多く、記述も長～くなりますし、
編集しようとダブルクリックすると、
一般的な既定のソフトはブラウザでしょうから、それが立ち上がって仕舞います。
表示には都合が良くても、編集には不便ですね。
更に、実際、投稿として Blogger に寄稿する際にも不要箇所が邪魔をしますし。
そこで、
雛形をふたつ用意し、
その内のひとつを書き換える（本文を挿入/置換）する事で目的を叶えます。
雛形は、個々の Blog 設定と密接なので、各自が調整する必要があります。
以下の例では、Blog の幅 (Width 820) のみ既に数値が入っていますので、直して下さい。
テーマ > カスタマイズ > 幅を調整 で ブログ全体 から サイドバー を引いたものです。
勿論、CSS で設定した内容も補うのを、お忘れ無く！。
<!DOCTYPE html>
<!--
Replace *FileName*
Replace *For Blogger Post*
Width 1090-270 = 820
-->
<html lang="jp" xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta charset="utf-8" />
<title>Temporary Post for Blogger</title>
<style type="text/css">
<!--
/* ここに Blogger CSS で追加した記述を Copy&Paste */
/* For Temorary Showing (Not On Blogger) */
#body {
width :820px ;
margin :auto ;
font-family :Arial ;
}
-->
</style>
</head>
<body>
<div id="body">
<br />
<h3>*FileName*</h3>
<br />
<!-- Add Contents Here -->
*For Blogger Post*<br />
</div>
</body>
</html>
注：
引用のスタイルを CSS 設定しているのですが、
Blogger 追加 CSS から引いて来る、blockquote { の記述を、
ここでは、 blockquote.tr_bq { に訂正する必要がありました。
テンプレートが持つ基本の引用スタイル class='tr_bq' なのでしょうね。
名称等はテンプレート依存かも知れませんが。
/* ここに Blogger CSS で追加した記述を ...
Font 指定を追加 *2.
これは、謂わば、簡易テンプレート擬き になる訳です。
各自の調整が反映された雛形 .html が出来たら、それのコピーに対して、
*For Blogger Post* を選択し、
其処に、書き掛けの HTML 投稿文章 .txt をペースト（置換）して下さい。
勿論、その中には、各種 HTML Tag が入っていなければいけません！。
これを保存し、ダブルクリックすれば、既定のブラウザに表示される筈です。
この雛形は 背景色 文字色 の設定は反映していませんから、
見た目は違います！。
そして、自分で使っているテンプレート ('Simple') で試したので、漏れがあるかも知れません。
でも、レイアウトそのものは、大まかに、再現出来る筈ですので、試して見て下さい。
但し、この面倒な作業で得られるファイルは、無用の長物！ です。
Blogger の編集画面で行っている事と較べれば、稚拙 且つ 不十分 です。
単に、ローカルのみで類似の結果が得られる、と言うだけですから、
草稿の初期段階で使うには良いでしょう。
簡単なプログラムにでもしない限り、使い道が無いかも、 ... 、ですね。
[2020/11/06] コードの注記を追加 *1.
[2022/01/13] コードで、Firefox 仕様変更対応の為 Font 指定 及び 誤記訂正 *2
0 件のコメント:
コメントを投稿