Not Quick a Nine

日々の気になることを、独断と偏見で綴る、バカ親父ブログです

【はてなブログのカスタマイズ】『Check!』とか『Point!』とかどうやるの?やり方わからない時って検索するの苦労するよね?

昨日の記事は図らずも高須院長直々にツイッターで返信を頂き、もう朝から興奮しちゃいました(^_^;)
とはいえ、記事に対する反論だったので、しっかりと返信しておきましたよ。

こんにちは、ブンガです。

最近時事問題ばかり書き込んでいるので、たまにはゆるくブログのカスタマイズ関連のことを書いてみたいと思います。

Check!!って表示が格好いい!

ちょっと前の出来事なんですが、他の方のはてなブログを見ていると、頻繁にこんな表示を見つけるんですねぇ。

こちらはポジ熊さんのところ

こちらはユウトさんのところ

これ、やりたい!!

どうしたらこういうのできるのさ??

でも、やり方全くわかんないし、手がかりもないさ。。。どうすんのよ?

てことで、その調べ方(ググり方)をメモしておきます。

調査開始

どうやったら出来るのか?をあちこち調べました。
「はてな Check!」で検索したり「はてな Point!」で検索してみたりしてもダメだったんですが、クラス名で検索したら意外にあっさりわかったので、その方法を紹介。

調べ方は色々あります。

まぁ、ソースを追ってCSSを漁ってしまえば大抵のものはわかるんですけどね。

それじゃ、とても手間がかかるので、ここはがっつりと端折って、デベロッパーツールを使ってみたいと思います。

まずはChromeのデベロッパーツールを立ち上げましょ。

調べたい場所で右クリック-検証します。


するとこんな画面になります。



赤丸で囲んだ部分にクラス名がでています。
とりあえず、このクラス名でググってみました。

発見!!

一番上にアクセスしてみると、ずばりコレでした(^_^;)

http://shiromatakumi.hatenablog.com/entry/2017/01/16/205403shiromatakumi.hatenablog.com

後はこの記事の通りにCSS内に組み込めばOKというわけですね。

さして難しい作業ではないので、詳しいやりかたはサイトをご覧になってください。

自己流にアレンジ

このサイトではNO TITLEさんの記事にあったCSSをちょっぴり改造しています。

どこにでも設置できるように

まず、サイト中のどこでもクラス名さえ指定すれば使えるように「.entry-content」の子要素ではなくしました
これによって「おすすめ記事」をエントリーヘッダー部分に設置しています。

こんな感じです。

バリエーションを増やす

NO TITLEさんでは、たくさんのバリエーションを紹介されていますが、全て同じクラス名で統一されているので、そのままでは複数を混在させて使えません。

これは名前を変えて登録すれば解決しますが、色々と入れるとCSSが肥大化して遅くなって嫌な感じですので、私は「おすすめ記事」「あわせて読みたい」「Point!!」の3種類の言葉だけを変えて登録してみました。

それに伴いクラス名を「あわせて読みたい」なら「emlink-awasete」、「おすすめ記事」なら「emlink-osusume」として使い分けられるようにしました。

また、いちいち書き込む時に全てを打ち込むのは面倒なので、「あわせて」や「おすすめ」という読みでソースが出てくるように工夫しています。


こちらが私が使用しているCSSです。 参考にどうぞ。

<style type="text/css"> 
/***** オススメ記事用 *****/
.emlink-osusume,.emlink-awasete,.emlink-point {
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #df8182;
  background-color: #fffbf5;
}

.emlink-osusume,emlink-awasete,emlink-point p:last-child {
  margin-bottom: 0;
}

.emlink-osusume::before,.emlink-awasete::before,.emlink-point::before {
  position: absolute;
  top: -12px;
  left: 10px;
  padding: 0 10px 0 26px;
  background-color: #df8182;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.emlink-osusume::before {
  content: "おすすめ記事";
}

.emlink-awasete::before {
  content: "あわせて読みたい";
}

.emlink-point::before{
  content: "Point!!";
}

.emlink-osusume::after,.emlink-awasete::after,.emlink-point::after {
  position: absolute;
  top: -16px;
  left: 4px;
  width: 28px;
  height: 28px;
  background-color: #df8182;
  border-radius: 14px;
  line-height: 25px;
  text-align: center;
  content: "\f010";
  font-size: 18px;
  font-family: "blogicon";
  color: #fff;
}
</style>

ブンガ的まとめ

具体的なカスタマイズのて記事を読んでからスタートするカスタマイズは比較的ラクですが、これってどうやるの??って見た目から入ったカスタマイズって、やり方を見つけるまで苦労しますよね。

今回のやり方は、そんな場合のほんの一例に過ぎませんが、デベロッパーツールを足がかりにして探し当てたってのは、これだけに限らず結構あるので、困ったときには役に立つかもしれませんよ。

ではでは(^.^)/~~~