月別アーカイブ: 2013年10月

iflameタグについて

iflameで動画をhtmlに埋め込む

http://phussa.net/index.html
こちらのサイトの作業をしています。トップページのニュース欄にYouTubeの動画をiflameタグで貼付けていました(これをAとします)。今回の依頼はトップページにUSTREAMを埋め込むという事ですので、配信停止中はクロスフェード画像表示にして埋め込みました(これをBとします)。YouTubeもUSTREAMも各サイトの自動埋め込みタグ生成機能を利用しました。

????????
ustreamを埋め込んだらAもBも、もともと最初にあったAが表示されました。2カ所同じものになってしまいました。あれれ?と思い、Aを削除してBだけにしました。そしたら今度はBの部分にはustreamが表示されるはずなのにAのYouTubeの内容が表示されています。

一回タブを閉じて新しいタブで開いたら直りました。

他のPCでも確認しました。ブックマークからサイトに入ると、やはりBにはA(YouTube)が表示されてました。タブを閉じて新しいタブでブックマークから入らずにアドレスを打ち込んで入ると直りました。(Bには、ちゃんとUSTREAMが表示された)

これは、どういう事がおきているのでしょうか?
1つのhtmlファイルにはiflameは1つしかいれられないのでしょうか?そんなわけないですよね。

どうぞよろしくお願いします。

文字参照でhtmlタグをhtmlファイルに表示させる

文字参照で htmlタグを htmlファイルに 表示させる。

2013-10-25の勉強会で、僕がタカハシ先生に質問をして解決した事の1つを説明します。

htmlタグをhtmlファイルに表示させたい場合は、このサイト(WordPress)だったら「crayon」というプラグインを使えばいいのですが、そういうシステムが無い場合の対処法です。
jQueryや自動生成サービスなどもありますが、ほんの数行なら自分でどうにかしたいものです。(例えば議事録に1行書きたいとか)

文字実体参照で解決!

<section >
ほげほげ
</section >

上記の「<」と「>」は文字参照で表示させていて、htmlタグではないので<section >と表示されているわけです。
WPプラグインの「crayon」はそれを自動生成してくれているわけです。

サイト制作で、&とか©など使った事ありますよね。

文字参照でググるとたくさん出てきます。

jQuery Slide Panel

jQuery Slide Panel

2013-10-18 Friday 勉強会の議事録です。(part2)  (part1 : slider css version)

kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。
CSSで実装するパターンとjQueryで実装するパターンをやりました。

タカハシ先生、ありがとうございました。

jQueryで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。
http://nobu-69.com/others.html
「jQuery ショッピングサイト等でみかけるスライドパネル 2013/10/23」をクリックして下さい。

>タカハシ先生
うまく動きません。いろいろやってみましたが出来ませんでした。明日の勉強会でもう一度お願いします。

CSS SLIDE PANEL

CSS SLIDE PANEL

2013-10-18 Friday 勉強会の議事録です。

kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。
CSSで実装するパターンとjQueryで実装するパターンをやりました。

タカハシ先生、ありがとうございました。

CSSで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。
http://nobu-69.com/others.html
「css3 ショッピングサイト等でみかけるスライドパネル 2013/10/23」をクリックして下さい。

jQueryバージョンは、近日中にアップ予定。

アップしました。

working for yourself

みなさん議事録を書くのをいやがる傾向にありますが、書く事により確実に理解度は増すのでとても自分の為になります。もし、議事録を書いている時に分からなくなってしまっても先生がサポートしてくれる(多分)ので心配ありません。WAVE時代にPALを見ながら勉強していて実際に課題制作になったら何も出来なかったという事が多々ありましたよね。そのことからも分かるように、勉強会に出たからといって教わった技術が絶対身に付くとは限りません。

タカハシ先生は、私たちの質問に常に答えてくれます。質問内容が先生の知らない事であれば調べたり調査したりして答えてくれています。先生はよくこんな事を言っています。

「パソコン倶楽部りんごが始まって一番勉強になってるのは私だと思う。」

メンバーの質問に答えたり、議事録を書いたりすることは、もちろん他の人の為でもありますが、実は自分の為に一番なるのですよー。

国内のブラウザシェア

