ご迷惑をお掛けいたしますが、よろしくお願い申し上げます。
]]>お客様 | 星の接骨院様/新潟県見附市 |
URL | https://www.nagaoka-kotuban.pro/ |
業種 | 接骨院 |
デバイス | PC/スマートフォン/タブレット |
デザイン | レスポンシブデザイン |
当社担当 | デザイン/コーディング/WEBコンサルティング/ |
仕様 | HTML5/CSS/CMS/Java Script |
期間 | 約3ヶ月 |
ホームページをリニューアルさせて頂きました。
リニューアルでは記事や構成を見直して、どんな情報をユーザーが求めているか、ユーザー目線で情報を整理して、項目の選定に当たりました。
また、元々のページにも施術事例は掲載されていたのですが、もっとタイムリーに情報発信をできるように、リニューアルを機にCMSを導入することで運営者自ら更新ができ、随時施術事例もアップできるようにしました。
骨盤の不調からくる身体の悩みや苦痛を軽減し、根本改善の治療をより多くの方に知ってもらいたいとリニューアル後は更新も頻繁に行われています。
]]>メールでのお問合せの受付は可能ですが、返信は連休明け10日以降となりますのでご了承ください。
ご迷惑をお掛けいたしますが、よろしくお願い申し上げます。
]]>17日水曜日からは平常どおり営業いたします。
お客様にはご不便をおかけ致しますが、よろしくお願い申し上げます。
]]>メールでのお問合せの受付は可能ですが、返信は6日以降となりますのでご了承ください。
ご迷惑をお掛けいたしますが、よろしくお願い申し上げます。
]]>今までレスポンシブデザインでフォントサイズを変更したいとき、「@media・・・」とメディアクエリでスクリーンサイズをいくつか指定して、サイズを切り替わるようにし、さらに一部は「font-size: calc(18px + 1 * ((100vw - 320px) / 680)) !important;
」のような設定を行って対応してきた。
今回、今まで使っていたCSSをサイトに合わせ見直ししていて、もっとわかりやすくもっと便利に書ける記述がないだろうか?と久しぶりに確認してみると「css関数clamp」という記述方法があることを知った。
https://caniuse.com/?search=clamp
2020年春にはfirefoxが対応して、モダンブラウザではすべてのブラウザにサポートされたCSSの比較関数とのこと。
勉強不足で、今まで知らず試したことがなかった・・・、反省。
今回はこの記述でCSSがシンプルになったので、メモを兼ねて記録。
IEは対象外なので、IEブラウザで見たときは、フォントサイズにclampで指定した内容は無視される。
基本的な使い方は以下サイトに。
https://developer.mozilla.org/ja/docs/Web/CSS/clamp()
clamp()
によって、ビューポートの大きさに合わせ、また最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができるという便利なコード。1行でメディアクエリを使用することなくサイズを変更することができる。
IEなど非対応ブラウザ用には、今までのモダンブラウザのみ対応の記述と同じ方法で記述すればよい。
通常のフォント指定でclampを含まないフォントサイズを最初に記述し、その後にfont-size: clamp(・・・)
と書くと、非対応のブラウザはfont-size: clamp()
を無視し、最初に記述したフォント指定サイズが適用される。
.f21 { font-size: clamp(18px, 1vw, 21px); }
基本のフォントサイズを18pxに設定した場合、ウィンドウ幅1vwの大きさを基本として、ウィンドウ幅を拡大した場合に21px以上になることはなく、また、ウィンドウ幅を縮小したときは、今度は18px以下にはならない。
つまり18~21pxの間で可変をしてくれる。
なんと便利!また、CSSもすっきりする。
ここでIEなど非対応ブラウザの対策についてだが、利用するサイトで「IEは無視する」という前提の場合でも、ベースCSSにてbodyやhtml、見出しなどにフォントサイズを指定していると、「clampを含まないフォントサイズを最初に記述」のコードを書かなくてもよいケースもある。
CSSを設定するとき多くの場合、<p>や<h3>など段落や見出しスタイルは、CSSで最初にリセットして初期化し、さらに基本的なサイズを設定する。どのサイトでも基本はほぼ変わらない。
その後、個別にスタイル設定したい場合の段落スタイルや見出しスタイルを追加して必要に応じてそれを使ってコーディングする。
実際に、今回は
html {
font-size: 62.5%;
font-weight: 500;}
body {
font-size: 1.6rem;
}
@media screen and (min-width: 1025px) {
main p{font-size: 1.7rem;}
}
という記述を書いているので今回設定したclassのCSSを<p>タグに設定した場合、IE11で検証するとp class="f21"
のclassで設定したフォントサイズは無視され、main pが有効となって1.7rem=17pxで表示された。
古いブラウザへの対応では、今回のようにフォントの大きさにclamp
を使う場合には、無理にIEを同じフォントサイズにしないプログレッシブ・エンハンスメントの考え方で対応ということでよしとすれば、コードも減り良いと思った・・・。
HTMLにデータ属性をつけての起動ができ、またエラーメッセージもカスタマイズができて便利。
いままではformタグに
data-parsley-trigger="keyup focusout change input"を記述して起動していたが、今回2つのフォームを1HTMLに設置するケースがでたのと、datepicker.jsで日付選択を設置したinput要素にも「必須」としてチェックをかけた場合、datepickerで日付選択してもエラー表示が残ったままという現象が発生した。
そこでネットで検索したら、個別にチェックのタイミング設定もできることがわかって、この「input」要素だけdata-parsley-trigger="change"を直接設定。
更に2つのフォームにそれぞれ記述していたエラーチェックの起動タイミングをやめて、Parsley.options.trigger = "keyup focusout change input";を記述することでうまくエラーのタイミングの調整ができた。
複数フォームのエラーチェックの設定は以下のサイトの情報を参考にさせて頂いた。
https://qiita.com/_-_-_/items/74372058087b965764ba
ありがとうございます!
17日火曜日からは平常どおり営業いたします。
お客様にはご不便をおかけ致しますが、よろしくお願い申し上げます。
]]>
SOYCMS公式サイト・京都市の齋藤様が継続開発されたバージョン(https://saitodev.co/soycms/)
Webサイトを作るとき、そこにはそれぞれの理由や目的があるはずです。たとえば、コーポレートサイトなら、会社の存在を広く知ってもらいたい、自社の技術やこだわり、その取り組みなどを伝えることで、お問い合わせにつなげたい、ネットを通じてもっとコミュニケーション窓口を広げたいなどを目的としていたり・・・。
オープンソースライセンスのSOY CMSは、柔軟性・拡張性に富み、運営者の目的達成するためのプラットフォームとして力を発揮します。
本体プログラム自体は軽量でその中にはサイトでの表現を拡張できるプラグインも含まれています。また更にSOY Shop/Appによって強力な機能拡張ができます。
WordPressというオープンソースのCMSとその容量を比較して見てみると、2019/4月最新バージョンのCMS本体「wordpress5.1.1」で40.3MB(プラグイン含まず)に対しsoycms_3.0.2p121のバージョンでは25.3MBに50を越えるプラグインが最初から本体に含まれており、ページ表現やサイトの構成によって無償で利用ができます。
WordPressは世界的に多くのプラグインが有志により無料で開発されていますが、このプラグインは時としてWordPressのバージョンアップが原因で動かなくなったり無償がゆえにその継続性も危い部分を含んでいます。
もちろん有料のプラグインも多数存在しますが、この場合でもWordPressのバージョンアップに対して対応の保証をするものではなく、現行バージョンや開発時のバージョンを基準としているため、そのたび、費用が発生する可能性もあります。
この点、SOYCMSの場合、最初から用意されているプラグインはCMSプログラム本体とセットで利用できる仕組みなので、本体のバージョンアップが原因でプラグインが動かない場合はSOYCMSと関連アプリに関する掲示板を通して開発者に関わる方に相談や要望などコンタクトすることで相手の存在が見える対応をしてもらえることが多く、制作会社や利用ユーザーにとってとても心強く安心感があります。
機能拡張の場合には、本体には手を加えず独立したものとして開発・追加することができる仕組みとなっているため、そのサイトの目的にあった専用の管理画面を開発するなども柔軟に対応が可能です。
必要な機能を必要なだけ追加できるため、運用の負荷も小さくなります。
サイト管理は管理者権限により表示される管理画面が変わります。
日常の記事管理者が情報を追加する場合、うっかり誤操作をしたりしないように最初から日常の記事管理者運用に使用しない機能のボタンが表示されないようになっています。
これにより、システムやサイト構成に影響を与える心配もなく、安心して日々の運営ができます。
SOY CMSはオープンソースソフトウェアであると同時に、開発元が日本に存在する企業です。(SOYCMS公式サイト)、制作会社によるサポート、開発元や継続開発者によるサポートと、海外開発のオープンソースにはない安心がSOY CMSにあることはとても大きな強みです。
SOY CMSに関する情報交換の場として現在掲示板が用意されており、ログイン登録がなくても閲覧は自由にできますし、ログイン登録すれば、不具合時の解決を有志サポーターからもらえることも・・・。
Web制作会社を通してSOY CMSを利用しているがその会社にサポートを依頼できない場合のご相談、業務最適化のための専用管理画面/アプリケーション開発のご相談も可能です。
SOY CMSとSOY AppはPHPで開発され2008年にオープンソースライセンス(GPL Ver.2)に基づき公開されました。
開発当初は頻繁に機能改善がされていたのですが、ここの所、残念なことに開発元でのSOYCMS開発(SOYCMS公式サイト)の速度が鈍っている状態です。
それが滞るとユーザーは離れ、プログラムも改善されないまま時代に取り残されていずれは忘れさられる危険性もあります。
また利用環境にも影響がでます。ホームページをレンタルサーバーで公開することも一般的な今、レンタルサーバーに組み込まれているPHPバージョンも年々バージョンがアップしており、2019年ではphpバージョンの7以上が推奨となっているサーバー環境もありますので、利用するサーバーによってはPHPのバージョンが合わず、不具合が起きたりする可能性もあります。
そのため、現在は公式サイトよりも大阪の齋藤様が継続開発されたバージョンを確認することが多くなりました。SOYCMSはオープンソースライセンスに基づき、公開されているため、公式サイトにも明記されているように「誰でも用途を問わず無償で利用でき、カスタマイズも自由に」できるのです。齋藤様は元々はSOYCMSの開発元でこのCMSの開発当初からシステム開発に携っていられた方で、現在は開発元を離れ、独自にこのSOYCMSの改善に取り組まれている方です。
CMSを利用するとき、特にセキュリティ対策はどんなCMSを利用する場合も重要事項ですが、この点も継続的に改善されているバージョンが安心です。
SOYCMS、SOYShop、SOYAppの最新版と、 機能の説明などの情報は齋藤様が運営されている以下サイトで情報を確認できます。
脱・植物のミカタ SOYCMS/SOYShop開発ページ
だれでも無償で利用できカスタマイズも自由なSOYCMSを継続開発して頂けるのは、大変ありがたいです。
このCMSの開発が今後も継続されることを切に願っています。
今後ともオフィスササガワをよろしくお願いいたします。
]]>