Google Bloggerのカスタマイズ備忘録ー１１：コラム風の体裁を追加

0 Blogger

投稿にコラム（囲み記事）を記述する
投稿にコラム（囲み記事）を記述する
　投稿内に、関連する内容をコラム（囲み記事）として挿入できる様にしました。　投稿記事をhtml編集する必要があるけど、いかにもコラム記事みたいな体裁にできました。

Vaster2の導入とカスタマイズ その１１

記事内にコラムを設ける

　これまでは準見出しの様に段落しか無かったけど、コラム（囲み記事）が欲しいと思っていた。　罫線（<table>を使用）で囲むのでは味気ないし、コラムタイトルも記述したいので、CSSにコラム用の体裁を追加してみた。

　先ずはコラムが目次に追加される様にする。　目次作成のスクリプトは<h1>から<h6>までを対象としているけど、僕のブログでは<h1>から<h4>までしか使っていないので、<h5>をコラムタイトルとした。　そこで、<h5>の記事のフォントなどをCSSに定義する。

.xml内のCSS部分に追加

.entry-content h5{ /* コラム用 */
  font-size:14px;
  padding:0px 0 0px 0px;
  margin:0px 0;
}

暗モード用CSSに追加記述

　次に、外部CSSにコラム欄の体裁を記述する。　外部CSSなのは明モードと暗モードとで体裁が異なるからです。
/*   記事ページ、コラム：暗モード
-------------------------------------------- */
.main-outer{
  border-left:1px solid #222222;  /* DarkSet */
  border-right: 1px solid #222222; /* DarkSet */
}
.post-outer{
  box-shadow: -1px -1px 5px rgba(192,192,192, .4) !important;
}
.post-column-title{
  color:#fff !important;
  background-color: #222222 !important;
  font-weight: bold;
  left: 15px;
  padding: 2px 10px 0px;
  position: absolute;
  top: -14px;
  border-radius: 5px;
  border: 1px solid rgb(128, 128, 128);
  box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 5px;
}
.post-column{
  color:#fff !important;
  background-color: #444444 !important;
  position: relative;
  padding: 17px 10px 7px 10px;
  border-radius: 5px;
  border: 1px solid rgb(128, 128, 128);
  box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 5px;
}

明モード用CSSに追加記述

/*   記事ページ、コラム：明モード
-------------------------------------------- */
.main-outer{
  border-left:1px solid #e4e4e4;  /* LightSet */
  border-right: 1px solid #e4e4e4; /* LightSet */
}
.post-outer{
  box-shadow: 1px 1px 5px rgba(0,0,0, .4) !important;
}
.post-column-title{
  color:#000 !important;
  background-color: #e4e4e4 !important;
  font-weight: bold;
  left: 15px;
  padding: 2px 10px 0px;
  position: absolute;
  top: -14px;
  border-radius: 5px;
  border: 1px solid rgb(128, 128, 128);
  box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 5px;
}
.post-column{
  color:#000 !important;
  background-color: #d9d9d9 !important;
  position: relative;
  padding: 17px 10px 7px 10px;
  border-radius: 5px;
  border: 1px solid rgb(128, 128, 128);
  box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 5px;
}

投稿記事への記述例

<div class="post-column">
<span class="post-column-title"><h5>定価と現金正価</h5></span>
　昭和の時代、カメラは高額商品だったので、月賦（ローン）で購入する事が多かった。　カタログには現金正価（現金一括価格）と、手数料・金利を上乗せした定価（月賦価格）が記載されているのが一般的だった。　日本で月賦販売を初めて行ったのは理研光学工業（現リコー株式会社）で、1938年に通信販売による月賦販売を大々的に展開して広く普及させた。<br />　時は流れて1960年代になると、カタログなどに定価（月賦価格）や現金正価（現金一括価格）を記載して、小売店にその価格で販売させるのが一般的だった。　ところが、大型量販店による大幅な値引き販売が行われる様になると、1966年に公正取引委員会による「販売価格を拘束する行為」によりメーカーへ立ち入り調査が行われ、1970年頃からカタログなどに定価や現金正価などの表現は無くなり、拘束力のない「メーカー希望小売価格」へと移行していった。</div>
上記の記述が以下の様に表示されます。

定価と現金正価
 　昭和の時代、カメラは高額商品だったので、月賦（ローン）で購入する事が多かった。　カタログには現金正価（現金一括価格）と、手数料・金利を上乗せした定価（月賦価格）が記載されているのが一般的だった。　日本で月賦販売を初めて行ったのは理研光学工業（現リコー株式会社）で、1938年に通信販売による月賦販売を大々的に展開して広く普及させた。
　時は流れて1960年代になると、カタログなどに定価（月賦価格）や現金正価（現金一括価格）を記載して、小売店にその価格で販売させるのが一般的だった。　ところが、大型量販店による大幅な値引き販売が行われる様になると、1966年に公正取引委員会による「販売価格を拘束する行為」によりメーカーへ立ち入り調査が行われ、1970年頃からカタログなどに定価や現金正価などの表現は無くなり、拘束力のない「メーカー希望小売価格」へと移行していった。

コメントを投稿

Sponsored Link