Top

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

カテゴリ:デザインやなんかのこと( 45 )

WordPressをカスタマイズする(3)人間の欲望は果てしない

うさオク写真館(仮)
(仮)とは言え、探し出した初期の写真をアップ。いくらか体裁が整ってきました。
すると今度は。。
a0026762_20233562.png

また、いろいろ気になったり、変えてみたくなったりするものですね。

(1) カスタムメニューの設置。
現在、ウィジェットで設置してる関係サイトへのリンクをここに持って来たいです。このブログみたいに。
え?このブログはHTMLとCSSを少々、勝手にいじっただけで出来てしまうんです。エキサイトのカスタマイズすごいよね!

これについては「カスタムメニューを設置する」という新しい記事がアップされているので、早速とりかかりたいと思います。WordPressテーマの作り方
ありがとうございます。なんか私の心が見えてるんじゃないでしょうか?(笑)

(2) プロフィールに画像入れたい。のですが、これもウィジェットだからどうしていいかわからない。ここに直接書き込んで+画像を入れるって面倒な気がする。HTMLでの画像表示、DreamWeaverのようにはいきません。。

(3) せっかく設置した検索窓。カテゴリ別とかキーワードでだーっと記事が並びます。機能に不足はございません。なので、もうちょっとおしゃれにしたいと思うのはゼイタクでしょうか。Google検索窓のようにカスタマイズできないものなのかなぁ。

ちなみにサイト紹介は「固定ページ」という機能を使っています。これはもっと増やせるはずだよね。。
といった具合に、次々と「ああしたい」「こうならいいのに」が出て来てしまい、人間の欲望というものは果てしないですね。

あ、もうひとつだけ(右京さんかよw)。フッター部分にお約束のCopyright入れてるのだけど、簡単なjavascriptを使って自動で年が更新されるようになってるのね。それが機能しない...javascriptの表示方法(?)みたいのがあるんだよね、きっと。
[PR]
by usa-log | 2013-02-26 20:36 | デザインやなんかのこと | Comments(0)

WordPressで投稿する。(2)写真がセンター来ないんですけど

昨日のつづきです。WordPressで投稿する。

私のいつものパターン、テキストは左寄せ、画像はセンター合わせでやってみます。何も指定しなければ左になりますから、テキストは問題ありません。余白はCSSで指定しています。

そして写真のアップ。
投稿→新規追加→メディアを追加→ドラッグ&ドロップ→投稿に挿入→メディアを編集

メディアの編集は投稿画面のビジュアルモードでもできるので、こちらでやってみます。
a0026762_13594297.png
まず写真をぎゅぎゅっと縮めてサムネイル表示にします。

a0026762_1463167.png
画像をセンターに指定します。また、特に指定がなくても元画像にリンクして大きな画像を見ることができます。別の場所に飛ばしたい時は指定できるようです。細かくできていますね。
a0026762_14102923.png


さらに詳細画像設定で、周囲の余白などなども決められます。ホントに細かいですね。
でもこれはCSSで一括設定することにして、
img{
padding : 8px ;
}
これで余白OK。

さ、公開ボタンをクリックですよ!
a0026762_14184786.jpg


・・・(゚∇゚ ;)エッ!? これってセンターじゃないよね?

なにがいけないんでしょう?
テキストを開いてみます。
a0026762_14284930.png

img にいきなり class="aligncenter"ってアリでしたっけ?←急に己のCSSスキルに激しい不安をおぼえる

みなさん、どうしてらっしゃるのでしょう?
探してみます。
タグにCSSのclass設定可能?
小粋空間:CSS でブログ本文の画像だけをセンタリングする
.post img {
display:block;
margin: 0 auto;
text-align: center;
}
とやってみますが...。
a0026762_14583465.png

写真がひとつだけならこの方法がベストだと思う。CSSの設定だけでできてしまうもの。そもそも3つも並べて中央寄せて...とか言ってる私が悪いのか?
どーしても真ん中という必然性もビミョ〜。ただ、個人的に「この並びが落ち着くなー」っていう程度の問題です。それに...できそうでできないってなんかやだ。。

手っ取り早く済ますには写真をdiv align="center"で囲ってしまえばいいんですけど。
a0026762_1511078.jpg
おーっ、センターきたよ!
...もうちょっとスマートな方法があればねぇ。

