マテリアルぽっぷ

はてなブログテーマ「マテリアルぽっぷ」のデモサイト。最新カスタマイズ情報やバグの修正情報など掲載していきます。

テンプレート「マテリアルぽっぷ」の説明と注意点

テーマコンセプトについて 影とか浮き上がって見えるようなマテリアルデザインをコンセプトに、それっぽい感じに作っています。 作者自体久しぶりに本格的にコードに触れたので不具合が出ている部分もあるかと思いますので、もし発見された方はご連絡いただ…

必須設定 2018/6/18更新

追加事項があれば随時追加。 サムネイルの設定について 一覧表示にしている場合、記事を投稿する際にサムネイルの設定を必ずしてください。しない場合、表示が若干うまくされません。サムネイルの画像がない場合は、デフォルトのものをご使用ください。 パン…

PC版TOPページを記事のみ3カラムから、メニュー有りの3カラムに変更する方法

この記事ではPC版TOPページを記事のみ3カラムメニューから、メニュー有りの3カラムに変更する方法をご紹介します。なんだか文章だと伝わりにくいので、図解すると以下のような感じです。 以下のコードをデザインCSSにコピペするだけ。 .page-index .enable-t…

QA&不具合報告用記事

QA

テーマについて質問や不具合を発見された方はこの記事にコメント下さい。 不具合の報告に関しては、不具合の状況を教えていただければと・・・。 質問される際の注意点として・ブログのURL・どの部分がどんな挙動になっているのか具体的に 上記2点は必ず教え…

見出しや装飾の見本

目次はこんな感じ↓ これがH2の設定 これがH3の設定 これがH4の設定 h5は未設定。必要であれば各自。基本H3ぐらいまでしか使わないよね。 これがH2の設定 これがH3の設定 これがH4の設定 h5は未設定。必要であれば各自。基本H3ぐらいまでしか使わないよね。 …

ブログタイトル、ヘッダー周りのカスタマイズについて

ヘッダー部分のカスタマイズについて この記事では以下のヘッダー部分(赤色で塗りつぶしてある部分)についてのカスタマイズ方法について記載します。 以下のコードを、 <div class="head-sub-area"> <ul class="top-sns-button"> <li class="button sns-bukuma"><a href="//b.hatena.ne.jp/ここに自分のはてなID/bookmark" target="_blank"> </a></li> <li class="button sns-twitter"></li></ul></div>

配色の変更方法

配色変更方法 これから紹介するコードを、変更したい色に変えてデザインCSSに追加するだけ。 まずはこのブログのメインカラーで設定してある「コーンフラワーブルー」こと、 上記の色を変更するコードです。 #blog-title #title a,#blog-description,.search…

プロフィールのカスタマイズについて

この記事ではサイドメニュープロフィール項目の各種表示・非表示の設定、背景画像の変更と、SNSリンクの追加についてご紹介します。 ※デフォルトで設定しているプロフィールのスタイルが気にくわない!という方は、プロフィールを非表示にして、空のモジュー…

フッターのカスタマイズ

以下のコードをフッタに追加。 <div class="customize-footer">©2018 自分の名前orサイト名 All rights reserved. </div>

サムネイルの設定に関して

デフォルト設定の場合、強制的にサムネイルが正方形にカットされてしまい、TOPページのサムネイルの見栄えがあまりよくありません。 以下のサイト様でご紹介されているコードを利用させていただくと、良い感じに設定されます。 ぜひお試しを。 www.imuza.com…

はてなブログ登録後最初に行うこと/設定方法~はてなブログを始めようpart1~

メインサイトで紹介しています。 よろしければご覧ください。 www.mamegoro.com

SearchConsole(サーチコンソール)の登録/設定をしよう~はてなブログを始めようpart2~

メインサイトで紹介しています。 よろしければご覧ください。 www.mamegoro.com

GoogleAnalytics(グーグルアナリティクス)の登録/設定をしよう~はてなブログを始めようpart3~

メインサイトで紹介しています。 よろしければご覧ください。 www.mamegoro.com

カエレバのカスタマイズに関して

メインサイトで紹介しています。 よろしければご覧ください。 www.mamegoro.com

GoogleAdSenseのレクタングル広告を横並びで2つ並べる方法【ダブルレクタングル】

メインサイトで紹介しています。 よろしければご覧ください。 www.mamegoro.com