Top

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

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

お問い合わせフォーム改良。スマホ対応。

Beads*usa-shopからお知らせ。

ショップのお問い合わせフォームを改良しました。
サーバー会社が用意してくれている、https...暗号化...のフォームを利用しています。ですが、これがグレー背景に黒文字、みたいな(笑) あまりにビジネスちっくなので、サイトと同じ感じになるようにしました。
a0026762_1315522.png
これなら、お問い合わせする気になるかな?「○○のうさぎさんにお花を付けてほしいのですが」とか♡

自分がユーザーでもあるからよくわかるのだけど、なんか入りにくい、訊きにくいサイトってあるわけで。。

そしてもうひとつ。
スマホや小さめタブレットのお客様用のフォームを設置しました。内容は全く同じですが、デザインを変えて少しでも入力しやすく...と工夫しました。(iPadサイズなら普通にご覧になれます)

入力しづらいと「やーめた(´・ω・`)」ってなっちゃうのよくわかるので。

j-Query Mobileを利用したインターフェースにすればいいのですが、sendmailのPHP書く自信がないのでやめときました。今回はCSSだけでどこまでいけるかな?

画面をモバイルにフィットさせて...meta name="viewport" content="width=device-width; initial-scale=1.0" /...
widthは100%に、フォントも100%にしておけば、それだけでかなり見やすくなります。それと、送信/リセットのボタンの間隔を空けるといいです。あとはスマホ画面を睨みながら試行錯誤ってとこでしょうか。PC版よりコントラストをはっきりさせた方がいいかも。
CSSだけでも、こんなに見やすくなりました。
a0026762_13121621.png


メール未着が気になります。あれ?返事が来ないなおかしいな、と思ったらご連絡いただければ幸いです。アドレス間違いで戻ってくるもの以外(戻って来ない場合も)、迷惑メール対策やウィルス対策でお届けできないことがあります。必ず、こちらのアドレス
a0026762_12403393.gif
を受信可能にしてくださいますよう、お願いいたします。
[PR]
by usa-log | 2013-04-07 14:55 | Beads*usa-shop | 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)

WordPressをカスタマイズする(7) Twitterに投稿を反映させる

プラグイン、Tweetableをインストールしました。新しい記事をアップしたら、Twitterで紹介できるといいなと思って。
a0026762_19255645.png

たとえば、このブログならツイートボタンが付いていて、ブログを書いたらポチッと押せばいいのです。ところが最初っから作ると、そんなものまで自力でなんとかしなくてはなりません。
プラグインを検索するといろいろありますが、Tweetableというのに決めました。評判がいいのと、日本語解説をしているサイトがたくさんあるのです。

ダッシュボードからプラグイン検索してダウンロードしてインストール、手順もそんなに難しくないです。
こちらの解説が総合的かな?他にもたくさん使い方記事はみつかります。
WordPress(ワードプレス)コミュニティ

これをセッティングすれば、投稿と同時にTweetされます。この時の文言も自分で設定できます。
「うさオク写真館、懐かしの商品を更新しました。 」そして短縮urlでリンクされます。なかなかいいですよ ♪

さて、そうなると、見てくれた方のコメントを書いていただくフォーム...ってことになるのですが、スパムコメント対策がねぇ。結局、承認制になってしまうんじゃ。どうも承認制というのが上からっぽい気がして、気が引けてしまいます。それにしばらく経ってからレス付けられても書いた人も忘れてるだろうし、かと言ってコメント付くたびにメールが届くシステムはいやー!(笑)
twitterにコメントしてもらえれば確実にお返事できます。今のところ「あ、これまだ持ってるよ!」「ありがとう♡」って感じですし。

そんなんでコメントフォームはまだ作ってません。あ、これはできないんじゃなくて(笑)...たぶん順序通りにやればできると思います...たぶん。
いずれ別のサイトでやってみたいですね。

その他にも自分のタイムラインを表示させる機能などいろいろあるようなので、次はこれをやってみます。
うさオク写真館...ってまだそんなに見てもらえてないし。(*´・ω・)
これから充実させます!


更新しました。うさオク写真館
[PR]
by usa-log | 2013-04-04 12:46 | デザインやなんかのこと | Comments(0)

レンタルカートの設定あれこれ。

a0026762_22181584.png
なんとかここまで持ってきました。
「おすすめ商品」が表示されるようになって、ショップらしくなったかな?ラッピングなんかも、こうやって紹介すれば、わかりやすいのかな。

こちらのカートはシンプルなのですが、いろいろカスタマイズできて深いです。ホントは自動で生成された一覧ページを自前のページに埋め込みたいのだけど...それは難しそう。
ま、いっか。そこまで商品数ないし。。
「クリスマス特集!」なんて時は別ページにすればいいわけだし。

いずれにしても大切なのは商品、ということを忘れてはいけないのだ、うん。

Beads*usa-shop
[PR]
by usa-log | 2013-03-15 23:15 | Beads*usa-shop | Comments(0)

Beads*usa-shopカートバージョンアップ。

ようやく全商品の登録を完了しましたー。
a0026762_0293067.png
可愛く見やすくなりました!カート画面にも画像が表示されます。このために画像登録が...登録が...ひたすら力仕事(笑)
ですが、その甲斐あって、スマホ画面もこのとおり。
a0026762_032378.png
入力時にはさらに画面が拡大して見やすいです。
a0026762_0322724.png
ほぉら、こんな感じに。

機能的には同じですので、お買い物方法が変わるとかそういったことはありません。ただ、ちょっと見やすいかな、わかりやすいかなっていうことです。
商品一覧もやり方は変えないで、サイズや枠の形やなんか、もうちょっと直したいと思っています。

これからも、どうぞよろしくお願いいたします。

a0026762_04618100.jpg
a0026762_0465190.jpg

[PR]
by usa-log | 2013-03-11 00:48 | Beads*usa-shop | Comments(0)

WordPressをカスタマイズする(6)<head>内のタイトルタグに記事タイトルを表示する

WordPressをカスタマイズする(5)記事のパーマリンクを出力する の次。

head内のタイトルタグにページタイトルを表示する...言い方が難しいのだけど、ブラウザのてっぺんに表示されるホームページタイトルの後に、個別の記事タイトルを表示するという意味です。

これは昨日の勢いで、テンプレートタグを探せばすぐにわかりました。head部分だから、
phpもheader.phpでいいはず。?php wp_title(); ?をタイトルの間に挟めばいいのですね。
a0026762_22233188.png
するとこうなります。
a0026762_22233926.png
(1)うさオク写真館>>夏休みうさぎ軍団となっていますね。これ、順番を逆にもできます。ここのブログがそうですね。
(2)本文のページタイトルにも同じ方法で表示できます。今回は特にいらないかと思うのでやめておきます。
(3)今はただの数字ですが、このパーマリンクも設定でもうちょっとどうにかなるようです。

あと、検索窓の付け方もみつけたので、やり直せばデザインも変えられるのかしら。
それにしても。
タグ禁止で説明はしにくいし、いいかげん別の場所に移動しないと、あちこち飛んで料理やアロマが挟まってて見づらいったらありゃしない(笑)
[PR]
by usa-log | 2013-03-07 22:36 | デザインやなんかのこと | Comments(0)

WordPressをカスタマイズする(5)記事のパーマリンクを出力する

WordPressで投稿する。(4) パーマリンクのこと 昨日気づいてしまった件、解決しました。

「どうして記事タイトルにパーマリンクがつかないのか?」
そのような事例も解決法も探せずに、そこまでだったのですが。。
検索の仕方が悪かったというのと、知識のなさから検索結果を見逃していた...が正しいです。
×パーマリンクを設定
○パーマリンクを出力
すでに設定はされているのですから。

WordPressのテンプレートタグというのを探せばよかった!(それも知らずに作っていたという事実)
そのタグをみつけたのは、見覚えのある長い記事の中の一説。見逃したというより、見ても理解できていなかった、ということです。初心者向けといっても「最低限の知識を持った」が付く場合が多いですね。私のようなホンモノの初心者は要注意です。
a0026762_156473.png
記事タイトルをa href=...で囲めばよいようです。
a0026762_1541944.png
PHPが表示できないようなので、画像ですみません。

あーーっ、なんか構造わかってきたかも?!
確認します。
a0026762_1436564.png
パーマリンクの出力完了。
a0026762_14385427.png
URLもちゃんと反映されています。記事タイトルの出力は次回に。

ひとつずつ、お手本を見ながら作って来てよかったと思います。
情報はそれこそいくらでもあるけど、自分に必要なのはたったひとつ。コレだ!というお手本を見つけたら、とことんそれでやってみる...というのは、初心者には大切ですね。見せ方は後から加えたり変えたりできるし、テーマを編集しても投稿した記事に影響はありません。(←ここが素晴らしい!)

まだまだというか、ますます改良していきたくなりました。

☆     ♡     ☀     ☆     ♡     ☀

お気に入りの編み物の本で「きほんのかぎ針編みでもっといろいろできるよ」というのがあります。まったくの自己流からもうちょっとなんとかならないかと、購入したもの。ほんとうにふつうの編み方しかしてないのに、「えっ?!」っていう作品が仕上がるんです。「ああーっ、そうか!」っていう驚きがいっぱい。これを読んだら、難しい編み方を無理に試す気がなくなりました(笑)それよりも、こういうのを組み合わせたら?とか、素材を変えたらどうなるだろう?とか。もうやってみたいこといっぱい。
ホントにいい参考書は自分でいくらでも応用ができるようになりますね。
[PR]
by usa-log | 2013-03-06 14:57 | デザインやなんかのこと | Comments(0)

WordPressで投稿する。(4) パーマリンクのこと

投稿した記事を見て、あれ?と思った。

記事タイトルにリンクが貼られていない。。
そうなんです。

たとえばこのブログなら、ブログのURLはhttp://usalog.exblog.jp/
1コ前の記事「WordPressをカスタマイズする(5)カスタムヘッダーを設置する」のタイトルをクリックすれば、
a0026762_0361057.png
リンクがアクティブになって(アンダーラインが出ています)一覧から個別ページへと飛びます。
a0026762_031455.png

記事URLが、http://usalog.exblog.jp/17408542/ となります。これがこの記事のパーマリンクということです。
リンクすることも簡単ですね。しかもツールバーのタイトルにも記事タイトルが表示されていて、わかりやすい。

ですが。。
制作中のサイトはまだこの機能がありません。
a0026762_0402879.png
タイトルがアクティブにならない、なんの反応もない〜。
これでは「こちらです」と言いたくても住所がないっ。正確にはあるのですけど...表示されないというか。

そういえば昔、「ある記事へリンクしてほしい」と頼まれて、同じ理由でできなかったことを思い出しました。個別のパーマリンクが表示(この表現でいいのかな?)されていなかったんです。エキサイトでは出来たので、「ダサッ」なんて思った自分が今は恥ずかしい。作るの大変なんだってば。うーむ、8年も経って同じ思いをするとはw

これはぜひともなんとか表示させたい。
そう思って検索してみたのだけど、キーワードが悪いのか、何か勘違いしてるのか、なかなか思うような記事がみつけだせないでいます。。うーむ、まだまだじゃ。

☆     ♡     ☃     ☆     ♡     ☃    

パーマリンクと聞いて、パーマかけたくなった...ホットペッパービューティーのクーポン比較しちゃってるしw

[PR]
by usa-log | 2013-03-06 00:44 | デザインやなんかのこと | Comments(0)

WordPressをカスタマイズする(5)カスタムヘッダーを設置する

WordPressをカスタマイズする(4)カスタムメニューを設置する の次
とうとうここまで来ちゃいましたよ!
...それだけ説明がわかりやすく親切、ということの証明です。今回もありがとうございました。
WordPressテーマの作り方
まず、出来上がりのようすをどうぞ うさオク写真館(仮)
a0026762_23571972.jpg

右上の写真画像、これです。これがダッシュボードで入れ替えができる仕様になりました。これってすごいよ、きっとすごいことなの!
カスタムヘッダーを設置する
いつもの通り、指示通りにひとつづつ。

その前に...前回いい気になってカスタマイズしたメニューを、デザインはそのままお手本のHTML、CSSに従って書き換えることから。そうしておかないと、初心者にはわからなくなるのです。面倒がらずにちゃんと作っておけばよかった...最初から。
1. functions.phpを編集する
お手本とおりです。関数ってなに?という人間は何も考えない方がいいです、たぶん。
default-image:デフォルトで表示する画像ファイルを指定します
フォルダ内の適当な画像を使います。
width, height:カスタムヘッダー画像のサイズを指定する
header-text(false):文字色カスタマイズ機能をOFFにする
少し大きめの画像にしました。背景を見せたいのでタイトル部分を広くとりたいこと、タイトル下部分にテキストのスペースを多めにほしいこと、が理由です。
これで300*225(4*3が好きらしいw)
サイズや縦横比が変わっても問題ありませんから自由にやっちゃいます。
2. デフォルト画像の用意
すでにアップされているものを使っていますのでサイズだけ変更。とりあえずの画像なので歪んでも関係ナシということにします。
a0026762_07563.jpg
気にしない気にしないw
3. ダッシュボードのヘッダー設定
難しくありません。
a0026762_23572263.png
ヘッダーという項目が新しく加わっています。なんかうれしい♪
a0026762_094356.png
ウィジェットだけだったのが、メニュー、ヘッダーと追加されました。

a0026762_2357252.jpg
何枚もアップして、ランダム表示(動画ではない)もできます。
あー、これでトップページの画像管理が楽になるかも!どこの位置に来たっていいん...だよね?
4. header.phpを編集する
お手本とおりです。やはり関数に縁のない人間には...。

おまけ・仕上がりを見ながらCSS追加
タイトルと説明部分をfloat: left、画像をfloat: rightとしますが、padding-leftをとって、左を空けています。ちいさなブラウザでもうさリョーシカさんの顔が見えますね。CSSの問題なので後から微調整すればOK。それには、どんなに面倒でもCSSの微調整で済むように作っておくこと、と肝に銘じました。

今日の感想。
カスタマイズについてはずいぶんいろんなサイトを見て回ったのですが、コレだ!というのになかなか巡り会えずにいました。まぁ、PHPの初歩的知識もないのですから、仕方ありません。CSSでなんとか変える方法はないもの?と探していたのですから。でも実際わかりやすい解説でイチから作って(たとえコピペでも)みると、今までわけわかんなかったサイトでも、なんとなく言ってる意味がわかるような?ああ、こういう意味だったのねと。長くて長くてうんざりだったCSSもちょっと短く見えてきました(笑)そんなものですね。

さて、そうなるとまた「こうなったらもっといいよね?」が増えてしまいます。
[PR]
by usa-log | 2013-03-05 00:00 | デザインやなんかのこと | Comments(0)