ＮＣ３のインストール・移行・カスタマイズの記録

今回、透過GIF・bmpを多用されているサイトの移行作業で移行したにも関わらず画像が正しく表示されないといった事象が気になり調査してみました。

その結果、移行時の「サイズの異なる画像作成」「掲載する画像サイズの指定」に問題があることが判明しました。

透過GIFの場合、別サイズのGIFを作成する際、色の透過度を指定し作成する必要があるのですが、そのようなことを行っていないため背景色が黒色になってしまっていました。

ちなみにこれは上記「エディ・ケイのロゴ」でアップロード時自動で作成された「medium」サイズの画像です。

また、bmpは「サイズの異なる画像作成」が行われず、使用・掲載画像の指定が「big」サイズの画像を指定されているため表示されないことが分りました。

っということで、移行後、透過GIFの背景が黒色・bmpが表示されないといった場合、そのような画像を含むコンテンツを編集画面で開き、ソース表示にし、画像を指定している部分（imgタグのsrc=）の「/big」部分を削除すれば元画像を指定することになり透過GIF・bmpが表示されます。

また、数が多い場合は、透過GIFのGIF作成部分
「app/Plugin/Upload/Model\Behavior/UploadBehavior.php」
を、bmpは移行時のサイズ指定部分
「/app/Plugin/Nc2ToNc3/Model/Behavior/Nc2ToNc3WysiwygBehavior.php」
をカスタマイズすれば、移行にて正しく表示されるようになります。

ちなみに移行時での問題でもなく、wysiwygでの問題で透過GIFで原寸以外のサイズを掲載した場合にも背景色が黒色になることが分かりました。またwysiwygでbmpは使用できないことも分かりました。

wysiwygでbmpを使用するためには
「/app/Plugin/Wysiwyg/Controller/WysiwygImageController.php」
をカスタマイズする必要がありました。（移行はできるのですが・・・）

以上、今回の作業でわかったことを掲載します。同様のことでお困りの方が少しでも解消できるのであれば幸いです。

何かNCのこと、移行のことでお困りのことがあればご連絡ください。お待ちしていま～す。

本日やっとNC3.3.3にアップしました。

いろいろとカスタマイズをしているのでバージョンアップを躊躇していましたが、ローカルで実施・確認し問題ないことが確認できましたのでサーバにそのままもってきました。

次は、ドロップダウンメニューを新バージョンを作成したので、メニューを交換しようと計画中です。

新バージョンは「東京成徳大学深谷高校」のサイトにも使用しているドロップダウンメニュー、スマホバージョンはいいできかなあとちょっと気に入っているのです。興味ある方は一度ご覧ください。

キャッチボール21さまからのご依頼で、昨年末よりNC2からの移行・リニュアル作業として作業させていただいていた「東京成徳大学深谷高校」のサイトが2月に公開されました。今回エディ・ケイのWEB制作実績に追加させていただきました。

是非一度ご覧ください。

「東京成徳大学深谷高校」のホームページ

みなさんご存じでしょうか。本当に今更なのですが、画像を多く含むページは表示速度が遅くなります。それは、画像のダウンロードに時間が取られ遅くなっているのです。「そんなん言われんでも」って声が聞こえてくるのがわかります。

っで、先日「表示速度の改善」といったことを調べていて今更なのですが分かったことがありました。

ひょっとして知ってられる方も多いかもしれませんが、私は知らなかったのでお教えします。

「lazyload」といったものがあり、ページ表示する際、初めに見える画像だけを読込み、それ以外の画像読込を遅延させるといったものがあるのです。それを使うとページの表示が早くなったと感じられます。

ちなみにこのサイトの「Web制作実績」に使用してみました。私的には本当に早くなったと感じられました。

一度「Web制作実績」御覧願います。

使用方法は、<img>タグに「loading="lazy"」を追加するだけです。

いかがでしょうか。

日誌を多用しているお客さまのサイトで新着情報にサムネイルを表示してほしいといった要望にお応えするため、「新着情報」プラグインをカスタマイズしました。

