GINPRO / SQLの窓と銀プログラマ

【Seesaaブログ】AMP配信機能をリリースしました(2016年10月21日)

そういや、デフォルトで『する』になっていたのをいくつか変更した覚えがあるけれど、ここがモレていたのか、今となっては...

とにかく、即『しない』にしましたが、Twitter 側のリンクは変わらないわけで、Google Chrome で スマホエミュレートするとこんなふうになっています(常に付いてるみたいで良くカラクリが解りません)。



Seesaa 側では HTML のほぼ先頭に amp 用のタグが追加されていて、Twitter ではそれ見て反応しているのかと思ったんですが、今も元には戻って無いわけです。ここへ飛ぶと CSS の効いて無いページなのでまともに文章が改行されなくって、ひどいもんです...

今は設定変えたもんだから、Twitter からリンク踏むと 404 Not found なるんで最低なんですけどね。

★ ブラウザは最大化
★ デスクトップ解像度は幅 1280px

▼ 最初の状態です



ここから、CSS を３箇所変更します。

1) #container の width を 1263px に変更
2) #content の width を 940px に変更
3) .blog に margin-left: 20px を追加

これをするだけで、1280px で最大化しているブラウザの中でいっぱいいっぱいにブログを使用できるようになります。この際、右サイドは 300px に初めから設定されているのでバナー等を表示するのに良いサイズとなっています。

▼ 一番広い状態です



1263px と 940px を同数減らせば、表示が中央よりになります。その際は margin-left: 20px は必要無い感じになるでしょう

1263px だと、情報をたくさん載せたい場合にはいいですが、文章が主体の場合はもう少し幅を狭くするといいと思います

▼ 少し調整した結果です


最大表示 


1) #container の width を 1100px に変更
2) #content の width を 777px に変更
3) .blog から margin-left: 20px を削除


テキストサイズの調整

初期状態ですと、フォントのサイズが少し小さいようです。フォントサイズはいろいろな場所で個別に設定できますが、ここではほぼ全ての要素の初期値的な reset という場所があったのでそこで変更しました。

/* reset */

div,
span,
iframe,
p,
blockquote,
cite,
h1,
h2,
h3,
h4,
h5,
h6,
img,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section,
time,
mark,
input,
textarea {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  vertical-align: baseline;
  font-weight: normal;
  font-style: normal;
  font-size: 17px;
}

テキストの色の変更

元は濃い灰色だったので、黒に設定しました。場所は、.blog .text で、color: #000000; としました。


最大表示 

実際のブログへのリンク


既存のデザインをそのまま同様にコントロールしたい場合

古いタイプのデザインですと、なかなか調整が難しいかもしれないので、現在のデザインがやっている大元の設定を一つ DIV で囲んでそこに指定します。

1) コンテナ(id=container)全体を div で囲んで、以下の CSS を設定する

    position: relative;
    margin: auto;
    width: 1263px;

コンテナの終わりは、<!-- マーク --> で予想される </div> の直前に書いておいて、Google Chrome のデベロッパーツールの Elements で開いて確認する。デベロッパーツール では、階層構造になっているので確実に特定できます。

ディスプレイの解像度は 1280px と言う前提で、1263px と言うのは、ブラウザを最大化してスクロールバーの横幅を差し引いた大きさです。

margin が auto なのは、ブラウザ内の表示を縮小したり、より大きい解像度で表示された場合に中央にコンテンツを表示する為です。

SimpleDホワイト(右サイドバー) では、#container に以下のような設定がされており、幅以外(幅は今回設定したものです)はだいたいにおいて同じ結果をもたらしています。

#container {
    width: 1100px;
    position: relative;
    height: auto !important;
    min-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

リビルドしない限り、ページは変わらないはずなのに。
ほんま、とんでも無いわ。
Yahoo! ニュースに乗るレベルの惨事ですがな。

とりあえず、記念 ➡ Seesaa pic.twitter.com/S4oRwOvR3M
— 夜歩き@DAZStudio (@sworc) 2016年8月12日



■ 障害内容
時間：2016年 08月13日 00:00ごろ〜
対象：Seesaaブログ
現象：一部のブログにおいて文字化けが発生している
原因：システム障害

＜追記＞8月13日10:00
上記障害の対応を行い、文字化けが発生しない状態になっております。


さらっと流しとるなぁ。
単なる障害とはとうてい思えないですけどね。

以下のように設定しましたが、Facebook のデバッガで見ると結局 index 部分にリダイレクトされて、なのに type は article にしかならないのですが、良く解りません。しばらくいろいろ使ってみたいと思います。

・・・と思ったら、Facebook にリンク書き込んだら index にリダイレクトされたので、article の設定は解除します、今から。

結局、ヘタに画像指定するとその画像しか Facebook から選択できなくなるので、トップインデックスページのみの設定で良いという事で納得。ただ、記事に画像が無い場合を考えて、ブログのイメージ画像をページに貼っておく事にした。( 投稿時にはそれを選択 )

<% if:page_name eq 'index' -%>
<meta property="og:title" content="SQLの窓と銀プログラマ">
<meta property="og:type" content="blog">
<meta property="og:url" content="http://ginpro.winofsql.jp/">
<meta property="og:image" content="https://lh3.googleusercontent.com/-qn7uhrzwog0/T0kOKGQZ2WI/AAAAAAAAE4Y/xG7Csjdm8_Y/s260/_img.png">
<meta property="og:description" content="<% blog.description | nl2br | tag_strip %>">
<% /if -%>
<% if:page_name eq 'article' -%>
<meta property="og:title" content="GINPRO">
<meta property="og:type" content="article">
<meta property="og:url" content="http://ginpro.winofsql.jp/">
<meta property="og:image" content="https://lh3.googleusercontent.com/-qn7uhrzwog0/T0kOKGQZ2WI/AAAAAAAAE4Y/xG7Csjdm8_Y/s260/_img.png">
<meta property="og:description" content="<% extra_title | nl2br | tag_strip %>">
<% /if -%>

たぶん、殆どのブログは出ないと思います(うちでも一つだけ)。



実際はこんな感じでバックアップしています( 一年単位をたまーーに )




関連する記事

Seesaa の記事カテゴリをソートする IE 拡張
IE拡張メニュー : Seesaa のリンクコンテンツを一瞬でソートする
Seesaa の『コメント/トラックバック/アフィリエイト』を一括変更するブックマークレット