Top

usa*log 晴れ。ときどき、うさぎ王国

タグ:CSS ( 11 ) タグの人気記事

ささやかなCSS更新

右側にカレンダーを表示させてみました。
本体をいじっているので、デフォルトのカレンダーデザインがぜんぜん合わなくて、でも直すのめんどーで隠してたんです。(笑)
自分が書いたものでないCSSを触るのってついつい億劫になってしまいます。
どうしても自分ちは後回し、っていうのもあるし。(´・×・`)

サイドバーに合わせてやっとスッキリしました!


[PR]
by usa-log | 2017-02-12 19:40 | デザインやなんかのこと | Comments(0)

スクロールすると出てくる「トップへ戻る」ボタンなど

ちょっと長いページを見ていると
ずーっと下までスクロールした時、
a0026762_18185405.jpg
TOPに戻るボタンがあると便利です。

a0026762_18154893.jpg
ねっ。すぐにメニューから移動できます。
特にレスポンシブのモバイル表示では
手動でスクロールして戻るの面倒じゃないですか。

と思ってうちのショップにも付けました。
a0026762_18271480.jpg
それともうひとつ。
気になるページから溢れてしまうサイズのバナー。
別画像を用意することなくページにフィットさせるように
がんばってみました。


p.resizeimage img {
width:100%;
max-width: 560px;
height: auto;
}

max-width: 100%; にするとブラウザの幅いっぱいに表示されるので、
背景画像ならいいのですが、バナーなど左右にマージンとってたりする場合は
max-width: 画像サイズpx; に指定したほうがきれいです。
画像以上のサイズに表示されるとボケで見えてしまいます。



無添加・完熟十郎梅干し 曽我の里農園「和(なごみ)」

お客様のサイトに実装していい感じになったので
自分ちもついでに・・・ということで。
ショップのページが見やすくなっていたらうれしいです。
まだまだ、直したいところいっぱいあるのですけど。

ボタンをうさぎさんにしたら可愛いなとか。
とりあえず半透明にはしてみましたが。
透明効果好きで、あちこち使ってます。

・・・自分のHPは「実験」か「後回し」になってしまいます。
しょうがないですね;・×・)すんません


2017年うさぎ王国卓上カレンダー
まだまだ在庫たくさんあります!(*・×・)ノ yoropiku


今回、こちらの皆様のサイトをいろいろ参考にさせていただきました。
ありがとうございます!

一定量スクロールすると表示する「ページトップ」ボタンの実装方法

jQueryでスクロールすると表示する系いろいろ

ウインドウ幅に合わせて画像サイズを変化させる方法

CSS3 要素を透明に出来る Opacity と RGBa の使い方





[PR]
by usa-log | 2016-12-18 23:33 | デザインやなんかのこと | Comments(0)

WordPressをカスタマイズする(8-2) プラグインTinyMCE Advancedを追加。

だって便利そうだし♡

WordPressをカスタマイズする(8-1) エディタをなんとかしたい。 のつづき

(2)
フォントサイズ変えたり、色変えたりくらいは、その場でちゃちゃっとやってしまいたい。

こちらについてはプラグインがたくさん出ているようです。よくわからないので、使ってる人が多くて情報量の多いのがいいんじゃないかとTinyMCE Advancedを設定することにしました。

サイトからダウンロードしなくても、ダッシュボード→プラグイン→新規追加→TinyMCE Advancedを検索→いますぐインストール→有効化 で簡単に。
a0026762_23595552.png
ボタンがたくさんありすぎてとても使いこなせそうにありません。後から増やせばいいので、最低限使いたいものを選びました。 日本語化はしませんでした。たぶん…なんとなく見ればわかるっていうか…アイコン、Wordと一緒っぽくない?

さっそく文字色を変えてみましょう。

a0026762_021347.png
限定色ってなによ?(笑)
a0026762_035319.png

次はサイズ。

a0026762_054150.png


特殊文字もω いらないか(笑)♡とか普通にでますし。





区切り線は便利そうですね。サイズを指定する時はやっぱり手書きになるみたい。


おおー、インデントはうれしい!

※blockquoteをインデント代わりに使っちゃいけないんだそうです。あくまで「引用」部分の指定ということで。(たとえば読み上げの時におかしなことになる)

a0026762_065375.png
CSSの編集画面はびみょ〜かな。

だいぶ便利になりました。
さて、問題の画像センター合わせは?
a0026762_0133099.png
編集画面上ではいい感じです。
a0026762_019787.png
やっぱりね。。(´・ω・`)
[PR]
by usa-log | 2013-04-06 00:15 | デザインやなんかのこと | Comments(0)