国内のブラウザシェアについて知りたいのですが、確実な情報を得るにはどこのサイトで見るのがよいのでしょうか。個人のブログとかのサイトは出てくるのですが、正式?というか、確実な情報を発表している信頼のあるサイトを知っていたら教えてください。

例えばマイナビニュースはどうでしょうか?http://news.mynavi.jp/news/2013/09/02/066/

大学のコンピューターリテラシーという科目のレポートでブラウザについて考察しなさいというのがあって、それを書くのに参考資料として使います。あまり個人のブログ等での情報はNGになります。ちなみに大学(ムサビ)のレポートはwikipediaなどの三次資料はNGです。

wordpress

WordPressのユーザー一覧ページ用のテンプレート

「WordPressのユーザー一覧ページを作る」の記事の続きです。
「メンバーが多いのでページ送りをしたい」という旨のご質問コメントをいただいたので、実装してみました。お使いのWPのバージョンやテーマが違う場合は、適宜、読み替えて参考にしてください。 続きを読む

css color change

テキストを選択したときの色をCSSで自分の好きな色に変える

この前の勉強会でジェイコさんに知ってる?って聞いたら知らないといってたので、意外とみんな知らないのかな?と思いメモしておきます。

テキストを選択したときの色をCSSで自分の好きな色に変えれる事を知ってますか?
僕がお仕事で制作したサイトhttp://juicyeyes.com/サイトのイメージに合わせた色にしました。
テキストを選択してみてください。

Q. そんな事をして何かいいことあるの?
A. 特にありません、多分。クライアントさんにも気づいてもらってない。(笑)!….ただの自己満足に近い。….でもいいじゃないか。

文字を選択してみて↓

柿くえば 鐘がなるなり 法隆寺
古池や蛙飛びこむ水の音
朝顔に つるべとられて もらい水

スマホでサイトが見れない

こんにちは。

昨夜、お客さんから「作ってもらったホームページがスマホで見れないよ〜パソコンは問題なく見れるのに。」とメールがありました。
前までは普通に見れてたのに。との事。

いそいで僕のiphone4sとのりこさんのAndroidで確認したら問題なく見れました。すいませんが、以下のサイトがスマホから見れるか確認してください。
http://glossy-wax.com/

協力してくれたら、のぶ特製HAND MADEブローチを差し上げます。1点1点心をそんなに込めない手作りで、世界に一つしかないハンドクラフト!(希望であれば w)

正しい引用のルール(2)

引用の仕方

正しい引用のルール(1)を参照して、引用を行ってみましょう。
引用部分をBLOCKQUOTEタグなどで囲み、引用であることを明示します。見た目の指定はCSSで設定します。

長文、段落の場合の使用タグ —– BLOCKQUOTE

引用元をURIで示す(blockquote)

<blockquote>タグに cite=”” を追加すると、引用元を示すことができます。
<blockquote cite=”http://www.taglist.com/”></blockquote>

cite=””
引用元がWebサイトの場合 … URLを指定
引用元が書籍の場合 … ISBN(図書コード)を指定

■ 引用元がWebサイトの場合
<blockquote cite=”http://www.taglist.com/”> ~ </blockquote>
■ 引用元が書籍サイトの場合
<blockquote cite=”urn:ISBN:0-0000-0000-0″> ~ </blockquote>

引用元:引用元をURIで示す

短文の場合の使用タグ —– Q

引用元をWEBや書籍を示す場合の使用タグ —– CITE

マックのFTPソフト

データファイルをローカルからサーバーに転送するのに今まではffftpフリーソフトを使用していました。(windows xp)

この度マック(Mountain Lion)にしたので、どうすればいいでしょうか?マックは初めてです。ffftpフリーソフトはwindows用のソフトウェアなんですよね?先ほど知りました。
FFFTPのように左右にローカルとサーバーが表示されているものが使い慣れてていいんですが。サーバーとか苦手なので、今までと似た感じが安心する。でも、今までと違くても簡単ならそれもアリかなあ。

調べたらFileZillaがffftpに似ててよさそう。http://www.marbee.info/2012/08/21/3268/
どう思いますか?

マックユーザーのみなさん
マックおすすめのフリーソフト教えてください。

サイトリニューアルについての注意点(.htaccessと404.html)

お仕事で、あるお店のサイトリニューアルをしました。サーバー・ドメインは昔のままでということで。

そこで1つ問題があり、解決したのでメモしておきます。

