タグ別アーカイブ: 解決

スマートフォン向け jQuery touch slide swipeで画像表示させる その2(解決)

前回質問したスマートフォン向け jQuery touch slide swipeで画像表示させるについて、ひとまず解決したので内容を書きます。

これは、カラーミーの商品詳細ページ(スマートフォンのテンプレート)で使用しました。
カラーミーはプランによって、商品詳細ページに掲載できる画像の枚数が決まっています。
私は4枚までのプランなので、今回は4枚の画像をスワイプさせました。
カラーミーショップは独自タグがあって画像を読み込む為に、if文?が使われています。
これがカスタマイズする時に、探し出すのが少し難しいのです。
今回は1枚目の画像とカラーミーのデフォルトで、<商品画像その他>とわかれている部分を4枚連続で表示できるようにhtmlを変更してます。そこに、下記のCSSを使用しました。CSSはコメントアウトしてる部分を変更しました。
※今回の大事な所
.deviceを100%
.swiper-containerにmax-width
他にも大事な指定はあると思いますが、ここが大事なのかな?と思います。
スマホを縦にした時は全体画像が見えて、画像の上に矢印が見えるようになります(矢印にz-indexを指定)。
横にスマホを回転した時は画像の大きさはそのままで、.deviceが100%になります。
画像の大きさを100%にすると横に回転した時に、商品の全体画像の一部が表示されて全体画像が見えないので、画像サイズは固定したほうが見やすいと思いました。
公開したページ(スマートフォン用)こちら 

html

css

こんなに長くなりましたが、まとめてみました。
足りない所があると思います。
まだまだこれからも、カラーミーショップのテンプレート(PCとスマートフォン)をカスタマイズしていくつもりです。
また、宜しくお願いします!
ありがとうございまいた。

phpでお問い合わせフォームを作る

今まで仕事でサイトを作る時、お問い合わせフォームはフリーのお問い合わせフォームCGIをカスタマイズしてましたが、wordpressをやるようになりphpの勉強もする様になったので、今回はphpで作ろうと思いやってみましたがうまくいきません。 続きを読む

hoverした時に疑似要素で画像やテキストを出現させる。

↑アイキャッチ画像の様に、hoverした時に画像や文字が出現するようにしたいのですが、どんなやり方がありますでしょうか?

ぱっと思いついたのはcssで疑似要素です。これでいけますでしょうか?
あとは、jQueryで適当なのがあるのかなあ。

よろしくお願いします。

2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました!

僕のサーバーにアップしました。タカハシ先生ありがとうございました!

http://nobu-69.com/study/after_201306/after.html

IE8対策

いろんなブラウザで確認しましたが、ie8は、ホバーもしてないのに↓こうなって(全部見えている)しまいます。(ちなみにie7はホバーしても疑似要素が出現しませんが、今回は切り捨てます。ie9はtransformが効きませんが、ホバーで疑似要素が出現するのでOKとします。)
ie8

ie8だけが読み込むie8.cssを作り以下を指定。

もとがこんな感じ

ie8用css

nav ul li a:hover:afterは上書きされますが、nav ul li a:afterの方は何にも指定がないので上書きされません。この場合どうしたらよいでしょうか?
気持ち的にはnav ul li a:after{all-clear}こんなのあったらいいなあ。

以下を追加することで無事解決!

firefox等に悪影響とかはありません

というわけで、ie8用にcssを作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで~す。

本日の勉強リクエスト(シンタックスハイライターとWPに動画を貼りつける)

■①シンタックスハイライトされたソースコードを手軽に実装できる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
 5枚貼りつけてます。上の3つはプラグインで下の2つはプラグインではなく、youtubeのサービスの埋め込みコードをコピペ。
プラグインはPCで問題なしですが、スマホ(iphone4s)で縦長の変な表示になる。これを解消したい!
youtubeのサービスの埋め込みコードをコピペの方はpcで再生&表示、問題なしですが、スマホ(iphone4s)の表示は縦長にならないでちゃんとしてるけど、
再生が出来ない。

ちゃんと表示させて再生するようにしたいです。

—-↓—↓—-↓——勉強会で解決しました。——-↓—–↓—–↓—–

■シンタックスハイライターについて。

①自動で生成されたhtmlのコードをコピーしてhtmlのbodyの中に貼り付けます。
②自動で生成されたjqueryとcssをコピーして自分で作ったファイルに貼り①のhtmlファイルにリンクさせます。
注)jQuery本体を忘れずに!

以上です。

