touka-aoi - Tumblr blog

touka-aoi · 5 years ago

Text

ToukaLab.ver.2.0

レスポンシブデザインにするまで。

もうやらないって思ってたのに。

動機

progateの課金切れるから、忘れてるのまとめて片付けるぞー。

文字を書くことが多いだろうから、文字メインのレイアウトにしようとした。

変更点

縦に記事が並ぶようにした。

レスポンシブデザインやってみた。

構造を変えた。

感想

レイアウト崩れちゃった。

ちゃんと最初に構造を考えてテストしよう。大まかに作って細部を詰めていく。

詰まったとこ

bodyのheightがない。

子要素に position:absolute がある。消して。

headerとかmainとか。

これ？

[HTML5] 新要素まとめ【2014/2/14版勧告候補】

課題

いいねとリブログ

どうすんのこれ。つかない。

記事のレイアウト整える

タグ,日付とかつけたい。

崩れたレイアウト直す。

webkit

構造の理解

max-widthとかそこらへん。

mdきれいにレンダリングされない。

感想

じゃあ私noteに移行するから。ばいばい。

おまけ:ソースコード

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap" rel="stylesheet"> <meta name="color:HeaderBackgounedColor" content="#ffffff"> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="responsive.css"> <link rel="shortcut icon" href= {favicon}> <title>{Title}</title> <style> {CustomCSS} body { background: {color:HeaderBackgounedColor}; } {block:PermalinkPage} #flexarticlewrapper { width: 700px; min-width: 700px; } @media all and (max-width: 480px) { #flexarticlewrapper { width: 400px; min-width: 400px; } } {/block:PermalinkPage} </style> </head> <body> <header> <div id="headerwrapper"> <h1 id = "titlename"><a href = "{BlogURL}" class = "navlink">{Title}</a></h1> <p class = "toukaversion">ver.2.0</p> <p class = "toukaversion">{Description}</p> <div id="navwrapper"> <nav> <ul id = "navul"> <li class="navlist"><a class = "navlink" href = "https://twitter.com/touka_aoi">Twitter</a></li> </ul> </nav> </div> </div> </header> <main> <div id="flexarticlewrapper"> {block:Posts} <div class="articlewrapper"> <article> {block:Title} <h2><a href = "{Permalink}">{Title}</a></h2> {/block:Title} {block:Photo} <figure class = "post-photo"> {block:Caption}<a href = "{Permalink}">{/block:Caption}<img class = "post-photo" src = "{PhotoURL-HighRes}"></a> </figure> {/block:Photo} <div class = "perma-body"> {block:PermalinkPage} <div class = "perma-photo"> <p>{Caption}</p> </div> {/block:PermalinkPage} <p class = "post-body">{Body}</p> </div> <div class = "itemswrapper"> <ul class = "items"> {block:HasTags}<li>{Tag}</li>{/block:HasTags} <li class = "navlink">{DayOfMonth} - {Month} - {Year}</li> </ul> </div> <div class = "clear"></div> </article> </div> {/block:Posts} </div> </main> </body> </html>