【問題となった事】
サーバーはそのままなので、昔のサイトのデータ(色んなフォルダやhtmlやcssファイルなど全部)をサーバー上から削除します。次に新しいサイトのデータ一式をサーバーにアップロードします。初めてサイトにアクセスするユーザーは問題なくリニューアルしたサイトを見る事が出来ます。しかし昔のサイトをブックマークしているユーザーがブックマークをクリックするとどうなるでしょう。サーバーが昔のページを開こうとして、その結果ページが無い事が判明して以下のような画面が表示されます。(ロリポの場合)

ccc

これは、そんページないよ~!というロリポのデフォルトのページです。これでは、困ってしまいますよね。昔からのユーザーに「あれ~、サイトなくなっちゃったの?!」「何かあったのかな?!」と思われてしまいます。指定されたページ(URL)が見つから無い場合、「この度リニューアルしました!新しいサイトはこちらでーす!」と言った感じでリンクを貼ってあるページが表示されると親切&安心ですよね。

2ステップで問題解決!

【①オリジナルのNot Foundページを作る】
404.htmlというファイルを作ります。そこにリンクを貼ったり、リニューアルの説明を載せます。デザインはcssで好きに出来ます。これをサーバーにアップロードします。index.htmlとかがあると思われる一番上の階層に。このファイルは、ユーザーが指定したページが無い場合に表示されるようになります。
【②.htaccess】
404.htmlというファイルを作ってサーバーにアップロードしただけでは、機能しません。「指定されたページ(url)がサーバーになかったら404.htmlを表示する事!」という命令をしなければいけません。テキストエディタで新規ファイルを作成して下さい。名前は「htaccess.txt」で、中身は ErrorDocument 404 /404.html と書きます。それを一番上の階層にアップロードします。アップしたら右クリックでファイルの名前を変更して下さい。
htaccess.txt → .htaccess(.から始まる。拡張子なし。)名前を変更したら属性を「604」にして下さい。これも右クリック。

以上です。

参考サイトhttp://oxynotes.com/?p=159
この他にも、ロリポ404やredirect htaccess で検索するといろいろ出てきますよ。

タカハシ先生、ありがとうございました。

ちなみに制作したサイトはこれです。http://juicyeyes.com/
試しにhttp://juicyeyes.com/boyoboyo.htmlという、ありもしないアドレスを入力すると440.htmlが表示されます。

英語のページで文字があふれた時、単語の途中で改行させる方法

日本語と英語の2ヶ国語のホームページの更新をしていたら、日本語は問題なく表示されるのに、英語のページで文字があふれてしまいました。

原因

日本語の文章は句読点や中点によって、語や文章の区切りを識別しますが、英語などの西洋語は語の区切りに空白を挟んで記述されるので、単語が羅列され空白がないときに文字があふれてしまうことがあります。

単語の途中で改行させる方法

1)word-break: 行の改行方法を指定する(値:break-all)

word-breakプロパティで指定できる値には、normal・keep-all・loose・break-strict・break-allがあります。キーワードによってCJK(ハングル、日本語のカナ、および、CJK表意文字)と非CJKにおける改行制限の厳格さの程度を指定することができます。ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものです。

word-break-CSS3リファレンス
初期値はnormalでCJKは厳格に改行制限されるため、日本語はあふれることがありません。

2)word-wrap: 単語の途中で改行するかどうかを指定する(値:break-word)

改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー(はみ出し)を防ぐことができます。

word-wrap-CSS3リファレンス

ワープロソフトなどで、行末に長い単語が来るなどして単語を2行に分ける必要が生じたときに行われる、単語の前半と後半をハイフンで繋ぐ機能。主に欧文で使われる機能である。

どこで切ってもよいわけではなく、単語中の音節の区切りでハイフネーションを行うことになっている。また、ハイフネーションを続けて行うと読みにくくなるため、3行以上連続してハイフネーションを行うのは望ましくないとされている。

ハイフネーションとは 【 hyphenation 】 – 意味/解説/説明/定義 : IT用語辞典

正しい位置で改行するためには、改行したい位置に<br/>タグを入れた方がよいかもしれません。

Examples

word-wrapがnormalの場合

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious

wordwrap: 単語の途中で改行するかどうかを指定する(値:break-word)

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious

wordbreak: 行の改行方法を指定する(値:break-all)

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious