黒木ノ水岩

黒木ノ水岩

ゲームを中心に様々なものを趣味の赴くままに紹介していきます。

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

通常、SNSボタンは「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「ソーシャルパーツ」から、表示させたいボタンを選択しますよね。
ここで選んだSNSボタンは、各記事の一番下に並んで表示されると思います。 

しかし、今回は記事の左側にSNSボタンを並べ、スクロールしても常にSNSボタンが表示されるような設定を行っていきたいと思います。
表示イメージは下記のサイト様のような感じです。
www.clrmemory.com


そして、さらに今回はSNSボタンも装飾していきます。
どのような感じかと言うと、下記のサイト様に掲載されている「ギザギザ」の歯車型SNSボタンにしていきます。
saruwakakun.com

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

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


設定方法

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

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

「設定」→「詳細設定」→「headに要素を追加」の欄に下記のコードを追記します。
既に2つとも導入済みの方は、この作業は不要です。

<!--「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

 

【はてなブログ】サイドバーを左に表示させる方法!

当ブログで使っている「Naked」テーマは、通常右にサイドバーが来ています。

しかし、サイドバーを左に移動させる事も簡単にできます。

 

今回は、サイドバーを左に移す方法を紹介したいと思います。

 

デザインCSSに追記する場合

ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄に下記のコードを追記して下さい。

追記後は「変更を保存する」をお忘れなく!

#wrapper {
    float: right;
}
#box2 {
    float: left;
}

 

デザインCSSを直接上書きする場合

「Naked」のCSSをimportのリンクではなく、直接全て「デザインCSS」にコピペしている方向けのカスタマイズ方法です。

「デザインCSS」の中の下記のコードを見つけて下さい。

#wrapper {
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    float: left;
    margin-right: -340px;
    padding-right: 340px;
}
#box2 {
    float: right;
    width: 300px;
    padding-bottom: 40px;
    margin-top: 10px;
}

上記のコードの中の「float」プロパティを下記の通り書き換えます。

  • #wrapperfloat: left;float: right;
  • #box2float: right;float: left;

これだけです。簡単!

要するに、#wrapper#box2floatを値を入れ替えてやれば良いのですね。

 

みなさんもブログを自由にカスタマイズしてみてはいかがでしょうか?

 

【はてなブログ】Font Awesomeでアイコンが上手く表示されないときの対処法!

このブログでも各所に「Font Awesomeを使用していますが、何故か表示が□になってしまい、上手く表示できない事が多々ありました。

その原因をようやく突き止めたので、対処法をご紹介します。

 

ちなみに、ここでは最新バージョンの「Font Awesome 5」の無料版を使用している事を前提に記載しております。

また、おおよそ原因のコードが判明している場合は、目次の「HTML、CSSのコードを修正する」までジャンプして下さい。

 

Font Awesomeが上手く表示されないときの対処法

大きく3つのステップを踏んで修正していきます。

  1. 自分のブログで使用しているFont Awesomeのバージョンを確認する
  2. HTMLやCSSを見て、上手く表示できていないコードを特定する
  3. HTML、CSSのコードを修正する

 

使用しているFont Awesomeバージョンの確認

ダッシュボード」→「設定」→「詳細設定」→「検索エンジン最適化」の欄にある「headに要素を追加」に記載されているコードを確認します。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

上記のようなコードが書かれているかと思いますが、この「https://〜/v5.0.6/〜」の部分を見て「vX.X.X」が最新のバージョンで書かれているか確認して下さい。

なお、現在の最新バージョンがいくつなのかは、下記のページで確認できます。

https://fontawesome.com/start

 

最新バージョンになっていなかった場合、先程のURLの「vX.X.X」の部分を最新バージョンの数字に修正してください。

 

上手く表示できていないコードを特定する

ご自身のブログのHTMLやデザインCSSソースコードを確認し、Font Awesomeのアイコンを使用しているコードを特定します。

おそらく、HTMLでは<i class="フォントのコード">〜</i>という形で、CSSではfont-family: 〜;とその近くにあるcontent: 〜;の形で書かれていると思います。

これらをたよりに、不具合が起こっているコードの場所を特定して下さい。

 

HTML、CSSのコードを修正する

HTMLとCSSで、それぞれ修正のやり方が異なるので、ご自身のパターンに該当する方の修正方法を参照下さい。

 

【HTMLの場合】

 下記のページから再度アイコンを検索し、<i class="フォントのコード">〜</i>の部分を最新バージョンのフォントのコードに修正して下さい。

fontawesome.com

 

CSSの場合】 

特定したコードの「font-family」の記載がfont-family: Font Awesome;となっていたら、font-family: "Font Awesome 5 Free";に修正して下さい。

また、すぐ近くにある「content」の「\フォントのUnicode」のUnicodeも念のため最新バージョンのコードから変更がないか確認しましょう。

確認方法は、HTMLの場合と同様に公式ページからアイコンを検索して下さい。

!Caution!

上記の方法でも上手く表示できない場合、「font-family」プロパティが入っているセレクタ内に「font-weight: bold;」を追加してみて下さい。

 

(例).samlple {

   〜
   font-family: "Font Awesone 5 Free";
   font-weight: bold;
   〜
   }

 

Font Awesomeが上手く表示されない原因

表示が□になってしまう原因は、主に以下の2つでした。

  1. 参照しているバージョンに対応した書式でコードが記載されていない
  2. font-weightを指定していない

①の原因は、HTMLで記載するときもCSSで記載するときも関わってくるものです。

②の原因は、CSSで記載するときに関わってくるものです。

 

バージョンに対応した書式でコードをが記載されていない

2017年末頃にアップデートが加えられ、これに伴いアイコンを表示するためのコードが変更になったようです。

