ももちん - Memo

Manalica(まなりか)のイラストなどを公開しています。

『サイト制作』のカテゴリー記事(12件)

2020/05/27

このサイトの閲覧デバイスの統計は75%ほどがモバイルからみたいです。
作者としてはモバイル用の表示はPC用のサイトレイアウトをモバイル表示用に崩しているような感覚ですね。
絵描きとしても大きい画面でイラストを表示させた方が作品が壮大に見えるので(笑)、少なくともイラストは解像度短辺1000px以上の画面で見てほしいなぁ。(私のイラスト作品は大抵短辺1000px程度です)

ここのところとあるサイトの制作作業をしています。(手っ取り早く言うなら仕事です)
Webサイト制作の中でも、固定幅一ページ単体に限って言えば効率の良いマークアップ、CSSによるレイアウト・装飾はそれなりなんじゃないかと自負しています(>ω<)
だけど今の時代、サイト制作はそんな固定幅の一ページで済むような単純さではないです。デバイス(画面サイズ)が多種に渡るためですね。
ページのレスポンシブ化の工程が必須なわけです。
自分はまだそれほどその工程の場数を踏んでおらず、現在効率のいい・扱いやすいレスポンシブの作り方の模索中です。

現時点で個人的にこの方法がやりやすいんじゃないか?という手触りと推測をメモしておきます。

  • 基準となるページレイアウトを制作し、それを改変してレスポンシブに対応させることにする
  • ブレイクポイントごとにCSSファイルを分けて<link>で読み込む(minとmax同時指定でファイルがかぶらないようにする)←干渉し合わないからイイ
  • ブレイクポイント間(min – max)ではまずminサイズを制作。場合によってmaxサイズ用までブロック幅が伸びるようにwidth:%やmax-width・min-widthを使う

あと今回制作していて知識がついたこととすると、

  • <img>等の閉じタグのない要素には擬似要素(::before,::after)が使えない
  • position:static;(初期値)以外の属性にのみz-indexが効く
  • position:relative;でも相対的移動としてtop系の属性が使える(absoluteと違って要素分の空間は空いたまま?)
  • Flexボックスは子要素にflex:none;を付けると勝手に伸縮しないようになる

ってことなどですね…!
その他GoogleフォントやAdobeフォントが簡単に使えたり、Slick(jQuery)・Lottieアニメーション(jsonファイル)の使い方を覚えたり、Wordpressの方ではカスタム投稿なるものがあることが分かったり、色々と収穫のある作業です。

課題はヘッダーのナビメニューをレスポンシブでハンバーガーメニュー表示にするときの<nav>の挙動なんだよなぁ…🤔
ブレイクポイントに差し掛かったときにJavaScript(jQuery?)でハンバーガーCSS用のidかclassを与えちゃえばいいのかな?
JavaScriptが未だ使用方法が掴めてないから未知なんだよなぁ…

この度Photoページがナビゲーションメニューに昇格です!✨

昨日宣言していたPhotoページのアレコレを早速今日制作し、さくっと更新してしまいました(^ω^)
HP改造のためのアイディアを思いつくと大抵、いつも居ても経っても居られなくなり休む間も惜しんでPCに向かい続けてしまいます。
PHPの扱い方を忘れていたのもあって制作時間は8時間ぐらいかな?とにかく検索しまくりましたw
効率的なプログラムが組めているのかは非常に怪しいですが、とりあえず動けばそれでいいんです(笑)

画像の分類を、競泳水着と下着とで扱いを分けた方がいいのかとちょっと考えていました。
結果的には分けずに同じ扱い方で並べてしまっています🤔
とりあえず一日で勢いつけて制作してしまったので、もうちょっと捻れそうなところでもありますね。
カラー分類についてはどう分けようか、これまた考えてしまいますね。。ベースカラーとアクセントカラーを両方登録した方がいいのかな?とか。
他にも素材で分けるというご提案もあったりしますが(一通り水着を着用してみてから考えてみます)、その他でも何か良い分類方法等がありましたらお知らせください!

