デザインを Materiapollo に変更しました

当ブログのテーマを Materiapollo というテーマに変更しました。 - https://www.cottpic.com/2018/04/materiapollo-v0-9-1-release.html このテーマについて、カスタマイズして点についてまとめておきます。 ## 前準備 ソフトウェアエンジニアならばこういうテーマのカスタマイズも 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";} ``` アイコンのコードは以下で調べられます。 - https://fonts.google.com/icons ## ボタンのテキストが大文字にならないようにする 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; } ``` デフォルト状態に戻したいだけなのに結構面倒です。 以下のページが参考になりました。 - https://standard.shiftbrain.com/blog/reset-and-restore-list-item-marker ### コードブロック ``` .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; } ``` ## その他 その他、以下のことをやっています。 ### マークダウンで記事を書けるようにする [こちらの記事](https://kuttsun.blogspot.jp/2017/06/markdown-blogger.html) を参照してください。 ### シンタックスハイライトを設定する [こちらの記事](http://kuttsun.blogspot.jp/2017/07/blogger-highlightjs.html) を参照してください。 ### 投稿日時と更新日時の表示 以下のページを参考にさせていただきました。 - https://wrxsti-fan.blogspot.com/2020/06/blogger-materiapollo.html ## テーマ適用後にやったこと - ウィジェットの追加（翻訳など） - フッターのウィジェットを削除 - 人気記事のスニペットを非表示にした - 記事の作成者とコメント数を非表示にした ## 表示確認 以下、表示の確認です。 --- # 見出し１ ## 見出し２ ### 見出し３ #### 見出し４ ##### 見出し５ - リスト - test - test インラインコード`code`だよ <font color="red">赤文字</font>はHTMLで コードブロック ```csharp namespace hoge { class hoge { int hoge = 0; } } ``` テーブル |header|header|header| |---|---|---| |hoge|hoge<br>テーブル内の改行は`<br>`で|hoge| |hoge|hoge|hoge| ## 参考 URL - https://wrxsti-fan.blogspot.com/2020/06/blogger-materiapollo.html - https://saruwakakun.com/html-css/reference/h-design - https://standard.shiftbrain.com/blog/reset-and-restore-list-item-marker