Article page

by
  • Comment:4
  • Trackback:0

VeryMerryテンプレート


名称 VeryMerry
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドメニュー デフォルト 右
記事幅 可変 最大840px
サイドバー幅 固定 300px
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大(Intense Images)
見出しデザイン(手書き風, ドッグイヤー)
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 全体幅調整, カラム入れ替え etc.


valid-html5.png


学校行事やビザ申請等々で疲労困憊気味のあきらでございます (´-ε-`;)



べりぃめりぃ
承認されました。ありがとうございます。

本作はhtmlの大規模な変更や新規導入要素などがあります

なので説明が長くなると思いますがよろしくお願いします (´・ω・`)



TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・トップページは全文表示タイプ
個別記事に構造化マークアップ(schema.org)を導入しましたNEW
個別記事の記事タイトルを h2 から h1 に変更しました
・サイドメニュースクロールアンカー
・管理画面へのテキストリンクを Admin から Log in に変更しました
・個別記事ページ送りサムネイル


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・トップページの表示タイプ変更・レイアウト変更(全文表示から要約表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。


カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします



ちょっと仕様説明の前に愚痴なのですが。
IE11の利用非推奨です
このテンプレートが、とかそういうことでなく、世の中の人須らくIEを使うなかれ、って意味です(笑)
もうホントに酷いですね。酷い (´・ω・`)
いつもIE だけ のために特別なCSS書かなきゃいけないんですよ(フォールバック)
いつもIE だけ がアホとしかいいようのない動きするんですよ。
今回もなんてことないデザインなのにめっちゃ苦労しましたわ。
IEのためだけに
ポンコツか。マジで
Edgeも酷いがIEよりなんぼかマシ。
つか、Microsoftはもうブラウザ作るな。その方が世の中のためだ。
inline-blockにmax-width: 100%; が効かないとか意味わからん。
その他ももー色々わけわからん

愚痴は以上です(笑)



構造化マークアップの導入について

もうここから既に難解なお話しになるのですが (´・ω・`)
SEOとかどうでもいい、スキーマオーグとか聞いたことない、という方はこの章について特に意識されなくて良いと思います。
超気になります、という方はよくお読みください。
この章は「多少なりとも理解できている。」というのを前提に記しますことをご了承ください。
とっても長くなりますので、自分には関係ないと思われましたらスキップしてくださいね。

この章をスキップ、次の章へ


長く「どうしようかなぁ。」とモヤモヤしていた構造化マークアップですが、今回試験的な意味も込めて導入してみました。
適用範囲は 個別記事のみ、記事内容の範囲のみ(サイドメニューやコメント欄などを含まない) と、敢えて狭い範囲にとどめています。
やりすぎて余計なお世話になってもいかんもんですから、最小限にしておきました。

ポイントとして箇条書きしておきますので、ご自身の意向に沿わない内容であれば書き換えあるいは削除をお願いします。
  • itemtype属性の値は blogPosting を指定してあります。
  • html全体へのitemtype指定は避けています。個別記事ページ(パーマリンク)の記事範囲(article)のみ適用です。
  • 個別記事ではブログタイトルh1 から 見出し除外 へと降格し、記事タイトルh1 昇格させてあります。
    (トップページではブログタイトルが h1、記事タイトルは各セクション共に h2 です)
  • カテゴリとタグに対し itemprop属性で keyword の値を指定してあります
  • 必須要件のImageObjectに於いて、itemprop属性のurl値のcontentとして FC2サムネイルに準じ、画像の無い場合にはテンプレートデフォルトの No image画像が代替として対象となります
  • 警告内容(2件の推奨フィールド)については採用していません。
    (dateModified = FC2ブログでは更新日の取得ができません/ mainEntityOfPage = 広範囲適用にしていないため)
ホントにページ内の一部、記事の範囲だけですので、広範にする場合にはご自身で最も適切と思われる内容で修正してください。
SEO効果については、やったからといって順位が上がるわけでもないですし、過度の期待はされませんよう。
検索エンジンに対し、より明確に内容を伝える、という一つの取り組みとして考えて頂いた方が良いと思います。

注意事項

見出しについてです。
個別記事の記事タイトルにはh1の最高位を指定してあります。
FC2新エディター(新投稿画面)には「見出し」のツールがありますが、h3〜h6までの選択肢です。
ツールを利用した場合には h2の欠損 が起こります。
もちろん「ツールを利用せず手入力している。」あるいは「適切に書き直せる。」という方はその方が良いです。
「記事内で見出し使いません。」の方はそれでも良いです(笑)

hタグの順序の入れ替わりや歯抜けというのはhtml的にはあまりよろしくありませんが、Google的には「何も問題ないよ! by マット・カッツ」ということですので、今回このような処理を致しました。
Googleとしては「なんべん言わすねん…。」って感じかもですが、htmlコード書いてる人間にとってはやっぱまだちょっとモヤっとする((((笑)




If there's a logical reason to have multiple sections, it's not so bad to have, you know, multiple H1s. I would pay attention to overdoing it.
〝もし理に適った複数のセクションがあるのなら、各セクションにH1を指定するというのは悪いことじゃない。
要はそれがやり過ぎかそうでないかだよ。〟


If you just throw H1 everywhere on a page, people have tried to abuse that and so ouralgorithm try to take that into account so it doesn't really do you that much good. SoI would use it where it make sense and more sparingly, but you can have it multiple times.
〝もし君がページのそこらじゅうにH1を指定してしまえば… つか、実際そういう人がいるからGoogleのアルゴリズムはそういうのも考慮してあるんだけど。そういうのは君にとっても良い結果にはならないよね。
だから「ちゃんと意味があって」「やり過ぎない」という前提なら複数のH1を使っても良いんだよ。〟


ちなみに「ブログタイトルは div、記事タイトルが h1」という形はWikipediaやGoogleの一部サービスなどもそうです。
複数要素へのh1指定はhtml5では許可されていますので、不安を感じる方はブログタイトルへもh1指定して良いと思います。
(ただしW3Cバリデーションでは警告が出ます)
W3Cの意向とGoogleの意向が噛み合わないこともままありますが、その辺の折り合いはユーザーが自分で付ける ←
個人的見解としては、Googleのメンズが「問題なっすぃん。」と言っているのは「俺らのbot超賢いから。」という意味であって、「htmlの正確さ」とはまた別のところかと思います。



重要部位をスクリーンショットで説明しておきます
カスタマイズ時にご留意頂ければ、と思います




というわけで長くなりましたが、構造化マークアップテスト・W3Cバリデーション共にエラー無し、という内容になってます。



全体幅調整の仕方

デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。
(メインコンテンツ横幅が500pxを下回った際にシングルレイアウトに切り替わるよう調整してあります)

やー。でもあんまwidth変更とかしない方が良いかもしれん。
クソIEがまたふざけた行動に出るかもなので (´-ε-`;)



ナビゲーション

● 管理画面への誘導について

Admin という単語が日本では馴染みが薄いようなので。
FC2ブロガー「ではない」方がクリックするとログイン画面に遷移するという点も考慮して、
Log in に変更しました。
もちろんカスタマイズとしてテキスト内容を変更しても問題ありません。ご自身(と閲覧者)にとってわかりやすいと思われる単語をお選びください。

● ナビゲーション内リンクについて

ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。
文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に合計3箇所ヒットします。
それぞれの

(max-width: 850px)

緑の部分 850 を 大きな数字に変更 してください。
この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

● Aboutについて

こちらは予備リンクです。
誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。
不要であれば削除。

該当部位検索
注)予備リンク

カスタマイズ
<li><a href="ここにリンクアドレス">テキスト</a>


デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。



左右カラム入れ替えの仕方


#main-container

を検索されますと、CSSソース内に4箇所ヒットします。
最初のものが対象です。
この括りの
padding: 0 40px 85px;
の直下に以下を 追加

flex-direction: row-reverse;

続きまして検索。

#primary

こちらは2箇所ヒットします。やはり最初のものが対象です。
この括りの

margin-right: 50px;

緑部分 rightleft に変更。
以上2手順です。



ドミナントカラー


以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。

例) 51,51,51


rgb(235,226,217) 全体背景色
rgb(175,166,157) 基本リンク色 など
rgb(170,201,198) ナビゲーション背景色 など



管理人コメントと訪問者コメントを分ける方

デフォルトはグレー背景アイコン。
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください。
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません。
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り。

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。



ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。





みなさんいつもありがとうございます (●'0'●)/
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 4

Akira  
To VeryMerryアドセンスの件 内緒さん(移動先)

> アドセンスがはみ出す件〜

http://vanillaice000.blog.fc2.com/blog-entry-170.html#comment3839

ソース自体ちょっとあまり良くないというか、修正の必要がありますが、とりあえず「併せて読む」の部分について。
これのことですよね。サイドメニュー部まで侵食するというのは。
これ「関連コンテンツユニット」だと思うのですが、特徴をお伝えします。
内緒さんにJSの知識がお有りかどうか測りかねますので、なるべく簡単にわかりやすく説明できれば良いのだけれど ^^;

レスポンシブと一口に言っても、2つのパターンがあります。
主に「横幅」についてですので、幅 = 横幅 だと思って読んでください。

① 初回アクセス時(読み込み時、ローディング時)に幅が合致していればOK。
② 初回アクセス時はもちろん、読み込み後にブラウザ幅を変更してもちゃんとそれに合わせた調整を行ってくれる。

私のテンプレート自体は②です。
関連コンテンツユニットはどうかというと①なんですね。
幅を調整するのはローディング時のみ、なんです。
何度か検証しましたが、現在の内緒さんのページでも「ローディング直後にもう既にはみ出している」といったことは起こらないはずです。
ローディングをし、その時点ではちゃんと収まっていて、その後でブラウザサイズを変更するとはみ出す、という流れではないでしょうか。

JSの挙動でいうと、
①は
$(function()
あるいは
$(window).on("load",function()
です。
これは「ローディングする時に処理しますよ」「ローディングして全部内容を取り込んでから処理しますよ」といった動作。

②は
$(window).on('load resize', function()
「ローディングした時に処理しますよ。そしてリサイズが行われた時にも処理しますよ」という動作。

レスポンシブでは「リサイズ」という概念があります。
でもこれはパソコンだけ、なんですよね。
タブレットやスマホでは基本的に画面のリサイズ(ブラウザリサイズ)というのは行われません。
その代わり「ランドスケープ」という「横倒し」状態がありますが、デバイスを横に倒した際にはデバイスを縦で表示する時よりも画面は必然的に「大きく」なります。
ですからリサイズしなくとも画面内からはみ出ることはありません。
なのでローディング時のみ処理をしておけばそれでオッケー。
ところがパソコンではブラウザ幅の任意変更というのが行われることがありますので、ローディング時のみの処理では片手落ちになります。
Googleはこの片手落ち状態で提供しているわけです(笑)

もう仕方がないですよね。Googleはモバイルファーストを進めていて、パソコンの方へ目を向けてはくれないようです。
というわけでこれはGoogleの仕様ですのでユーザーサイドではどうしようもありませんです。残念ながら (´・ω・`)

2017/07/20 (Thu) 15:48 | EDIT | REPLY |   
Akira  
To VeryMerryアドセンスの件 内緒さん②

で、内緒さんはカラムの入れ替えを行いますので、はみ出す方向は「右側(サイドメニューの無い方)です。
そしてVeryMerryでははみ出した要素は「カット」する仕様ですので、横スクロールバーは出現せず「見切れる」という状態になります。
Ranchuの場合は見切れではなくはみ出し(横スクロールバー)

---------

ソース内容を一度綺麗にした方が良いと思います。

● htmlタグに大文字は用いない
例)
X FONT size
✔ font size

● 廃止要素は利用しない
例)
X <center>〜</center>
✔ <div style="margin: auto;">〜</div>

X <font size="1">〜</font>
✔ <span style="font-size: 10px;">〜</span>

● html要素内で改行を行わない
例) 属性間に半角スペース挿入でなく改行を行っている
X <ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px">

✔ <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px">

修正必須箇所を挙げておきます。


<center> と </center> を

<div style="margin: auto;"> と </div> に変更。2箇所あります(開始タグ1, 終了タグ1, 合計2)


<FONT size="1">スポンサードリンク</FONT>

<span style="font-size: 10px;">スポンサードリンク</span>


<ins class="adsbygoogle"

を目印に。ヒットするのは3箇所。
これに続く内容を、改行を取り除き半角スペースに置き換え。
1箇所目に3つ、2箇所目に3つ、3箇所目に4つ、合計10。
もう一度例えを書いておきます。

X例)
<div class="hoge"
style="display: block;"
data-hoge="hogehoge">

✔例)
<div class="hoge" style="display: block;" data-hoge="hogehoge">

ここについてはGoogleがこのコードを提供してくるのかもしれませんので、良くはありませんがそのままでも仕方がないのかなぁ、と思います。
なので任意修正で。


<div style="font-weight:bold;"><FONT size="3">あわせて読む</FONT></div>

<div style="font-weight: bold; font-size: 13px;">あわせて読む</div>

以上です。よろしくお願いします。

2017/07/20 (Thu) 16:10 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/21 (Fri) 00:54 | EDIT | REPLY |   
Akira  
To VeryMerry ナビゲーション内容追加の件 内緒さん

えーとですね。みなさん結構ナビゲーションにこれがあると便利、あれも欲しいこれも欲しい、という感じでどんどん追加してしまわれるのですが。
本来「グローバルナビゲーション」というのはサイト内の主要ページ間をスムースに行き来するためのものです。
追加事項があるとしても、せいぜい外部に持ちサイトがあるならばそちらへの誘導とか。
ですからやたらと項目を増やす性質のものではないんですね (´・ω・`)
そこをまずご理解頂きたい。
ナビ内リンク数が多いと閲覧者は混乱しますので、便利が翻って寧ろ…と言う感じです。
そして基本的にナビゲーションのカスタマイズというのはタイプにもよりますが、非常に高度です。
単純にリンクをひとつづつ追加するだけならば初心者向けというか、誰にでもできますが。
一覧を出したりモーダルウィンドウにしたり、ロールオーバーやクリック開閉など、導入自体も難しいですし、その手順説明するのも難しい(笑)

FC2ブログの特徴
・カテゴリ一覧 --- 「カテゴリ一覧」つまり全カテゴリリンクが集まったページはありませんので、カテゴリが10あるのならば全部で10の各カテゴリ一覧ページがあります。
例) カテゴリ名「日記」「旅行」「美容」
X 全カテゴリ一覧ページ (同ページ内に全カテゴリの羅列) --- 無い
✔ 各カテゴリ一覧ページがそれぞれ存在 --- 「日記カテゴリ一覧」「旅行カテゴリ一覧」「美容カテゴリ一覧」

・お気に入りのブログ
これはサイト内リンクでもありませんし、それこそasideメニュー(ページ内コンテンツと関連はあるが主にはなり得ない)として考えた方が良いですね。
グローバルナビゲーションに追加する類のものではありません。

・コメント一覧 --- コメントの一覧ページというのはFC2ではスマホ版にしかありません。最新コメントのことでしょうかね。

--------

VeryMerryの一つ前にリリースしたテンプレに「Empty-street」というのがあります。
http://vanillaice000.blog.fc2.com/blog-entry-545.html
こちらはトップページにサイドメニューがありませんので、ナビゲーションに「カテゴリ一覧」「最新コメント一覧」を入れています。
VeryMerryは常にサイドメニューがありますので、ナビに追加する意味があるのかどうか、というところです。
ここまでの内容を踏まえた上で追加される場合には、Empty-streetのナビゲーションとほぼ同じ内容ですので、そちらと照らし合わせてご自身で移設をお願いします。
コメント欄でソースをお伝えするにはあまりにも文字数が多すぎます(笑)
あるいはこちらのページを参考に

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

メールフォームの追加の仕方ですので、内容についてはメールフォームから「カテゴリ」「コメント」に変更が必要です。
そしてFC2独自変数を使わなければいけませんので、大変特殊な内容です。
んー。Empty-streetからの移植の方が楽かもです (´・ω・`)
よろしくお願いします。

2017/07/21 (Fri) 01:43 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い