Top

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

タグ:デザイン ( 49 ) タグの人気記事

WordPressをカスタマイズする(4)カスタムメニューを設置する

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

「カスタムメニューを設置する」新しい記事がアップされてたので、早速やってみました。WordPressテーマの作り方
Tae様、今回も大変お世話になりました。ありがとうございました。
a0026762_13385594.png
こちら 合わせてこのブログのカスタムメニューも同じデザインにしました。

設置の手順カスタムメニューを設置する

functions.php
まず、functions.phpの中にメニューを有効化するコードというのを書き加えます。自分で書くことはできないけど意味はわかったような気がする(?)
ダッシュボードを見ると、以前にあった「現在のテーマはメニューに対応していませんが...」が消えています。このメニューに対応してませんが...のままだとウィジェット利用になるわけです。サイドバーに表示されるのでちょっと残念なんですよね。

メニュー項目の設定
メニューはダッシュボードから設定できるので、簡単。項目が増えたり変わったりするたびにタグをいじる必要がないんですね。すごいなぁ。

header.php
次はheader.phpにメニュー出力関数を挿入。うーん、これもわかったような...いやあんまりわかってないけど(笑)とにかくこうすれば見える、ということです!そこが大事。
サイト出力して、該当するHTMLを確認します。これも確認しました。ちゃんとリンクされてます。
a0026762_13114261.png


CSSあれこれ
最初の頃の「HTMLからWPテーマを作成する」で設定はしてたので、手直しだけです。これが直す前。
a0026762_13145149.png
あとでやるからいいや的な雰囲気漂ってます。←できなかっただけ(笑)

メニュー部分のCSS。リスト表示になっています。
a0026762_13481094.png

floatがrightになっています。これは左を空けて、小さめのブラウザでもうさリョーシカさんの顔が見えるようにするため...なんですけど。

このfloat:rightはなかなか曲者で、align rightのような右寄せではなくて、右から順に表示...みたいなことになります。なのでメニューの順番を逆にしないとなりません。1番上に書いたものがいちばん右、2番目が右から2番目...となります。
以前、これをboxに入れた画像でやって、最新のものが左に来なくて気がつきました。逆から更新すればいいのですけど、面倒で自分でわからなくなるのでやめましたが。

それとline-height。指定した高さの中におさめるために。こういう細かいところまでキチっとできていてきれいなCSSだなぁと。自分の絵を見せるための大雑把なCSSを恥じ入ったり。。
ここの26pxというのは、メニューのheightが30pxなので、上下のボーダー分を引いた数字です。そうしないと下が切れちゃう。

メディアクエリ
a0026762_14444742.png
画像はiPhoneのもの。メディアクエリもまだ未対応ですが、横にすればなんとか見えていますね。タブレットなら問題なさそうです。
こういったサイトでメディアクエリ対応しても見やすくないかも。アプリからこのブログ見てるけど、行ったり来たりがめんどうだし、それで画像一覧ていうのを作って、画像から記事をみつけられるようにしたのかな?いずれにしてもCSSの振り分けだけじゃちょっと。。

サイドバーの背景色透過。
a0026762_13573183.png
あと、どうでもいいかもしれないけど、サイドバーは背景色(#FFFFFF)を透過させて、背景画像はフィックス(iPhoneでは有効でない)。スクロールすると背景のお花がちょこっと見えたりするようになっています。

ファビコン
a0026762_14565159.png
さらにどうでもいいんですけど...こうやって眺めると、やっぱりファビコンも設置したい。。
[PR]
by usa-log | 2013-02-28 14:13 | デザインやなんかのこと | Comments(0)

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で投稿する。(3) テキストの回り込みはどうするのかな?

a0026762_19394048.png

こんなタテ長画像をアップしたのですが、なんかカッコ悪いですね。(笑)
テキストの回り込みをしたくなります。この場合はテキストモードにしてimgタグの中に、align="left"を書き足せばOK。

a0026762_19342177.png

こっちの方がいいでしょ?
[PR]
by usa-log | 2013-02-25 19:53 | 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)

WordPressで投稿する(1)

せっかくインストールしてカスタマイズしたWordPress。早速投稿しなくちゃと思うのだけど。
WordPressをカスタマイズする(2)うさオク写真館(仮)

