【はてなブログ】写真や画像のカドを丸くして表示する方法！

今回は、下の例のように写真や画像のカドを丸くして表示する方法をご紹介します。

ちなみに下の写真は我が家のアイドルペットのハムちゃんです。

今日は、画像の表示方法について紹介するよ！
ちなみに、ボクの事については「ペット」カテゴリの記事を見てね！

設定方法

それでは、実際の設定方法について紹介していきます。
ここでは、下記の３点の設定を行うことができます。

1. カドが四角い写真や画像のカドを丸くしてサムネイル表示する
2. サムネイル表示する画像サイズを、記事の幅を基準とした相対的なサイズで表示する
3. サムネイル画像に影を付ける

２番目の「相対サイズ表示」が少し分かりづらいと思うので解説します。

通常、画像を表示すると下の画像のように記事の横幅いっぱいに画像が表示されてしまいます。

スマートフォン等ではあまり気にならないかもしれませんが、PC版だと画像が結構どデカく表示されてしまうため、好ましくありません。

そこで、サムネイル画像を記事の横幅を100%とした相対サイズで表示してやることで、スマホ側の表示も崩すことなく調節できるのです。

例えば、先程の画像を90%で表示すると↓のような感じで記事の横幅の90%のサイズで表示されます。

いかがでしょうか？
少しスッキリしたイメージで、PC版は先程よりこちらの方が見やすいのではないでしょうか。

CSSの設定

「デザイン」→「カスタマイズ」→「デザインCSS」の欄に下記のコードを追記します。

/*↓----画像表示----↓*/
.wa_frame {
	text-align: center; /*画像を中央表示*/
}
.wa_frame img {
	width: 90%; /*記事の幅に対する画像サイズ*/
	border-radius: 20px; /*カドを丸くする度合い*/
	object-fit: cover;
	box-shadow: 4px 4px 8px; /*影の設定*/
}
/*↑----画像表示----↑*/

使い方

画像タグを<div class="wa_frame">〜</div>で囲って下さい。

例えば、下記のようなイメージです。

<div class="wa_frame">画像タグ</div>

まとめ

いかがでしたでしょうか？

画像もひと工夫加えるだけで、違った見せ方をする事ができるので、是非試してみて下さい！

【はてなブログ】サイドバーに「追従する目次」を表示する方法！

今回は、ブログのサイドバーに追従する目次を表示する方法を紹介します。

通常、目次は記事の上の方に記載されているだけで、スクロールすると目次が見えなくなってしまうので不便ですよね。

そんなとき、スクロールしても表示され続ける目次があったら便利だと思いませんか？

というわけで、さっそく以下から紹介していきます。

追従する目次の動作

サイドバーの一番下に「目次」の項目が追加されます。

記事の方で目次を作成していなくても、見出しがあれば自動的に目次を生成して、そのリストをサイドバーの欄に表示してくれます。

目次の項目をクリックすると、その見出しにスルーっとアニメーションでジャンプできます。

また、表示が固定なのでスクロールしても隠れず、サイドバー上に残り続けます。

そのため、目次を見たいときにいつでも参照する事ができます。

さらにこの目次、自分が今見ているところが目次のどの項目の場所なのかもハイライトしてくれるのです！

追従する目次の設置方法

こちらのサイト様に記載されている通り実行するだけです。

life-alright.com

以上！今回もとても簡単でしたね。

いかがでしたでしょうか？

こちらのカスタマイズは本当に簡単にできて、しかも超実用的なので、カスタムしておいて損はないと思います！

【はてなブログ】「上に戻る」ボタンを設置する方法！

長い記事を読んでいると、読み終わった時にトップへ戻りたい事が多々ありますよね。

しかし、いちいち上までスクロールするのは面倒です。

そんなときに便利なのが「上に戻る」ボタンです。

今回は、そんな「上に戻る」ボタンの設置方法をご紹介します。

「上に戻るボタン」の動作

今回設置していく「上に戻る」ボタンの動作は以下のとおりです。

• ある程度スクロールすると、右下にボタンがふわっと現れる
• ボタンを押すとスルーっとアニメーションで上に戻る

ボタンの設置方法

やり方はとても簡単で、下記のサイト様で書いてあるとおり実行します。

hatebumaru.hatenablog.com

以上、終わりです！

いかがでしたでしょうか？

ちゃんとスマートフォン版でも動作するので、是非お試し下さい！

【はてなブログ】スクロールすると追従するSNSボタンの設定方法！

今回は、スクロールしても追従するSNSボタンの設置方法をご紹介します！

通常、SNSボタンは記事の一番下に並んで表示されますよね。

そのため、「シェアしたいな〜」と思ったときにすぐシェアできないという欠点があります。

しかし、スクロールしても常にSNSボタンが表示されるようにする事で、シェアしたい時にいつでもシェアする事ができるのです！

表示イメージは下記のサイト様のような感じになります。
www.clrmemory.com

さらに、SNSボタンを「ギザギザ」の歯車型SNSボタンに装飾していきます。

ボタンの装飾は下記のサイト様を参考にしました。
saruwakakun.com

カーソルを合わせると歯車が回るので、つい押してしまいたくなるようなボタンになっており、とても気に入ってます。

それでは、早速設定方法を紹介していきたいと思います！

設定方法

ソースは上記の２つのサイト様を参考にさせて頂きました。感謝！

