絶景@日本

素人写真で紹介する日本の絶景スポット

ファインダー越しの世界

「マテリアルぽっぷ」で行ったカスタマイズのまとめ


スポンサーリンク
 お勧めのお出掛けスポット

  旧ブログの記事について
現在、過去の記事の整理を行っている為に投稿日時がバラバラになっています。

ブログ開設からしばらく「ZENO-TEAL」をテーマにしていましたが、1年目を機に「マテリアルぽっぷ」に変更しました。当記事では「マテリアルぽっぷ」で行ったカスタマイズについて、備忘録も兼ねてまとめました。

ヘッダー画像の設置

ブログのテーマを変更したばかりだとヘッダー周りはこんな感じ(↓)になっています。

f:id:zekkei-japan:20180929000953j:plain


テーマにあるデモサイトでもヘッダーに画像を設置する方法が書かれていますが、ヘッダー全体を画像にしたかったので、以下のコードを追加しました。

デザイン > カスタマイズ > デザインCSS
/*****ヘッダー画像始まり****/
#blog-title {
background-image: url("画像のURL");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;/* 中央寄せ */
height: 250px;/* 表示したい画像の高さ */
margin: 0;
padding: 0;
top: 0;
width: 100%;/* 幅100%に */
}
/*****ヘッダー画像終わり****/


するとこのよう(↓)になりました。

f:id:zekkei-japan:20180929004930j:plain

「タイトル」と「ブログ説明」を消す

ヘッダー画像は上手く設置できましたが、このままだとブログの設定で書き込んだブログのタイトルと説明がそのまま残ってしまっています。

f:id:zekkei-japan:20180929010328j:plain


そこで、次のコードをヘッダー画像のコード下に追加しました。

デザイン > カスタマイズ > デザインCSS
/*****「タイトル」と「ブログの説明」を隠す始まり******/
#title a {
visibility: hidden;
}
#blog-description {
visibility: hidden;
}
/*****「タイトル」と「ブログの説明」を隠す終わり*****/


すると、無事にデフォルトのタイトルと説明が消えてすっきりしました♪

f:id:zekkei-japan:20180929011838j:plain

ヘッダー部分のカスタマイズ

デモページの中にヘッダー部分のカスタマイズ方法が紹介されています。

 ブログタイトル、ヘッダー周りのカスタマイズについて - マテリアルぽっぷ

ヘッダー下へのメニューのコードを
デザイン > カスタマイズ > ヘッダ > タイトル下
に貼り付けましたが、一部コード内のアイコンフォントはこちら(↓)を参考にしました。

 はてなブログで使えるアイコンフォント(Webフォント)120種類 - FOXISM

なお、スマホ(iPhone)では、このよう(↓)に表示されています。

f:id:zekkei-japan:20180930184245p:plain

「トップへ戻る」の設置

文章を読んでいると下に出てくる「上へ戻る」ボタン。
こちら(↓)のサイトを参考に適当にいじってみました。

 はてなブログにページトップへ戻るボタンをつけよう! - No Hack No Life

思うような形に出来ずに試行錯誤して、現在使用しているコードは以下になります。
まず、
設定 > 詳細設定 > headに要素を追加
に以下のコードを追加します。

設定 > 詳細設定 > headに要素を追加


続いて、
デザイン > カスタマイズ > フッタ
に以下のコードを追加します。

デザイン > カスタマイズ > フッタ

<!--トップへ戻るボタン始まり-->
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});

// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="blogicon-chevron-up lg"></i></a>
<!--トップへ戻るボタン終わり-->


最後に
デザイン > カスタマイズ > デザインCSS
に次のコードを追加して形を整えます。

デザイン > カスタマイズ > デザインCSS
/*****トップへ戻るボタン始まり****/
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#c0c0c0;
font-size:30px;
background color:rgba(0,0,0,0.4);
}
/*****トップへ戻るボタン終わり****/


