Skip to content

Instantly share code, notes, and snippets.

@mr-gradation

mr-gradation/ablogcms-unit-size.html

Last active July 3, 2021 09:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mr-gradation/d8eec5bbfa4cbe774793bb5c616c0055 to your computer and use it in GitHub Desktop.
Save mr-gradation/d8eec5bbfa4cbe774793bb5c616c0055 to your computer and use it in GitHub Desktop.
Download ZIP
a-blog cmsのユニットサイズを計算する
Raw
ablogcms-unit-size.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a-blog cmsのユニットサイズを計算するやつ</title>
<meta property="og:site_name" content="a-blog cmsのユニットサイズを計算するやつ">
<meta property="og:title" content="a-blog cmsのユニットサイズを計算するやつ">
<meta property="og:type" content="article">
<meta property="og:description" content="ページのコンテンツ幅からa-blog cmsのユニットサイズを計算するツールです。">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="a-blog cmsのユニットサイズを計算するやつ">
<meta property="twitter:description" content="ページのコンテンツ幅からa-blog cmsのユニットサイズを計算するツールです。">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<h1>a-blog cmsのユニットサイズを計算するやつ</h1>
<p class="lead mb-5">テキストフィールドをクリックで、値をクリップボードにコピーします。</p>
<div id="app">
<div class="card bg-light">
<div class="card-body">
<div class="row">
<label class="col-sm-2 col-form-label">コンテンツ幅</label>
<div class="col-sm-10">
<input type="number" v-model="contentWidth" class=" form-control" />
</div>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-header">メディアサイズ</div>
<div class="card-body">
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="mediaSize(1)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mediaLabel(1)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="mediaSize(2)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mediaLabel(2)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="mediaSize(3)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mediaLabel(3)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="mediaSize(4)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mediaLabel(4)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<input type="text" :value="mediaSize(6)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mediaLabel(6)" class=" form-control" @focus="copyValue" />
</div>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-header">ビデオサイズ <small class="text-muted d-inline-block mx-3">すべて16:9で表示します</small></div>
<div class="card-body">
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="videoSize(1)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="videoLabel(1)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="videoSize(2)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="videoLabel(2)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="videoSize(3)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="videoLabel(3)" class=" form-control" @focus="copyValue" />
</div>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-header">マップサイズ <small class="text-muted d-inline-block mx-3">大は16:9、中は3:2、小は1:1の比率で表示します</small></div>
<div class="card-body">
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="mapSize(1)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mapLabel(1)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="mapSize(2)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mapLabel(2)" class=" form-control" @focus="copyValue" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-6">
<input type="text" :value="mapSize(3)" class=" form-control" @focus="copyValue" />
</div>
<div class="col-sm-6">
<input type="text" v-model="mapLabel(3)" class=" form-control" @focus="copyValue" />
</div>
</div>
</div>
</div>
<!-- /app -->
</div>
<!-- /container -->
<footer class="pt-5 text-muted text-center text-small">
<p class="mb-1">
<a href="https://gist.github.com/mr-gradation" class="text-muted text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
mr-gradation
</a>
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
contentWidth: 980
},
methods: {
copyValue: function(event){
event.target.select();
document.execCommand("copy");
},
sizeLabel: function(number){
let sizeLabel = "";
switch(number){
case 1: sizeLabel = "大"; break;
case 2: sizeLabel = "中"; break;
case 3: sizeLabel = "小"; break;
case 4: sizeLabel = "小"; break;
case 6: sizeLabel = "小"; break;
}
return sizeLabel;
}
},
computed: {
mediaSize: function(){
self = this;
return function(number){
let mediaWidth = Math.floor( (self.contentWidth - 20 * (number - 1)) / number );
return mediaWidth;
}
},
mediaLabel: function(){
self = this;
return function(number){
return `${this.sizeLabel(number)}：幅1/${number} ( ${this.mediaSize(number)}px )`;
}
},
videoSize: function(){
self = this;
return function(number){
let mediaWidth = this.mediaSize(number);
let mediaHeight = Math.floor( mediaWidth * 0.5625 );
return `${mediaWidth}x${mediaHeight}`;
}
},
videoLabel: function(){
self = this;
return function(number){
return `${this.sizeLabel(number)} ( ${this.videoSize(number)}px )`;
}
},
mapSize: function(){
self = this;
return function(number){
let mapWidth = this.mediaSize(number);
let mapHeight = 0;
switch(number){
case 1: mapHeight = Math.floor(mapWidth * 0.5625); break;
case 2: mapHeight = Math.floor(mapWidth * 0.66); break;
case 3: mapHeight = Math.floor(mapWidth * 1); break;
}
return `${mapWidth}x${mapHeight}`;
}
},
mapLabel: function(){
self = this;
return function(number){
return `${this.sizeLabel(number)} ( ${this.mapSize(number)}px )`;
}
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment