前回書いた長い格闘を経て、漸く着手することができるようになった。以下は実際に変えたことまとめ。
カテゴリー: web制作
サイトを作るにあたってのメモ。間違ってたら後で直す。
サイト改装をするためにしたこと(格闘編)
先日サイトを少し整理した話で書いたように、現在使っている「Beans」テーマが古くなってきたので新しいテーマへの変更を検討したところ、何故かブランクテーマを改造することになっていた話。
やっぱり気になってしまったので、気分転換にサイトを改装することにした。備忘録として、何を変えたかをまとめておきます。
object-fitに関する覚書
画像をトリミングするCSSプロパティ「object-fit」と、同様の効果をIEにも対応させるJavascript「object-fit images」に関する覚書です。
Beansテーマをカスタマイズするためにしたこと
タイトルの通りです。カスタマイズの幅が広い分、lessとかPHPとかアクションフックの知識が必要となってくるはずなんですが、そんなの一切知らなくてもコピペでなんとかなりました。
Beansテーマで動くCSSフレームワークuikit ver.2 ~よく使うものメモ(その2)
その2でまとめるのは固定ページで使っているグリッドとパネルです。
導入したのだいぶ前なのであんまり覚えていないのですが「grid」で画面を横に分割してその内で「pannel」を使うようです。
未だに基本がよく分かっていないのでこのサイトの固定ページで使ったものを具体例としてコードをメモっておきます。
Beansテーマで動くCSSフレームワークuikit ver.2 ~よく使うものメモ(その1)
このサイトはWordpressでBeansテーマをカスタマイズして使っているのですが、このテーマは一風変わっていてCSSフレームワークの一つuikit ver.2を使ってwebページをより細かくカスタマイズできるよっていうやつなのです。
本家uikitマニュアルが英語でとっても読みにくいので、このサイトでよく使うものを、よく使いたいので抜粋メモしておきます。
PhotoSwipe Simplify と Macy を使ったギャラリー
サイトのイラストギャラリーではLuminous と Macyを併用しているのですがLuminousの代わりにPhotoSwipe Simplifyを使ってみたら案外すんなりとできたので手順をメモしておきます。
使用感としては、PhotoSwipe~の方が拡大機能付き+スワイプ対応と高機能な一方、Luminousは必要なファイル数が少なく導入が簡単…といった感じです。
今後掲載していく分はPhotoSwipe Simplifyを使ってみると楽しいかも。
デモページ
PhotoSwipe Simplify を使ってみた
前回のLuminousに続いてLightbox系ギャラリー『PhotoSwipe Simplify』を使ってみました。
こちらは、高機能だけど導入や設定がやや面倒なプラグイン『PhotoSwipe』が手軽に利用できる改良版となっています。
デモページ
公式サイト(英語): https://min30327.github.io/photoswipe-simplify/
製作者ブログ記事:VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた
導入にあたっては上記ブログ記事が非常に簡潔かつ親切なのですが、Javascriptがよく分かっていない自分がやってみて躓いた点をカバーするよう手順をまとめてみます。