Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

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'●)/
関連記事

Comments 20

There are no comments yet.
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 |   
-  
管理人のみ閲覧できます

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

2017/07/21 (Fri) 22:02 | EDIT | REPLY |   
Akira  
To センタリングの件 内緒さん

> アドセンス広告のタイトル部分から始まるこの部分〜中央揃えではなく左揃えになってしまいます〜

「何を」センタリングするかによります。
margin: auto; というのは「全体像」を中央揃えにします。
その全体像の中にある「テキストや画像」をセンタリングするには margin: auto; は使いません。
テキストのセンタリング、という解釈で合ってますでしょうか。
以下の通り修正してください。

<div style="margin: auto;">〜</div>

<div style="margin: auto; text-align: center;">〜</div>

本件に関する内容は以下のページを参照のこと。

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

よろしくお願いします。

2017/07/21 (Fri) 23:33 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/21 (Fri) 23:51 | EDIT | REPLY |   
Akira  
To センタリングの件 内緒さん(完了のご報告)

なんとか上手く体裁が整いましたでしょうか。
例の「あわせて読む」はサイドメニューに設置し直されたんですね。
そうですね。それが最適解だと思います(笑)
作業お疲れ様です

2017/07/23 (Sun) 01:13 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/24 (Mon) 00:30 | EDIT | REPLY |   
Akira  
To 広告掲載位置の件 内緒さん

こんばんは (●'0'●)/

> 広告位置の違反や位置について〜

違反についてはなんとも言えません。
adsenseの規約が変更になって、現在だと「何点まで」ということにはなってないですよね。
ただし現在でも掲載数が多すぎるページへのペナルティは十分ありえます。
数としては今もうギリギリのところだと思います。
特に全文表示タイプですので、トップページの掲載数を増やせば自動的に1ページ内の広告数も増えますので注意が必要かもしれません。

上記が「数」について。
で、本題の「位置」なんだけども。
基本的に広告は誰からも嫌われるものだ、ってことですよね (´・ω・`)
結論から言うと違反ではありません。
効果的な掲載位置は
・ヘッダーの「上」
・サイドメニューの「スクロールしなくても見えている範囲」
見出し直後
とかまぁ、色々言われていますが。
あくまでもこれは「目立つから」という意味であって、「閲覧者がどう感じるか」とは全く別物です。
「目立つ」を言い換えれば「邪魔」ってことです。乱暴に言えば(笑)

見出し下というのは嫌でも目につきますので、その通り「嫌だ」と感じる方にとっては害でしかないです。
固定読者というのは広告を見に来るわけではなく記事内容を見に来るわけなので、そのあたりのバランスはやはり考える必要はありますよね。
実際に読者の方から「ウザい」という反応があるのならば、やはりそこは考えた方が良いと思います。

あとは広告の種類ですかね。
広告位置がベストだとしても、例えばファッション系ブログに衣類販売のリンク。
例えばweb情報系ブログにエンジニア募集。
こういうのはクリックしてもらえる機会も多いかもですが、全然関係ないものなら押してもらえないどころかただひたすらウザい(笑)

なかなか折り合いが難しいかもしれませんが、私がもし掲載するのならやはり見出し下は避けて記事下に置きます。
理由は「ウザいと思われるだろうから」(笑)

2017/07/24 (Mon) 01:43 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/24 (Mon) 19:58 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/27 (Thu) 00:31 | EDIT | REPLY |   
Akira  
To コメント欄の件 内緒さん

こんばんは (●'0'●)/

まず、ごめんなさい。私7/24に頂いたコメントを見落としておりました。
大変失礼致しました (*_ _)

> コメント投稿欄にある太字にしたり下線を引くところが、上下のスクロールバーでほとんど隠れてしまっている〜…これは敢えてこうしたデザインに〜

いえ。していません(笑)
コメント装飾用のツールのことでしょうか。

http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/9a8d9oew2th.jpg

スクリーンショットは内緒さんのページから取得しています。
パソコン閲覧時でしょうか。スマホでしょうか。
あるいは両方?
ちょっと状況が見えてきませんので、ご利用のOSとブラウザ名を教えてください。
例)
Windows10, Microsoft Edge
Android6.0, Google Chrome
など

よろしくお願いします。

2017/07/27 (Thu) 01:02 | EDIT | REPLY |   
Akira  
To コメント欄の件 内緒さん②

別件で気になる点を一つ見つけましたのでお伝えしておきます。

サイドメニューのプラグインに展開型のアーカイブをご利用かと思います。
この展開の動作はアンカータグ(<a href="#">〜</a>)を用いて行われています

このhrefの#(ハッシュ)なんですが、html5ではURL末尾に #●●● が付いていると「ページ内移動」する仕様になってるんですね (´・ω・`)
ですから
<a href="#">
この意味は # の後ろに続くid名を持つ要素まで移動、ということになってしまいます。
本件の場合はid無しの「空」ですが、空でも移動はしてしまいます。
これhtml4から5へ移行した際の変更点で、htmlのバージョンによって挙動が違ってしまうんです。
(html4では <a name="●●"> がページ内移動として使われていました)
なので私のテンプレートに限らず、
・html5である
・ページ内スクロールが導入されている(ページtopボタンなど)
上記の場合には、クリックすると画面最上部までスクロールしてしまいます。