「jQuery」と「Font Awesome」の読み込み設定

「設定」→「詳細設定」→「headに要素を追加」の欄に下記のコードを追記します。

既に２つとも導入済みの方は、この作業は不要です。

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

HTML（記事下）

「デザイン」→「カスタマイズ」→「記事」→「記事下」の欄に下記のコードを追記します。

<!--↓----SNSシェアボタン_歯車_追従----↓-->
<div class="side-share-btn">
    <div class="unq_btn">
        <div class="fixed-share-inner">
            <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-btn" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="この記事をはてなブックマークに追加">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-blogger-b fa-stack-1x"></i>
                </span>
            </a>
            <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-btn" title="この記事をTwitterで共有">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-twitter fa-stack-1x"></i>
                </span>
            </a>
            <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-btn" title="この記事をFacebookで共有">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-facebook-f fa-stack-1x"></i>
                </span>
            </a>
            <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-btn" title="この記事をGoogle+に追加">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-google-plus-g fa-stack-1x"></i>
                </span>
            </a>
            <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-btn" target="_blank" title="この記事をPocketに追加">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-get-pocket fa-stack-1x"></i>
                </span>
            </a>
        </div>
    </div>
</div>

<script>
$(window).on("DOMContentLoaded", function(){
  $('#content').prepend($('.side-share-btn'));
});
</script>
<!--↑----SNSシェアボタン_歯車_追従----↑-->

CSS（デザインCSS）

「デザイン」→「カスタマイズ」→「デザインCSS」の欄に下記のコードを追記します。

/*↓----SNSシェアボタン_歯車_追従----↓*/
.side-share-btn{
    position: relative;
    width: 100%;
}
.fixed-share-inner{
    position: fixed;
    width: 50px;
    left: 130px; /*ボタン表示位置*/
}
.fixed-share-inner > a {
    margin-bottom: 5px;
}
.unq_btn a{
    display: inline-block;
    text-decoration: none;
    font-size: 25px; /*ボタンサイズ*/
}
.unq_btn .fa-stack-1x {
    color: white;
    font-size: 20px; /*アイコンサイズ*/
}
.unq_btn .fa-stack-2x {
    transition: .3s;
}
.unq_btn .hatena-bookmark-btn .fa-certificate {
  color: #3c7dd1;
}
.unq_btn .twitter-btn .fa-certificate {
  color: #74c1f8;
}
.unq_btn .facebook-btn .fa-certificate {
  color: #668ad8;
}
.unq_btn .pocket-btn .fa-certificate {
  color: #f79393;
}
.unq_btn .feedly-btn .fa-certificate {
  color: #acde71;
}
.unq_btn .googleplus-btn .fa-certificate {
  color: #ed7168;
}
.unq_btn a:hover .fa-stack-2x {
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
/*↑---- SNSシェアボタン_歯車_追従----↑*/

まとめ

いかがでしたでしょうか？
SNSボタンも、ひと工夫で色んな見せ方ができるので、是非試してみて下さい！

【はてなブログ】記事の更新日時を表示させる方法！

通常、記事を書くとその記事を初めて作った日、つまり「記事の作成日」が表示されますよね。

しかし、私のように一度書いた記事をよく「書き直す」人もいるかと思います。

そこで、「記事の作成日」と同時に「記事が更新された日時」も一緒に表示する方法を紹介します。

更新日時を表示するメリットとしては、記事を書く側も見る側も「この記事の情報がいつのものか」が分かりやすくなる事が挙げられます。

情報が古いままなのか、随時更新されていっているのかが分かりやすくなると、特に見る側にメリットがあるのではないかと思います。

記事の更新日時を表示する設定

jQueryとFont Awesomeの読み込み設定

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」の欄に下記のコードを追記します。

既に同じファイルを読み込むコードが追記されている場合は、この作業は不要です。

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

HTMLの設定

下記のサイト様の「サイトマップ利用バージョン」に掲載されているコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「記事下」の欄に貼り付けます。

www.tsubasa-note.blog

デザインCSSの設定

下記のサイト様に掲載されているCSSコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄にコピペします。

utautan.hatenablog.com

上記のCSSをコピペしてみたけど、更新日時の左側にあるべきアイコンが□で表示されてしまうという方は、下記のコードを代わりにコピペしてみて下さい。

こちらのコードは、上記で紹介されているCSSをFont Awesomeの最新バージョンに対応するように書き変えたものになります。

/*↓----更新日時表示----↓*/
.lastmod {
	background-color: transparent;
	padding: 5px 0px;
	text-decoration: none;
	font-size: 15px;
	display: inline;
	margin-left: 0px;
	font-family: 'Montserrat', sans-serif;
	color: #888888;
}
.lastmod::before {
	margin-right: 5px;
	margin-left: 10px;
	padding-left: 3px;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	content: '\f01e';
}
.entry-date a {
	background-color: transparent;
	padding: 5px 0px 5px 6px;
	text-decoration: none;
	font-size: 15px;
	display: inline;
}
.entry-date a::before {
	margin-right: 5px;
	padding-left: 3px;
	font-family: "Font Awesome 5 Free";
	content: '\f073';
}
/*↑----更新日時表示----↑*/

参考サイト様

今回、参考にさせて頂いたサイト様はこちらです。感謝！

＜jQueryコード＞

www.tsubasa-note.blog

＜CSS＞

utautan.hatenablog.com