どうも。ブログの番人こと優弥です。
今回はブログのちょっとした改善をご紹介したいと思います。

私たちのブログって、今までも少し味気ないというか、飾りっ気が無いですよね。
っというのも、装飾を行う「カスタムCSS」というものが最近まで使えなかったので、やりたくても出来なかった…というのが正直なところです。
ですが、そのカスタムCSSの機能も使えるようになった今、やりたかった事をやっていこうかと思います。

その第一弾として、「ブログカード」を作ってみました。
ぶろぐかーど？っとピンと来ていない方のためにさっそくどんなものか見せます。

↓↓↓↓↓↓↓↓↓↓↓こんなやつ↓↓↓↓↓↓↓↓↓↓↓

ブログとかによくあるやつです。
前までは文字に直接リンクを貼っていたのですが、ブログカードを使うことで可読性が高くなり、”リンクである”ことを存分に主張します。

CSSはこちら

.linkcard {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 12px;
  margin-bottom: 1.6rem;
}
.card_body {
  position: relative;
  margin-bottom: 5px;
  min-height: 100px;
}
.card_body p {
  font-size: 12px;
  overflow: hidden;
  margin: 0;
}
.card_img {
  position: absolute;
  top: 0;
  left: 0;
}
.card_img_wrap {
  float: left;
  width: 15%;
  min-width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.card_img_wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: 100%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.card_desc {
  margin-left: 110px;
}
.card_desc p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.card_title {
  margin-bottom: 5px;
  overflow: hidden;
  -webkit-line-clamp: 2 !important;
}
.card_title a {
  font-size: 17px;
  line-height: 1.4;
  color: #3d3f44;
  font-weight: bold;
  text-decoration: none;
}
.card_title a:hover {
  text-decoration: underline;
}
.card_footer {
  font-size: 12px;
  text-align: right;
}
.card_footer a {
  color: #9aa5ab;
}
.card_footer a img {
  margin-right: 5px;
  vertical-align: middle;
}
.card_title a i,
.blog article .card_footer a i {
  display: none;
}
.linkcard.linkcard--noimg .card_body {
  min-height: auto;
}
.linkcard.linkcard--noimg .card_desc {
  margin-left: 0;
}

javascriptはコチラ

javascript:(
    function(){
        (function(d,f,s){
            s=d.createElement("script");
            s.src="//j.mp/1bPoAXq";
            s.onload=function(){
                f(jQuery.noConflict(!0))
            };
            d.body.appendChild(s)
        })(document,function($){
            var obj = [];
            obj.title = $('meta[property="og:title"]').attr('content');
            obj.img = $('meta[property="og:image"]').attr('content');
            obj.desc = $('meta[property="og:description"]').attr('content');
            obj.url = document.URL;
            obj.domain = location.host;
            var cardTxt = '
'+obj.title+'
'+obj.desc+'
';
            var cardFooter = '
'+obj.domain+'
';
            if(obj.img == undefined){
                var card = '
'+cardTxt+'
'+cardFooter+'
';
            }else{
                var cardImg = '
';
                var card = '
'+cardTxt+cardImg+'
'+cardFooter+'
';
            }prompt('ブログカードのHTMLを生成しました。', card);
        })
    }
)();

javascriptの使い方は↓
1.まず、ブラウザのブックマークに追加
2.ブックマークの編集で、URLに上記コードを貼り付け
3.任意のブログページでブックマークを開くとHTMLコードが出力される

私たちが使っているブログシステムには追加アプリでこのようなブログカードを自動的に作るものがあるらしいですが、勝手にインストールが出来ないのと、今後の勉強のためにと自分で作っちゃいました。

HTMLを出力するjavascriptと装飾用のCSSをカキコして意外と簡単に作成できました。(既に同じことやっている有志がネット上に沢山いるのでほとんどコピペで出来ました)

正直な話、初心者が扱うのは難しいと思うので、プラグインを入れた方が早くて楽な気がします…
私のイメージするブログカードと一番近いのがCeltispackです。
でも、いろいろ調べてみると、いろんな声が上がっているんですよね。たとえば、Wordpressが重くなる…といったもの。
えぇ…こんだけのプラグインで重くなるのか…？っと疑問に思うところではありますが、ブログ上で動作するのだから、多少なりとも遅くなるのは当たり前なのか…？

気になって他のブログカードもしらべたのですが、なんだかピンとこないというか…
kk blog cardやPz-LinkCardなども良さそうではあるが、デザインの幅が…

うーーーーーーん。
やっぱり自分で納得のいくもの作るしかないかな。
今はまだ試作段階ということで、おいおいデザインの改良とかやってみます。

あ、そうそう。
ミセス・リビング株式会社は今年で20周年です。来店時に記念グッズをお渡ししてまーす。