bloggerの新テーマを採用して、ブログの仕様をちょこちょこ改変 その1

書いておかないと忘れてしまうので、仕様変更をしながらその様子を紹介していこう。
Contempo

新しいデザインを採用
ブログのデザインを変更するにあたって、blogger公式の「Contempo」と名付けられたテンプレートを採用する事にした。
理由は色々あるのだけれど、まずは新テンプレート4つの仕様が、レスポンシブデザインに対応していることが大きい。とはいえ、4種5色で合計20パターンのテンプレートの大半は、色々と不満の残る仕様なのだけれど、その辺りはもうちょっと何とかならなかったのかと。

じゃあ、サードパーティー製の海外で無料配布されている奴を使えば良いじゃ無いか?とも思ったんだけど、使ってみて「あ、これ、ダメだ」という。何がダメだったかというと、カスタマイズがやりにくく、日本語を使ったブログだとデザインが破綻するケースが結構あって、これを解消するのに力を注ぐくらいならば諦めた方が、という気分になったからである。
もともとCSSに詳しいわけじゃ無いし、自分の力でどうにかするのは無理。
であれば、多少使いにくくても公式の方で、弄った方が無難だと、そう思った次第。

……ダメだったら元に戻す!

テーマを変えるとレイアウトが大きく崩れる
取り敢えずやってみよう!という、方針で始めたものの、直ぐに色々な問題に直面する羽目になった。まず最初に、CSSの追加などのやり方がよく分からない事だ。
まあ、直接THMLを弄ればイイや、と思っていたのだけれど、これまでのテンプレートとは並びが大きく異なっていて、何処に何があるのか?がまず分からなかった。
結果から言うと、「テーマ>カスタマイズ>上級者向け>CSSを追加」というところで、これまで使っていたCSSを貼り付けることで何とか解決。
この流れでCSSを追加すると、HTMLの3230行辺りから追加される仕様になっている模様。ただまあ、「これまで使っていたヤツを貼れば良いや」と言う訳には行かなかったようで、色々と試行錯誤する事になった。
タイトルの表示を調整
でまあ、h3辺りの仕様から弄ることに。
H3タグ
ソースはこちら。
h3.post-title {               /*  記事の表題に使われるh3を定義 */
 font-size: 250%;            /*  文字サイズを250%に  */
  padding: 10px 10px 5px;     /*  枠の内側の余白設定   */
  position: relative;
  border-left: 1px solid #3498db;      /*  枠線:左 水色  */
  border-bottom: 10px solid #ccc;      /*  枠線:下 灰色  */
}
h3.post-title::after {           /*  記事の表題に使われるh3の装飾 */
  position: absolute;
  bottom: -10px;
  left: 0;
  z-index: 2;                  /*  ワンポイントの上書き指定   */
  content: '';
  width: 20%;
  height: 10px;                /*  枠線:下 水色上書き  */
  background-color: #3498db;   /*  枠線:下 色設定(水色)  */
}
どこかのCSSの内容を少し弄っただけなのだが、これを採用。
単純に、L字型の枠をCSSで定義して、ワンポイントに色を変えた単純なものだが、割と気に入っている。

ただ……、これ、色々と無駄が多いような……。CSSの知識が無いので、間違っているのかいないのか。要調査だね。


ランキングへの応援クリックよろしく!
にほんブログ村 その他生活ブログへ

コメント





このブログの人気の投稿

ハンドブレンダーをオススメ

エーハイム2213、呼び水でホースを口で吸うのが嫌な人の為に