ごはん炊けたよ~ッ!

気になった事を検証してみたり、お得な情報をお届けする雑記ブログ

ごはん炊けたよ~ッ!

【はてな】新テーマ「マテリアルぽっぷ」に行ったカスタマイズまとめ

【マテリアルぽっぷ】カスタマイズまとめ

※当ブログのコードで不具合が発生した場合の責任は負いかねますので、カスタマイズは自己責任でお願い致します。

 

どうも、花粉で顔がむくみまくっている近松おこめです。

 

 

 

最近、ブログに使っていたテーマを「UnderShirt」から「マテリアルぽっぷ」へと変更いたしました。

 

というわけで、今回はぼくがテーマを変更して行ったカスタマイズをまとめて紹介していこうと思います。

 

 

 

「マテリアルぽっぷ」自体がカスタマイズがいらないほど、こだわられたデザインですので些細なものばかりですが、よかったら参考にしてみて下さい(^^)/

 

 

 

「マテリアルぽっぷ」とは

 

まずは「マテリアルぽっぷ」について、説明しますね。

 

 

レスポンシブ対応、カード型デザイン。3カラムだったり2カラムだったりするレイアウトです。無料版でも使用できますが、proの一覧表示向けのスタイルになっています。コテコテしたデザインが好きな方にオススメです。