対処法
① html5に準拠したプラグインに変更する
② カスタマイズをする(プラグイン, テンプレート共に修正が必要です)

カスタマイズされる場合は以下の手順に従ってください。

------- プラグイン

<a href="#" title="OPEN"

を見つけ、以下の通り追加修正

<a id="open-plugin-btn" href="#" title="OPEN"

続いて

<a href="#" title="CLOSE"

を見つけ、同じく以下の通り追加修正

<a id="close-plugin-btn" href="#" title="CLOSE"

---------- テンプレート

htmlソース内の

o=40;$('a[href^="#"]')

の部分を以下の通り追加修正

o=40;$('a[href^="#"]:not(#open-plugin-btn):not(#close-plugin-btn)')


これでできるはずですが、実物で検証したわけではないので絶対とは言いません。
必要であれば一度お試しください。

2017/07/27 (Thu) 01:37 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/28 (Fri) 01:28 | EDIT | REPLY |   
Akira  
To VeryMerry コメントJSの件 内緒さん

こんばんは (o'ω')ノ

アーカイブの修正は完了したようで良かったですー。
お疲れ様でした。

> コメント装飾用ツール(コメントJS)の表示がおかしい件〜

うーん。私の環境下、Windows10, Google Chrome では特に問題ないようです。
キャプチャを取りましたのでご確認ください。
(以下全てWindows, ブラウザのバージョンは全て最新)

● Chrome
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/captureth.jpg

● Edge
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture-edgeth.jpg

● Firefox
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture-firefoxth.jpg

● IE11
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture-ie11th.jpg

--------

Chrome以外のブラウザで確認はして頂きましたでしょうか。
EdgeとIE11は必ずバンドルされていますので、それぞれ目視確認をお願いします。
表示がおかしいな、と思った時には別のブラウザからも閲覧してみることで解決の近道になることがあります。

内緒さんにして頂きたいこと
(蛇足も含まれるかと思いますが、一応簡単なやり方等も書いておきます。ご存知でしたらごめんなさい)

① 問題が確認できるよう、スクリーンショットを撮る
Snipping tool というのがWindowsにはありますので、そちらをご利用ください。

② 別のブラウザで表示確認をし、それぞれスクリーンショットを撮る

③ Chromeのバージョンを確認する, bit確認をする
アップデートが手動に設定されている場合、知らずと長く更新していない方もいらっしゃいます。
右上 ︙ マークをクリック → 「ヘルプ」にマウスオーバー → 「Google Chromeについて」をクリック。
これで更新が始まった場合、最新バージョンではなかった、ということになります。
Chromeのサポートは最新版とその一つ前のバージョンのみですので、常に最新の状態を保つようにしてください。
(Firefoxなども同じです)

この時同時に bit確認をしてください
こんな感じで出ます ↓

バージョン: 60.0.3112.78(Official Build) (64 ビット

64か32のいずれかです。

④ Windowsのbit確認をする
コントロールパネル > システムとセキュリティ > システム
「システムの種類」という項目に
●●ビットオペレーティングシステム
と書いてあります。●●の数字はやはり 32 あるいは 64 のいずれか。

-------

bitの確認についてですが、パソコンのOSが64bitなのにも関わらず、Chromeを32bitでインストールしている方が非常に多いんですね。
仮にパソコンが32bitならばChromeも32bitにしておいた方が良いとは思いますが、Chromeは既に32bit版のサポートを終了しています。
もしパソコンが64bit対応であれば、Chromeも64bitに変更してください。
でないと動作が重たいだとか、しょっちゅうクラッシュするだとか、表示がおかしい、といったことが起こります。

もし上記に該当している場合ですが、
32bit版と64bit版は全く別のものですので、クリーンインストールすることになります。
設定が引き継がれるよう、Googleアカウントログインをお忘れなく。

一度これでご確認をお願いします。

---------

> 私のブログのページを私以外の閲覧者さんが見た時、正しく表示されているのでしょうか?
FC2のランキングに参加していて〜そのページを見ると、左サイドバーが消えている〜

これは閲覧者のブラウザのバージョンが既にサポート切れのもの、例えばIE10以下やその他モダンブラウザでもかなり古いバージョンのものだったりすれば、それは正しく表示できません。
サポート切れブラウザについては後方互換を行っていません。
ちゃんとブラウザやOSの更新を怠っていないのであれば、きちんと表示されているはずです。
動作確認については記事内にある表を御覧ください。

ランキングの画像はスクリーンショットです。
内緒さんがカスタマイズを行う前、あるいはカスタマイズ中に撮られたものかもしれません。
それが証拠にメインコンテンツが左に寄っています。
どのタイミングで取得されるかはユーザーでは選べませんので、運が悪かったというかなんというか(笑)
あるいは取得する際に利用したブラウザ(運営が利用しているブラウザ)が古いのかもしれません。
(まぁ、無いと思いますが)
またあるいは、内緒さんのページにはJSが多く含まれます(アドセンスなどがあるため)
なのでショットの時点でページ整形が間に合わなかったというのも考えられます。

それからスクリーンショットというのは、撮り方によっては完璧にはなりません。
固定ナビゲーションなどが崩れて表示されたりするのはよくあることです。
(スクロール動作が行われるとスクショは崩れます)

クリックして実際のページにたどり着いた際には先に述べた要件と合致していれば正しく表示されますし、スクショ自体は小さなものですので詳細はわかりません。
なので特に気にする必要は無いと思います。

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

2017/07/28 (Fri) 03:32 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/28 (Fri) 05:37 | EDIT | REPLY |   
Akira  
To VeryMerry アーカイブと写真の件 内緒さん

こんにちは (●'0'●)/

> 折り畳みを広げる時はいいのですが、たたむ時にアーカイブの位置に戻らず〜

こちらについては私が製作したものではありませんので、機能的な部分を私が修正するというわけにはいきません。
先日のカスタマイズは「IDを付与してスムーススクロール対象外に指定する」というだけで、機能面には一切手を入れていません。
なので製作者様に直接お問い合わせをお願いします。

> 写真のコツ〜

えっと。私も写真の撮り方が下手くそです(笑)
構図とかてんでなってない ^^;
写真の撮り方については他の方にお尋ねくださいね。
ってゆーか、私も教えて頂きたいぐらいで(笑)
ひとつだけアドバイスですが、サムネイル対象の画像には枠などの加工はされない方が良いかもしれません。
画像による編集だとサムネイルになっても枠がついてしまいますが、CSSならば素のままです。
場合によってはテンプレートのイメージと合わないことも出てくるかと思いますので、画像装飾はなるべくCSSで (・ω・)b
(VeryMerryでは img に class="shadow-attachment" を追加することでドロップシャドウがつくようになってます)

2017/07/28 (Fri) 15:16 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/28 (Fri) 17:11 | EDIT | REPLY |   
Akira  
To VeryMerry アーカイブと写真の件 内緒さん

お疲れ様です (●'0'●)/

アーカイブの件はお役に立てず申し訳ないです。
写真の枠の件はそうですね。その方が今後のことも考えるとおすすめです。
いつもありがとうございます

2017/07/29 (Sat) 00:21 | EDIT | REPLY |   

Leave a reply

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