そのカスタマイズをこちらのサイトにも適用

トップページの新着情報（お知らせ）に「ブログ」プラグインで追加した記事に画像がひとつでも存在した場合、最初の画像をサムネイルとして表示するようにしています。

「ブログ」プラグインのかわりに「汎用DB」を使用すれば「新着情報」風に「汎用DB」の画像をサムネイルにし一覧を作成することは可能でしたが、既に「ブログ」で作成されている場合は、「新着情報」プラグインのカスタマイズを行うことでサムネイル表示が可能です。

また、標準の「新着情報」の表示は「トップページ旧」で御覧いただけます。テーマを使用することにより特定のページの「新着情報」のみカスタマイズが適用できます。テーマって本当に便利ですね。

いかがでしょうか。ご興味ある方は是非ご相談ください。

今回カスタマイズの例としてエディ・ケイのNC3デモサイトにGoogleのAdSense広告をつけてみました。

左カラムに常に表示するように設定をしています。はじめ「お知らせ」プラグインで掲載できるか試したのですが、やはりwysiwygでは登録できないようで、左カラムの編集する部分にスクリプトを埋め込むカスタマイズを行いました。

興味ある方は是非一度ご覧ください。

NC3デモサイトは、https://demo-nc3.eddy-k.jp/　です。

Web制作実績のページを新しく作りなおしました。

以前のページは「お知らせ」プラグインで作成していましたが、今回「汎用DB」プラグインを使用し自前の「Vgrid」テーマを使用したページにしてみました。

また、内容も前のものは「NC2」のものばかりでしたが、今回は「NC3」のものも含め掲載しています。

スマホも意識し、iPhone5の幅には対応できていませんが、殆どのスマホでも切れることなく表示できるようにしました。

是非一度ご覧ください。

https://www.eddy-k.jp/homepages/examples

こんにちは。

昨日からお盆休みの人が多いと思いますが、わたしは来週も休みなしです。とほほほ・・・

しかし今日は日曜日ということでこのサイトを少しさわりました。

トップページ以外について右カラムを表示していますが、標準ではこの右カラムもメインカラムと一緒に縦スクロールすれば上に消えて行ってしまいます。

しかしEddyKのサイトではバナーを常に表示しておきたいので、スクロールしても右カラムはそのまま残すようにちょっとカスタマイズしてみました。

後最近ドローンにはまり、ドローンの練習に励んでいます。（サイトには関係ないのですが・・・）

今日は仕事もそこそこにテーマを作ってみました。

以前NC2でも作成していた汎用DBのテンプレートをテーマにしました。

Vgridのテーマを作成してみました。ブラウザの幅の変更により表示カラムが自動に入れ替わるものです。

レシポンシブのグリッドとはちょっと違う方法ですがカラムが動くのがわたし的には気に入っています。

一度ご覧ください。

https://demo-nc3.eddy-k.jp/tanzaku/vgrid

トップページのみですが、テーマを作成し作ってみました。

内容は以前のトップページと同じですが、近所の風景写真をブラウザの大きさに合わせて一杯に表示するようにしてみました。実は一枚もののサイトを作ろうと思ったのですが、メニュープラグインが使用できないので断念しました。

最近一枚もののサイトでカッコいいのがあり、それを真似ようとしたのですが、構成上も合わず、今あるやつももったいないので、取り敢えずトップページのみ作成していました。

でっこのテーマ、テーマ用のスクリプトもつけ最近よくあるスクロールするとメニューが画面上部に現れるものにしてみました。メニューはもちろんNCでのプラグイン追加で追加したもの（ごりごりとhtmlを書いたものではありません）。でっそのsectionをスクロールすることで表示させるスクリプトをテーマとして設定しています。

標準のNCではテーマのスクリプトまで対応していませんが、ページ全体を表示するviewをカスタマイズすることで、テーマのスクリプトも取り込めるようにしてみました。

ぼちぼちとこのトップページを改造し一枚もののサイトを作成してみようと思います。