参考:(マテリアルぽっぷ - Theme store

 

 

と言っても、このように的確な説明はテーマストアの方で行われていたのでぼくが言うような事はほとんどないんですが……(笑)

 

 

 

一つぼくが言える事は、最初からここまで洗練されているテーマは中々無いという事だけですかね。

 

 

 

本当にカスタマイズなんていらないくらいなんですが、やっぱ細かい部分で気になるところはあったので、早速ぼくが行ったカスタマイズに移っていこうと思います!

 

記事一覧からサイドバーを消す

 

 

まず、記事一覧にサイドバーがあると見にくい気がしたので消しました。

 

/*--------------------------------------
トップページカテゴリ消し
--------------------------------------*/
.page-index .hatena-module {
display: none;
}

 

.page-archive .hatena-module{
display: none;
}


.page-archive-category .hatena-module {
display: none;
}

 

コードはこちら。

 

こちらのコードをデザインcssに貼り付けて頂ければOKです。

 

フォントの変更

 

フォントはこのように変更しました。

 

 

/*--------------------------------------
フォント
--------------------------------------*/
.entry-content p {
 font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;", 游ゴシック, "Yu Gothic", Meiryo, sans-serif;
color: #555555;
font-size: 17px;
line-height: 30px;
font-weight: 300;
}


.entry-content strong {
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;", 游ゴシック, "Yu Gothic", Meiryo, sans-serif;
color: #555555;
font-size: 17px;
line-height: 30px;
font-weight: 800;
}

 

まず、フォントのサイズなどを変更するcssです。

 

こちらのcssを先ほどと同じく、デザインcssに貼り付けて頂ければフォントが変更されます。

 

 

<style>
/* emタグを太字(蛍光ペン)にする */
em{
font-weight:bold;
font-style: normal;
background: linear-gradient(transparent 0%, #9DDCDC60 0%);
}
</style>

 

次に斜体にすると背後に蛍光ペンが引かれるcssです。

 

 

こちらのcssは設定詳細設定headに要素を追加に貼り付ければ変更されます。

 

参考にさせて頂いた記事

 

www.reilst.com

 

www.thoughts-make-things.com

 

フッターのおすすめ記事

 

フッターにオススメ記事を表示する方法ですが、これは丸パクリさせて頂いただけなので、方法だけ紹介させていただきますね(笑)

 


<div class="toprecommend-container">
<div class="toprecommend">
<div class="toprecommend-box">
<span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
<span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
</div>
<div class="toprecommend-box">
<span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
<span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
</div>
<div class="toprecommend-box">
<span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
<span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
</div>

<div class="toprecommend-box last-box">
<span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
<span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
</div>
</div>
</div>

 

まずは、こちらのコードの必要な部分を書き換えてフッターに貼り付けます。

 

 

/*--------------------------------------
フッターオススメ記事
--------------------------------------*/
<style>
.toprecommend-toptitle{/*おすすめ記事のタイトル*/
background: yellow;/*お好きな色*/
text-align: center;
color: #000;/*お好きな色*/
margin-bottom:-1em;
padding-top:1em;
font-weight: bold;/*太文字*/
}

.toprecommend {/*おすすめ記事の大枠*/
background: yellow;/*お好きな色*/
width: 100%;/* コンテンツ幅と合わせる */
display: -webkit-flex;
display: flex;
box-sizing: border-box;
margin: 0em auto;
text-align:center;
padding-bottom:2em;
margin-bottom:2em;
}
.toprecommend-box {/*おすすめ記事1つの枠*/
width: 24%;
height: 250px;
padding: 8px;
margin-left: 1em;
background: #fff;/*お好きな色*/
box-sizing: border-box;
margin: 2em 0.5em;
border-radius: 3px;
}
.toprecommend-box:hover{/*触れた時*/
background: green;/*お好きな色*/
}
.last-box {
margin-right:1em;
}
.toprecommend-image img {
width: 100%;
height: 180px;/*画像の高さをいじるところ*/
object-fit: cover;
}

.toprecommend-boxtitle a{
display:block;
font-size:85%;
font-weight: bold;/*太文字*/
color:#555; /*お好きな色*/
line-height: 1.5!important;
}

/* パソコン */
@media screen and (max-width: 1100px) {
.toprecommend-image img {
width: 100%;
height: 150px;/*画像の高さをいじるところ*/
object-fit: cover;
}
}

/* タブレット・スマートフォン向け */
@media screen and (max-width: 768px) {
.toprecommend {
flex-wrap: wrap;
justify-content: space-between;
padding:1em;
}

.toprecommend-box {
width: 47%;
height: 150px;
margin:0.5em auto;
}

.toprecommend-box:nth-child(2n) {
margin-right:0.5em;
}
.toprecommend-image img {
width: 100%;
height: 80px;/*画像の高さをいじるところ*/
padding:0;
object-fit: cover;
}

.toprecommend-boxtitle a{
font-size:75%;
}
}
</style>

 

次にこちらのcssをデザインcssに貼り付けて頂ければ完成です!

 

参考にさせて頂いた記事

 

www.oheya-migaru.com

 

サイドバーのプロフィール

 

f:id:kometika:20190316151516j:plain

 

サイドバーのプロフィールは、ちょっとゴテゴテしすぎているな~という気がしたのでシンプルにしてみました。

 

 

 

方法はサイドバーのプロフィールから編集を押して、プロフィール画像はてなIDにチェックを入れます。

 

<div class="follow-btn" ><span style="font-size:80%; text-align:center">\ フォローする /</span><a class="hatena" href="http://blog.hatena.ne.jp/はてなID/自分のブログのURLの「http://」を除いた部分(例:kometika.hatenablog.com)/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i></a><a class="twitter" href="https://twitter.com/intent/follow?screen_name=自分のTwitterアカウントの@を抜いた部分(例:tikamatu_okome)" target="_blank"><i class="blogicon-twitter lg"></i></a><a class="instagram" href="インスタグラムのプロフィールページURL/" target="_blank"><i class="blogicon-instagram lg"></i></a><a class="feedly" href="http://feedly.com/i/subscription/feed/「http://」を入れた自分のブログURL(例:https://www.kometika.net//feed" target="_blank"><i class="blogicon-rss lg"></i></a></div></div>

 

そのあと、赤丸の部分にこちらのコードの赤で示した部分を書き換えたものを貼り付けます。(注)改行はしないでください。

 

/*--------------------------------------
プロフィール
--------------------------------------*/

.hatena-module-profile .hatena-module-title{
display: none;
}

.hatena-module-profile .hatena-module-body {
background: #fff !important;
}


.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
width: 40px;
height: 40px;
font-size: 22px;
text-align: center;
text-decoration: none;
border-radius: 5px;
color: #ffffff;

}

.follow-btn .hatena:hover {
color: #ffffff;
background: #3D3F44;
transition: all .3s;
}
.follow-btn .twitter:hover {
color: #ffffff;
background: #00ACEE;
transition: all .3s;
}
.follow-btn .instagram:hover {
color: #ffffff;
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;

transition: all .3s;
}
.follow-btn .feedly:hover {
color: #ffffff;
background: #70CA3B;
transition: all .3s;
}

 

最後にこちらのcssをデザインcssに貼り付ければ完成です。

 

参考にさせて頂いた記事

 

demo-mamegoro.hatenablog.com

 

www.yukihy.com

 

kagesai.net

 

吹き出し



吹き出しは「マテリアルぽっぷ」に変えると、どうしてかデザインが崩れてしまったので参考にさせてもらっていた方法のデザインを少しいじらせて頂きました。

 

 

Google Chrome ウェブブラウザ

 

Chrome Add-on for Hatena - Chrome ウェブストア

 

 

この方法で吹き出しをつけるのはChrome限定かつChromeの拡張機能が必要なので、まずはこちらの2つをインストールしましょう。

 

 

/* 吹き出しのCSS */
.entry-content .l-fuki {
position: relative;
width: 60%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 10px;
border: 2px solid #62d2a2;
background-color: #c0ffc2;
z-index: 1;
}
.entry-content .r-fuki {
position: relative;
width: 60%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 10px;
border: 2px solid #aaa;

background-color: #fff;
z-index: 1;
}

.entry-content .l-fuki,
.entry-content .r-fuki {
margin: 20px 0 80px 19%;
left: 120px;
}
.entry-content .l-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #62d2a2;
border-bottom: 2px solid #62d2a2;
background-color:#c0ffc2;
z-index: 2;
}
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before{
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}

