プロフィール

でわさん

Author:でわさん
進む老眼、失われゆく潤い、忍び寄る更年期・・・そんな現実から逃れられなくなってきた、在宅フリーのDTPデザイナー。
掲載の商品・サービスには、アフィリエイトプログラムを利用しているものがございます。

dewa3teiをフォローしましょう

Twitterボタン

ピックアップ記事

101123スゴ衣

ワコール「スゴ衣」


101123足の冷えない

あったか衣料&雑貨


101123あったか

冷気対策グッズ


101123キャメル

キャメル敷布団


フォーマル80

フォーマルファッション


ブレンダー

貝印「マルチブレンダー」


101123よなよな

よなよなエール


101123青鬼

インドの青鬼


080517小江戸

COEDOビール


080517いか

ぞっこんイカ


080623ウッド

記憶スケッチ対決


0807自転車

ベルメゾンの折りたたみ自転車


080517コンビニ

ブログ全記事表示

ブログ内検索

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

5回目のテンプレート変更

1年半ほど使っていたテンプレートを変更したんだが・・・変更前のピクチャを保存するの忘れた。

HTML/CSSのデータは残っているけれど、広告の設定とかを新しいテンプレート用に変えてしまったし・・・ま、いいや。



今回お借りしたテンプレートは、とにかくシンプル。

こういう、引き算でデザインされた物が大好きなんである。

それでは(コホン)早速カスタマイズを・・・。



カスタマイズ第一弾は、文字の色と大きさ、リンク設定など。

元々のデザインは、文字小さめ&淡いグレーでお洒落なんだが、加齢で読み辛いので(とほほ)、全体的に文字を大きく! 濃く!



リンクは、カーソルを載せた時だけ色が変わる設定だったのを、もっと分かりやすくする事に。

デザイン的には、リンクの下線は外したいんだが、最近「やっぱ下線って必要かも・・・」と思うようになってきた。

しかし入れてみると、やっぱり鬱陶しい・・・でも、あった方が。

そんな葛藤の末、点線を入れるという事で落ち着いた。



リンクの下線を点線にする方法は、「WEB工房きくちゃん」さんの「リンクの下線をいじる~CSSテクニック~」を参考にした。

が、全てのリンクに下線を入れる指定をすると、入れたくない所にも入るのであった。

例えば、記事タイトルに下線が付くと、デザイン処理で入れてある薄い罫線と重なってしまう・・・。



下線を入れたいのは、記事本文とサイドバーだけ。

あれこれやった結果、CSSの記事本文とサイドバーのクラスセレクタ(←覚えたて)に下線の指定を追加して、なんとか希望通りに(やれやれ)。

だがしかし、サイドバーにAmazonの広告を入れたら、Amazonnのロゴとボタンの下にも下線が・・・。



色々やったので混乱しているんだが、たぶんこれで解決したはず。

「公式プラグイン/フリーエリア」を追加

「プラグインの改造」でHTMLを編集

「div class="plugin-freearea" &align」の「"plugin-freearea"」がフリーエリア共通のクラス名なので、これを別のクラス名に変更

CSSにクラスセレクタを追加して「text-decoration:none」に

・・・他に良い方法がありそうな気はするが、とりあえず。



一番下のフッターの表示が崩れているのは、何をやってもダメだ。

同じ作者の、他のテンプレートでも崩れているのがあるので、環境の問題なのかな。



カスタマイズ第二弾は、記事下の「TOP」や「HOME」をオレンジ色のベタヌキにして、見やすくしようと思った。

が、画像が小さ過ぎて変更できないので、やめた。



このところのHTML/CSSトレーニングで、多少理解が深まったはずなんだが・・・「この単語、見た事あるけど、なんだっけ?」の連続。

手前味噌だが、「ホームページ開設をめざすHTML/CSS初心者のブログ」で作った「既出プロパティ」一覧表が随分役に立った。



にしても・・・CSSは奥が深い。

Web上で思い通りにデザインするって、大変なのでは。



<10.11.21からのテンプレート>
101122テンプレ

<ブログテンプレートの関連記事>
テンプレート変遷
続きを読んでたたむ設定

COMMENT

名前
メールアドレス
URL
コメント本文
パスワード  *
非公開コメント (管理者にだけ表示)

忘れません

to remember 125×125
Photo : Aerial of tsunami damage near Sendai, Japan. / Official U.S. Navy Imagery

スポンサードリンク

メールフォーム

名前
メールアドレス
件名
本文

ブログランキング

QRコード

QR

FC2カウンター


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。