えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

コピペするだけ!はてなで使えるCSSだけで作るMasonry風ギャラリー

\フォロー!/
\シェア!/

f:id:mshitech:20170113011836j:plain

メインブログの方で写真を沢山貼りたくなったので、Masonry風ギャラリーを導入しました。

今回はその方法をコチラでご紹介。

実装例

どんなものかを見てもらう為の実装例です。

f:id:mshitech:20161216203905j:plain
画像を貼るとこんな感じ。

動画もこの通り。
blog.mshimfujin.net
あまり意味はないかもしれませんが、こんな感じのリンクも貼り付けられます。こちら、メインブログでの実装例になります。ドラゴンクエストミュージアムに興味がありましたら是非覗いて覗いてみてください。

見出しをこんな風に表示するのもあり?


文章を書くとこんな感じです。上の見出しは<h3>を使用。基本は写真を貼って使う用だと思うのですが、このようにアイデア次第で何にでも使用する事が可能です。以下、ギャラリー感を出す為にデスピサロとの戦闘ジオラマを貼り付けておきました。
f:id:mshimfujin:20170112003007j:plain
f:id:mshimfujin:20170112003030j:plain
f:id:mshimfujin:20170112004332j:plain
f:id:mshimfujin:20170112004354j:plain

本家Masonryは要素が左から右に並んでいくのですが、これは縦並び。

そこが一番の違いになります。

CSS

では貼り付け場所とコードを紹介します。

「貼り付け場所なんか分かっているよ」という方は読み飛ばしてください。

貼り付け場所

まずはCSS、その貼り付け場所はこちら。
「デザイン」→「カスタマイズ」→「デザインCSS」です。

赤枠の部分をクリックして下さい、CSSの入力フィールドが現れます。

そして以下に紹介するコードを一番下辺りにペーストして貼り付けてください。

コード

/* Masonry風ギャラリー */
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}

.item_m {
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 5px;
margin: 0 0 1.5em;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@media only screen and (min-width: 400px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (min-width: 780px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

html

実際のhtmlはこんな感じ。

そして以下に紹介するコードを一番下にペーストして貼り付けてくださいね。

<div class="masonry">
<div class="item_m">コンテンツを挿入</div>
</div>

「ここにコンテンツを挿入」の部分は消してしまって、画像なりの任意のhtmlを貼り付けてください。

最初に挙げた実例で言うと、こんな感じ。

<div class="item_m"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshitech/20161216/20161216203905.jpg" alt="えむし" /></div>

最後に

今回のギャラリーは以下のサイトを参考に作りました。

w3bits.com

作ったと言っても、上のサイトにあるCSSを改変したレベルなので・・・オリジナル要素はほとんどありません。

また、Masonry「風」なのは、先に述べたように並びがMasonryとは違うからです。

masonry.desandro.com

 

ただ、今回紹介したものはjsが要らないしCSSだけなので設置は楽です。

もし沢山の写真や、何がしかの要素を大量にブログに貼りたいのなら、一度こういった形での表示を考えてみは如何でしょうか。 

使えるシーンは結構あるかもしれませんよ?

 

ではでは・・・。

 

CSShtml5を学ぼう!