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

さてさて、前回は「テーマの選択」と「h3タグ」の変更について紹介した。ちなみに「h3タグ」は、ブログの記事のタイトルに使われている。

今回は、「h5タグ」と「h6タグ」、それに「引用」の変更について紹介していこうと思う。
H5タグの変更
「変更」といっても大したことはやっていない。
「h3タグ」と同様にCSSの追加で、定義しなおしただけである。なお、「h5タグ」や「h6タグ」は他の場所では使われていないようなので、自由に変更して問題無いと思う。
.post-body h5 {                /*  記事の表題に使われるh5を定義 */
   font-size:105%;             /*  文字サイズを105%に設定 */
   position: relative;             
   padding: 1em 1em 1em 2em;        /*  枠の内側の余白設定  [上][右][下][左]  */
   margin: 15px 15px 15px -5px;         /*  枠の外側の余白設定 [上][右][下][左] */
   border: 1px solid #3498db;            /* 文字を線で囲む */
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   color:#3C333C;                        /*文字の色*/
}
h5::after {                    /*  記事の表題に使われるh5の装飾 */
   position: absolute;
   top: .5em;
   left: .5em;
   content: '';
   width: 15px;
   height: -webkit-calc(100% - 1em);
   height: calc(100% - 1em);
   background-color: #3498db;
   border-radius: 4px;
}
素人の僕が高説を垂れるような真似はしたくないので、最小限の説明に留めて置くが、この改変でブログの記事内で使う「h5タグ」の内容が書き換わっている。
といっても、枠で囲んで、先頭にマークを入れた程度。
「.post-body h5 { }」で枠を定義した後で、「h5::after {  }」で水色のマークを上書きしている。「::after」を使って、後から書くよと宣言しているんだね。

H6タグの変更
こちらはh5のデザインに合わせてある。
.post-body h6 {                /*  記事の表題に使われるh6を定義 */
   font-size:80%;              /*  文字サイズを80%に設定 */
   position: relative;
   padding: .75em 1em .75em 2em;        /*  枠の内側の余白設定  [上][右][下][左]  */
   margin: 15px 10px 15px 10px;           /*  枠の外側の余白設定  [上][右][下][左]*/
   border: 1px solid #3498db;        /* 文字を線で囲む */ 
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   color:#3C333C;                    /*文字の色*/
}
h6::after {                    /*  記事の表題に使われるh6の装飾 */
   position: absolute;
   top: .5em;
   left: .5em;
   content: '';
   width: 6px;
   height: -webkit-calc(100% - 1em);
   height: calc(100% - 1em);
   background-color: #3498db;
   border-radius: 4px;
}
まあ、h5とほぼ同じ仕様なので、説明の必要も無いだろう。

引用について
こちらもあまり説明するまでも無いと思ったが、新テーマは色々と引用に厳格になっている。

「明らかに引用しています」と、声を大にして主張する為か、テキストが中央寄せになっていることと、文字が大きくなっている。
でもこれ、引用として使い勝手が悪いんだよね。何しろ、これまで書いてきた記事の中で既に引用という形で利用しているので、デザインが大幅に変わってしまっては、意図しない形になって都合が悪い。

特に、こうしたプログラム系の内容を示したり、ニュース記事を引用したりすると、もはやメチャクチャである。流石に、過去の記事まで今から手直しというのも、手に余る。

よって、以前と同等の形にしたい。
/*--------------------------------------------------*/
/*-----          引用の装飾             ---------------------*/
/*--------------------------------------------------*/
.post blockquote {                           /*  引用 */
   padding:10px 10px 10px 10px;       /*  枠の内側の余白設定  [上][右][下][左]  */
   border-left:5px solid #8fbc8f;
   margin: 1em 20px;
   box-shadow:1px 2px 3px 3px rgba(0, 0, 0, 0.4) , inset 0 0 5px rgba(0, 0, 0, 0.1) ;  /*影を付ける*/
   background-color:#f3fff3;      /*  引用内の背景設定  */
   color:#004080;                 /*  文字の色を変更  */
   font-size: 100%;
   line-height: 1.1;
   text-align: left;
}
.select{
   padding-top:8px;
   padding-left: 5px;               /*文字の左にスペース*/
   font-size:10px;
   color:#999999;
   display: block;
}
こんな感じで調整した。

……引用部分はもう少しデザインをかえても良いかも?


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

コメント





このブログの人気の投稿

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

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