◆ 若干廃墟 ◆

• 初期設定の背景画像は、窓越しに望む銀河と月の jpg 画像を使用。ファイルサイズは51kb 程度。（やや重めです）
  
  記事本文やメニュー部分に画像を多く使う（ブログペット含む）方の場合、『 本文の画像は、なるべく追記以下に隠してしまう 』 …か、もしくは『 背景の銀河+月画像を非表示にする 』…などして、閲覧者のパソコンへの負担を軽くするよう、留意してください。
  


• 記事タイトル・プラグイン３タイトルの背景は、白い枠の中に濃いグレーのドットを敷き詰めた、透過効果のある gif 画像。
  記事本文全体の背景は、濃いグレーで透過効果のある、20×20px のgif 画像です。
  
  記事フッターの背景画像は、白い枠。透過効果のある、gif 画像です。
  


• 基本的な全体の背景色は黒、記事・アーカイブ等の背景色設定は透明です。背景画像などが設定されている場合、その画像の色が見えています。
  
  背景画像を初期設定の物から別の物に変更した場合、全体の背景色が見えなくなることもあります。
  


• プラグイン無効時の「アーカイブ」「リンク集」等 各項目のタイトル、カレンダーの曜日は英語表記で、中央配置です。
  


• IEのみ、スクロールバーに配色を設定しています。
  


• プラグイン有効時の記事・アーカイブ等のうち、プラグイン１と２ はslave-columnに、プラグイン３はmaster-column下に配置しています。（ プラグイン３は、トップページだけに表示されます。）
  
  プラグイン３を一番下に置いたまま、入力画面の大きいメールフォームとして使ったり、一番上に配置してフリーエリアにお知らせ事項を書いたり…と、色々活用してください。
      

昨日登録申請したので、明日か明後日あたり公開かと。（06月21日10:52 追記…以外に早く公開されたもよう。20日夜から公開された？）ファイルサイズ大き目の jpg 画像を、背景に使ってみました。

FC2ブログでは、記事を投稿する際に 『ジャンル』 と 『スレッドテーマ』 を選ぶ事ができます。

私が配布したテンプレートの中には、それらの表示に対応していないものもあります。その場合、以下のタグをHTMLとCSSに追加することで、記事上に表示できます。
追記以下を参照してください。

逆に、この機能がついているテンプレートを使用していて、ジャンルやテーマを表示したくない場合は、HTMLに書かれたコメントにしたがって、該当部分のタグを削除してください。

<!--more_link-->
〜略〜
<!--/more-->

<!--▼ジャンル・スレッドテーマの表示-->
<!--▼ジャンル・テーマを非表示にしたい場合、以下を削除▼-->
<!--community-->
<div class="community">テーマ→<a href="<%topentry_thread_link>" title="<%topentry_thread_title>へ移動"><%topentry_thread_title></a> / ジャンル→<a href="<%topentry_community_janrelink>" title="<%topentry_community_janrename>へ移動"><%topentry_community_janrename></a></div>
<!--/community-->
<!--▲ジャンル・テーマを非表示にしたい場合、ここまでを削除▲-->

/*-- テーマ・ジャンルの文字位置 --*/

div.community { padding: 10px 0 0;
                 text-align: right; } 

私が共有登録しているテンプレートデザインは、初期状態でプロフィール画像がカラムの中央に配置されるよう、CSSで設定してあります。

これは、
プラグインの設定 ＞ プラグインの編集 ＞ 設定の変更 ＞ コンテンツの文字位置
…の部分で、『 中央寄せ 』 または 『 右寄せ 』 を選択した時に、プロフィール画像と自己紹介文が 『 一緒に中央寄せ 』 もしくは 『 一緒に右寄せ 』 になるのを避けるための、配置設定です。（中央配置にしているのは、単に私の好みです^^）

