Top

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

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

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 | デザインやなんかのこと

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 | デザインやなんかのこと

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

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

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

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

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

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

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

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


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

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 | デザインやなんかのこと

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 | デザインやなんかのこと

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 | デザインやなんかのこと

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 | デザインやなんかのこと

WordPressのバックアップをとる(2)...とれた!

朝、おそるおそるDropboxのフォルダを開いてみたら。。
a0026762_15849.png
ちゃんとバックアップとれているようです!
a0026762_158829.png
次回の予定にもちゃんと載っているので、今夜もとってもらえそう。(cronというのはどうやら指定した日時にプログラムを実行させる...みたいなことらしい)
よかった。

が、バックアップとって安心ってのはダメなんだよねぇ。実際に復帰させてみなくちゃ...が、今日はほかにやることあるしなー。

それに[3 ERRORS]っていうのも気になる。しかも赤い字だもんね。
[PR]
by usa-log | 2013-03-03 15:13 | デザインやなんかのこと

WordPressのバックアップをとる

やっぱり心配じゃないですか、クラウドって。そういうのニガ手な人間こそちゃんとしとかないとマズいよね、と思って。
いつも手元で編集してFTPという流れなので、サーバーに何かあっても手元にファイルが残ります。これは仕事では大切なことで、自分はもちろんお客様が「ちょっと直そうとして消しちゃったんです...」などというケースにも対応できます。もうこういう仕事やってると、不測の事態というかあり得ない間違いとか起きるんですよねー。
上書きしちゃったらもうそれっきり。これだけは肝に銘じているので。

今こそ安心できるWordPressバックアップを!復旧作業まで実際にやってみたWordPress丸ごとバックアップ法
BackWPupというプラグインを利用した、こちらの解説がわかりやすそうだったのでやってみました。

私の説明なんかいらないです。とにかくプラグインをダウンロードしてインストールすればいい。あとは少しばかりの設定項目を選んだり記入したり。
Dropboxに保存できるとこがミソがな〜、なんて思って。そうすればバックアップデータがDropboxと自分のデスクトップにも簡単に保存できるってことですよね?

やたー♡
ちゃんとバックアップも取れたし、メールも来たよ、ちゃんとできたよ、と思った翌日。
ダッシュボード見たら、新しいバージョンが出たのでインストールしません?みたいなことが書いてある。
で、うっかりインストールをクリックしちゃったら。
何やら、また最初の設定をしてくださいって出てる。(←英語なので正確な言い方ではないw)

でも、なんか最初のインストール画面の時とは違うような?それともバージョンアップで画面も変わったとか?
まぁいいや。
とにかくバックアップするファイルを選んで(よくわからないからお手本通り)、日にち時間を設定して、ZIPで圧縮して、Dropboxに保存お願い、メールもちょうだいね、って設定しておきました。(たぶん)
「Dropboxへの接続をリクエストしています」が出たからだいじょぶでしょう。
今夜の深夜の予定なんですけど。

明日になってDropboxに新しいファイルがなかったら失敗ってことになりますが、バックアップがとれないだけでサイトが消えるわけじゃないので気にしないことにしましょう。その時はそのとき。

また、うまくいったとしてもイザという時には「リストア」という作業があるし、これはなんだか難しそうだぁ。
そんなことしなくて済むのがイチバンだよねぇ。。
[PR]
by usa-log | 2013-03-01 18:10 | デザインやなんかのこと

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 | デザインやなんかのこと