当ブログのテーマを Materiapollo というテーマに変更しました。
このテーマについて、カスタマイズして点についてまとめておきます。
前準備
ソフトウェアエンジニアならばこういうテーマのカスタマイズも Git を使って管理しましょう。
ウィジェットのアイコンを追加
私はサイドバーに翻訳ウィジェットとかも表示しているので、それ用のアイコンを追加します。
変更前
.sidebar .widget.BlogArchive h2:before{content: "\e02f\00A0";}
.sidebar .widget.Label h2:before{content: "\e54e\00A0";}
.sidebar .widget.PopularPosts h2:before{content: "\e39f\00A0";}
変更後
BlogSearch Translate ContactForm を追加しました。
.sidebar .widget.Translate h2:before{content: "\e8e2\00A0";}
.sidebar .widget.BlogSearch h2:before{content: "\e8b6\00A0";}
.sidebar .widget.BlogArchive h2:before{content: "\e02f\00A0";}
.sidebar .widget.Label h2:before{content: "\e54e\00A0";}
.sidebar .widget.PopularPosts h2:before{content: "\e39f\00A0";}
.sidebar .widget.ContactForm h2:before{content: "\e0be\00A0";}
アイコンのコードは以下で調べられます。
ボタンのテキストが大文字にならないようにする
Material-UI ではボタンのテキストは全て大文字になってしまうのですが、これを解除します。
READ MORE と ラベルの二カ所について以下のように修正します。
変更前
<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>Read more <i class='material-icons medium chevron_r'></i></a>
<a class='btn left post-per-page' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'>
変更後
<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>Read more <i class='material-icons medium chevron_r'></i></a>
<a class='btn left post-per-page' style='text-transform: none;' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'>
テーマの色を変更
ヘッダーの色は #00acc1、ナビゲーションバーの色は #00bcd4 なので、これで検索したら修正箇所が見つかると思います。
ヘッダーの色とテキストの配置
変更前
header{height:200px;background-color: #00acc1; overflow: hidden; color: #fff; text-align: center;}
#headerleft{margin:0;}
.headerleft h1{padding-top: 85px;}
変更後
header{background-color: #212121; overflow: hidden; color: #fff;}
#headerleft{margin:0;}
.headerleft h1{padding-top: 15px;}
ナビゲーションバーの色
変更前
nav{background-color: #00bcd4;}
変更後
nav{background-color: #757575;}
ドロップダウンリストの色
変更前
nav.npin .dropdown-content li > a, .dropdown-content li > span {
color: #00acc1;
}
変更後
nav.npin .dropdown-content li > a, .dropdown-content li > span {
color: #212121;
}
パンくずリストの色
リンクの色と合わせました。
変更前
.breadcrumbs.card a {color: #00acc1;}
変更後
.breadcrumbs.card a {color: #2196f3;}
.breadcrumbs.card a:hover {color: #64b5f6;}
CSS の追加
見出しをはじめ、全体的にコンテンツ内のデザインが素っ気なかったり、一部デザインが崩れていたりしたので、以下の CSS を追加しました。
.marked は後述するマークダウンを適用している範囲を指定しています。
見出し
.marked h1, .marked h2, .marked h3, .marked h4, .marked h5, .marked h6 {
margin: 1em 0;
font-weight: bold;
/* font-family: 'Material Icons' */
}
.marked h2 {
padding: 0.4em;
background: #eaf3ff;
border-bottom: solid 3px #424242;
}
.marked h3 {
padding-bottom: 0.4em;
border-bottom: dotted 1px black;
}
リスト
リストのマーカーは全てなしになっているのをデフォルト状態に戻しています。
.marked ul > li {
list-style-type: disc;
}
.marked ul > li > ul > li {
list-style-type: circle;
}
.marked ul > li > ul > li > ul > li {
list-style-type: square;
}
.marked ul {
padding: 0 0 0 40px;
}
.marked li {
padding: 0px;
margin: 0 0 4px 0;
}
.marked ol {
padding: 0 2.5em;
margin: .5em 0;
line-height: 1.4;
list-style-type: decimal;
}
デフォルト状態に戻したいだけなのに結構面倒です。
以下のページが参考になりました。
コードブロック
.marked pre {
margin: 0.5em 0 1.5em 0;
border-radius:10px;
}
.marked p > code {
padding: 0.1em 0.3em;
color: palevioletred;
background: ghostwhite;
border: 1px;
border: solid 1px darkgray;
border-radius: 5px;
}
テーブル
.marked table{
border-collapse: collapse;
width: 100%;
}
.marked table tr{
border-top: solid 1px #d0d0d0;
border-bottom: solid 1px #d0d0d0;
cursor: pointer;
}
.marked table tr:hover{
background-color: #eaf3ff;
}
.marked table th{
padding: 15px;
text-align: center;
font-weight: bold;
}
.marked table td{
padding: 15px;
}
デフォルトの画像を追加
記事中にある最初の画像がトップページに表示されますが、画像がない記事の場合は何も表示されず寂しいので、NO IMAGE と表示されるようにします。
ちなみに、画像ではなくマテリアルアイコンと文字列で作成しています。
ホーム画面の NO IMAGE
変更前
<b:if cond='data:post.firstImageUrl'><div class='md-thumb col s12 m5 l5' style='text-align: center;'><a expr:href='data:post.url'><img expr:src='data:post.firstImageUrl'/></a></div></b:if>
変更後
<div class='md-thumb col s12 m5 l5' style='text-align: center;'>
<a expr:href='data:post.url'>
<b:if cond='data:post.firstImageUrl'>
<img expr:src='data:post.firstImageUrl'/>
<b:else/>
<div class="noimage">
<i class="material-icons large">image</i><br/>
<span>NO IMAGE</span>
</div>
</b:if>
</a>
</div>
人気記事の NO IMAGE
変更前
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail' style='position: absolute; top: 15px; left: 15px;'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image' style='width: 42px; height: 42px; padding-right: 0 !important; border-radius:4px;'/>
</b:with>
</div>
</b:if>
変更後
<div class='item-thumbnail' style='position: absolute; top: 15px; left: 15px;'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image' style='width: 42px; height: 42px; padding-right: 0 !important; border-radius:4px;'/>
</b:with>
<b:else/>
<div class="noimage-small">
<i class="material-icons small">image</i><br/>
<span>NO IMAGE</span>
</div>
</b:if>
</div>
CSS
あとは上記に合わせて以下の CSS を追加します。
.noimage {
color: #bdbdbd;
font-size:30px;
font-weight:bold;
}
.noimage-small {
color: #bdbdbd;
width: 42px;
font-size:6px;
font-weight:bold;
text-align: center;
}
その他
その他、以下のことをやっています。
マークダウンで記事を書けるようにする
こちらの記事 を参照してください。
シンタックスハイライトを設定する
こちらの記事 を参照してください。
投稿日時と更新日時の表示
以下のページを参考にさせていただきました。
テーマ適用後にやったこと
- ウィジェットの追加（翻訳など）
- フッターのウィジェットを削除
- 人気記事のスニペットを非表示にした
- 記事の作成者とコメント数を非表示にした
表示確認
以下、表示の確認です。
見出し１
見出し２
見出し３
見出し４
見出し５
- リスト
- test
- test
インラインコードcodeだよ
赤文字はHTMLで
コードブロック
namespace hoge
{
class hoge
{
int hoge = 0;
}
}
テーブル
| header | header | header |
|---|---|---|
| hoge | hoge テーブル内の改行は <br>で |
hoge |
| hoge | hoge | hoge |