それと、左横の行数を示す番号が必要でなければ、表示させたいコードをpreタグで囲むのが一番簡単です。
preタグはコードを書いたとおりに表示してくれるのでbrとかいりません。
こんな感じ↓。これはpreで囲んだだけです。

■■youtubeをwpに貼りつけたい!について。
wpのプラグインを使ったりyoutubeのサービスの埋め込みコードを使ったりと試してみましたが、どちらも多少の不具合があるので、一番いいのが
シンプルに動画のアドレス(動画観覧の際に表示されてるアドレス↓)をコピーしてテキストに貼り付ければOKという事になりました。
zz

注)動画のアドレスは独立した行に貼りつけて下さい。

と、ここまで議事録を書いてびっくり!確認の為、僕のiphone4sで貼りつけた動画を見ようとしたら、見れません!(デスクトップでは問題ないです)
プラグインで貼りつけたやつはみれるのに。
なぜだ~!アンテナも最高状態です。はあ~。みなさんのスマホで上記の画像再生できますか?

勉強会の議事録をトップページに表示させるには

一番新しい議事録投稿記事のタイトル&本文の最初の30文字位をトップページに、表示させたい。
とりあえず、固定ページのトップページには、その表示させたい場所を作りました。

議事録を投稿したら自動でそこに表示させるにはどうしたらよいでしょうか?

phpを書く。プラグイン。ウィジェット。

2013-04-19の勉強会での勉強の題材として取り上げて下さい。

よろしくお願い致します。

上記の内容を2013-04-19の勉強会でやりました。以下議事録です。

①外観ーテーマ編集ーFront Page Template 固定ページテンプレート(page-templates/front-page.php)を開きます。そこに投稿カテゴリーの最新記事を呼び出して出力するphpを書きます。

コードは以下の通りです。

今回は、「最新の勉強会議事録」「最新の質問と回答」「最新のコメント」の3つの最新情報をトップページに表示することにしたので、asideの中にsectionを3つ作りました。

メモ

numberposts 1は最新の投稿を1つという意味です。
category 4はカテゴリーのID番号です。

カテゴリーIDの調べ方は、投稿ーカテゴリーのページでカテゴリー名にカーソルを持っていくと、画面下に表示されますので記憶して下さい。記憶力に自信がない人はメモをとって下さい。鉛筆でも万年筆でもクレヨンでも結構です。

上記のphpを書く場所ですが、今回はトップページの画像スライドショウのすぐ下に表示させる事になったので、page-templates/front-page.php内の

の下に書きました。

書く場所は、表示させたい場所によって異なります。ご注意ください。

②出力が出来ましたので、今度は適当に見た目を整えていきます。asideやsectionにidで名前を付けたので、そのidをcssでカスタマイズします。今回は、style.cssの一番下に書きました。

以上です。(真中のぶ)

先ほど、iphoneで見たら変な風になってたので、media queryで直しておかなきゃ!誰かやりたい人がいれば、やってくれてもいいですよ。

質問
firebugで見ると、sectionの中にh1が2つある事になっていますが、これは大丈夫なのでしょうか??
(こちらは、解決済です。先生のコメント参照)

—————————————————–
追加情報 2013-04-27 真中のぶ

投稿のアイキャッチ画像のサムネイル表示を以下のスクリプトで実装出来るようです。

WP TwentyTwelve ヘッダー画像をトップページにだけ表示させたい。

twenty twelveをカスタマイズ中です。
http://kuulei90.com/

ページによってヘッダー画像を変えたいと思っています。(ランダムではなく)

手順としては、
まず、外観ーヘッダーで設定するヘッダー画像をヘッダーだけに表示させようと思います。
ググッたらこちらのサイトがドンピシャだったのですが、記事の説明にある

が僕のheader.phpに見当たりません。どういうことでしょうか?
参考にしたサイト
http://presentnote.com/header_image-displayed-only-top_page/

教えて下さい。よろしくお願いします。

それができたら、固定ページの各編集画面に直接画像を設置しようと思います。
まだ、外観ーヘッダーで設定するヘッダー画像が残っている状態ですが、こんな感じ。
http://kuulei90.com/?page_id=20

/////////////////////////////////////////////////////////////////////////////////////////////
先生。早速の回答ありがとうございます。
理解しました。header.phpを以下の様に追加しました。

これで、解決しました。
次は各固定ページに、それぞれのページの内容に合った画像を挿入していきます。

この、先生のコメントに対するコメントは、普通に返信でやると、「crayon」が使えないので、ここに追加で書きましたが、
コメントを返信でやった方が、第三者が分りやすいと思うのですが、良い方法はありますか?