今回ウェブリブログのリニューアルが行われた際、レイアウトが大幅に変わってしまったので気になるところが出てきた。トップ画像に自分のものを使いたかったのと、ブログタイトルが画像中央に表示されるのは嫌なのでCSS編集をやってみた。なお私はHTMLには殆どシロートなのでおかしなことをやっているかもしれない。デザインテンプレートに変更があった場合には、以下の内容は意味がなくなる恐れがある。
デザイン→デザイン切り替え/CSS編集
デザインテンプレートは葉に水滴(記事概要両サイド)を選択。
★トップ画像の入れ替え
葉に水滴の画像の上で右クリックして保存、情報より縦横のピクセルを確認。800×100ピクセルだった。
自分の画像からスクリーンのキャプチャーをサイズ固定で切り出す。適当な名前でjpg保存。PicPickというソフトを使った。
ファイルマネージャで画像をアップロード、HTMLをコピーしメモ帳などに貼り付け、画像のURLを再度コピー。
15行(テンプレート毎に違う)
葉に水滴の画像のURLをなぞって自分の画像のURLを上書き。
★ブログタイトルを左上に
429,432行(テンプレート毎に違う)
justify-content: center; を justify-content: flex-start; に変更。
align-items: center; を align-items: start; に変更。
★ブログタイトルの文字サイズを大きく
436行(テンプレート毎に違う)
font-size: 1.6rem; を font-size: 2.0rem; に変更。
★ブログタイトルの色変更
440行(テンプレート毎に違う)
.Header__inner の color: #FFF; を color: #FF0; に変更(白→黄)。
色は「HTMLカラーコード」で検索する(テンプレートによって3桁と6桁がある)。
