【WordPress】保守に強い子テーマ 〜壊れても困らない構成術〜

こんにちは。新卒入社半年、WordPress の実務にも触り始めたばかりの新人エンジニアです。といった感じで、当時の私は「とりあえず動けばいいでしょ」という感覚でした。CSS は「追加CSS」で上書き！PHP は functions.php に追記すれば良さそう？プラグインの動きを少し変えたいときは、コードの一部を書き換えれば済むじゃん！今振り返ると、かなり危うい考え方だったと思います。当然、上司にこう聞かれることになります。「このまま自動アップデートしても壊れない？」「保守の観点は？」その瞬間に気づいたのは、動くことと保守できることは別 だということでした。そこで私は、スニペットを散ら...

【自社開発】これ1つでOK！WordPressプラグインで簡単にSEO強化

WordPressでSEO設定をするとき、「メタ情報（title・description）やOGP画像の設定だけできれば十分」…そう思ったことありませんか？既存のSEOプラグインは高機能なものが多い反面、設定項目が多すぎたり、不要な機能が含まれていて、結果として重くなる・複雑になるというケースがよくあります。そこで今回、必要なSEO機能だけに絞ったシンプルで軽量なWordPressプラグインを開発しました。現在は試験運用中ですが、今後は一般公開できるよう調整していく予定です。シンプルにSEOを設定したい方や、無駄な機能を省いてサイトを軽く保ちたい方におすすめです。機能紹介このプラグインで...

新卒0年目で部長になった話。～Part6～

入社して3カ月、地道に研修を進めているのですが、実務を想定して様々なことに挑戦させていただいています！ ウェブの基礎的な知識のインプットだけでなく、実際にいくつかアプリを制作して、最近はこだわりkintoneのプラグイン開発までさせていただきやりがいのある毎日を過ごしています。 そんな私の、去年のお話です。ある日、PR部長から突然の呼び出しが……PR部長からの呼び出し。いつものように出社したある日、突然、PR部長のガッシュさんから「1時間ほど少し相談を！」と呼び出しを受けました。 詳細はわからなかったので、不安を抱えつつ会議室へ…… 刹那、ざきに電流走る…！「次期PR部長をお任せできたら...

【Panzoom】ピンチインピンチアウトで拡大縮小を実装

先日手がけたサイトにて「スマートフォンレイアウト時は地図をピンチインピンチアウトで拡大縮小してほしい」という要望をいただき実装したので使用したパッケージのお話をしようと思います。Panzoomパッケージ割と直球そのままなパッケージ名ですが、panのほうが移動、zoomが拡大縮小ですね。撮影用語でカメラ位置を固定し水平に振るカメラワークをパンといいますが、そのパンです。公式サンプルサイトhttps://timmywil.com/panzoom/demo/サンプルサイト右上アイコンからGitHubのリポジトリにもアクセスできます。これから記載する導入方法もリポジトリのreadmeに書かれてい...

2025年度　ロジカルスタジオ入社式を開催しました　～新たな一歩を踏み出そう～

今回の入社式の特徴昨年の入社式の様子はこちらから ↓入社式開始！ 最後に↓一緒にロジカルスタジオで働いてみませんか？↓

【Swiper】流れ続けるモーダルスライダー〜矢印操作とモーダル開閉制御〜

さて、Swiperで無限に流れ続けるモーダルスライダーを作りたい！でも・・・モーダルを開いたらスライダーが止まってほしい・・・！しかも！閉じたあとに“どこにいたっけ？”ってならずに、ちゃんと開いた場所から再開したい！さらに！！見たいコンテンツの位置にスムーズに移動できたら最高！そんな理想のスライダーを実装してみましたDEMOさっそく完成版はこちらです。※Swiperの基本的な実装方法については省略します。本記事では、無限ループ＋モーダル連携にフォーカスして解説します※本記事では簡易的なモーダルを使用しています。必要に応じて、デザインや挙動を自由にカスタマイズしてください！コードの説明基本...

JavaScriptで左から順番にフェードインさせる方法