WordPressをカスタマイズする(8-1) エディタをなんとかしたい。

DreamWeaver歴が長いせいだと思うんですが、やっぱり書きにくいんです。

WordPressの編集画面(投稿画面)は、見た目で書けるビジュアルモードとタグを記述しながら書くテキストモードがあります。

(1)
テキストモードは当然ですが、ビジュアルモードが実際の画面とだいぶ違います。ブログって多かれ少なかれそういうものですが。。でもわざわざオリジナル作ってるんですもん。ねぇ?もちろん、保存してサイトを見れば、自分が指定したCSSのフォント、デザインで表示されます。

a0026762_23374674.png
ビジュアルモード...ですが、素っ気ない編集画面なのです。しかもデフォルトフォントが明朝だし。。ちょっと文字の色を変えるだけでも
a0026762_2338882.png
いちいちテキストモードで書くのもめんどいですよね。
a0026762_23381945.png
出来上がりを想像するのは難しい感じ。

(2)
フォントサイズ変えたり、色変えたりくらいは、その場でちゃちゃっとやってしまいたい。
一般的なブログはそこらへんはフォローされていますよね。そう、まだ一般的なブログ以下の出来なのですね。(´・ω・`)

そこらへん、なんとかならないものかと探しました。
WEBOPIXEL様。
WordPressのビジュアルエディタをカスタマイズする

こ れ だ !
テンプレートに使っているCSSをそのまま編集画面に持ってこれたら、気持ちよく書けそうです。

「functions.php」に以下を記述します。
add_editor_style('editor-style.css');


カスタムメニュー、カスタムヘッダーに続いて、またしてもfunctions.php。働き者ですね。

editor-style.cssにはテンプレートのCSSの、フォント指定の部分だけ記述しておきます。

body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 90%;
color: #836460;
}

あら不思議!←ここで不思議がってちゃいけないんだけどねw
a0026762_2346756.png


(1)は解決しました。同じ書体、色で表示されるだけでなんだかホッとします。
少しはイメージ湧いて来る感じですが、まだまだ不便は変わりません。

(つづきます)
[PR]
by usa-log | 2013-04-05 23:46 | デザインやなんかのこと | Comments(0)

IE6 それを捨てるなんてとんでもない!(2)

そりゃぁ、こんなノロマだってデザイナーのはしくれ。
できればクールでスタイリッシュなHPたくさん作ってブイブイ言わしてみたい...と少しは思うこともあります(笑)
デザイナー向けの情報サイトやIT関係の会社だったら、ほとんどの来訪者が最新ブラウザで見ているのでしょうね。。しかし、ここは私の現実を見なければ。

ある機関の調査で0.0何%のはずだったIE6の存在に振り回されたり。
「Flash動画はiOSで表示されないので変えた方がよくありませんか?」という説得に何ヶ月も時間かけたり。

ちなみにモバイルユーザーは全体の1/4でした。iOSとアンドロイド、ちょうど半々といったところ。
比較的年齢層高いと言われるサイトですが、モバイルの波はかなりの速度で押し寄せてました。いきなり動画が空白では見る気なくすのは当然。IE6,7より確実に多数派になったiOS派のニーズにお答えしないわけにはいきませんよね。

私は昔からMacユーザーなので、ヘンテコな目に遭うのは慣れているし、こういう仕事だから「あー、Macで検証してないねぇw」なんて笑って眺めています。いや、いちいち悔しがってたらMacなんか使ってられませんって!(笑)
でも一般のお客さんには通用するはずがなく、「お宅のホームページなんかおかしいよ?」ということになります。

ブラウザはPC買えばもれなく最新版が付いてきます。逆に言うと、PC買い替えない限りバージョンアップしない方もいます。当時は最新だったブラウザがすっかり骨董品になってる...ことを知らないのかもしれません。またOSそのものが古いのでインストールできるブラウザが限られる場合もあります。

だいいち、「初心者でもご高齢の人でも見やすく、わかりやすく頼むよ」という指示があります。これ、大前提。

...なーんていうことを考えると、クールでスタイリッシュとか言ってる場合じゃなくなります。
営利目的である限りはできるだけ多くの方に見てもらわなくては!
いや、ちょっと待ってよ。営利じゃなくてボランティア活動だとしてもそうじゃない?できるだけ多くの人の支持を得なくては目的が果たせないのでは?

あ、でも自分の趣味のサイトなら。
いやいやそんなことはないなぁ。あんな零細うさぎアクセサリーショップだって、できたら多くのうさぎ雑貨好きに見てほしい。そんな趣味趣向の人が大量にいるとはとても思えないけど、でもやっぱり。。。いや滅多にいないからこそ(笑)、ブラウザの都合で見づらいは避けたい。
だからあっちもなるべくシンプルに。でもなんとかおしゃれに見えるように工夫している。
a0026762_1723512.jpg


やっぱりWEBサイトって見てもらってナンボじゃない?
[PR]
by usa-log | 2013-02-20 17:17 | デザインやなんかのこと | Comments(0)

IE6 それを捨てるなんてとんでもない!

IEはどこまで対応すべきなのか?と今夜も考える。

もうIE6はさすがに...と思った直後のこと。

仕事で維持管理更新しているサイトのアクセス解析の結果を見てボーゼン。
IEユーザーの中、の7と6で合計15%というまさかの数字。(半数が9、続いて8)
全ブラウザの中で、IEの比率が62%、その中の15%は9%ちょっと。
IEの6は4~5%という計算。(ざっくりですが)

この数字は少ないのか?
100人中4~5人くらいしょうがないでしょ?って意見もあると思う。
でも1万人なら?10万人なら?
日々数千人は見ているはずなので、毎日100人単位の人が見え方に不満を持って帰っていく...ことになります。実際には見えていたとしても、なんかずれてたりするだけで「見る気をなくす」はず。
なので何がなんでも見えるように手を尽くしていました。

『IE6 それを捨てるなんてとんでもない!』

※あくまで私が関わっているひとつのサイトでの結果です。
[PR]
by usa-log | 2013-02-20 16:34 | デザインやなんかのこと | Comments(0)

ちょっと大きめの背景画像を付けてみました。

しばらくはこれでいこうと。キリがない(笑)

画像の上を横切るラインを非表示にしました。
DIV.TOPLINE のところ。

背景画像は透過PNGを使えば、colorを変えるだけで模様替えOKになるのですが、ある程度以上の大きさになると重たくなってしまう。サクサクっと気持ちよく見えるためには100K以上のサイズをアップできなくなってるというエキサイトの方針は正解だと思いました。確か投稿画像は自動的に縮小されるんじゃありませんか?
先日、ちょっとwordpressいじっていて、フリーで配布されてるテーマをあれこれ試していた時のこと。おっ、可愛いなと思ったテーマが激重たい。これじゃノートPCなどで外から見ていたとしたら...間違いなく閉じられちゃいますよねー。

あとはリンクなどテキスト色の変更。背景とカラーを整えるだけでずいぶん変わると思います。ホントは大きな画像ある別のスキンをベースにしようかとも思ったのですが、時間かかりそうだし。
自分ちは後まわしにしないとね。

いよいよ始まりました。曽我別所梅まつり観光協会公式ホームページ
梅の花は香りがとってもいいです。(さすがはバラ科)
[PR]
by usa-log | 2013-02-05 14:25 | デザインやなんかのこと | Comments(0)

ブログスキンをいじってみたよ。

しばらく替えてなかったので、ちょっとピンク色に♡

勝手に触っていいところと、変えられないところ、いろいろあって面倒ではありますが、勉強になりますね。
border-radius使えるのかな?と思って試したみたらイケました!

(エキサイト提供スキン 2列のロマンフラワー)というのを元にしています。

DIV#LEFT {
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 25PX;
PADDING : 15PX;
BACKGROUND : #FFFFFF; 
BORDER : 2PX #f780bb SOLID; ←好みで色とか太さとか
TEXT-ALIGN : LEFT;

-webkit-border-radius: 12px; ←足すのはここから
-moz-border-radius: 12px; ←この数値で角丸サイズが決まる
border-radius: 12px;
}

DIV.PROFILE {
WIDTH : 190PX;
BACKGROUND : #ffffff;
BORDER-top : 2PX #f780bb SOLID;
BORDER-LEFT : 2PX #f780bb SOLID;
BORDER-RIGHT : 2PX #f780bb SOLID;
BORDER-BOTTOM : 2PX #f780bb SOLID;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 20PX;
PADDING-BOTTOM : 6PX;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

DIV.MN {
WIDTH : 190PX;
BACKGROUND : #ffffff;
BORDER-TOP : 2PX #f780bb SOLID;
BORDER-LEFT : 2PX #f780bb SOLID;
BORDER-RIGHT : 2PX #f780bb SOLID;
BORDER-BOTTOM : 2PX #f780bb SOLID;
LINE-HEIGHT : 150%;
MARGIN : 20PX 0PX;
PADDING-BOTTOM : 30PX;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

これだとプロフィールのてっぺんの画像が残ってしまうので消します。すると段違いになってしまうので、後に空の透過gif(png)を入れて強制的に処理しています。

DIV.PROFILE_HEAD {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/画像フォルダ/spacer.gif); ←空のgifを作ってアップロード
WIDTH : 192PX;
HEIGHT : 15PX; 
}

書き換えること自体よりも、どの行がなんなのか...探すのが一番面倒だったり(いやいや、wordpressに比べれば少ない行数w)。トップページをダウンロードして手元のエディタで開きつつ、ひとついじってはプレビューという...HTMLのhead部分に書き出されてる部分が自分用CSSなので、ダイレクトに編集するよりはずっと安全です。他のデータは絶対パスになってるから勝手に読み込みに行ってくれるので。

可愛いスキン探しちゃった方がぜったい速い(笑)これはもう職業的修行みたいなもんですね。

それとタイトルの頭につく飾り(?)がいつの間にか画像データを消してしまったらしく、無地になっていたのを復活させました。

h2.POST_TTL {
FONT-SIZE : small; 
margin : 0;
       BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/任意の画像をアップロード);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING : 0PX 0PX 0PX 20PX;   ←画像サイズによって変動
}

やっぱ、こういうのどこかにまとめておきたいな。


それと、次はスマホ用スキンのカスタマイズも望んじゃいます。種類まだまだ少ないし、レイアウトはいじれなくていいから、カラー、背景、ボタンくらいは作ってみたいですよね。
[PR]
by usa-log | 2013-02-04 01:36 | うさぎ王国 | Comments(0)

IEはどこまで対応すべきなのか?と今夜も考える。

IE6のことはもう忘れることにしました。

9は何の問題もなし。8はなんとかなるでしょう。7でも案外だいじょぶです。いろんなPCブラウザに対応して、その上同じページがスマホでも見えるようにしてるんです。多少のことはしょーがないでしょ。基本、メニューが見えてボタンが押せればいい、というのが最低ラインをクリアだよ!な〜んて思ったのですが、見えるように作れば意外なくらい崩れないものみたいです。まぁ、さほど難しいことや凝った技を使ってないってことですが(笑)

せっかく作るならなるべく多くの人に見てもらいたいし、できれば心地よく見てほしいと思って作っています。わかりやすいとか便利で気が利いてるとか...できれば。

スマホは最新ブラウザなので美しいです。実際以上にキレイに見えてしまって、嬉しくなります。
a0026762_1253425.jpg


css3のプロパティで好んで使ってるのがborder-radius(角丸)と(RGBa)透過。背景を透過させたりするとほんのりベールがかかったような効果があって気に入ってます。IE7,8では対応してないのですが、背景が透けて見えないだけで問題はないので使っています。透過しない場合でもちゃんと文字が読めて、見た目が悪くない程度になるならいいってことにしています。

そして忘れちゃならないのがjQuery。まだまだほんの初心者ですが、こんな初心者にもそれなりの見た目のものが作れちゃうのがスゴいところ。
この画像の切り替わっていくのは簡単だけどいい感じです。
Black Flag様のサイトにお世話になりました。こんな技がどんどん作られているなんてほんとに感動だぁー!
ありがとうございます!

せっかくステキな技があるのに使わないのはもったいないじゃありませんか。開発者の皆様に申し訳ないじゃありませんか。できれば世界はきれいな方がいい。楽しいほうがいいに決まってる。Webだってね。

ってことで、IE7,8でも致命的不具合が出ない程度に、cssもjQueryもますます使っていきたいと思うのです。


※コピペを貼付けておけば便利かと思うのですが、このブログはscriptは一切受け付けてくれなかったんですよね。。そっちも考えないといけないのか。
[PR]
by usa-log | 2013-02-01 01:44 | デザインやなんかのこと | Comments(0)

twitterのウィジェット(旧タイプ)のh3

サイトにちっちゃい窓でtweetを埋め込むアレの話です。

まず最初にお断りしておきますが、すでにもっと新しいウィジェット「埋め込みタイムライン」が提供されています。
twitter→アカウント→プロフィールを編集→ウィジェットで簡単にタグが作成されます。
が。なんで使わないのかと言うとカラーの自由度が少なくてさびしい。。(白と黒しかないw)


先日、お客様のサイトに埋め込みを頼まれて、旧タイプをサイドバーに設置していました。背景色などを変更できるので、サイトに自然に溶け込む感じにできます。

その時の「へ?」ってなった話。
うちのサイトで再現してみます。(タグの話になっちゃうからつまんないかも...自分用に覚え書きです)

a0026762_11531858.jpg
むむっ?名前の背後のヘンな模様はなにっ!
しかもミョ〜な間があいている。
不審に思ってソースを開いてみると、
a0026762_11542077.jpg

名前の前後が h3 タグで囲まれています。

a0026762_1155537.jpg
サイト内ではすでに h3 タグを使用中。cssは後から指定したもの優先なので、 head 内で指定した背景画像まで、ウィジェットのcssが引っ張ってきちゃったもよう。

h3 {
font-size: 110%;
color: #7E4049;
font-weight: normal;
line-height: 260%;
padding-left: 100px;
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}

文字指定、背景画像指定、さらに写真の回り込みまで解除してるせいで間が空いてしまいます。文字はウィジェットの指定になっているようです。

リンクしているcssをいじってしまうと、他のhtmlファイルまで変更しなくてはなりません。仕方ないのでトップページのみ、 h3 にclass usagi を指定することにします。

h3 {
font-size: 110%;
color: #7E4049;
background-image: none;
line-height: 260%;
padding-left: 100px;
font-weight: normal;
clear: none;
}
一度、背景画像をナシにして回り込み解除もナシ。

.usagi {
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}
あらためて、classで指定し直し。

これで
a0026762_12185253.jpg

きれいになりました!


早く「埋め込みタイムライン」のカスタマイズができるようになるといいですね。


ということを書いていたら、タグに使う< >を使用するとそのままタグとして認識されてしまい、h3という文字を表示したいのに、以後の文章がブログが指定しているh3の太字で表示されてしまってわけわかんないことに。。。(^^;
[PR]
by usa-log | 2012-11-15 12:25 | デザインやなんかのこと | Comments(0)