やったー!!(≧▽≦)
Galleryページにタグ機能を追加しました!

今回のタグ機能はProgateとWordPressで学習したPHP言語の知識を使って制作してみました。
PHP制作作品処女作です!
最初はどうなることかと思ってましたが意外と上手く効率的に作れましたね。
タグ機能を追加する都合で、これまでHTMLに直接打ち込んでいた作品画像データを、今回CSVファイルに移してデータベース化しました。
画像ファイル名とタイトルとタグ情報をまとめて入れたCSVファイルにジャンルのファイル名を付けて、それを参照して出力するようにしてみました。
管理もしやすくなり一石二鳥です!ついでにHTMLのマークアップも直してグレードアップしました!いいことだらけ!

そんなこんなでイラストにタグを付ける作業をして、タグを付け終わりいざタグ一覧を眺めてみたら自分の作品傾向が分かりやすくなっていて面白いです(笑)
ちなみに『ちんちん』タグは私がちんちんの様を意識して描いたような作品に付けています。作者の中ではちんちんメインなものもありますね。

あ~制作楽しかった!
プログラミング面白い!ってなったのでこれからもHPを改造していきたく考えています。

Galleryページに並んでいるイラスト作品を、訪問者さんに今よりももっと見てもらいやすくしたいですね~。
それにはタグなどを付けてソートさせればいいかな?
例にすると同じ男子カテゴリーの中でもド健全芸能人イラストとゲイものと、競パンもあってグロ方面もあって…、な今の混合している状態を内容のテーマだったり傾向だったりジャンルなどで並び変えたり絞り出せたりするとイイですね。。

何かツールやプラグインがあればいいなとも考えましたが、せっかくなのでお勉強してきた知識を活かして自分好みなのを自作してしまおうと思い立ったところでいます(^ω^)
現状の私の知識でどこまで出来るのかは未知ですが、なんだかそれなりのものが出来そうな予感と未来の自分がきっとなんとかしてくれるだろうという期待をしているので(笑)頭を捻って頑張ってみようと思います~。

そうやってHPを自分好みにカスタマイズしていくのが楽しいんだなぁ。
だから独学でHP制作の勉強をしていても苦にならないんですよね~(´∀`)

Progateの会員になったりもしたので、とりあえずHTML&CSS、JavaScript、jQuery、PHP辺りを頑張ってみようと思います!(≧▽≦)

そんなこんなで昨日サーバー移転したこのサイト『ももちん』です。。
移転にあたってサイトページの細かいマイナーチェンジもしたので、とりあえず今回更新した箇所を羅列します。

  • まず第一にサーバー変更。使わせていただいているのはColorfulBoxさん。
  • Memo・MailページにてWordPressを導入。特にMemoページは一記事づつシングルページに分けたことで検索なんかも楽に出来ます。
  • リンク文字の印をFontAwesomeのアイコンにしてみました。気分によって変えてみようと思ってます。
  • サイトページのデザインとして横線のボーダーが度々あるのですが、それをコレ(dotted)からコレ(dashed)に変えました。だってこっちの方が可愛いから(^ω^)
  • Galleryページの画像アイコンの縦横サイズを2倍にしつつ表示は1/2に(見た目は変わらない)。何なのかと言うとRetinaディスプレイへの対応ですね。。
  • Galleryに小説を追加したり、隠しページを昇格させてみたり。
  • 快適なスマホ閲覧のために色々と弄ってみました。

今回cssも結構書き換えて見た目も若干変わったので、前からの閲覧者さんで記事下に表示されている横線ボーダーがこんな感じに破線になっていない場合はキャッシュをクリアしてみてください。。

その他。

ただいまお絵描きとイラスト制作は休止していたりします。
理由は多分これまでのMemoを見ていただければ何となく推察してもらえるんじゃないかと思います。
将来の自分が楽しく継続的にお絵描きを続けられる未来のために今の自分はお絵描きをセーブしているんですね~。
絶対に復活したいのでそれまではサイト制作の技術でも上げていようと思います。。