.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%

}

.entry-content .l-fuki,
.entry-content .r-fuki {
margin-left: 30%;
right: 100px;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 60%;

}

.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
left: -110px;
}
}

.クラス名::after {background-image:url(画像のURL);} .クラス名::after {background-image:url(画像のURL);}

 

その後、こちらのcssをデザインcssに書き込めば終了です。

 

r-fukiが枠内に色がついていない、l-fukiが枠内に色がついている設定になっています。

 

記事での使い方は、参考にさせて頂いた記事の方に詳しく載っていますのでそちらをご覧ください。

 

参考にさせて頂いた記事

 

www.notitle-weblog.com

 

サイドバーの検索タイトル消去

 

 

ちょっと検索がゴテゴテしすぎている気がしたので、タイトル部分を消してみました。

 

/*--------------------------------------
検索タイトル消去
--------------------------------------*/
.hatena-module-search-box .hatena-module-title{
display: none;
}

 

方法はこのcssをデザインcssに書き込むだけです。

 

参考にさせて頂いた記事

 

www.yellowpadblog.com

 

yaritakunai.hatenablog.com

 

アイキャッチ画像サイズ

 

 

 

一覧形式だとアイキャッチ画像がうまく表示されなくて悩ましいんですよね……。

 

そんな悩みを解決してくれるのがこのカスタマイズです。

 

<script> (function(){ if(document.body.classList.contains('page-index')){ var elements = document.getElementsByClassName('entry-thumb'); var re = /https%3A%2F%2F.+\.jpg/; Array.prototype.forEach.call(elements, function(element) { var imageUri = re.exec(element.getAttribute('style')); element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')'; }); } }()); </script>

<script> (function(){ if(document.body.classList.contains('page-archive')){ var elements = document.getElementsByClassName('entry-thumb'); var re = /https%3A%2F%2F.+\.jpg/; Array.prototype.forEach.call(elements, function(element) { var imageUri = re.exec(element.getAttribute('style')); element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')'; }); } }()); </script>

 

このコードをフッタに貼り付ければ完成です。

 

参考にさせて頂いた記事

 

www.okuni.me

 

フッターにコピーライトを表示

 

フッターにコピーライトとかを表示するカスタマイズです。

 

<div id="copyright"><p><span style="color: #ffffff;"><strong><a href="ブログのホームURL(例:https://www.kometika.net/" style="color: #ffffff;">ホーム</a>|<a href="プライバシーポリシーURL(例:https://www.kometika.net/privacy" style="color: #ffffff;">プライバシーポリシー</a>|<a href="お問い合わせページURL(例:https://www.kometika.net/otoiawase" style="color: #ffffff;">お問い合わせ</a></strong></span></p>
<p>©2018 ブログタイトル</p></div>

 

まずは、こちらのコードをフッタに貼り付けます。

 

赤字の所は例のごとく書き換えてくださいね。

 

/*--------------------------------------
フッターコピーライト
--------------------------------------*/
#copyright {
padding: 7px;
text-align: center;
background: #009854;/* 背景色 */
font-size: 12px;
color:#fff;/* 文字の色 */
}
/*自分で設定したフッターとページ下の余白を消す*/
#container {
margin-bottom: 0;
}

 

そして、このcssをデザインcssに貼り付ければ完成です。

 

その他カスタマイズ

 

あとのカスタマイズは、記事を参考にしてそのまま使わせて頂いているので、記事の紹介だけさせて頂きますね。

 

アドセンスの表示方法

 

adsenselab.net

 

www.friends-peace.com

 

カエレバ・ヨメレバ

 

www.yukihy.com

 

上に戻るボタン

 

hatebumaru.hatenablog.com

 

ボックス

 

saruwakakun.com

 

シェアボタン

 

www.yukihy.com

 

トップメニュー

 

demo-mamegoro.hatenablog.com

 

配色の変更

 

demo-mamegoro.hatenablog.com


デザインがうまく変更できなかったら?

カスタマイズが全部消えて全てを悟った近松おこめ

 

たまにカスタマイズを行っていると、コードは合っているはずなのにうまくデザインが適応しないことがあります。

 

そんなときは効かなくなったコードを上の方に持ってくると、適応されることがありますのでお試しください(^^)/

 

 

 

最後にもう一度注意ですが、カスタマイズはきちんとバックアップを取ってから行いましょう。

 

もしコードがめちゃくちゃになって最初に戻したいと思っても、バックアップが無ければどうにもなりませんからね。

 

ぼくは、すっかり忘れていてこの3日間くらいは地獄を見ましたから……(笑)

 

 

 

この記事がブログを書かれている皆さんの力に少しでもなれていたら嬉しいです(^^)/

 

それでは!!