そのため、2018年現在で最新の「Font Awesome 5」を使用するためには、このバージョンに合わせた形でコードを書いてやる必要があります。

 

もし、ご自身のブログが5よりも前のバージョンを使用していれば特に問題はありませんが、最新のバージョン5を使用している場合は、旧書式でコードが書かれていると上手く表示されない場合があります。

上記の対処法に書いてあるとおり、HTMLの場合はフォントコードが変更になっていたり、CSSの場合はfont-familyの書き方が変更されています。

 

font-weightを指定していない

最新のバージョン5の無料版を使用している場合、「font-weight」を「bold」または「900」で指定してやる必要があるようです。

これに気づかなかったため、何で表示されないのかずーっと悩んでました;;

参考サイト様には本当に感謝です><

 

参考サイト様

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

saruwakakun.com

plife.studio

 

【はてなブログ】当ブログで行っているカスタマイズ一覧

主に自分の備忘のためですが、当ブログで行っているカスタマイズをリスト化したいと思います。

まだ未完成ですが、順次内容を追加していく予定です。

はてなブログの無料版を使用しているので、無料版向けのカスタマイズであることにご注意下さい。

当ブログで使用しているテーマ

当ブログで使用させて頂いているテーマは、ゆきひーさん作成の「Naked」です。シンプルながらもポイントで色が使われており、飽きのこないお気に入りのテーマです。

また、レスポンシブルデザインと言って、PC版とスマホ版のデザインが連動するタイプのデザインを採用している点も嬉しいポイントです。

Naked - テーマ ストア

 

Naked専用カスタマイズ

「Naked」は専用ページがあり、公式カスタマイズが掲載されているため、他のモノよりトラブル無くカスタマイズを適用することができます。

Theme Naked Blog

 

トップページにメニューバーを追加する

トップページ上部の黒い部分(メニュー)を追加するカスタマイズです。当ブログでは、扱っている親カテゴリと子カテゴリを表示させています。

サイドバーの設定からもカテゴリ表示はできるのですが、FC2ブログのようにカテゴリの折りたたみができなかったので、こちらの方法を取りました。

theme-naked.hatenablog.jp

!Caution!

スマホ版ではトグルメニューで表示されるはずなのに「何故か動かない!」という方は、下記の記事を参考に修正してみて下さい。

kurokinomizuiwa.hatenablog.com

 

目次を箇条書きリストにする 

「Naked」のテーマでは、目次がデフォルトのままだと番号リストになっています。

何となく汎用性があるかなと思い、目次は番号リストではなく箇条書きに変更しました。

theme-naked.hatenablog.jp

 

SNSボタンを追従させる

PC版のみですが、ブログの左側にスクロールしても追従するSNSボタンを設置しています。

kurokinomizuiwa.hatenablog.com

 

 

記事下に3DのSNSボタンを設置する

追従型のSNSボタンだと、スマホ版で見たときにうまく表示されません。

そんな時は、記事の下に3DチックなSNSボタンを表示させる事ができます。

当ブログでは採用してませんが、試してはみたので参考まで。

 

シェア数を表示する

ボタンを表示する際、シェア数を一緒に表示するカスタマイズです。

 

トップページの記事表示をカスタマイズ

記事を一覧形式で表示する

通常のままだと、トップページに記事の内容がズラ〜ッと全て表示されてしまうため、記事を一覧形式で表示することでトップページをスッキリ見せる事ができます。

スマホ版では、一覧で表示する記事の数を設定することで、読み込み速度をアップさせる事も可能です。

kurokinomizuiwa.hatenablog.com

 

一覧形式で表示する場合のデザインを変える

上記の方法で一覧形式にしたときの見た目のデザインを設定します。

 

記事タイトルのデザインを変える

記事のタイトルの見た目を変えます。

タイトル文の上下に二重線を引き、下の線は点線に変えてます。

 

現在見ている場所を追従する目次を設定する

PC版のみですが、サイドバーに現在見ている記事の位置が、目次のどこの項目の場所なのかハイライトされる目次を設定します。

目次は追従するので、スクロールしても右側に表示されたままになります。

各項目をクリックすると、その場所に飛ぶこともできます。

 

目次のデザインを変える

目次の見た目のデザインを変えています。

PC版のみですが、項目にカーソルを合わせたとき、項目が横にずれるアニメーションを入れてます。

 

「上に戻る」ボタンを設置する

ある程度スクロールすると、一番上にスルッと戻るためのボタンを表示させます。

 

ソースコードを言語名と行番号を付けて表示する

ブログにソースコードを貼り付ける際、その言語名と行番号を一緒に表示させます。 

kurokinomizuiwa.hatenablog.com

 

カテゴリの表示をカスタマイズする

記事タイトルの下に表示されるカテゴリの見た目をカスタマイズします。

当ブログでは、背景に色を付ける事でタグのような形で表示しています。

 

「引用」の見た目をカスタマイズ

引用を使用したときの見た目をカスタマイズします。

2つのデザインを組み合わせで使っています。

 

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

各記事の上部に表示される投稿日時の横に、記事を更新した日時を表示させます。

このブログでは、左上に  のアイコンが表示されていますが、その右隣の日付が記事を最後に更新した日時になっています。

kurokinomizuiwa.hatenablog.com

 

 

現在適用していないが、試したカスタマイズ 

現在のブログには適用していませんが、適用できるか試したカスタマイズがいくつかあるので、そちらも併せて紹介します。 

 

サイドバーを左に表示する

「Naked」テーマでは右にサイドバーがありますが、左に表示させることも可能です。

kurokinomizuiwa.hatenablog.com

 

その他、テンプレートなど

コピペで使えるデザイン集を書きます。