GUISE KIT

きまぐれウェブログ

BootstrapとMasonryでテンプレートして記事をMarkdownで書く練習
  • 2016/1/19
  • WEB

あまりにも仕事が暇すぎるのでこのサイトをプチリニューアルしました。
デザイン作るのはめんどくさいので細かい内部的な修正がメインに
後は仕事で使えそうなのの練習台として
主な修正は以下から

Bootstrapを今更使い始めました。

仕事でも使い始めました。
WF構築がクッソ早くなったというか構築しちゃえば割りとそのまま通っちゃうことが多いので今後のデフォルトになりそうな感じ。
とりあえず練習でこのサイトのreset.cssをやめてBootstrapに置換しました。

Masonryの導入

せっかくカードデザインにしたのにカードの大きさがバラバラで一覧がガタガタになるので何かをと探した結果Masonryに下記のようなコードだけで実装できるのは意外だった。

<script src="<?php bloginfo(template_url);?>/js/imagesloaded.pkgd.min.js" type="text/javascript"></script>  
<script src="<?php bloginfo(template_url);?>/js/masonry.pkgd.min.js" type="text/javascript"></script>  
<script>  
$(document).ready(function() {  
    var $container = $('親ID');  
    $container.imagesLoaded(function() {  
        $container.masonry({  
            columnWidth: '子class',  
            itemSelector: '子class'  
        });  
    });  
});  
</script>

imagesloadedも入れないとバグるよって記事を見かけたのでついでに導入。
ぶっちゃけウィンドウを大きくしたり小さくしたりして動作を確認するなんてWebデザイナー以外いないだろとは思いつつも楽にレスポンシプできてそれっぽく作れるのと、style.cssが300行程度で済んでるのがすごく気持ちいい。

シンタックスハイライトをhighlight.jsに変えました。

前使ってたやつは読み込むjsやらcssが多かったのでこれはjs一個とスクリプト一行で済むので楽だと思いました(小並感)

JetpackのMarkdownをオンに

最近Markdown記法をざっくり覚えました。ので練習にこの記事も書いてます。

そんな日々