2017-02-23

マルチカラム

column-countプロパティ

カラムを作りたい要素の一つ上の要素に横のカラム数を指定すると、縦並びのグリッドが簡単につくれる。

.column {
    column-count: 3; /*3カラム*/
    column-count: 5; /*5カラム*/
}
.item {
    display: inline-block;
    width: 100%;
}

参考

weback.net

w3bits.com

2017-02-23

DayPics はてなブログテーマ名決めた

はてなブログデザイン

DayPics

「DayPics」その名の通り、1日1枚の写真、画像など、フォト特化のグリッドデザインをコンセプトに作っていこうかと。

あとは、tumblrではよくある写真ライクなデザインがはてなブログでは見かけない印象だったので。

本来はjQueryなりなんなりで見栄えの良いやつを仕上げてからアップするんだろうけど、とりあえず最低限の作成をさくさくっとやって、それから更新していくようにしたいなぁ。

しばらくこのブログのデザインは崩れます

ご覧の通り、作成途中ということで見づらいです。

2016-10-03

サンプルエントリー

はてなブログデザイン test

段落

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

フォトライフ

左

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

右

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

ブロック

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大きい画像

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

罫線

h1見出し

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890

h2見出し

h3見出し（*）

h4見出し（**）

h5見出し（***）

h6見出し

asin

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「へんな会社」のつくり方 (NT2X)

作者: 近藤淳也
出版社/メーカー: 翔泳社
発売日: 2006/02/13
メディア: 単行本
購入: 62人クリック: 1,985回
この商品を含むブログ (1101件) を見る

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

引用

本日（11月12日）から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記

リスト（ul,ol,dl）

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名：Amazonギフト券5万円分
入選9名：Amazonギフト券1万円分
- 大賞1名：Amazonギフト券5万円分
- 入選9名：Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名：Amazonギフト券5万円分
入選9名：Amazonギフト券1万円分
1. 大賞1名：Amazonギフト券5万円分
2. 入選9名：Amazonギフト券1万円分

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

大賞1名: Amazonギフト券5万円分
入選9名: Amazonギフト券1万円分

テーブル

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

名前	色	個数
りんご	赤	1
みかん	だいだい	2

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

PRE

.XXX {
  width:999px;
  height:999px;
}

.propA, .propB, .propC {
  width:999px;
  height:999px;
}

#YYY {
  width:9px;
  height:999px;
}

2016-09-29

はてなブログのデザイン作成に関して

はてなブログデザイン

下準備

help.hatenablog.com

下準備のために色々検索していたら、もうサンプル記事とか作成の手引とか既に用意されてた。んーはてなダイアリーのときはあんまりこういったサービス良くなかった気がするが(笑)。

help.hatenablog.com

サンプルエントリーについても詳しく表記されていて、ユーザーがデザインの編集の乗り出しやすいようになっているんですな。ダイアリーと違って力入ってるようだし、もっとデザイン増えててもおかしくないのになぁ？といった印象だけど。

サンプルエントリー公開用のブログ

というわけで、公式によるとプレビューで見せるための公開用のブログを作っとかないといけないと。デザイン名とかもう決めなきゃいかんのかｗまいったな。

このブログ自体でデザインの編集をしなくて良かったということで、まぁカスタマイズやらなんやらの試行錯誤の記録はこちらでという感じですね。

Git Hub

github.com

ヘルプページから飛べるGit Hubを覗いてみると、ブログカスタマイズのしやすいテーマとか、ヘルプとガイドラインとか、色々と用意されてました。

2016-09-29

記事タイトル

test

大見出し

中見出し

小見出し

標準

テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプルです。

テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプル*1です。

リンク
 http://samplelinks.com/

リスト
- リスト
- リスト
リスト
リスト

aaaaa
bbbbb
cccccc
1. dddddd
2. dddddd

引用テキスト。テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプルです。

テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプルです。テキスト。この文章はデザイン編集のために描いているサンプルです。

http://samplelinks.com/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<h1><a href=""><img src="" alt=""></a></h1>

*1:脚注

2016-09-29

このはてなブログでやろうと思っていること

はてなブログデザイン

Verdana’s Labo

tumblrで独自ドメインのブログをメインに持つまでは、はてなダイアリーで記事投稿していました。はてなダイアリーのデザインを最後に作ったのをきっかけに、このはてなブログでのデザインも作ってみようかと思います。その際のカスタマイズしていくアプローチや経過などを更新していこうかと思います。

というわけで投稿記事にデザイン編集のサンプルになるようなテスト記事が多くアップされるかもしれませんが。あしからず。