実はけっこうめんどくさい...と思ってしまった。まず、投稿画面と実際がかなり違う。見た目でサクサク作って来たので、これはかなり戸惑う。エキサイトの投稿画面はよくできてるよね、親切だよね、って思う。
たとえば写真をセンター合わせにするにもなんかびみょ~。文章まで真ん中きちゃったり、それを直すと写真も左寄せ(笑)結局、タグモードにして書き直したり。
2枚の写真を並べるとべったりくっついちゃうから、詳細設定で間を空けるとか。もちろん、cssのclass photoかなんかで指定すればいいんだけど。いや、それじゃクイック投稿にならないしw

思うに、ある程度決まった形式の記事に対しては便利で素早く投稿できるんじゃないかと思う。
だから今回みたいに、毎回写真のサイズが変わったりするとやっかいなのかも。その時その時で、いちばんいいと思う見せ方してきたけど、そこらへんはもうちょっとシステマチックに考え直さないと、なのかなぁ。

ほんっと、身も蓋もないのだけど、Dream Weaverで普通に作ったほうがずっと早い...んだよねぇ。慣れちゃってるからなー。しかも、過去のまとめみたいなつもりなので、投稿日時とかいらないし(笑)また慣れないphpビクビクしていじらなきゃならない。あれは素晴らしいと思うけど、画像1コ入れるにもたいへんなことになる。(分かる人には簡単なのだろうけど)そんなモン、アイコンをクリックすればどこへでも好きな場所に貼付けられると信じてきたからホントに困ってしまう。友だちのバナーひとつ貼るにも苦労しなきゃならないんだよ〜。

なんか人生のいろんなことが、考え方がちょっと自分はアレなのか?合理的に出来てないのか?ってあらためて突きつけられたような。。

WordPressと同じような構成で、ヘッダーと本文とサイドメニューとフッターに分割してiframe使って、本文だけ追加していくページは作ったけど...。考え方としては間違ってなかったと思うんだけど。
でも、記事のカテゴリ分けや検索機能は手動じゃできないもんね。

もう少し慣れれば速くなるだろうし、あーやっぱり便利だね!って思うかもしれない。だってデジタル界のアナログ頭で必死にカスタマイズして、なんとか好きなデザインにしたんですもん。お手本にさせていただいたサイトではすでに次のメニューがアップされていて、あ、それもやってみたい!って思ってるわけだし。
Macのローカルサーバーまで作っちゃったんだもん、頼むよー。
WordPressをカスタマイズする(1)ご自宅用サーバー構築
[PR]
by usa-log | 2013-02-24 00:35 | Comments(0)

WordPressをカスタマイズする(2)うさオク写真館(仮)

うさオク写真館(仮)

WordPressカスタマイズ、最初のサイトとしてさきほどオープンさせました。

ホントは作成過程を順次アップしたかったのですが、実際やってみると夢中になってしまい...途中のキャプチャとか全くないのでそれは後ほどまた別サイトで、今度はちゃんと過程を残しつつやってみたいと思います。

PHPなんて書いてもらったのを貼付けて「数字を変える」くらいしかできないはずなのに...。
わかりやすく親切なこちらのサイトのおかげです。ほんとうにありがとうございました。

WordPressテーマの作り方
HTMLファイルがあるとテーマ作成はラク
という言葉を信じて、「プログラムは無理だけどHTMLなら」と、まんま書き写せるものを作っていたのがよかったかと思います。画像も最初から用意してあったし。エンジニアの方のタグはきっちりしていて、最初にイメージありきのデザイナーにはほんとに勉強になります。

まだまだこれから直したり増やしたりしたいことだらけです。引き続き参考にさせていただきます。今回は一般的なブログのデザインが相応しかったので、自分のエキサイトブログをほぼ丸写しです。それがよかったのかな?ここのスキン変更はずいぶんやっていたので。。

まず、プリインストールされているテーマを見ることから。

これがファイル数多いわ、CSSは何千行あるんですかって感じで…以前にもめげています(笑)

ですが、読み進むと必須ファイルは
•index.php
•style.css

だけ。これだけでも動くというではありませんか!
ならば。
3つのファイルで機能するテーマを作ってみる
さっそくやってみました。
ここから先はもうお手本とおりです。
初心者はおかしな真似をしてはいけません。
画像は手持ちのものをリサイズするだけ。

先日作ったローカルサーバーにポンッと放り込めばいいのです。

どんなに簡単なページでも、ちゃんと見えるとやっぱりうれしい♡ひとつでもできると、もうちょっとやってみたくなります。早い段階で「できた!」っていう気分になれることが大切。その意味でも素晴らしいサイトだなぁと思います。

なのでまだまだ続きます。
[PR]
by usa-log | 2013-02-21 21:59 | うさぎ王国 | Comments(0)

WordPressをカスタマイズする(1)ご自宅用サーバー構築

「おねえさんの分かりやすい説明付きで、Mac のローカル環境に WordPress をインストールしてみた」へのリンクが切れていて、申し訳ありませんでした。2/27
その後再び修正。17/2/18

WordPressのカスタマイズ...というのに挑戦しようかと思って。

いろんなブログやホームページが、片っ端からWordPressで出来てる気がする今日このごろ。
でもね、でもね、「いかにも」っていうデザインがちょっと不満でした。デザイン変えたければ、「テーマ」(つまりガワ)を入れ替えればいいのだけど、これがなかなか思った通りのものはないですし、ちょっと自分なりに変えたいと思ってもそうそう簡単にはいきません。

やっぱり元からなんとかしなきゃダメかと思い、カスタマイズについてのサイトを1日中探して探して...そしてついに見つけました!
WordPressテーマの作り方
WordPressテーマ作成の仕組みから勉強する

 以下、ブルーの文字は引用です。

WordPressは今はとてもメジャーだそうで、本やWebサイトなどに掲載されている情報は豊富です。でも、テーマ作成におけるWordPressの動作や仕組み、考え方、原理のようなものについて、まとめて解説しているものは見つけられませんでした。仕組みを理解しないと、本に掲載されていることとちょっと違うことをしようと思っても、すぐに詰まってしまうと思います。

そう、そうなんです!いきなり違うことしようとして、最初っから詰まってしまったのが私...orz
なんか一方的に運命を感じて、このサイトに賭けよう、それでダメならおとなしく背景でも変えて満足しようと決意したのでした。

テーマは、投稿した記事や画像を「どのように表示するか」を記述したファイル一式のことです。HTML+CSS開発+αの知識でつくることができます。

ヘッポコでもデザイナーである以上、HTMLとCSSの知識はOKとしましょう。

WordPressのテーマ開発に必要なものは「エディタ」と「サーバー」

エディタは問題なし。いつも使っているDreamWeaverは公式には推奨されてないそうですし、この場合は要らない気がするのでmi(ミミカキエディット)で。

問題はサーバーですね。
Mac OSにそういう機能があるのは知ってましたが、もちろん別世界の話。
この時点で「やっぱやめようかな...」と数秒感ためらいました。
しかし「パッケージ」というのを利用すれば、初心者にもなんとかなるっぽい。

推薦されているサイト「おねえさんの分かりやすい説明付きで、Mac のローカル環境に WordPress をインストールしてみた」
が、ほんとに分かりやすそうなのでこれに賭けます。(賭けてばっかりだw)
MAMPというゾウさん柄のソフトです。

とにかく何も考えずに書いてあるとおりにひとつづつ作業します。(どうせ考えられないしw)
そして「超分かり易いです」の推薦に誇大表示はなく、ホントにふつーにちゃんとできました!びっくり。。ほんとにありがとうございました。
ちなみに WordPressのインストールそのものはWEBで試したことはあります。って、それもサーバー会社さんが面倒みてくれる、ワンクリックでできちゃうアレだったのですが。

a0026762_12553371.png
アプリケーション→MAMPの中を開けるとhtdocsというフォルダがあり、「そうか、htmlをアプリケーションに保存するんだ...」とあらためて感心したり。(通常は書類をDrreamWeaverの中に保存なんてしないので)
「ああ、会社時代に『htdocsに保存して下さい』ってシステムの人に言われたのはこのことだったのか...」などと感無量の一日でした。

この日はここまで。
明日からいよいよ本体カスタマイズです。

[PR]
by usa-log | 2013-02-20 19:58 | Macの神様 | 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)