画像の表示位置は、CSSのの該当部分を書き換えて右寄せ・左寄せに変更します。追記以下を参照してください。

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: center; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 auto 15px; }
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: right; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 auto 15px 0; }
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

/*.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: center; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 auto 15px; }*/
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: left; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 0 15px auto; }
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

06月09日付けで [ eme_lace-up_2b ] の共有登録を申請しました。

 

前々から、ち〜と考えていたのですが…性別を問わず使えるようなデザインを作りたいな、と。

 

………で。
黒ベースで、ターコイズ調のボタンアイコンを作ってみたり。リンク色も、ターコイズ色の濃淡にしてみたり。ベルトの金具部分は、くすんだシルバー色をイメージして作ってみたり。

色や形、質感が気に食わなくって、何度も作り直して…ようやく 『これだ』 ってものが出来上がった時の嬉しさ。…自分で一から素材を作ってる人にだけわかる、喜びと苦しさ。

 

う〜ん…もっと色んなスタイルのデザインを作ってみたいけど、頭は一つ、手は二本。できる事も、時間も限られてます。たま〜に、『一日が36時間ぐらいあればなぁ…』 と、思うこともあります。

 

ま、無理せんと、のんびりマイペースでいきたいもんですが。

 [ eme_lace-up_2b ]

• 初期設定の背景画像は、ヘッダーとフッター部分に黒ベルト風画像、ボディ部分の背景には、肌がチラリとのぞく雰囲気の編み上げ調の画像。
  
  記事タイトル・プラグイン３タイトルの背景は、黒ベルト風画像、記事本文・プラグイン３内容部分の背景画像は、黒地に濃いグレーのジグザグ模様です。
  
  ヘッダー・フッター・ボディ・プラグイン３のタイトル背景画・リスト用アイコンは、透過効果のあるgif画像を使用。
  記事タイトル・記事本文・プラグイン３内容部分の背景には、透過効果は無し。（背景色は黒）
  


• 基本的な全体の背景色は黒、記事・アーカイブ等の背景色設定は透明です。
  背景画像などが設定されている場合、その画像の色が見えています。
  
  背景画像を初期設定の物から別の物に変更した場合、全体の背景色が透けて見えることもあります。
  


• アーカイブ・リンク集等 各項目のタイトル、カレンダーの曜日は英語表記で、中央配置です。
  


• IEのみ、スクロールバーに配色を設定しています。
  


• プラグイン有効時の記事・アーカイブ等のうち、プラグイン１と２ はslave-columnに、プラグイン３はmaster-column下に配置しています。（ プラグイン３は、トップページだけに表示されます。）
  
  プラグイン３を一番下に置いたまま、入力画面の大きいメールフォームとして使ったり、一番上に配置してフリーエリアにお知らせ事項を書いたり…と、色々活用してください。

斜体
小文字（xx-small）
テスト（文字サイズx-small）
テスト（文字サイズsmall）
大きさを指定しない場合（デフォルト12px）
テスト（文字サイズmedium）
テスト（文字サイズlarge）

（おそらく）5月27日 〜 6月05日夕方までの期間、右サイドのメニュー（アーカイブ等）の表示がおかしくなっていた（メニュータイトルのバー画像が見えない・文字が大きすぎる）ものを、修正しました。

私の作っている2カラムの共有テンプレートは、float を使って左右に各カラムを配置しています。入れかえは非常に簡単です。

追記以下を参照してください。

• 記事位置・アーカイブ等位置の設定部分を、それぞれ left → right  に、right → left  に書き換えます。

変更前

/* first-column（本文記事）全体の位置・幅・余白
-------------------------------------------------------------*/

div#first-column { float: left;
                   margin: 0px;
                   padding-left: 40px;
                   width : 544px; }


/* second-column（アーカイブ等）全体の位置・幅・余白の設定
-------------------------------------------------------------*/

div#second-column { float: right;
                    margin: 0px;
                    padding-right: 40px;
                    width: 214px; }

変更後