* { box-sizing: border-box; } li { list-style: none; } html { width: 100%; height: 100%; margin: 0; padding: 0; } body { font-family: "Noto Serif JP"; margin-right: auto; margin-left : auto; } header { margin-left: 10%; width: auto; margin-top: 0; position: fixed; } #headerwrapper { margin-top: 300px; width: auto; } .navlink { font-family: Orbitron; color: black; text-decoration: none; display: inline-block; } #titlename { font-family: Orbitron; text-align: center; } #navul { text-align: center; margin-top: 200px; padding: 0; } main { max-width: 1070px; width: auto; margin-left: 40%; } #maxman { max-width: 1170px; } #flexarticlewrapper { width: 400px; min-width: 400px; overflow-y: scroll scrollbar-width: none; padding-top: 20px; } /*webkitはあんましらん。*/ #flexarticlewrapper::-webkit-scrollbar { display:none; } h2 { overflow-wrap: break-word; } .items li { float: left; display: inline-block; margin-left: 15px; } .clear { clear: left; } .items { height: 20px; margin: 0; } .itemswrapperfoot {} .itemsfoot { height: 20px; margin: 0; margin-left: 70%; } .itemsfoot li { float: left; display: inline-block; margin-left: 15px; } .toukaversion { text-align: center; margin: 0; font-family: Orbitron; } .articlewrapper { box-shadow: 0px 2px rgba(0, 0, 0, .2); } .navlist { font-family: Orbitron; margin-bottom: 20px; } .post-body { margin-left: 30px; text-align: left; } .post-photo { width: 400px; margin: 10px; } .perma-photo h1 { font-size: 40px; margin-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.3); } .perma-photo p { margin: 20px; } .perma-photo h2 { border-bottom: 1px solid rgba(0,0,0,0.3); } .perma-photo h3 { padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.3); } .perma-photo pre { margin: 15px; background: rgb(54,69,73); width: auto; border-radius: 3px; overflow-x: auto; } .perma-photo code { color: rgb(227,227,227); } .perma-photo ul { padding: 10px; padding-left: 45px; } .perma-photo li { margin: 10px; } @media all and (max-width: 585px) { header { width: 100%; position: static; margin: 0 auto; } main { margin: 0 auto; width: 100%; } #headerwrapper { margin-top: 20px; } #navul { margin-top: 30px; } }

0 notes

touka-aoi · 5 years ago

Photo

サイト作ったよ。

途中で書くの飽きた。ポストで見たほうが見やすいよ。

動機

progateで学習したから、作ってみようかなと思ったため。

プラットフォーム

tumblrを選択。かっこいいかなーと思って選んだが、他の方がたぶん良い。[^1]

目標物

ios7の時のmusicランドスケープモード。

参考文献

前提

基本全部ここに書いてある。

カスタムHTMLテーマを作成するには

すごい参考になったところ

マンガでなれる？WEBデザイナー講座

初心者のためのTumblrテーマカスタマイズ方法入門

Tumblrテーマを本気でつくる Vol.3「テーマカスタマイズ実践編」

つまったとこ

ホームページ上の素材画像など、何処にアップロードするのか？。

テーマオプションを使えばいい。

image,color,if,fontなど設定できる。

examplenameに名前を入れる。

contentは初期値

dropboxでリンク作るのもあり。

画像の時は最後の?dl=0を?raw=1に変える。

フォントとかどこから持ってくるのか？

ここ

Google Fonts

部分的にフォントってどうやって変えるのか？

<span style="font-family:FontName">変えたいフォント</span>

{block} ってなに？

if文見たいなやつ。

{block:Posts} //もしPostsなら //この中を通る。 {/block:Posts}

{block:Posts} って1つでいいのか？

ポストの数実行されるので１つでいい。

flexわからん

これ

A Complete Guide to Flexbox

画像が大きすぎる。

widthの数値をあわせる。

隙間ができる。

これ

* { margin: 0; padding: 0; }

header固定したらcontainerが余った。

headerの高さ分paddingとmarginで下にcontainerをずらす。

これ

ヘッダをposition:fixedで固定した際、ページ内リンクの位置がずれるのを解消する方法

faviconどうするのか

これ

{favicon}はTumblrのアバター画像。

<a> 下線と色変わるのどうするの？

colorで色固定。

text-decoration:none; で消える。

a { color: black; //色 text-decoration: none //下線 }

これ

基礎24. a要素の装飾と擬似クラス

なにかはみでる。

overflow: hidden;で隠す。

画像リンク

これ

画像中央寄せ

画像はインラインらしい。

text-align:center;

結局わからなかったもの

<header>が高さないんだけど？

height設定したらいいんかね。

課題

tag表示、ソートがない。

Like!とReblogボタンがない。

ホームページに15コマしか表示されない。

JQuery非対応。

画像投稿のみ対応。

スマートフォンデザインがない。

日付ソートがない。

レスポンシブデザイン非対応。

footerがない。

間が空いている。

コメント欄ない。

まさにないないづくしである。

感想

デザイン力がない。私にもっと力を。

ちゃんと構造を考えて作らないと、サイズ調整とかめんどくさくなる。

じゃあ私、はてなブログに還るから。またね。

訳注

[^1]:{block}, meta 関連がややこしい。日本語文献がほとんどないため。

おまけ:ソースコード

<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"> <meta name="color:HeaderBackgounedColor" content="#ffffff"> <meta name="color:TitleFontColor" content=""> <meta name="image:backgroundimage" content=""> <meta name="color:HeaderBottomBorder" content=""> <meta name="color:BodyBackgroundColor" content="#ffffff"> <link rel="shortcut icon" href= {favicon}> <title>{Title}</title> <link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap" rel="stylesheet"> <link rel="stylesheet" href="stylesheet.css"> <style> * { margin: 0; padding: 0; z-index: 1; font-family: 'Noto Serif JP' ; } .nav-list { list-style: none; float: left; padding: 12px 0px 0px 10px; margin-left: 20px; margin-right: 20px; } .title-name { float: left; margin: 30px 0px 0px 10px; } .list-right { float: right; } .header-wrapper { height: 75px; width: auto; z-index: 100; padding-right: 20px; border-bottom: 3px solid ; } .headerul{ margin-top: 40px; } .header-link { display: inline-block; text-decoration: none; color: black; } body, html { height: 100%; margin: 0; padding: 0; } body { background: {color:BodyBackgroundColor} } a { text-decoration: none; color: {color:TitleFontColor}; } {block:HomePage} img { height: 100%; width: 349px } {/block:HomePage} .header-wrapper { border-bottom: 3px solid {color:HeaderBottomBorder}; background-color: {color:HeaderBackgounedColor}; position: fixed; width: 100%; height: 75px; top:0; left:0; overflow: hidden; } .main-container { height: 90%; display:flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; padding-top: 75px; margin-top: -75px; background-size: cover; } .post-title { font-weight: bold; } .post-border { position: absolute; height: 100%; width: 100%; background: black; bottom: 0px; z-index: 2; opacity: 0; display:none; } .post { top: 75px; height: 30%; width: 349px; overflow: hidden; border-radius: 5px; position: relative; flex: auto; margin: 0; } .perma-container { z-index: 0; height: auto; width: 70%; top: 75; position: relative; margin-left: 15%; background: white; } .perma-post { /*margin-top: 75px;*/ position: relative; padding: 40px; } .perma-photo { position: relative; margin-top: 75px; } .perma-back { z-index: 0; height: 100%; width: 200px; background: white; } .figure-photo { padding: 20px auto; } .font-orbitron { font-family: Orbitron; } </style> </head> <body class = "{block:HomePage}home{/block:HomePage} {block:PermalinkPage}Permalink{/block:PermalinkPage}"> <header> <div class="header-wrapper"> <h1 class="title-name"><a class = "header-link" href = "{BlogURL}"><span class = "font-orbitron">{Title}</span></a></h1> <nav class="list-right"> <ul class="headerul"> <li class="nav-list"><a class = "header-link" href = "https://touka-test.tumblr.com/archive" ><span class = "font-orbitron">Archive</span></a></li>   <li class="nav-list"><a class = "header-link" href = "https://twitter.com/touka_aoi" ><span class = "font-orbitron">twitter</span></a></li> </ul> </nav> </div> </header> {block:HomePage} <div class = main-container> {block:Posts} <article class = "post"> <div class = "post-body"> {block:Title} <p class = "post-title"><a href = "{Permalink}">{Title}</a></p> {/block:Title} {block:Photo} <figure class = "post-photo"> {block:Caption}<a href = "{Permalink}">{/block:Caption}<img class = "post-pohto" src = "{PhotoURL-HighRes}"></a> </figure> {/block:Photo} <div class = "post-border"></div> </article> {/block:Posts} </div> {/block:HomePage} {block:PermalinkPage} <div class = perma-container> {block:Posts} <article class = "perma-post"> <div class = "post-body perma-post-body"> {block:Title} <p class = "post-title"><a href = "{Permalink}">{Title}</a></p> {/block:Title} {block:Photo} <div class = "perma-photo"> <div = "perma-photo">{Caption}</div> </div> {/block:Photo} <div class = "post-border"></div> <div class = "post-back"></div> </div> </article> {/block:Posts} </div> {/block:PermalinkPage} </body> </html>

0 notes