とさらに探す、探す。
不特定の数の横に並ぶブロック要素をセンタリングさせる
これ?
画像(サムネイル)サイズさえ揃えればできるのかなぁ。。
できれば、「装飾」の要素は外部のCSSだけ直せば変えられる...ようにしたい。

しかし。
今日のところは記事をアップしよう。そちらが優先。
[PR]
by usa-log | 2013-02-24 14:25 | デザインやなんかのこと | 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)

Neo Office日本語化。

Macでofficeを使う方に。

時々wordを使う程度ですが、その度に戸惑っております(笑)
用紙設定を「ヨコ」にしたいんですけど。
Neo Office
英語のせいかわからない...。

で、検索したら日本語化ができるというではないですか!さっそくやってみました。私の場合、Neo Officeのバージョンが1コ前だったので、そちらをまず3.2.1にアップデートました。
こちらの説明が簡単でわかりやすかったです。

a0026762_1035235.png
おおっ、日本語になりました!

しかし、用紙設定はどこ?書式設定...違うなぁ。
と、結局日本語にしてもわからず、またまた検索。書式→ページ(P) からでした。
a0026762_1035843.png
(P)といったらプリント、新規ファイルは(N)ってAdobeに洗脳されてる...(笑)
[PR]
by usa-log | 2013-02-06 10:43 | デザインやなんかのこと | Comments(0)

ショップのトップも春らしく

a0026762_22203578.jpg
まだまだ寒い...けど立春は過ぎてるんですもんね。

前回画像が切り替わるスクリプトを使った話を書きましたが、今日は背景画像を替えました。
こんな感じです。
実際に切り替わるのは中央の部分だけです。

・全体を動かすと写真のサイズが大きくなってしまう。
・スマホの画面に合わせる。

ってことを考えて300pxにしました。
背景画像は最初リピートするものを使ったのですが、もうちょっとインパクトがほしいなと思い新しく作りました。
自分で撮った写真を加工してるので何の問題もありません。仕事の時は画像販売サイトでちゃんと買うのですが、うちのショップにはもったいない(笑)

できたら今後、
・テキストを載せられたらいいな。
・スマホ対応で画像の縮小できたらいいな。
というあたりを勉強したいと思っています。

ちなみに背景画像は、以前から作っているのもがたくさんあります。ここも整理して追加するための、なにかいい仕組みはないものか。と思い、wordpressを触ったりしているのですが、なかなか。
   うさぎ王国 うさぎicons
[PR]
by usa-log | 2013-02-05 23:00 | デザインやなんかのこと | Comments(0)

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

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

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

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

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

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

お気に入りフォント♡

a0026762_1856964.jpg

可愛いでしょ?
ちょっとカード作ったり、アイコンにも使えます。お気に入りを7〜8種類インストールしてます。全部で100種類くらい詰まってたかな。
FLOP DESIGNのフォントです。
a0026762_1921459.gif

無料ダウンロードもあるのですが、商用利用はできないし仕事でちょっとこれいいなって時に困ります。フォント作る手間ひまを考えたら高くないと思うし。文字ひとつ、アウトラインデータ作る時間と労力ってかなりのものです。

いつか自分でも作ってみたいなぁ。アルファベットだけでもそーとー時間かかりそうだけど。。
今、エディタはどうなってるんだろう?
[PR]
by usa-log | 2013-02-01 19:26 | デザインやなんかのこと | Comments(0)

そして古い本が役に立ったりする。

CSS3の書籍ならいくらでもあるのですが、CSS2時代の本が必要になったり。

2005年の発行ですが基本のレイアウトが丁寧に解説されていて、これを見ながら作っていました。今でも引っ張りだして参照しています。さすがにAmazonでももうマーケットプレイスにしか出てないようですが。。
a0026762_9591094.jpg


レイアウトは極力基本的なものにしておけば、大崩れを防げるし、作ってる本人がわけわかんなくなったりしないです(笑)
お家の形は平凡だけど丈夫だし、カラーコーディネートにこだわって、お庭やインテリアも工夫すればおしゃれになるよ、って感じでしょうか。変化は背景や画像の方でつけるようにしています。
[PR]
by usa-log | 2013-02-01 10:42 | デザインやなんかのこと | 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)