/* first-column（本文記事）全体の位置・幅・余白
-------------------------------------------------------------*/

div#first-column { float: right;
                   margin: 0px;
                   padding-right: 40px;
                   width : 544px; }


/* second-column（アーカイブ等）全体の位置・幅・余白の設定
-------------------------------------------------------------*/

div#second-column { float: left;
                    margin: 0px;
                    padding-left: 40px;
                    width: 214px; }

• また、[ eme_lace-up_2w ] のように、背景画像の配置を % で指定している物は、以下の緑字部分の指定も変更してください。（画面左端からの位置を指定しています。）

変更前 （ 右側寄りに背景画像を配置 ）

/*--- サイト全体のレイアウト ---*/

div#wrapper { width: 800px;
              margin-left: auto;
              margin-right: auto;
              background-color: #fff;
              background-image: url("〜略〜");
              background-repeat: repeat-y;
              background-position: 72% 0%;
              text-align: left; }

変更後 （ 左側寄りに背景画像を配置 ）

/*--- サイト全体のレイアウト ---*/

div#wrapper { width: 800px;
              margin-left: auto;
              margin-right: auto;
              background-color: #fff;
              background-image: url("〜略〜");
              background-repeat: repeat-y;
              background-position: 28% 0%;
              text-align: left; }

[ eme_lace-up_2w ] を、本日共有登録申請しました。
前4作に比べるとかなりのところ真っ白で、見た目はあっさりかもしれませんね…全てが、洋服のパーツで形づくられているようなデザインです。
この後、赤バージョンと黒バージョンも作る予定で、どちらも白バージョンとはかなり雰囲気を変えてみようと思っています。

………で、そんなこんなの作業の途中。
ついうっかり共有登録し忘れた3カラムデザインを、つい今しがた発見しました。多少の手直し等必要なので、すぐには登録できませんが近日お目見え予定です。

 

４６。

  [ eme_lace-up_2w ]

• 初期設定の背景画像は、ヘッダーとフッター部分に白のベルト風画像、ボディ部分の背景には、肌がチラリとのぞく雰囲気の編み上げ調の画像。
  
  記事タイトル・プラグイン３タイトルの背景は、白いベルト風画像、記事本文・プラグイン３内容部分の背景画像は、白地に淡いグレーのジグザグ模様です。
  
  ヘッダー・フッター・ボディ・プラグイン３のタイトル背景画・リスト用アイコンは、透過効果のあるgif画像を使用。
  記事タイトル・記事本文・プラグイン３内容部分の背景には、透過効果は無し。（背景色は白）
  


• 基本的な全体の背景色は白、記事・アーカイブ等の背景色設定は透明です。
  背景画像などが設定されている場合、その画像の色が見えています。
  
  背景画像を初期設定の物から別の物に変更した場合、全体の背景色が透けて見えることもあります。
  


• アーカイブ・リンク集等 各項目のタイトル、カレンダーの曜日は英語表記で、中央配置です。
  


• IEのみ、スクロールバーに配色を設定しています。
  


• プラグイン有効時の記事・アーカイブ等のうち、プラグイン１と２ はslave-columnに、プラグイン３はmaster-column下に配置しています。（ プラグイン３は、トップページだけに表示されます。）
  
  プラグイン３を一番下に置いたまま、入力画面の大きいメールフォームとして使ったり、一番上に配置してフリーエリアにお知らせ事項を書いたり…と、色々活用してください。
      

「たてがき君」という、横書き→縦書き変換ソフトを見つけました。
縦書きHTMLスクリプトを吐き出してくれるタイプ。

これ、新潮社などの「携帯で小説閲覧」用のツールとしても採用されていて、ソフトの配布自体も、６年くらい前から行われているらしい。もしかして……縦書きHTML変換ソフトの定番？

ページめくり機能や、原稿用紙調の罫線付き背景画像も別途追加可能のよう。（ここらへんの遊び心が嬉しい  ）