FC2のOGP導入に伴うテンプレ内容変更

このコメントは管理人のみ閲覧できます

こんにちは。ありがとうございます

> テーブルの背景色やセル背景色

以降の内容、全くの見当違いでしたらごめんなさいね。
もしかしたらこのような記述をされていませんでしょうか。
例)
bgcolor="#ffffff"
bordercolor="#ffffff"

私のテンプレートは全てhtml5で書かれています。
2015年にこの5というバージョンがweb標準化されまして、それ以前のhtmlバージョンは全て「旧式」になりました。
で、その変更に伴いたくさんの属性・要素が廃止されました。
上に記したものもその廃止要素にあたります。
bgcolor属性 --- 廃止
bodercolor属性 --- 廃止
他にも
cellpadding, cellspacing など。
テーブル限定タグ以外でも
align, valign, center(<center> のことです), border(border="3" など) など。

参考
http://www.tagindex.com/html5/basic/abolished.html
HTMLリファレンス 様

ですから今後少しづつ、反映されなくなるソース内容というのは増えていきます。
どのようなソース組みをされているのかが不明ですが、bgcolorやbordercolorについては以下のような書き方をどうぞ。

例) テーブル全体に背景色
<table style="background-color: #ffffff">

例) セル背景色とセル周りにボーダー
<td style="background-color: #000000; border: 1px solid #ffffff;">


各タグの「style属性」に内容を記述します。
こういうの「インラインCSS」と言います。
これも非推奨ではありますが、廃止要素を使うよりはずっと良い。
推奨はCSSソースに記述することですが、FC2ではページ毎にCSSソースが用意できるわけではないのでインラインCSSが妥当かと思いますー　(´・ω・｀)

*できないよー！という場合には鍵つきでコード内容をお知らせください。
私の方で書き換えします(セル内の内容についてはお知らせ頂かなくて構いませんよ)

参考
http://vanillaice000.blog.fc2.com/blog-entry-237.html

こちらがOnTheGroundのページですが、テンプレ仕様の記載はインラインCSSの<table>で記述しています。

このコメントは管理人のみ閲覧できます

もしかしたら、とは思ったんですが、高機能エディターには背景色を指定する機能がなさそうなのでご自分で書いておられるのかと(笑)
こちらこそ確認もせずにごめんなさい。

恐らくセル幅なども反映されませんので、上手くいかないようでしたら
table作成時に記入した項目(行・列・テーブル幅 etc.)をお伝えください。

これリクエストにも挙げてるんですけどねー　(´・ω・｀)
「web標準に合致する内容に書き換えしてください」って。

このコメントは管理人のみ閲覧できます

Akira

To table件③ 内緒さん

あー。なるほど。
そういった使い方をなさっておられるのですね。

恐らくそれは<table>からはみ出しているわけではないと思います。
テーブルというのは
table-layout: fixed;
を指定しない限り、内容物を包括すべく自身のサイズを広げるのが特徴です。
折り返せない(自動改行できない)要素(例えば「画像」がそれにあたります)が仮に500pxで、テーブルへの指定幅が400pxだった場合
テーブルは指定を無視して500pxまで広がります。

セルの左右いずれかに画像が入ってるんですよね？
その「画像」と横のセルに入る「テキスト」の位置合わせがどう指定されているか、が問題になってきます。

現在の画像スタイル指定が「下揃え」になってますので、それが影響しているわけです。

サンプルスクショ　↓

①垂直「下」合わせ(現在の状態)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0002_zps8xfphazr.jpg~original


②垂直「中央」合わせ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0001_zpspcvjzwhi.jpg~original


③垂直「上」合わせ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0000_zpslgsoyeei.jpg~original


というわけで以下の手順をお試しください
(このコメント欄からのコピーはドラッグ選択後Ctrl+Cキーでどうぞ)
Ctrl+Fキーで以下の文字列を検索

