読者です 読者をやめる 読者になる 読者になる

えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

かんたん!はてなブログで自由に使える追加のフッターエリアの作り方

f:id:mshitech:20161229214651j:plain

これは貼り付けた後にhtmlを触る必要が出てくるので、その辺を触る事に抵抗感の無い人向けのエントリーです。

でも、基本コピペで済むのでそんなに難しくないとは思います。

画像で説明

どんなものか分りやすく。

f:id:mshimfujin:20161225210034j:plain

現在当サイトには設置していませんので、実物を確認されたい方はこちらへ。

blog.mshimfujin.net

サイドバーが長くなりすぎたので、何とかしたいと思ってオリジナルのフッターを設置する事にしたんですよ。

CSS

では貼り付け場所とコードを紹介します。

「貼り付け場所なんか分かっているよ」という方は読み飛ばしてください。

貼り付け場所

まずはCSS、その貼り付け場所はこちら。
「デザイン」→「カスタマイズ」→「デザインCSS」です。

赤枠の部分をクリックして下さい、CSSの入力フィールドが現れます。

そして以下に紹介するコードを一番下辺りにペーストして貼り付けてくださいね。

コード

/* 追加フッターエリア */
.footer2 {
border-top: solid 1px #e6e6e6; /* 上部の線の色 */
background: #ccc; /* 背景色 */
padding:15px 5% 0 5%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.footer2-wrapper {
-webkit-flex: 2;
flex: 2;
}
.footer2-inner {
width:31.33%;
padding: 0 1% 0 1%;
display:inline-block;
float:left;
text-decoration:none;
}
@media screen and (max-width: 768px) {
.footer2-inner {
width:calc(100% - 4px);
margin: 2px 0px;
padding:10px 0px;
}
}

背景色とかボーダーの有る無し、色は好みで変更してくださいね。

線なんか要らないーって方は

border-top: solid 1px #e6e6e6; /* 上部の線の色 */

をまるっと削って下さい。

html

次にフッタを開いて下さい。

そして以下に紹介するコードを一番下にペーストして貼り付けてくださいね。

コード

 <div class="footer2">
<div class="footer2-wrapper">
<div class="footer2-inner">
/* ここにコンテンツを挿入 */
</div>

<div class="footer2-">
/* ここにコンテンツを挿入 */
</div>

<div class="footer2-inside">
/* ここにコンテンツを挿入 */
</div>
</div>
</div>

/* ここにコンテンツを挿入 */の部分は消してしまって、任意のhtmlを編集して貼り付けてください。

 

長くなりすぎたサイドバーを下に回したいだけなのであれば、ブラウザでhtmlを覗いて、サイドバーから設置したいhtmlを抜き出すと楽だと思います。

<div class="hatena-module hatena-module-html">〜</div>

となっている所を探して見ると良いと思いますよ。

 

メディアクエリは汎用性の高そうな768pxで設定していますが、好みで変更してください。

凝ってみたい方は下記のサイトを参考にされたらいいと思います。

レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ

まとめ

これでフッターのフィールドを作れたと思うので、あとは自由にご使用を。

今回はCSSとhtmlを分けて貼りましたが、面倒だって方は<style>タグで括って一括でフッターに貼り付けても良いかもしれませんね。うちではそうしています。

 

ヨメレバカエレバを作った時のFexboxを流用しました。もしかしたらCSSに余計な記述なんかがあるかも知れませんのでご容赦ください。

何かございましたらコメント欄かブコメで指摘していただけると嬉しいです。

 

ではでは、また次の記事で・・・

 

CSSやhtml5を学ぼう!

標準のフッターを触りたい方はこちらへどうぞ。

mshitech.hatenablog.com