BloggerのContempoテーマで記事タイトルの右横の共有ボタンを消す 結城永人 - 2018年10月7日 (日) BloggerのContempoテーマの記事タイトルの右横の共有ボタンはユニークなデザインで気に入っていたけど、ところが殆ど誰も使わないようだし、ソースコードは、結構、長くて表示速度を下げてしまう恐れも否定できないので、消すべきではないかと感じ始めた。 記事タイトルはメインのコンテンツを訪問者に最も印象付けるブログの生命線だから右端まで伸ばしてきっちり表示しておくのがアクセスアップに大事かも知れない。 Flower latte art by Kevin Menajang / Pexels もう既に繁栄していて皆から気軽に広めて貰える状況でもないかぎりは共有ボタンではなくて記事タイトルこそ見立たせるのがブロガーとして得策だ。 目次記事タイトルの右横の共有ボタンを消す方法Contempoの記事タイトルの右横の共有ボタンのソースコード記事下の共有ボタンを単独で表示する方法Contempoの記事下の共有ボタンのソースコード記事タイトルの右横の隙間を詰める方法Contempoの記事タイトルの右横の隙間のソースコード記事タイトルの文字サイズを変更する方法Contempoの記事タイトルの文字サイズのCSSの指定先スマホへのメディアクエリによるデザインの振り分け 記事タイトルの右横の共有ボタンを消す方法 テーマの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」のtypebody内widgetの「FeaturedPost」のtypewidgetの「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」を削除する。直前の半角スペースも詰めて構わない。すると記事タイトルの右横の共有ボタンを消した後に記事下の共有ボタンが単独でもブログに表示されるようになる。 記載されているのはpostfigcaptionのidのincludable内で、Contempoテーマのソースコードにデフォルトで四つある。 head内defaultmarkupの「Blog,FeaturedPost,PopularPosts」のtypebody内widgetの「FeaturedPost」のtypewidgetの「Blog」のtypewidgetの「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のマークアップをデバイスの画面幅によって振り分けられる。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
生島浩の5:55の心の目に光り輝く尊さ 日本の ホキ美術館 は日本人の画家の写真のように細密に描かれた写実絵画を中心的に所蔵している。その中で、絵を印刷したポストカードの売り上げがホキ美術館の設立当初から一位で、常に最高の人気を誇るのが生島浩の 5:55 (五時五十五分)といわれる。僕も一見して忽ち引き付けられる物凄い...
コメント