些細な日常

BloggerのContempoテーマの記事タイトルの右横の共有ボタンはユニークなデザインで気に入っていたけど、ところが殆ど誰も使わないようだし、ソースコードは、結構、長くて表示速度を下げてしまう恐れも否定できないので、消すべきではないかと感じ始めた。 記事タイトルはメインのコンテンツを訪問者に最も印象付けるブログの生命線だから右端まで伸ばしてきっちり表示しておくのがアクセスアップに大事かも知れない。Flower latte art by Kevin Menajang [CC0], via Pexels もう既に繁栄していて皆から気軽に広めて貰える状況でもないかぎりは共有ボタンではなくて記事タイトルこそ見立たせるのがブロガーとして得策だ。 目次記事タイトルの右横の共有ボタンを消す方法Contempoの記事タイトルの右横の共有ボタンのソースコード記事下の共有ボタンを単独で表示する方法Co…

ブログの記事／追加ページの本文の右下にフローティングの戻るボタンを付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事／追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてcssのpositionのstickyを使って試したら上手く行った。Pineapple floating in water by Pineapple Supply Co. [CC0], via Pexels stickyは画面のスクロールに応じてコンテンツを固定できる cssのpositionで同じような値にfixedがある。どんな場合でも画面にコンテンツを固定する。使うと、常時、フローティングで表示されるデザインになる。 stickyはfixed…

公式テーマの新旧で、Bloggerブログで記事の更新日を表示する方法は異なっている。Bloggerの新テーマウィジェットバージョン2／レイアウトバージョン3 ContempoSohoEmporioNotableBloggerの旧テーマウィジェットバージョン1／レイアウトバージョン2 シンプル動的ビュー画像ウィンドウAwesome Inc.ウォーターマークエスィリアルBloggerの更新日は表示できる範囲も公式テーマの新旧で異なっていて新テーマは注目とブログと人気の投稿、旧テーマはブログの投稿のウィジェットに所定のソースコードを記載しなくてはならない。widgetタグのTypeでいうと前者はFeaturedPostとBlogとPopularPosts、後者はBlogにマークアップを行うとブログに反映する。目次二つのテーマの更新日のマークアップ新テーマで更新日を表示する独自タグ旧テーマで更新…

Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと悩まざるを得ないわけなんだ。公式サイトでは情報が薄いみたいだけど――ヘルプにはマークアップの基礎知識しか紹介されてない――しかし調べると独自タグの出力する内容を載せているBlogger Codeなどの専門サイトが見付かってカスタマイズにとても役立つ。Bloggerの独自タグを実際に出力される内容に置き換えて分解するとテンプレートのソースコードをさらに細かく作り替えられるようになる。前々から気がかりだったBloggerブログのhead内のカスタマイズをついに行ってみたいと思い立った。目次Bloggerブログのhea…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのソースコードの冒頭付近にnormalize.cssが付いている。normalize.cssはcssの標準化を意味していてブラウザ毎のサイトのhtmlのデフォルトのデザインの互換性を保つためのcssの独自のソースコードなんだ。normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。normalize.cssについて via ニコラス・ギャラガー（訳出）開発者の一人がニコラス・ギャラガーという。昨年からモバイルで使い易くなったウェブアプリのTwitter Liteの制作にも参加したらしい。世界有数のソーシャルメディアのTwitterに関与するとは相当な経歴…

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン：displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。目次グリッドデザインで画像に文字を重ねるソースコード画像の中央に文字を重ねる画像の右上に文字を重ねる画像の左上寄りに文字を重ねる文字の位置取りを余白で調節する区分けしたレイアウトで画像に重なる文字を整序させる画像の中央の下のスペースの中央に文字を重ねる文字を整序して位置取りを余白で調節する文字の幅を確保しながら画像に重ねるグリッドデザインで画像に文字を重ねるソースコード画像に文字を配置するスペースの割合を計算する計算されたスペースの中に文字を実際に配置するcssのdisplayのgr…