画像やリスト、カードの表示などで使えるかなと思います。調べると似たような記事もありますが、こちらはメインのフェードインにkeyframesを使用していないため、keyframesを別途付けたい場合におすすめです今回は真ん中のロージーにkeyframesを当ててみました。では先にコードをどうぞ！JS・CSSを順番に解説していきますJSの解説補足CSSの解説最後にところでJSの解説document.addEventListener('DOMContentLoaded', function() { //クラス名がfadeinの要素をすべて取得して変数に格納 var fadein = doc...

【Swiper】サムネイルのマウスホバーとスライダーを連動させてみた

さて今回は、メインのスライダーとサムネイルがあるデザインで、サムネイルをホバーするとメインのスライドが切り替わるようにします。swiperのメソッドを使用してシンプルに実装できるので、是非使ってみてください！基本の連動するスライダーを作成まずは基本となるスライダーを作成します。この状態では、クリックで連動します。thumbsでサムネイルにしたいスライダーのインスタンス名thumbnailSwiperを指定すると、2つのスライダーが連動するようになります。thumbs: { swiper: thumbnailSwiper}メインスライダーのコードをサムネイルにしたいスライダーの前に書くと...

内定者。ただいまアルバイト中。

今回はアルバイトでの感想をつらつら並べます。ゆっくり見ていってください～インターンシップの経験バイトの話！とありますが、まずはインターンのお話を少し。昨年の夏頃、1週間インターンとしてお世話になりました。マークアップの課題を頂いて、それに取り組みながらロジカルでの業務を体験しました。課題は先輩方のサポートのもとで取り組んだのですが、学ぶことが多くて……私はもともと個人的に学習していたのですが、実務での実装で気を付けるべきことについてしっかりとレクチャーしていただき、その後のコーディングにめちゃめちゃ役立っています。見やすいコード、わかりやすい設計を心掛けてはいたのですが、まだまだ甘かった...

GSAPでスナップする横スクロールを作ってみた！

こういうのでもスクロールするのが面倒だったり、自分の知りたい情報が画面に収まらない！などちょっとストレスに感じる人もいるかと思います。そこで、少しのスクロールでスナップするようにできる横スクロールを作成します！完成したコードまず基本となる縦スクロールすると横にスクロールされるを作成する必要があるのですが・・・・それを簡単に叶えてくれるのがGSAPです。JavaScriptライブラリで複雑なアニメーションも簡単に実装することができます。そんなGSAPを使用して作ったのがこちらです。GSAPについてライセンスGSAPは２つのライセンスがありStandard(標準ライセンス):無料Busine...

z-indexが効かない！？そんな時はスタックコンテキストに注目してみよう！

今回の記事では、僕が学習を始めて間もないころに苦戦した『z-indexとスタックコンテキスト』についてピックアップしました。（嫌な記憶を呼び起こしながら・・・）それでは本題に入ります！CSSにおいて、z-indexの値で要素の重ね順を操作すると思いますが、スタックコンテキストの罠にかかると、うまく制御できない事態に陥ってしまいます。そもそもスタックコンテキストとは？重ね合わせコンテキスト (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は...

CROSS TALK★ルーキー座談会5

【Q1：自己紹介】【Q2：ロジカルスタジオを選んだ理由、好きなところは？】【Q3：ロジカルスタジオで働いてみて】【Q4：最近楽しかった・嬉しかったことは？】【Q5：今後ロジカルスタジオでやっていきたいことは？】鮮魚に負けず劣らず生きがいいぜ！って方はこちら

追従の実装はposition:stickyが便利！

そんな皆様お馴染みのpositionとは、要素の位置を決める際に使用するCSSプロパティです。要素を重ねたり固定したり、より自由な配置が可能になりますよね。ありがとうposition🎌そんなハイスペックpositionには、下記のような5つの値を指定できます。私はこれを見て思ったんです。sticky・・・？上の4つは普段から大変お世話になっているのですが、stickyは初めましてだったのです💨調べてみると、何やらすご～く便利だそうで。名前もかわいいし🤗ということで今回は、position:stickyについて私が学んだことを書いていこうと思います！position:stickyとはなんぞ...

clip-pathで多角形を作ろう！

ということで、今回はclip-pathプロパティを用いて、多角形をCSSで簡単に作る方法をご紹介したいと思います！最後には上記のような矢印背景の作り方もご紹介していますので、是非最後までご覧ください！■そもそもclip-pathとは？clip-pathプロパティを使用すると、要素や画像をクリッピングして（切り抜いて）表示させることが出来ます。clip-pathプロパティでクリッピング領域を設定すると、クリッピング領域の内部の部分は表示され、外部の部分は非表示になります。参考：clip-path – CSS: カスケーディングスタイルシート | MDNIllustratorやPhotosh...

リストを縦並びで折り返すのはCSSのgridで解決

・list01 ・list02・list03 ・list04・list05リストを2列で並べるときはflexを使用することが多いと思いますがこのような順序になります。・list01 ・list04・list02 ・list05・list03今回はこのように縦並びにします。【PC】liタグを縦並びに2列で並べる【SP】liタグを縦並びに1列で並べるさらに、PCとSPでの表示はこうしたいのです💪これが結構悩みどころです。。。今回は、これまでよく使っていた方法と、gridを使って縦並びにする方法をご紹介します。方法1 flex.list { 　　display: flex; 　　flex-wr...