キーワード:カスタマイズ 解除
はい、Webの駅のカスタマイズについてです。
このタイトルも3回目ですね。

以前、レイアウトの変更をやろうとしたらエラーが出て
レイアウトの変更が出来なかった件ですが・・・
原因が判明しました。

天草Webの駅のカスタマイズ2で<ict:>タグを取り除いて
任意のHTML書けばもっとデザインとか自由に変更できるんじゃ?
・・・みたいな事を書きましたが、これが大いなる過ちだったようで、
ictタグを取り除いたら、今回のような現象が発生するとの事でした。
本来、取り除いたらいけない物を取り除いたって事です。

とにかく、こちらではどうしようもなくなってたので、管理者の方に治してもらいました。

慣れてきたと思って調子こいてHTMLとかスタイルシートを
好き勝手にいじくり回した結果がこれですよw

システムをまだよくわかってないうちに色々と弄るのは危険って事です。
良い教訓になりました。(しかし学習しないのがわたしです^o^)
触らぬ神に祟りなしとはまさにこの事ですかね。(意味が違う?w)

でもまぁ、色々といじらないとわからない事もあるので
良い経験ではありましたよ。 ←迷惑かけたくせにw

しかしictタグを消すとエラーとなるのは自由度が制限されるので、今後はictタグなしでも
エラーが出ないように修正を行っていく予定との事でした。

ただ、しばらくはictタグはこのままにしときたいと思いますw
皆さんもictタグには今のところ触れないようにした方がよいと思いますよ。

あと掲示板も設置しました。
メニューからは「BBS」で開けます。
天草Webの駅を始めて1ヶ月以上経ちました。
だいぶ操作にも慣れてきて、編集時のクセ(?)も少しずつわかってきました。

ところで、レイアウト設定でスタイルシートとHTMLが編集できますが、
スタイルシートを別に用意してそれを読み込ませる方法って
<ict:CssLink runat="server" />
という独自タグを取り除いて、代わりに
<link rel="stylesheet" type="text/css" href="任意のスタイルシートのURL" />
って感じのタグを挿入してやればいいのかな?
  ↑
ダメ!絶対!! 追記:2014/01/29(詳しくはここ)


デザインをもっと大きく変更するにはこのへんの独自タグが結構影響してきそう。

ま、私の場合デザインを変更するにもデザインセンスがないので
元のテンプレートからあんまり変えない方が見やすくて無難なんですけどねw

javascriptも勉強せんといかんなぁ・・・

UI設計はアプリ開発でも苦手なんです・・・

今回はWebの駅を使っていてちょっと不便だなと思った事の解消方法みたいなものです。

 

Webの駅で日記(記事)を書いて、その中に画像を挿入したりする事があると思います。

その場合、画像サイズが大きくてそのまま表示すると枠からはみ出して、

画面レイアウトが崩れてちょっとなんだかなぁ・・・と思う事があります。

 

ネットワークドライブでNASに簡単アクセスで書いた記事がまさにそのようになってますw

 

さて、これを解消するためには画像の縮尺を調整して縮小表示するようにすれば

画面崩れはなくなりますが、今度は画像が小さくて見難くなってしまいますね。

その場合、画像をクリックすると原寸画像を表示するようにリンクを挿入する方法がありますが

Webの駅で普通に画像素材へのリンクを指定したらブラウザで画像が表示されずに

画像ファイルそのものをダウンロードしてしまおうとしてしまいます。

 

IEだとこんな感じのメッセージが出ますね↓動きも同じようになってるので画像をクリックしてみてください・・・

iv0002


パケットキャプチャのツールでHTTP通信の内容を見てみたところ、

HTTPヘッダに

content-disposition: attachment; filename=xxxxx.jpg

という部分を見つけました。

おそらくこれが原因なんじゃないかな~と思います。

Webに関してはあんまり詳しくないのでなんとも言えませんけどね・・・あくまで何となくそう思っただけです。

ちなみにMIMEはimage/jpegと言った感じできちんとイメージ用のMIMEタイプになっていました。

 

とりあえず、MIMEが画像としては返しているようなのでこれをクリックしたらきちんと原寸画像が開くように

ちょっとした工夫をしてみました。

試しに↓の画像をクリックしてみてください。

iv0002

 

ブラウザで拡大画像が開けましたか?

これがやりたかったのです。

 

どうしたかというと、画像表示用の簡単なjavascriptを書いただけです。

 

やり方ですが天草Webの駅で日記を書く時などに、右上に▼その他の操作なるものがあります。

そこに「HTMLコード編集」というものがあると思いますが、そこを開いてみてください。

 

そしたらごちゃごちゃとHTMLのタグが書いてあると思います(記事が空白なら何も書いてない)

そのHTMLの先頭に以下のタグ(緑の部分)を貼り付けてください。

 

<script src="https://amakusa-web.jp/Sozai/Mg/FileAccess.aspx?aplUseNo=12267&amp;angoFolderKey=FQ6vIUqE2H8UAXEKXn%2f5KQ%3d%3d&amp;angoFileKey=MvcjmBnnEhgsmm9fvphn4w%3d%3d" type="text/javascript"></script>

 

これは私が画像表示だけをするHTMLを吐くためのjavascriptを置いているURLです。

単純な関数ひとつなので自分で作って自分で置いても構いません。

 

そして「リンクの作成」でURLは「http://」と初期値があると思いますが、それを消して

以下のように書いてください。

javascript:imageView('Webの駅の素材画像のURL')

 

どうですか?

これで画像をクリックすると原寸画像がブラウザで表示されるようになったと思います。

 

このように不便だと感じた場合も工夫次第で色々と解消できたりします。

みなさんも是非色々と試してみてみてください。


追記2:

ブラウザの別ウィンドウで開くように変更しました。

コメント欄に追記でスマホだとうまく開けると書きましたが、

Android端末だとやはりダウンロードが始まるようです。

うまく開けるのはiOSデバイスの場合のようです。

よくわかりませんが、HTTPヘッダの

content-disposition: attachment; filename=なんとか

の部分がiOSでは意味をなさないのかもしれません。。。

[ 1 ]      3件中 1-3件