空のもよう

ゆらゆらと流れて

Font Awesomeの使い方

はてなブログの変更点

自分用の参考資料

TOPに戻るボタン

はてなブログにTOPに戻るボタンを追加する方法 - TASK NOTES

Webアイコンフォント

外部リンクがわかるようフォントを使う

Webアイコンフォント「Font Awesome」の使い方 - TASK NOTES

headタグ内

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Font Awesomeの使い方</title>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
</html>

該当箇所

<i class="fa fa-external-link"></i>

文字の前に入れた

リンクを別ウィンドウで開く

記事>記事上

<!-- リンクを別ウィンドウで開く -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("a[href^=http]").not('[href*="'+location.hostname+'"]').attr({target:"_blank"});
});
</script>

はてなブログのデザインカスタマイズ方法(簡易版)

はてなブログのデザインカスタマイズ方法(簡易版) - TASK NOTES

サイドバーの位置を変える

デザインCSS

/* 本文の位置 */
#main {
    float: left;
}
/* サイドバーの位置 */
#box2 {
    float: right;
}

見出しの表示を変える

/* 見出しのデザイン */
.entry-content h1, .entry-content h2, .entry-content h3 {
    font-weight: bold;
    margin: 1em 0 0.5em 0;
    padding: 3px 10px;
    border-left: solid 5px #454545;
    text-shadow: 1px 1px 1px #fff;
}

引用枠の表示を変える

/* 引用のデザイン1 */
.entry-content blockquote {
    padding: 20px 55px;
    background: rgba(245,245,245,0.8);
    color: #222;
    position: relative;
    border: solid 1px #fff;
    margin: 0.8em 0;
}
/* 引用のデザイン2 */
.entry-content blockquote:before {
    color: rgba(200, 200, 200, 1);
    content: "“";
    font-family: serif;
    font-size: 600%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0;
}
/* 引用のデザイン3 */
.entry-content blockquote:after {
    content: "”";
    font-family: serif;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 600%;
    color: rgba(200,200,200,1);
    line-height: 0;
}

タグクラウド

【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!

はてなブログのカテゴリー表示をタグクラウドにするコードを改造してみた - しばやん雑記

【CSS】はてなブログのカテゴリ欄をタグクラウド風に - 16bit!

フッター

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
<script>
    !function ($) {
        var range = 11, base = 90;
        var data = [];
        var list = $(".hatena-module-category ul li a");
        list.each(function () {
            data.push(parseInt($(this).text().match(/\((\d+)\)/)[1]));
        });
        var min = Math.min.apply(null, data), max = Math.max.apply(null, data);
        var sqrtMin = Math.sqrt(min), sqrtMax = Math.sqrt(max);
        var factor = range / (sqrtMax - sqrtMin);
        list.each(function (i) {
            var count = data[i];
            var level = parseInt((Math.sqrt(count) - sqrtMin) * factor) * 10 + base;

            var elem = $(this);
            var text = $.trim(elem.text());

            elem.css("font-size", level + "%");

            elem.text($.trim(text.replace(/\([^\(\s +]+\)/, '')));
            elem.prop("title", text);
        });
    }(jQuery);
</script>

デザインCSS

/* カテゴリーを横に並べる

div.hatena-module-category div.hatena-module-body ul li {
    display: inline;
    margin: 0 0.3em; }
*/

/* タグクラウド、ゆるふわ感
*/
.hatena-module-category .hatena-module-body ul li {
  display: inline-block;
  margin: 0 0.3em 0 0;
  padding: 0em;
  border-bottom: 0px;
  transition: 0.2s;
}
.hatena-module-category .hatena-module-body ul li:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 20;
}

Markdown記述例

はてなで使えるMarkdown記法まとめ - 開発メモ

はてなブログMarkdown記法の使い方 - TASK NOTES

訂正

訂正

強調

**太字で表示**で__こっちも太字__   
*斜体で表示*で_こっちも斜体_
***太字かつ斜体***で___太字かつ斜体___

code表記

`<class>`

pre表記

```html
  コード
```

引用

>ここから
ここから
ここまで

ここからはちがう  

表組み

|名前|性別|居住地|
|:---|:---:|---:|
|山田 太郎|男|北海道札幌市|
|佐藤 花子|女|東京都港区|
|鈴木 優子|女|鳥取県鳥取市|