なべの美容日記。

魅力的になりたい人が見るブログ。

【はてなブログ】フッターにお問い合わせリンクやコピーライトを表示する方法

f:id:rei10181996:20190201145504p:plain


こんにちは、なべです!

 

今日は、はてなブログのカスタマイズについて書きます!ここ数日、色々と試していて、ひとまず完成しました。メインはフッターのカスタマイズ

 

Proを使っている方で、何も表記してないなーという人は要チェックです!コピペで簡単なので(笑)

 

はてなブログでは、あまりフッターを重視していない人が多いようです。そんな中、ちゃんと書かれていたら機能的にもデザイン的にもいいですよね。

 

 

カード型がおしゃれなテーマ「KOALA」に変更

はてなブログを初めてから今までは、「Haruni」というテーマを使わせてもらっていました。こちらはグラデーションなどもとても可愛くてよかったです。

 

 変更の大きな決め手となったのは、トップページの顔ですね。どちらのテーマも、記事一覧はカード型なのですが、形が違います。

 

f:id:rei10181996:20190201135023p:plain

こちらは「Haruni」です。画像をみてもらうと、記事のカードが横長になっています。これはこれで素敵なのですが、パッと一目見たときに入ってくる情報量が少ないなと思いました。

 

「Haruni」のカスタマイズで、本文表示とか色々できたのかもしれませんけどね(笑)あんまりカスタマイズできないからなぁ・・。

 

 

f:id:rei10181996:20190201135208p:plain

そしてこちらが新しく使用しているテーマ「KOALA」です。画像で見てわかる通り、パッと見たときに、多くの記事を見ることができます。

 

そしてカードの中に、本文も少しだけ載っているんです。

 

この「なべの美容日記。」に来て、一番初めに見るページがここだったとして、ちらっと見ただけで、だいたいどのような記事を書いているかがわかってもらえたらいいなと思って変更した次第です!

 

背景が映えるデザインのようなので、背景もグラデーションにしています。ピンクと水色のグラデーション。お気に入り。(笑)

 

グローバルメニュー は、今までもスライド型を使っていました。ただ、スマホで見るとスライドできるよ!というのに気づきにくいんです。

 

そんな悩みもこのテーマにして解決しました!一瞬だけ自動でスライドしてくれるので、わかりやすくできます!

   

●KOALAのテーマページはこちら●

KOALA - テーマ ストア

 

 

フッターにリンクやコピーライトを表示する

私はProを使っているので、今まではフッタを非表示にするだけやって、他は何もしていませんでした。

 

でも、ホームページやサイトっぽくフッターをちゃんとしたい。という単純な思いで色々やってみました!

 

それで出来上がったのがこちら!!

f:id:rei10181996:20190201145744p:plain

 

これがパソコンでもスマホで見ても、サイトの一番下に表示されています!うん、なんかいい感じじゃないですか?(笑)結構一人でテンション上がったんですけどね・・

 

ではやり方を簡単に紹介させていただきます。ここでお世話になったのが、テーマ「Haruni」さんなんですよね。(笑)Proを使っていること前提で進めます。

 

 

1.  設定→詳細設定→フッタを表示しないにチェックを入れておく

2. 下のコードを、デザイン→カスタマイズ→フッタのHTMLに貼り付ける

<div id="copyright">
<p><a href="お問い合わせ先URL">ユーザー名のプロフィールへ</a> | <a href="お問い合わせ先URL">お問い合わせ</a></p>
<div class="footer-follow-buttons">
    <a class="instagram white" href="https://www.instagram.com/ユーザー名" target="_blank">
    <i class="blogicon-instagram lg"></i>
    <span class="inner-text">Instagram</span>
    </a>
 <a class="twitter white" href="https://twitter.com/ユーザー名" target="_blank">
    <i class="blogicon-twitter lg"></i>
    <span class="inner-text">Twitter</span>
    </a>
    <a class="hatena white" href="http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe" onclick="window.open('http://blog.hatena.ne.jp/ユーザー名/ブログドメイン/subscribe', '', 'width=500,height=400'); return false;">
    <i class="blogicon-hatenablog lg"></i>
    <span class="inner-text">Hatena</span>
    </a>
    <a class="feedly white" href="https://feedly.com/i/subscription/feed/http:ブログドメイン/feed" target="_blank">
    <i class="blogicon-rss lg"></i>
    <span class="inner-text">Feedly</span>
</a></div>
<p>©ユーザー名</p></div>

 

3.  自分用にカスタマイズする

上のものをコピペした後に、自分専用のリンクに変えていきます!それが以下のコードです。

 

<div id="copyright">
<p><a href="http://www.nabepanman.com">トップに戻る</a> | <a href="https://www.nabepanman.com/otoiawase">お問い合わせ</a></p>
<div class="footer-follow-buttons">
<a class="twitter white" href="https://twitter.com/rmvc1018" target="_blank">
<i class="blogicon-twitter lg"></i>
<span class="inner-text">Twitter</span>
</a>
<a class="hatena white" href="http://blog.hatena.ne.jp/rei10181996/www.nabepanman.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/rei10181996/www.nabepanman.com/subscribe', '', 'width=500,height=400'); return false;">
<i class="blogicon-hatenablog lg"></i>
<span class="inner-text">なべの美容日記。の読者登録</span>
</a>
</div>
<p>©なべ@うつ病美容ブロガー</p></div>

 

 私の場合は、一番最初の"お問い合わせURL"の所にはトップページのURLを入れました。

 

そして、その次の「ユーザー名のプロフィールへ」という部分には、「トップに戻る」と打ち込んでいます。そうすると、最初に見てもらったような表記になります。

 

私は利用していないサービスの部分は、削除しました。それ以外は、ツイッターとフェイスブックのユーザー名の部分に、自分の各SNSのユーザー名を入れてリンクを作りました。

 

一番最後の行のコピーライトは、自分のユーザー名でもニックネームでも構わないみたいです。このサイトにあるものの全部の権限は私にあるよ!っていうのを証明するためのものになります。

 

まぁこれを書かずとも大丈夫みたいですけど一応ね!

 

 

test-test-test.hatenadiary.jp

こちらのページを参考に作りました!自分のサイトに合うように好きにカスタマイズしてみてください。ただ、このコードによっての不具合への責任は取れないので、必要ならばバックアップをとってからで!

 

 

見やすく快適なサイト作りに励む

 

テーマ選びからカスタマイズまで、とにかく読者さんが読みやすく、快適にサイト内を移動できるようにしたいと思っています。まだまだですが・・。

 

本当はカテゴリーごとの最新記事とかを並べるのが一番いいみたいなんですよ。色々試行錯誤しましたが、それはできませんでした。なのでまた別の手段をとりました。その話はまた今度。

 

ソーシャルボタンも、はてなのものは重い!と言われていたので、軽いやつに変えて見たりしたのですが、ちょっと不具合があったのでやめました。(笑)しっかり原因を突き止めてまたチャレンジする予定です!

 

読んでいただきありがとうございました!