BloggerのContempoテーマで記事タイトルの右横の共有ボタンを消す
BloggerのContempoテーマの記事タイトルの右横の共有ボタンはユニークなデザインで気に入っていたけど、ところが殆ど誰も使わないようだし、ソースコードは、結構、長くて表示速度を下げてしまう恐れも否定できないので、消すべきではないかと感じ始めた。
記事タイトルはメインのコンテンツを訪問者に最も印象付けるブログの生命線だから右端まで伸ばしてきっちり表示しておくのがアクセスアップに大事かも知れない。
もう既に繁栄していて皆から気軽に広めて貰える状況でもないかぎりは共有ボタンではなくて記事タイトルこそ見立たせるのがブロガーとして得策だ。
記事タイトルの右横の共有ボタンを消す方法
テーマのHTML編集かバックアップ／復元からカスタマイズを行う。
Contempoテーマの記事タイトルの右横の共有ボタンが不要ならば該当するソースコードを削除するとブログに表示されなくなる。
Contempoの記事タイトルの右横の共有ボタンのソースコード
<b:include cond='data:view.isMultipleItems or data:widgets.Blog.first.headerByline.items.share' data='{ shareButtonClass: "post-share-buttons-top", overridden: true }' name='maybeAddShareButtons'/>デフォルトで三ヵ所のheadBylineのidのincludable内に記載されている。
- head内
- defaultmarkupの「Blog,FeaturedPost」のtype
- body内
- widgetの「FeaturedPost」のtype
- widgetの「Blog」のtype
実際にブログに表示されているのはbody内の二つで、widgetタグのtypeの「FeaturedPost」が注目の投稿で、「Blog」がブログの投稿のウィジェットに相当する。
もう一つのhead内のdefaultmarkupタグの分は何もしなくても基本的に大丈夫だ。同一のidのincludableタグがtypeで指定されたwidget内からなくなると追加されるので、削除しなくてはカスタマイズは無理だけど、その中を編集するだけならば上書きされない。変更したマークアップは保たれる。
使わないソースコードだから一緒に削除すると分かり易いし、他のカスタマイズでwidget内の同一のidのincludableタグを削除して不意に全てが元に戻ってしまう可能性もなくなる。
記事タイトルの右横の共有ボタンのソースコードはheadBylineのidのincludable内に記載されている。これ自体は他に著者名と更新日のためのsuper.headerBylineのnameのincludeタグも含んでいる。全部、消すると残りが表示されなくなるので、避けるように注意して編集しなくてはならない。
記事下の共有ボタンを単独で表示する方法
テーマのHTML編集かバックアップ／復元からカスタマイズを行う。
Contempoテーマは記事タイトルの右横の共有ボタンを消すと記事下の共有ボタンが表示されなくなる。JavaScriptで連動していてソースコードが記載されていてもブラウザに反映しない。なので記事タイトルの右横の共有ボタンを消しながら記事下の共有ボタンを残すにはカスタマイズがさらに求められる。
Contempoの記事下の共有ボタンのソースコード
<b:include data='{ shareButtonClass: "post-share-buttons-bottom invisible", overridden: true }' name='maybeAddShareButtons'/>ソースコードの「invisible」を削除する。直前の半角スペースも詰めて構わない。すると記事タイトルの右横の共有ボタンを消した後に記事下の共有ボタンが単独でもブログに表示されるようになる。
記載されているのはpostFooterのidのincludable内で、Contempoテーマのソースコードにデフォルトで四つある。
- head内
- defaultmarkupの「Blog,FeaturedPost,PopularPosts」のtype
- body内
- widgetの「FeaturedPost」のtype
- widgetの「Blog」のtype
- widgetの「PopularPosts」のtype
記事下の共有ボタンを単独で表示する方法はContempoテーマのデフォルトで記事／追加ページに必要だからbody内の「Blog」のtypeのwidget内で編集する。
head内のdefaultmarkupタグの分は記事タイトルの右横の共有ボタンを消す方法と同様に編集してもしなくても構わない。
body内の他の二つは「FeaturedPost」が注目の投稿ガジェットで、「PopularPosts」が人気の投稿ガジェットで、何れも最初から使わないのに記載されている。予備のためか、ちょっと手を加えるとブログに表示できるようにもなるようだけど、とにかく不要ならば編集しなくて構わない。
記事タイトルの右横の隙間を詰める方法
テーマのHTML編集かバックアップ／復元からカスタマイズを行う。
Contempoテーマは記事タイトルの右横の共有ボタンを消すだけでは隙間が残ってしまう。長めの記事タイトルだと右端まて伸ばさなくては折れ曲がって以前よりも見易くならない。記事タイトルの右横の共有ボタンを消すと同時に残ってしまう隙間を詰めるカスタマイズが必要なんだ。
Contempoの記事タイトルの右横の隙間のソースコード
.post-title{
font:$(posts.title.font);
float:$(startSide);
margin:0 0 8px 0;
max-width:calc(100% - 48px)
}デザインのCSSで、head内のskin内に見付かる。記載された「max-width:calc(100% - 48px)」を削除すると記事タイトルの共有ボタンのために取られた右横の隙間が消える。記事タイトルが長ければ折れ曲がらずに右端まで伸びて表示されるようになる。
テンプレートのバージョンで幾らか違うかも知れない。htmlタグのtemplateVersionで確認できるけれども現行は「1.3.0」だ。以前の「1.0.1」だと記事タイトルの右横の隙間を含んだ「.post-title」の内容が同じではない。しかし記事タイトルの右横の隙間のマークアップは同じなので、現行のバージョンと変わらず、記載されている「max-width:calc(100% - 48px)」を削除すれば大丈夫だ。
記事タイトルの文字サイズを変更する方法
テーマのカスタマイズ：テーマデザイナーの上級者向けの投稿の「投稿タイトルのフォント」と「投稿タイトルのストリートのフォント」から記事タイトルの文字サイズを変更できる。前者は記事／追加ページの記事タイトル、後者は注目の投稿とトップやアーカイブなどのインデックスページの記事の抜粋のタイトルが対応している。
記事タイトルの右横の共有ボタンを削除して記事タイトルの文字サイズをカラムの両端に合わせるように変更する場合は三種類のデザインが対象になる。記事／追加ページ、インデックスページの注目の投稿、そして通常の記事の抜粋のスニペットなんだ。テーマデザイナーが使えるけれども個別に変更するにはCSSのカスタマイズが必要で、さらにスマホでのデザインを付けるためにも欠かせない。
CSSのカスタマイズはテーマデザイナーの上級者向けのCSSを追加を使うか、またはHTML編集かバックアップ／復元でソースコードのskin内を書き換える。
Contempoの記事タイトルの文字サイズのCSSの指定先
- .post-title
- 記事／追加ページの記事タイトル
- .blog-posts .post-title a
- インデックスページのスニペットの記事タイトル
- #page_body.section div.widget.FeaturedPost h3 a
- 注目の投稿ガジェットの記事タイトル
記事／追加ページと注目の投稿ガジェットはデフォルトの指定先のままで、インデックスページのスニペットは「.blog-posts」を新しく追加している。さもないと注目の投稿ガジェットと区別されず、テーマデザイナーのように両方が一緒にカスタマイズされる。
何れも文字サイズを変更するには「font-size」で数値を指定する。
サンプルのソースコード
.post-title {font-size:22px;}
.blog-posts .post-title a {font-size:30px;}
#page_body.section div.widget.FeaturedPost h3 a {font-size:30px;}テーマのHTML編集かバックアップ／復元でCSSのカスタマイズを行う場合はskin内の最後に記載すると全てに対して上書きが可能で、テーマデザイナーのCSSを追加を使うのと同じ結果になる。
スマホへのメディアクエリによるデザインの振り分け
Contempoテーマのスマホの記事タイトルの文字サイズはテーマデザイナーでは変更できないので、CSSのカスタマイズが求められる。
記事タイトルの文字サイズを変更する方法は通常の場合と同じで、CSSの指定先に「font-size」を記載する。ところがデバイス毎にデザインを振り分けるにはメディアクエリ：@media screenのマークアップを追加しなくてはならない。通常の場合のカスタマイズを画面幅によって切り替えられるように半角大括弧で囲って区別する。
スマホ向けのメディアクエリ
@media screen and (max-width:480px) {
CSSのマークアップ
}横幅480pxまでの画面のデバイスで、メディアクエリに囲まれたCSSのマークアップがテンプレートに取り入れられる。
他にタブレット向けならば「@media screen and (max-width:768px) and (min-width:481px)」（横幅481pxから768pxまで）という仕方で、指定するとCSSのマークアップをデバイスの画面幅によって振り分けられる。
コメント