2017年の公式テーマのContempoとSohoとEmporioとNotableのカスタマイズで、記事／追加ページの固有タイトルの見出しタグをh3からh1に、そしてブログ名の見出しタグをh1からh2に変更した。何れもhtml構文とSEO対策のためだけれどもさらに他の部分との見出しタグのバランスを考えるとページリスト（先頭）と人気の投稿のガジェットを使っているので、それぞれのh3をh2に変更するべきなんだ。ページリスト（先頭）はトップやアーカイブなどのインデックスページで表示される。見出しタグがh3だとh1のブログ名に対して大きさが一つ飛んでしまっている。h2にすると順番良く並んだマークアップになる。人気の投稿は記事／追加ページの本文の下に置かれている場合に見出しタグを変更した固有タイトルのh1に対してh3だとやはり一つ飛んでしまっていてマークアップの流れが損われているからh2に変更した…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでは記事ページに新しい投稿や前の投稿のページネーションがデフォルトで付いてないけれどもhtml編集のカスタマイズによって付ける方法が見付かって些細な日常で取り入れてみた。 ソースコードでは最初からページネーションのスペースが取られていて表示しないようにしているだけだからブログの記事ページに設置するための考え方は一から始めるよりは速やかなのが助かる。 目次ページネーションを取り入れる二つの手順独自タグでページネーションを設定する方法（Sohoは省略可能）独自タグでページネーションを配置する方法cssでページネーションにデザインを付けるページネーションの位置取りを調整する方法ページネーションの上下の余白を調整する方法 ページネーションを取り入れる二つの手順テンプレートに設定する必要なリンクを生…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableで記事／追加ページの固有タイトルの見出しタグを変更する方法と併せて使える各々のブログ名の見出しタグのh1を外す方法が見付かった。前者だけだと記事／追加ページで見出しタグをh1にしてもデフォルトでh1が付いたブログ名と二つになってしまってhtml構文としてもSEO対策としても万全とはいえなかった。後者を取り入れると記事／追加ページで見出しタグのh1が固有タイトルの一つだけになるからかりにデザインは変わらないとしてもブログのマークアップは分かり易く整えられる。かねて記事／追加ページのブログ名のh1を外す方法自体は固有タイトルの見出しタグを変更して間もなく思い付いたけど、しかしデザインを他のトップやアーカイブなどのブログ名にh1を残すページと振り分けるのが煩雑で、htmlとcssを二倍にして割り当…

サイト作成でhtmlの番号なしリストのulや番号付きリストのolを使ってcssの中寄せ：text-alignのcenterを指定した場合に内側のリストタグのliしか移動せず、ulの中黒やolの数字のマーカーが付いて来なくて左端に残ったまま、ずれてしまうのを修正できる方法はないか。 cssのlist-style-positionのinsideを使う 考えて番号なしリストのulや番号付きリストのolにcssのlist-style-positionのinsideを指定するとリストタグと一緒に中黒や数字のマーカーも位置合わせが可能になると分かった。 同時にcssのtext-alignのcenterを指定しておくと中寄せになるし、または値をrightに変えれば右寄せでもマーカーがリストタグと揃って移動するから大丈夫なんだ。 cssのlist-style-positionのinsideを使うとリス…

Bloggerで写真や絵などの画像を一つの記事に何枚も投稿する場合に縦並びだけではなくて横並びやグリッドデザイン（縦横を均等に表示する／タイル張り）を望んだりもする。複数の投稿画像のレイアウトを変える機能は付いてないので、自分で考えてブログの複数の投稿画像のデザイン変更するしかない。サイト作成でcssのGrid Layout：displayのgridを使うとコンテンツの横並びやグリッドデザインは手軽にできるけれども実際にやってみるとBloggerブログの投稿画像でも大丈夫だと確認できたからソースコードと共に方法を明らかにしておきたい。目次Bloggerの投稿画像の横並びやグリッドデザインの前提条件個別の記事にcssのGrid Layoutを取り入れる記述についてBloggerの投稿画像にdisplayのgridを的確に反映させる新テーマでのソースコードの修正点旧テーマでのソースコードの修…