Webデザインコミュの制作に当たっての疑問の情報交換

ホームページの制作をするに当たり
様々な疑問や謎が出てくる事は多々あると思います。
その問題をここを通して解決できればと思います。

コメント(25)

最初
全て
最新の40件

Safariのブラウザのチェックの際に今回添付させていただいてる様な「？マーク」が出てしまいます・・・
大変無知でご迷惑をおかけしますが
お教えいただけたらと思います・・・

何卒よろしくお願い致します・・・

すみません、ご存知の方がいらっしゃいましたら教えて下さい。

Twitterウィジェト設置で困ってます。
公式のとこから設定ソースをコピペしてサイトのサイドメニューに表示させてましたが、
急に表示されなくなりました。
それも、全ブラウザで枠すら表示されていません。

ネットで調べると、文字コードが原因とありますが、
文字コードは指定の「utf-8」で設定していますので問題無いと思います。
また、ブラウザのバグといった原因もあるらしいですが、
他のサイトに設置されているのはしっかり閲覧できてます。

ソースの記述は下記の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript" src="../javascript/jquery-color.js"></script>
・
・
※中身は省略しています
・
・
</head>
<body>
・
・
※中身は省略しています。
・
・
<div class="sidebar2">
<div id="twitter">


<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

version: 2,

type: 'profile',

rpp: 4,

interval: 30000,

width: 170,

height: 250,

theme: {

shell: {

background: '#000000',

color: '#ffffff'

},

tweets: {

background: '#333333',

color: '#ffffcc',

links: '#cc9966'

}

},

features: {

scrollbar: false,

loop: true,

live: true,

behavior: 'default'

}

}).render().setUser('任意のアカウント名').start();

</script>



</div>

</div>
</body>

</html>

また、F12の開発ツールのコンソールではこんな記述が表記されています。

Refused to display document because display forbidden by X-Frame-Options.
Failed to load resource file://widgets.twimg.com/j/2/widget.css

理解に乏しくて、どういう原因か分からない状態です。

何かアドバイスを頂けると助かります！
宜しくお願いします！

[6] mixiユーザー 05月26日 13:31

はるかぱみゅぱみゅさん

範囲指定ツールで正方形が描けますよ✨

また、
レイヤーを使って、位置の調整や、マスクを設定すれば良いでしょう🎵

フォトショのコミュで質問したほうがいいかも？

[7] mixiユーザー 05月26日 13:33

>5 はるかぱみゅぱみゅさん

DTPデザイナーさんなんですね
WEBとだと考え方が全然違う部分があって最初は戸惑われると思いますけど
作業内容はそんなに変わらないので焦らないでいいですよ

内容は【600×600】ピクセルのサイズのバナーを作成したいということでいいのでしょうか？

バナーとはファイル形式がGIFかJPG形式、解像度が72dpi、カラーモードRGBカラーであればいいので
新規作成でカンバスを作成するときに

・幅：600pixel
・高さ600：pixel
・解像度：72pixel/inch
・カラーモード：RGBカラー

上記の内容を指定して作成。
あとはこのカンバスに普段のPhotoshopでの作業と同じように画像を作成して行ったらいいと思います。

そして保存するときに『別名を付けて保存』から保存形式jpgを選んで保存。
もしくは『WEBおよびデバイス用に保存』でjpgかgif形式に保存する。

これだけでバナーは作成できます。

[8] mixiユーザー 05月26日 13:52

ゆっちさん

早いコメントありがとうございます！
それがわからないんです(笑)

マルチポストになるので
フォトショコミュで質問しますね。

ueさん

早いコメントありがとうございます。
ご丁寧に書いてくださったこと
それは全てわかるんです(笑)

やはりＤＴＰデザイナーですと
イラストレーターが得意なので
その考え方が全く違うので
本当にワケがわからないです。

質問に書いたようなものと同様の物を作成しなくてはならず
その方法がわからなくて質問しています。

