jimdoのこと

Microsoft Edgeの電話番号リンクを削除する方法とjimdoでの代案

昨日と関連する話なのですが。

不便だ!とだけ喚いていても、解決にならないのは当然です。
リンクを解除する方法も、もちろん調べました。
例によって、他力本願で。

リンクを削除するための解決法は、こちらを参考にしました。

Microsoft Edgeで、数字のみの文字列に勝手にtelリンクがはられる問題(株式会社TAM様 より)

こちらによると、次のコードをヘッダーに記述するそうです。

<meta name="format-detection" content="telephone=no">

スマートフォンでは電話リンクを有効にしたい場合は、user-agentでスマートフォンとそれ以外での動作を分けると良いそうです。
もしくは、レスポンシブwebデザインにして、cssで切り替え、PC用のコードに次のように記述します。

<p x-ms-format-detection="none">000-xxxx-◯◯◯◯</p>

なのですが……これ、jimdoだと少し違う問題になってきます。
私の知識が足りないだけかもしれないのですが、user-agentでの判定ができません。
ヘッダーに記述したのですが、動きませんでした。

仕方ないので、下のコードを書き込んだのですが、独自レイアウトを使用する場合、管理画面からソースに書き込む方は動きます。
しかしコンテンツの編集で文章を選択し、そこからタグで書き込む方だと、「x-ms-format-detection=”none”」の部分が自動的に消えます。

とりあえずではありますが、解決策としては、上のコードをヘッダーに書き込んだ上で、スマートフォンにのみ出現する電話ボタンにaタグでリンクを追加するしかなさそうです。

スマートフォンでの電話

jimdoはAMPも未対応とのことですが、user-agentでの判定も何とかできるようにしていってほしいです。
画期的で便利なサービスを破格で提供してくださっているので、あまり望みすぎるのも問題ですが、独自レイアウトのスマートフォン対応における壁が少し高めだと思うので、そこだけでもお願いしたいです。

【ハートブレーン】http://heartbrain.net

jimdoの編集画面が現在文字化け中

現在、ハートブレーンで推奨している、jimdoのシステムで作成したホームページですが。
最近、ログインするとこのような現象になります。

ここだけ見ると大した問題ではない

この画像だけでは分かりづらいかと思いますが、要所要所の表記が

文字化け

このように文字化けしています。

一見だと無視さえできれば編集上あまり問題のない位置だと思えます。
しかしそれは、あくまで「一見」の話。
思ったより被害は甚大です。

甚大な被害

無理。

この問題ですが、ブラウザを更新すればOKらしいです。
WindowsでしたらF5キー、Macでしたらcommandキー+Rです。

現在復旧中ですが、いつになるかは分からない、とのことです。
しかしjimdo公式Twitterアカウントが、昨年にもこのようなツイートをしていたようです。

昨年のツイート

過去にも同じような現象があったらしいので、今回もきっと復旧できると信じています。

【ハートブレーン】http://heartbrain.net

私がjimdoでレスポンシブwebデザインを使いたくない理由

レスポンシブwebデザインは、設定は面倒ですが非常に有意義なスタイルです。
モニタのサイズに合わせてデザインが切り替わっていくのは、どのデバイスを使っている人も不自由しなくてすみます。
面倒ですが。

便利なシステムで台頭してきたjimdoでも、レスポンシブwebデザインは設定可能です。
設定→ヘッダーの編集でviewspotを指定し、スマートフォン表示設定を「オフ」にし、CSSで指定します。
すると、問題なくモニタのサイズに合わせてサイトが切り替わっていきます。

しかし、個人的に思うのですが、jimdoを利用したサイト、更新するのが自分だけだったら問題ないのです。
ただ、複数の人で管理したり、お客様にお渡ししたり、という場合は、少々踏み止まった方が良いかもしれません。

というのも、jimdoでは、あらかじめスマートフォン表示用のCSSが存在するのですが。

明日からの写真展に本気で出すのかこのテント

この通り、スマートフォン表示だと、カラムが無効になります。

しかし、スマートフォン表示をオフにすると、このカラムの設定も、自分でやり直しです。
Google Chromeのデベロッパーツールでクラス名を探してCSSに書き直せば解決する話ではあるのですが。
これが「写真付き文字」だと更に厄介で、写真が左寄せか右寄せかによっても設定が変わります。

それと、今日初めて知ったのですが。

2カラムでメインコンテンツの横幅だけ可変にして、ナビゲーションバーはpx固定にするのは、よくある話だと思います。
それについての解決法は数々ありますが(こちらもその内の1つです)、いずれも使うのは「ネガティブマージン」です。
margin-left: -200px のマイナスの部分です。
他にもきっと方法はいくつもあるのでしょうが、一番知られているのは、恐らくこの方法です。

しかし、この設定をjimdoで使ってしまうと……。

ナビゲーションの編集ができません。
「ナビゲーションの編集」というボタンが表示されないのです。

1時間ほど格闘した結果の答えだった

その上、貼ったはずのリンクも、何故かデッドリンク扱いです。
ソースからコピーしてアドレスバーに貼り付ける以外に、ページ移動の手段がなくなります。

ネガティブマージンを外した途端に機能するようになったので、原因はこれだと考えて問題ないと思います。

レスポンシブwebデザインを設定する時は、このようなリスクを踏まえ、丁寧に設定していきたいものです。

【ハートブレーン】http://heartbrain.net

自分のGoogle Chromeだけjimdoが見れなくなった

ある日、いつものようにGoogle Chromeを起動させ、いつものように jimdo で制作したサイトを開いてみると

css無効の状態

また私、何かした!?と、サーバー障害情報やjimdoアカウント状態などを必死で調べる私の顔は恐らく真っ青だったことでしょう。
何せ数週間前に本当にやらかして、同僚Hさんに助けてもらった苦い記憶が……。
jimdoのサイトを複数運営されている方、2つ以上のサイトを別タブで開いたままログインすると、先に開いていたサイトのCSSが、何故か後に開いたサイトのCSSに取って代わられています。ご注意ください。

障害情報を探ろうと、jimdoの公式サイトに飛ぶと……こちらのサイトも同じようなレイアウトの崩れ方。
サーバーが落ちたか……と結論に一旦は辿り着いたのですが、障害情報は全くありません。

一縷の望みに賭け、自分のPCのFirefoxでサイトを開いてみると、普通に見れました。

もしかして、これはブラウザとの相性なんだろうか。 以前にお客様にGoogle Chromeを推奨したことなど都合良く忘れ去っている私の後ろでは、同僚Hさんがjimdoサイト製作中。何の問題もなく。
しかもHさんが作業していたブラウザも、Google Chromeです。

まさか、と思い、Google Chromeに別アカウントでログインして、jimdoで制作したサイトを見てみると

統一性がないのはテスト用サイトだから

見れたよ……。

この現象は、ブラウザの問題ですらありませんでした。
ここ最近、Google関連アプリは次々と改良を重ねているようで、仕様変更が続いています。
Google検索アプリでワンタッチでスケジュール管理できるようになったり、アカウントのセキュリティを細かく設定できるようになったり。
その際に1回1回お伺いを立ててくるのですが……まさか私、適当に変な所押しちゃった?

一番考えられるのは、セキュリティです。
しかしどこを変更したかなど記憶にあるはずもなく、とりあえず別アカウントの設定と比較してみたのですが、ほとんど変わりません。
設定じゃないとしたら、拡張機能の可能性が高いです。 その中で、私が最近加えた変更といえば

やっぱり消す気にはなれない

普通にブログを閲覧していたはずが、何かの間違いで、中途半端に女性の夢が詰まっているけど結局やることは一緒だという確実に年齢制限のあるマンガの購入ページに飛ばされたことで、これはもう頼るしかない!と導入に踏み切ったのです。Adblock Plus。

物は試し、とこの機能をjimdoのページで解除してみると

いちいち消すのも面倒かもしれない

終わってみれば、割とあっさりした内容でした。

しかし、先日まではjimdoのページも問題なく閲覧できていました。
jimdoか、Adblockか、どちらかが仕様変更した結果というのが、一番あり得る原因だと思われます。

ただ、jimdoの操作マニュアルページで、広告ブロック機能としてAdblock Plusが紹介されていた気がします。
jimdoの公式の姿勢がこれなら、変更したのはAdblock Plus側の可能性が高そうです。
広告ブロック機能のあるアプリを、もう一度探す旅に出ることになるかもしれません。

【ハートブレーン】http://heartbrain.net

jimdoの不具合かと思ったら単に自分がやらかしていただけの話

jimdoのクラス名は一定ではないので、ページごとにデザインを変えるのは無理なのは周知の事実です。
しかし実はTOPページだけ変更可能というのも、また有名な話です。

似たような名前のクラス名がたくさんある

この bodyのクラス名 cc-page-index を指定すれば、TOPページだけデザインを変えることが可能です。

とあるデザインで、h1タグの置き場に困り、今回この方法を採用しました。
ヘッダー部分のテキストにh1タグを指定したいけど、全ページ共通は困る、という時に使える、と思ったのです。

.cc-page-index h1 { position: absolute; top: 0; left: 200px; }

大体このようなcssの設定にしたところ、思わぬ落とし穴に遭遇しました。

度々クリックし忘れる

このレイアウトで行こうと思っても、「はい」「いいえ」「戻る」どのボタンを押しても、全く反応がありません。
さては不具合!?と、意気揚々と問い合せてみた後

このアラートもまた、h1タグであることに気がつきました。

考えてみれば、左側も少し表示がおかしいです。

今回は、置き場に困ったh1タグにクラス名を付けることによって解決しました。
jimdoでは、h1タグの扱いにお気をつけください。

【ハートブレーン】http://heartbrain.net

1 2 3
メールでのお問合せ・お見積りはコチラ