img {
vertical-align: bottom;

赤字の部分を
top あるいは middleに変更してください。
スクショをご覧いただきまして、希望に沿うものをどうぞ。



----------------- ここから注意点2点

★ 何故デフォルト指定がbottomなのか

これは画像を縦並びにずらーっと掲載したときにですね、bottom設定にしておかないと画像同士の「上辺」と「下辺」がぴったりくっつかないんです。
わかりますかね　^^;
要は並んだ画像に隙間ができる、という意味です。
隙間を作るのは改行すれば良いので簡単なんですが、隙間を取り除くのは難しいんです。

★ テーブルの横幅について

現在はpxでの指定をされていると思います。
テンプレートの仕様に「レスポンシブ」あるいは「リキッド」とあったならば、
数値の指定は% (パーセンテージ)が望ましいんです。
何故ならブラウザ幅の縮小、デバイス幅(スマホなど)縮小したときに
テーブルの指定横幅が記事幅を超過してしまうことがありますよね。
その場合には『記事からテーブルがはみ出す』というのが起ります。
ブラウザ幅を縮小してご検証くださいね。
せっかくのリキッドですので是非パーセンテージ指定を(笑)

長くなりましたが、わかりにくい点等ありましたらご指摘ください。


ついでの追記
画像とテキストの間の空白はテキスト側セル(td)に

<td style="padding-left: ●●px;">

でどうぞ。
テキスと画像の位置が逆ならば赤字部分を right に変更。
エディターのcellspacing を使うより確実ですし、左右セルの背景色が分離することもありません。
くれぐれも
cellpadding="●●px" の指定はお使いになりませんよう。

いろいろとありがとうございました。
そうですか、画像は下揃えになつているので、テキストも一行の折り返しで
テーブルを広げてしまうのですね。今までのテンプレは大丈夫だったので、おかしいと思ったのですが納得しました。ありがとうございました。今までの記事を手直しするには多くの時間が掛かりますが、ご教示いただいたことを少しづつ直していきたいと思います

Akira

To いけの鯉さん

今ちょうど変革期というか過渡期というか。
数年に一度しか巡ってこない、web標準改正の年に当たっているんですよね　(´・ω・｀)
なので書き換えが大変(笑)
パチンコ業界と同じです。
数年に一度の改正((((笑)

過去ログも大切にしつつ、未来に目を向けてソースを書く必要があります。
当たり前に使ってる<font>タグなんかもこれ廃止なんですよねー。
今のうちに書き換えておかないといずれ突然に「使えない」「反映されない」な事態が起こります。

こちらこそ貴重なお時間頂きました。
ありがとうございます :)

毎度、お手数かけます。。。

トップページのリンクテキストが急に表示され無くなりました。
どこのテキストか解らず、右往左往しております。

宜しければ御教授お願い致します。

いえいえ。とんでもないです。

今確認しました。
ホントだー　(´・ω・｀)
Google Chromeだけ文字が出てこないですね。
これはアレかな～。
昔のChromium(クロミウム)バグ再来。
同じChromiumベースでも最新バージョンを利用しているironというブラウザではちゃんと表示されてるんですよね　(´・ω・｀)

少しお待ちくださいね。

ちょっと今いろいろやってみたんですけどもね　(´・ω・｀)

まずご説明。
Chromium というのは、クローム系ブラウザ(blinkエンジン)のベースになるオープンソースです。
このベースに独自機能を追加して、Googleの冠でリリースしてるのが「Google Chrome」です。
他にもChromiumベースのブラウザというのはありまして、代表的なものに
「iron」「Opera」なんかがあるんですけども。

Google Chrome以外のChromiumブラウザではちゃんと表示されてますね(笑)
ところで風　蘭さんがお使いのOSはWindowsでしょうか。
バージョンは10ですか？
それ教えて頂きたいんです。
先日ご質問頂いた際には表示されてましたもんね　(´・ω・｀)
その間に考えられるのってWindows更新だけなんですよ。
んでもって、Google Chromeについては「Windows10に最適化しましたよー。」的なアップデートはまだ入ってないんです。
ironは先日アップデートがありまして「for Windows10」を謳っておりました。
ChromiumのバージョンについてもGoogle Chromeより「上」です。

ともかくGoogle Chromeのアップデートを待っていても仕方ありませんので(確証が無いので)、ちょっと見た目寂しくなりますが通常のリンクに変更したいと思うのですが。
そこのところいかがでしょうか　(´・ω・｀)

あと、コメント欄のホバー(マウスオーバー)も変だよね…。
何が起こったんでしょう(笑)
引き続き調べてみます。

---------------

Adminリンクなんかが表示されないため、ここへお越しになるGoogle Chromeユーザーさんが困ってしまいますので、私の方は検証中ではありますがテンプレ変更しておきます　(*＿ ＿)

Adminが出てないというのは大問題ですからこれはすぐにでも変更したいと思います。
だって自分のホームに戻れないだなんて。
それはダメよねー　(￣∀￣；)

原因追及よりも先に変更を。
私の方は公式の内容を上書きしようと思います。
すみません(汗)

---------------

書き換えました

http://vanillaice000.blog.fc2.com/blog-entry-173.html

カスタマイズされてますので面倒ではありますが、公式のページ状態をプレビューでご確認頂きまして、それでOKであれば再DLをお願いします。
恐らくカスタマイズ項目を再度置き換える方がリンク書き換えよりも簡単だと思います。
事前に現在の状態を保存してくださいね。
お手数おかけします。

保存の仕方 = 現在のテンプレ名を変更しておく(Noir_old など)
テンプレ名が同じだとDLできませんので、名称変更しておいてくださいね。

このコメントは管理人のみ閲覧できます

Akira

To 内緒さん

> 右クリックの件、管理画面の件

ちょっとこちらの要件、ここではお答えできませんので、お邪魔して鍵付きでコメントさせてくださいね。
よろしくお願いします :)

ひとつだけこちらで。
linkのself あるいは blankについては個人で選んで頂いても良いのかな、とも思います。
そうですね。別窓の方が便利と言えば便利ですよね。
次回から参考にしようと思います。
ありがとうございます :)

このコメントは管理人のみ閲覧できます

Akira

To OGPとか色々の件 内緒さん

えっと。
誰それ　(´・ω・｀)

えー　(￣∀￣；)
たぶん特徴(？)が違うので別口ではないかと((((笑)
ヤッダー。呆れちゃう :)

私わからないんです。
もうホントに全然、全くもって意味ふめい。
なんでそんなことになるわけ？(笑)
仰る通りだと思うんですよ。
それに楽しくなかろ？って思うんだけどなー　(´・ω・｀)
内緒さんも絶対ご経験がおありだろうと思いながら書きました(笑)
やっぱり。
ですよねー！！！

かといってヒステリックになるのも。ねー　(´・ω・｀)
他の方にご迷惑になっちゃうので、スルーです(笑)

--------

FC2は自由度が高いけれども、
自由度が高い = 統制がとれない
に近いものもありますよね。
全体共通レイアウトが無いので直観的な使い方は難しいのかも。
てっきりFC2検索バーがその役割を担ってるとばかり。
でも蓋開けてみたら、検索機能オンリー。
びっくり(笑)