赤字のカラーコードと数字で上へ戻るボタンの色と大きさを指定しています。
上のコードでは四角で囲まれた状態なので、それを丸い形にしたかったんですが、そのやり方がわからなかったので青文字のコードで無理矢理消しました(笑)
まぁ、結果的にはあまり記事の邪魔にならないようのなったからいいかな。

目次のカスタマイズ

目次はこちら(↓)のサイトを参考に動きのあるものにしてみました。

 【CSS】コピペするだけ!「目次」をカスタマイズする方法 - えむしてっく

デザイン > カスタマイズ > デザインCSS
に次のコードを追加します。

デザイン > カスタマイズ > デザインCSS
/*****目次のカスタマイズ始まり****/
.table-of-contents li {
font-size:0.9em;
font-weight: bold;
color:#333;
}
.table-of-contents a{
color:#545454;
padding:8px 0;/* 列の間隔 */
display: block;
text-decoration: none;
transition-duration: 0.3s /* カーソルが戻る時間 */
}
.table-of-contents li a:hover {
padding-left: 7px; /* カーソル重ねた時に移動する距離 */
transition-duration: 0.3s /* カーソルが移動する時間 */
}
/*****目次のカスタマイズ終わり****/

カラーの変更

目次のカラーについてはテーマのデモページで紹介されていたコードを以下のように追加しました。

デザイン > カスタマイズ > デザインCSS
/*****目次、サイドバーの配色始まり****/
.hatena-module-title,.comment-box:after,.entry-header .categories a {
background: blue !important;
}
.table-of-contents {
border:1px solid #0000cd90 !important;
border-bottom: 10px solid blue !important;
}
.table-of-contents:before {
border-bottom: 10px solid blue !important;
background: #0000cd90 !important;
}
/*****目次、サイドバーの配色終わり****/


なお、色を変えるコードは青文字の5ヶ所で、赤字の数字は透明度を設定している値だそうです。
カラーコードはこちら(↓)を参考にして下さい。

 WEB色見本 原色大辞典 - HTMLカラーコード

メインのカラー変更

目次のカラーを青に変更しましたが、メインカラーも変更してサイト全体を青のイメージに変更しました。
コードは以下のコードを
デザイン > カスタマイズ > デザインCSS
に追加しました。

デザイン > カスタマイズ > デザインCSS
/*****メインの配色始まり****/
#blog-title #title a,#blog-description,.search-module-input,.search-module-input::placeholder,.entry-content h3,.entry-content h4,.leave-comment-title:hover {
color: blue !important;
}
.top-menu-bar,.page-index .enable-top-editarea .page-archive .categories,.page-archive .categories,.page-index .enable-top-editarea .page-archive .pager a,.page-archive .pager a,.archive-heading,.search-module-button,.entry-content h2,.leave-comment-title,.page-entry .pager-prev a:hover,.page-entry .pager-next a:hover {
background: blue !important;
}
.search-module-input,.search-module-button,.leave-comment-title,.page-entry .pager-prev a,.page-entry .pager-next a {
border: 1px solid blue !important;
}
.entry-content h3 {
border-top: double 5px blue !important;
}
.entry-content h3 {
border-bottom: double 5px blue !important;
}
.entry-content h4 {
border-bottom: solid 3px blue !important;
}
/*****メインの配色終わり****/


色はコード内のblueの部分をカラーコードに変更するとメインカラーを変更できます。

カテゴリーのリスト化

撮った写真などカテゴリーを細かくすると下に大きく広がってしまう為に、同じようなカテゴリーは「親カテゴリー」の下「子カテゴリー」を階層化する事で見た目をスッキリとさせました。

まずは
デザイン > カスタマイズ > ヘッダ >タイトル下
に次のコードを追加します。

デザイン > カスタマイズ > ヘッダ > タイトル下
<!-- カテゴリーリスト化始まり -->
<link type="text/css" rel="stylesheet" href="https://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>
<!-- カテゴリーリスト化終わり -->


続いて、
デザイン > カスタマイズ > フッタ
に次のコードを追加しました。

デザイン > カスタマイズ > フッタ
<!--カテゴリーリスト化始まり-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>
<!--カテゴリーリスト化終わり-->


