OJerBlog衣替え

…………というほどではないが、咳がなかなかおさまらず、浜風もままならないので、時間つぶしにブログのデザインを少々いじった。

(1)日付順にナビする青地白矢印とGoogle検索ボックスの位置を他へ移動し、それらがあった行を削除。
(2)矢印は黄色のナビ帯へ移動。
(3)検索ボックスは左の黒帯の最後に移動。
(4)黄色のナビ帯は、フォントを本文に合わせMeirioに変更。同時に項目の順序も一部変更。
 いままでナビの項目は<table>の行にはめ込んでいたが、これを番号なしリスト<ul>の横並び(display: inline)に変えた。見た目はほとんど変わらない。
(5)黒帯の下部の「旧ブログ」の目次エントリーを削除して、Sidewalkへ完全移行。

 左側 旧デザイン          右側 新デザイン
キャプチャキャプチャ2
 黄色帯と本文の間の1行を削除     ナビ矢印は黄色帯へ

キャプチャ3キャプチャ4
 旧ブログの目次を削除→Sidewalkへ移管  検索ボックスを黒帯下部へ 

昨日いろいろいじっていたので、途中でブログを覗いた人は中途半端なレイアウトで表示されたかもしれない。ご容赦。

一番時間がかかったのがGoogleの検索ボックスの移動だった。ボックスは、テキストの入力欄、googleロゴ、検索ボタンの3つのパーツでできているが、それら相互の位置がなかなかすっきり収まらずに苦労した。検索ボックスのCSSはGoogleのサイトからダウンロードできるので、その中身を見て対処した。

こっちが理解していないで右往左往したのは、テキスト欄の長さだった。コードのなかにsizeの項目があるのだが、これは入力文字のサイズ、つまり文字数であり、これを変えるとテキスト欄の長さも変わる。しかし、同じ文字数でもIEとChromeやFirefoxとでは表示される欄の長さが違ってしまう(多分、ブラウザによって文字の基本サイズが違うのだろうとは、あとで気づいた)。結局、長さは通常の属性と同じwidthで切ればよいとわかり、一件落着。どのブラウザも同じ長さに表示できた。

まあ、結果は、なにを苦労したんだか、という程度であるが。ははは。

コメントの投稿

非公開コメント

OJer

清見寺 五百羅漢

OJer

OJerBlog更新:2016/11/30

西蓮寺大銀杏黄葉2016

最新の記事
過去の記事

全記事のリンク

ご近所ブログ
最新のコメント
カテゴリ
検索フォーム