申し訳ないです(>_<)

[9] mixiユーザー 05月26日 16:54

> はるかぱみゅぱみゅさん
私もDTPデザイナーとして仕事しています。WEBは、現在勉強中です。

レイヤー分けが必要でないなら、もういっそイラストレーターで作成したらいかがですか？
完成したらWebでディバイス保存か、別名で保存で【jpg形式】で保存したうえで、ネイティブデータも保存しておけば、修正対応もできますし。
新規作成の際に、環境設定でカラーをRGB、単位をPX設定してアートボードを600px、塗り足しなしにしておき、【ルーラー】と【ガイド線】、【情報パネル】と【位置パネル】できっちり数値あわせれば可能ですよ。
イラレは精度が落ちるとWebコーディングされてる方に聞きましたが…作業効率優先なら慣れたソフト使うのも手かなと、思います。

フォトショの作業工程でなくてごめんなさいm(__)m

[10] mixiユーザー 05月26日 17:06

あお梅さま

ご丁寧にアドバイスありがとうございます！
親切な方からフォトショップでの作業方法など
色々教えていただきました。

あの、ネイティブデータってなんでしょう？ｗ
保存前のってことかな？

ありがとうございます（参考になります）。
今頑張って作業してますｗ

[11] mixiユーザー 05月26日 17:07

ご親切な方が手取り足取り教えて下さったので
質問は削除させていただきました。

コメントくださった３人の親切な方々
ありがとうございました(´∀｀)

[12] mixiユーザー 05月26日 17:53

はるかぱみゅぱみゅさん、質問を削除しちゃったらコメントくださった方々が何にお答えになってるのかがわかりませんが。

[14] mixiユーザー 05月27日 09:01

メーコさん

私も以前、突然表示されなくなったことがありました。
原因不明ですが、もう一度コードを取得して、入れ替えなおしたら直りました。

[15] mixiユーザー 05月28日 22:33

>木田優也さん
ご返信していただきましてありがとうございます。
私も色々と調べてみましたが、まだ解決していない状態です。
iframeはtopページのnewsとgoogleカレンダーで使用しています。
まだこのサイトは本番化をしていなくて、現在、dropboxにて作業しております。
これも何か関係あるのでしょうか？

[16] mixiユーザー 05月28日 22:50

>はるさん
ご返信していただきましてありがとうございます。
何度かコードを入れ替えてみましたけど、未だに表示されてません。。。
今でもサイト作成段階ですが、コードを入れた当初はちゃんと表示されていたのに
コードを無視されたかのように真っ白です。
泣けますねぇ。。。

[18] mixiユーザー 05月29日 08:40

メーコさん

（１）違うtwitterのタイムラインを当該ページで表示させてみる。
（２）Dropboxを使わないページもアップ出来るなら、試してみる。
（２）同じコードを貼り付けたhtmlを別の一般的なサーバーにアップしてみる。

以上で、何が問題なのか少しは切り分けられるように思います。

[20] mixiユーザー 06月18日 00:28

HPの作りというか、見せ方的なテクニックでの質問です。
http://www.akeboshi.com/
こちらのHPのようにGナビにカーソルを合わせると下罫線が追ってくる
ものを作りたいのですが、これはどういった風に作っているのでしょうか？
とてもかっこいいのでぜひチャレンジしてみたいのですがご存知のかたがいらっしゃいましたら
ぜひ知恵を貸していただけたらと思います

では失礼致します

[21] mixiユーザー 07月27日 17:43

ゆうぢろうさん

これはjqueryで可能かと思います。

LavaLamp という名前のメニューの名前でいくつかサンプルなどが出てきますので調べてみてくださいね。

[24] mixiユーザー 09月02日 15:20

>>[23]

基本的なやり方としては、:hoverでtexit-indentでテキストを飛ばして、back-groundで画像を指定すればいけますよ。
あとは細かい指定が必要ですけど。

ログインすると、残り9件のコメントが見れるよ