カテゴリー作成の時は子階層化したいカテゴリを「親カテゴリー-子カテゴリー」の順に書き、
デザイン > カスタマイズ > サイドバー > カテゴリー
で下記のように並び替え順をカスタムに変更して、「親カテゴリー」、「親カテゴリー-子カテゴリー」の順になるように並び替えます。

f:id:zekkei-japan:20190324081619j:plain

すると下のように表示されて子カテゴリーに設定した子カテゴリーは見えずに表示されます。

f:id:zekkei-japan:20190324082253j:plain

▲をクリックすると階層化で隠れた子カテゴリーが表示されます。

f:id:zekkei-japan:20190324082300j:plain

スライダーの設置と関連記事「Milliard」の設置

当ブログでは記事内でフォトギャラリーとしてスライダーを使っています。また、関連記事として「Milliard」を使用していますが、スライドショーの設置と「Milliard」の利用方法についてはこちらの記事で書きました。

「Milliard」を2列にするカスタマイズ

上記の方法で取得しただけだと表示されるのは1列だけですが、1列だとタイトルが短い時など右側にスペースができるので、スペースを有効活用するためにも下記サイトを参考に2列にカスタマイズしました。

 Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました - Yukihy Life

プロフィールのカスタマイズ

プロフィールはデモページでもカスタマイズ方法が紹介されていますが、デフォルトの設定は使わずにHTMLのモジュールで作成しました。

 プロフィールのカスタマイズについて - マテリアルぽっぷ

画像の設定

デフォルトのプロフィールでは画像が円形になっていますが、自分でも円形の画像にしてみました。

ペイントなどを使って画像を円形にすることもできますが、こちら(↓)のツールを使うと簡単に円形の画像を作る事ができます♪

 画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNSのプロフィール写真などにどうぞ。

画像をUPロードするだけなのでもし良かったら利用してみて下さい。
ちなみにプロフィールにも書いてありますが、画像は大切な人♡です(笑)

フォローボタンの設置

デフォルトで紹介のあったSNSボタンだとInstagramがないので、Instagramと一応、アマゾンの欲しい物リストも設置してみました(笑)

まず、フォローボタンを設置するプロフィールの中に以下のコードを追加します。

<!-- サイドバーフォローボタン始まり -->
<div class="sidebar-follow-buttons" >
<a class="instagram" href="InstagramのURL" target="_blank">
<i class="blogicon-instagram lg"></i>
<span class="inner-text">Instagram</span>
</a>
<a class="amazon" href="欲しいものリストのURL" target="_blank">
<i class="blogicon-amazon lg"></i>
<span class="inner-text">ほしい物リスト</span>
</a>
</div>
<!-- サイドバーフォローボタン終わり -->


続いて形を整えるために
デザイン > カスタマイズ > デザインCSS
に次のコードを追加します

/*サイドバーフォローボタン始まり*/
.sidebar-follow-buttons{
width: 100%;
text-align: center;
letter-spacing: -.40em;
}
.sidebar-follow-buttons a {
display: inline-block;
letter-spacing: normal;
position: relative;
width: 47%;
font-size: 16px;
text-align: center;
text-decoration: none;
padding:6% 0;
margin:1%;
overflow: hidden;
z-index:2;
}
.sidebar-follow-buttons a:hover {
color:#fff;
transition: all .3s;
}
.sidebar-follow-buttons a:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:-100%;
left:0;
z-index:-1;
transition: 0.2s;
}
.sidebar-follow-buttons .instagram {
color: #3f729b;
border: 1px solid #3f729b;
background: #ffffff;
}
.sidebar-follow-buttons .instagram:hover:after {
top:0;
background:#3f729b;
}
.sidebar-follow-buttons .amazon {
color: #ff8c00;
border: 1px solid #ff8c00;
background: #ffffff;
}
.sidebar-follow-buttons .amazon:hover:after {
top:0;
background:#ff8c00;
}
/*サイドバーフォローボタン終わり*/


初心者なので間違った所もあると思いますが、まずまず形が整ったかな?