WPのcssやhtmlをコードを書いていて思うのですが、単色なので見ずらいと感じませんか？
DWや真魚２のようなテキストエディタのように、色分けされてたら、いいなと～と思いませんか？
例えばアイキャッチ画像の様に。
プラグイン探したのですが、見つかりません。
みんなで探してみましょう！
——————————————
2013-07-26の勉強会でタカハシ先生が教えてくれました。残念ながらランサーさんのコメントはありませんでした。
新しく記事を書きました。こちら↓
WordPressのソースコードを見やすくしたい人はテーマエディタのプラグイン「Advanced Code Editor」なんていかがですか？
先日うちのおとうさんが天国に旅立ちました。お母さんと二人暮らしだったので、これからは一人暮らしになってしまいます。外国に住んでいる僕の妹は帰国中でお母さんの所にいますが、秋には外国に戻る予定です。僕はちょくちょく実家に顔を出そうと思いますが、さすがに毎日は行けません。分らないけど月に２、３回か。
７０歳のお母さんは、携帯電話を持っているけどメールはやりません。（現在のところ難しくてできないのか、やる気がないのか不明）
妹と相談して、お母さんにパソコンを覚えさせて「skype」をやれるようにしたらどうかと思いました。外国にいる妹とテレビ電話が出来るというのは、いいかなと思います。慣れてきたらFaceBookとかも憶えてもらって、うちら子供達や甥っ子、姪っ子ともつながれば楽しくなる気がします。
お母さんは友達がいる方だし、パソコンなんて面倒くさいと最初は言うかもしれないけど、覚えたら絶対に便利で楽しいと思うので、是非すすめます。
今度、妹とパソコンを買いに行くのですが、どんなのがよいでしょうか？ノートパソコンでいいかな？最近では、ipad的なものが多いですが、僕自身が持っていないのでいまいち分りません。
通信関係は、家にNTTの電話回線があるので光フレッツのネット契約をすればいいかと思います。
あと、本人次第ではあるけど、70歳の人にこんなのを勧めてみたらというパソコンで出来る事のアイデアがありましたら、どうぞよろしくおねがいします。
今回の事でおもったのですが、パソコンやインターネットって若者の文化というか、若い世代の生活が楽しくなったり便利になるのが主ですよね。高齢化が進んでいる現在、お年寄りの一人暮らし等も増えてきて社会問題になっています。パソコンやネットという最新テクノロジーと高齢者は無縁だと思っていましたが、その決めつけてしまう考えを捨てれば、なにか社会に役立つ事があるんじゃないかな～と、ふと思いました。
phpでお問い合わせフォームを作る。
というのをやっています。だいたい出来たのですが問題点がいくつかあります。入力画面（contact.php)があります。そこで入力して「確認」をクリックすると確認画面(confirm.php)に行きます。その画面で表示されている内容でOKなら「送信」をクリックして指定した宛先に入力内容を送ります。もし内容を変更したい場合は、入力画面（contact.php)に戻り内容を入力しなおします。
|
1 |
<a href="contact.php">入力画面に戻る</a> |
上記の様にリンクすれば、入力画面（contact.php) に戻れますが、それまで入力したテキストはクリアーされてしまいます。「なんだよ～、電話番号の数字だけ変えたかったのに、全部消えちゃったよ！また最初から全部入力するのめんどくせ―！」となり、「申し込むのや―めた！」となる可能性があります。そうならない為にも、入力情報をクリアーせずに入力画面（contact.php)に戻るにはどうしたらいいでしょうか？
ブラウザの「戻る」ボタンで１つ前の画面つまり、入力画面（contact.php)に戻るという方法があります。これでやれば、入力情報はキープされます。ただし、「内容を編集する場合はブラウザの戻るボタンで戻って下さい」と書いておかないといけません。これは、カッコ悪いので避けたいところです。
ここでいい解決法があります。 続きを読む
制作中のサイトでmqをやっています。
バンドのプロフィールのページのバンド紹介の下にあるメンバー２人の紹介のセクション「section id=”futari_profile」なのですが、画面を狭くしていくと、
フロートが解除されていい感んじになります。そしてもっと狭くしていくと、あるところからメンバー紹介セクション下段が、
幅をキープしてしまい、横スクロールが出現してしまいます。
http://kuulei90.com/?page_id=25
なぜでしょうか？
よろしくお願いいたします。
りんごサイトのトップページの左側に最新記事の投稿が出るようになってますよね。
現在制作のサイトも同じ仕組みで「blog」の最新投稿がトップに載るようにしました。
http://kuulei90.com/
見た目（h1・p・img）をりんごのようにしようとcss作業していますが、うまくいきません。（画面の幅を狭くすると画像の上に文字が来てしまいます。りんごのは、画像の右側に文字があります。）
なにがちがうんでしょうか？phpの読み込む順番とか？
教えて下さい。よろしくお願いします。
WPでは簡単にファビコンの設定ができます。以前、記事にも書きました。
WP Twenty Twelve 簡単にファビコンを設置出来るプラグイン”All in one Favicon”
WPではなく普通にhtmlで作成した場合は、上記の様に簡単ではありません。（とは言っても簡単です）
イラレ等で作成したイラストを自動でファビコン用のファイルに生成してくれる無料のサービスがあります。僕はいつも、こちらにお世話になっております。
http://ao-system.net/favicon/index.php
是非チャレンジしてみて下さい！
今まで仕事でサイトを作る時、お問い合わせフォームはフリーのお問い合わせフォームCGIをカスタマイズしてましたが、wordpressをやるようになりphpの勉強もする様になったので、今回はphpで作ろうと思いやってみましたがうまくいきません。 続きを読む
timeタグを使ってみようと思います。（初めて）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<section> <h1>新着情報</h1> <article> <h1>タイトル</h1> <p>本文</p> <time datetime="2013-06-21">2013-06-21</time> </article> <article> <h1>タイトル</h1> <p>本文</p> <time datetime="2013-06-20">2013-06-20</time> </article> </section> |
更新日を記事に入れたいのですが、これでよいのでしょうか？
↑アイキャッチ画像の様に、hoverした時に画像や文字が出現するようにしたいのですが、どんなやり方がありますでしょうか？
ぱっと思いついたのはcssで疑似要素です。これでいけますでしょうか？
あとは、jQueryで適当なのがあるのかなあ。
よろしくお願いします。
僕のサーバーにアップしました。タカハシ先生ありがとうございました！
IE8対策
いろんなブラウザで確認しましたが、ie8は、ホバーもしてないのに↓こうなって（全部見えている）しまいます。（ちなみにie7はホバーしても疑似要素が出現しませんが、今回は切り捨てます。ie9はtransformが効きませんが、ホバーで疑似要素が出現するのでOKとします。）
ie8だけが読み込むie8.cssを作り以下を指定。
もとがこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav ul li a:after{ content:url(img/nav_menu/price.png); position:absolute; left:-1em; top:-2em; transform:scale(1,0) translate(0,-1em); transform-origin:left bottom; transition:0.3s; z-index:-1; opacity:0; } nav ul li a:hover:after{ transform:scale(1,1) translate(0,0); opacity:1; } |
ie8用css
|
1 2 3 4 5 6 7 8 |
nav ul li a:after{ } nav ul li a:hover:after{ content:url(../img/nav_menu/price.png); position:absolute; left:-1em; top:-2em; } |
nav ul li a:hover:afterは上書きされますが、nav ul li a:afterの方は何にも指定がないので上書きされません。この場合どうしたらよいでしょうか？
気持ち的にはnav ul li a:after{all-clear}こんなのあったらいいなあ。
firefox等に悪影響とかはありません
|
1 2 |
nav ul li a:after{height:0;overflow:hidden;} nav ul li a:hover:after{height:auto;} |
というわけで、ie8用にcssを作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで～す。
現在僕は、仕事として４つのサイト制作を進行中です。
４人のクライアントさんの愛用しているブラウザの状況です。
１．safari,chrome(このクライアントさんはapple愛用者）
２．ie（このクライアントさんはwindousが好きで、何度か説明してfireFoxやchromeをすすめたが、やっぱりieを愛用している）
３．ie（２と同じ）
４．ie（このクライアントさんは、ブラウザって何？って感じ。ネット見るには「e」のマーククリックすればいいんですよね？….といった感じ。）
ウェブデザイナー同士で話していると、ie使ってる人なんているの～？ダサいよねー！という雰囲気になってしまいますが、実際いっぱいいるんです。
タカハシ先生はieをわりかし切り捨てます。それは、先生の制作ポリシーがポリフィルじゃなくて、プログレッシブ エンハンスメント（でしたっけ？）だからです。
先生の制作ポリシーです。ちなみにsa-ka君は仕事ではポリフィルが多いようです。
私達が、ただ先生の表面だけを真似して、ieユーザーは切り捨て！と、ウェブデザイナー気取りでいるというのは多少疑問に思います。なぜなら先生は、クライアントさんに、どうしてもieに対応させてほしいという要望があれば、あの手この手で対応できるスキルがあるからです。
ie対策できるけど、ポリシーとして切り捨てているのと、対応出来ないからとか、勉強するのが面倒くさいとかで切り捨てるのとでは、天と地の差があると思います。りんごでの勉強会はfirefoxを使ってますよね。ie対策はしていません。いちいちやっていたら作業が遅くなるので、効率的にそれで良いと思いますが、家で個人的に勉強する時はieの事も多少は考慮する様にした方が、今後仕事としてやっていくと考えているならば必要かなぁと思います。残念ながらieユーザーはたくさんいます。 はぁ～。
2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓
|
1 2 3 4 5 6 7 8 9 10 11 12 |
width:calc(100% / 3 - 10px); /* -------- 100%を３で割って10px引くという意味。 +（たす） -（ひく） *（かける）も使える。 演算子の前後は、必ず半角あける。 ---------- */ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* -------- borderの幅、paddingの幅もwidthのうちに入れてくれる。 ---------- */ |
僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html
現在仕事で制作中のサイト。２年前に制作したサイトを部分的にリニューアルしています。
自分のサイトにテストでアップしてクライアントさんに確認してもらっています。
１つ指摘された事があります。
IEでの、下記のページの印刷プレビューが出来ないそうです。他のページは問題ありません。ちなみにクライアントさんはwindows7です。
http://nobu-69.com/test_site/nolimits201304/nyukaigo.html
僕も確認してみました.
windows xp でモードをie7にするとプレビューが出来ません。
windows7 でモードをie7にするとプレビューが出来ません。
その他（ie8,ie9）は問題ありません。どうやらie7で見た時だけ印刷プレビューが出来なくなるようです。
原因の検討がつきません。何が考えられるでしょうか？
よろしくお願い致します。
—————————————-
説明不足でしたので追記します。
上記画像のように真っ白で何も表示されません。そして画面下の赤マル内の数字（ページ数を表す）の分母の部分が1,2,3,4,…….止まらなく増え続けます。
という状態です。
—————————————-
タカハシ先生のアドバイスを基に作業してみました。
①>1.他のサイトのページを印刷プレビューしようとしたらどうなるか？
制作中のサイトの他のページは問題ありませんでした。
問題があるのはhttp://nobu-69.com/test_site/nolimits201304/nyukaigo.htmlのページのie7で見た時のみです。
②>2.cssのmedia typeををscreenに限定したらprint時にcssは適用されなくなるはず。
それでどうなるか確認。
cssが切れた状態でプレビューされましたので、指摘にある通りcssのどこかに問題があるのかと思い調査しましたが、おかしな所は見当たりません。
③対策としてhtmlのheadの中のcssのリンクを以下の様にしてみました。
|
1 2 |
<link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="print" /> |
そしたら上記の「説明不足でしたので追記します。」の真っ白で分母が止まらない状態に逆戻り。
■①シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.inの使い方がいまいちわかりません。
参考サイトhttp://kachibito.net/web-service/syntaxhighlight-in.html
一応やってみました。デザインを選んで、それのcssもダウンロードしてリンクさせたのに効いていない。？！
http://nobu-69.com/study/css_packman/css-packman.html
■■②youtubeをwpに貼りつける。http://kuulei90.com/?page_id=20
５枚貼りつけてます。上の３つはプラグインで下の２つはプラグインではなく、youtubeのサービスの埋め込みコードをコピペ。
プラグインはPCで問題なしですが、スマホ(iphone4s)で縦長の変な表示になる。これを解消したい！
youtubeのサービスの埋め込みコードをコピペの方はpcで再生＆表示、問題なしですが、スマホ(iphone4s)の表示は縦長にならないでちゃんとしてるけど、
再生が出来ない。
ちゃんと表示させて再生するようにしたいです。
—-↓—↓—-↓——勉強会で解決しました。——-↓—–↓—–↓—–
■シンタックスハイライターについて。
①自動で生成されたhtmlのコードをコピーしてhtmlのbodyの中に貼り付けます。
②自動で生成されたjqueryとcssをコピーして自分で作ったファイルに貼り①のhtmlファイルにリンクさせます。
注）jQuery本体を忘れずに！
以上です。
それと、左横の行数を示す番号が必要でなければ、表示させたいコードをpreタグで囲むのが一番簡単です。
preタグはコードを書いたとおりに表示してくれるのでbrとかいりません。
こんな感じ↓。これはpreで囲んだだけです。
|
1 2 3 4 |
body{ background-color:#333; color:#fff; } |
■■youtubeをwpに貼りつけたい！について。
wpのプラグインを使ったりyoutubeのサービスの埋め込みコードを使ったりと試してみましたが、どちらも多少の不具合があるので、一番いいのが
シンプルに動画のアドレス（動画観覧の際に表示されてるアドレス↓）をコピーしてテキストに貼り付ければOKという事になりました。
|
1 |
http://www.youtube.com/watch?v=KCLXy-vSu3o |
注）動画のアドレスは独立した行に貼りつけて下さい。
と、ここまで議事録を書いてびっくり！確認の為、僕のiphone4sで貼りつけた動画を見ようとしたら、見れません！（デスクトップでは問題ないです）
プラグインで貼りつけたやつはみれるのに。
なぜだ～！アンテナも最高状態です。はあ～。みなさんのスマホで上記の画像再生できますか？
かおりんごさんが大好きそうなプラグインを見つけました。
http://smkn.xsrv.jp/blog/2010/12/wordpress-plugin-wp_snowdrops/
こういうWPオフィシャルではないモノって危険ですか？
zipを解凍したら「うわ～！！」みたいな。
時間があいたら、試しにやってみようと思ったんだけど、悩み中。
貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか？
通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。
それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか？
よろしくお願い致します。