Velonica - FC2ブログテンプレート

2017年06月01日
テンプレート
24
HTML5 CSS3 RWD
Velonicaテンプレート

Velonicaテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
スマートフォン版を非表示にしてご利用ください。
設定ページ

最終更新 2018.12.18
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事「記事編集リンク」をSNSアイコン並びからSNSアイコン上プロフィールアイコンに変更(閲覧者に気づかれにくいようカーソル非表示にしてあります)
  • 要約ページ記事概要文文字数制限をJSからCSSに変更
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • ブラウザスクロールバーを非表示化(webkitブラウザ限定, 解除可能, 二重スクロールバー対策)
  • ドロワー展開時にメインコンテンツが強制的に上部に戻されないよう調整(二重スクロールバーとの干渉修正)
  • スクロールアンカー用JS及びCSSの変更

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

名称 Velonica
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大730px
サイド --- 260px
記事内で使える見出しレベル h3からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.1 CSS)
Lazyloading導入 なし
構造化マークアップ なし
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ アコーディオン解除
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム
その他ページ --- 1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下
(デバイス幅依存)
サイドメニュー --- 下

今年の夏は例年の旅行に加え、キャンプに行く予定です
なんでこの歳でキャンプ!!! すっげーヤダし!!!
(相方と長男がやる気満々)

ゔぇろにか ← 心象風景
承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ
DOWNLOAD
FAQ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

IE11でのCSS装飾不備について

A blur property is not compatible width Internet Explorer 11

トップページの各記事はマウスオーバーで背景にぼかしがかかりますが、IE11についてはblurのCSSが未実装のため無効です。IEは開発が終了していますので「そのうち正しく表示されるかもしれない」という可能性はゼロです
同ベンダーのMicrosoft Edgeはblur実装済み、動作確認済みです。

カスタマイズ非推奨

Customization is NOT recommended

個別記事は特に問題ありませんが、トップページの方。文字を大きくするだけで体裁が壊れてしまいます(程度にもよりますが)
複雑な入れ子構造にもなっていますので、結構苦労するかもしれません (´・ω・`)
もちろん腕に覚えのある方は自由に変更して頂いて構いません。

スクロールバー非表示について

The reason to adopt hidden scrollbar

webkitブラウザ(Chrome, Safariなど)限定ではありますが、ブラウザのスクロールバーを非表示にしてあります。これはサイドメニューがドロワーに切り替わった際、中のコンテンツが多い場合当然メインコンテンツとは別でスクロールすることになりますが、そのメインコンテンツのスクロールバーとドロワーのそれとがダブルで表示され見た目に非常に煩わしいんですね。二重スクロールバー対策用JSを入れているテンプレートもありますけれどVelonicaには採用しませんでした。

ドロワー展開時のみメインコンテンツのスクロールバーを非表示に、という方法もあるとはいえ、こちらはドロワー展開前の画面滞在位置がどこであろうとも、展開した瞬間に最上部へ引き戻されてしまいます。二重スクロールバーよりもこちらの方がやはり使い勝手が悪いので、二重スクロールバー解消と引き戻し回避双方をクリアできるスクロールバーの非表示化を選択しました。解除したい方は以下の文字列で検索。

注)スクロールバー非表示解除(webkit限定)はここから削除

CSS内に1箇所ありますのでガイダンスに従ってください。

サイドメニューのアコーディオンについて

You can choose to collapse aside contents or not.

今度は左右ドロワーではなく上下に開閉するアコーディオンの方。
プラグイン3へ登録されているものはアコーディオン対象外 にしてあります。
全て折りたたむ場合には全プラグインをカテゴリ1 or 2 へ移動させるか、移動が面倒な方はあるいは

<div class="non-side-drawer">

緑の文字列を削除して以下になるよう修正してください。

<div class="side-drawer">

アコーディオン不要の方は

<!-- 注)サイドメニュー折りたたみ不要の方ここから削除 -->

上記を目印にガイダンスに従って該当項目を 削除
続いて

.side-drawer

で検索するとCSSソース内に1箇所ありますので、その括りの

display: none;

の一行を 削除
全2手順でお願いします。

修正については以上です。
ページ遷移の際はアコーディオンの開閉状態を保持したまま移動します。
クッキーによって一定期間は状態保存が行われます。

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送りのサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

No image画像変更

How to change default 'No image'

https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/veronicanoimageth.jpg

htmlソース内に1箇所、CSSソース内に1箇所、計2箇所ありますのでそれぞれ変更してください。
html内のものはトップページのNo image画像、CSSのものはページ送り背景です。

縮尺掲載, 1000×666, 54KB, public domain

ナビゲーションについて

About global navigation

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

該当部位検索

注)予備リンク

カスタマイズ

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

空リンクは閲覧者を混乱させますので削除あるいはリンク設定いずれかの処理をおすすめします。

ドミナントカラー

Dominant colors

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

rgb(142,105,145) 基本リンク色 など
rgb(240,240,240) 全体背景色 など
rgb(62,54,88) ページ送り背景色 など

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

みなさんいつもありがとうございます (●'0'●)/

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 24

There are no comments yet.

べえ  

2017/08/04 (Fri) 01:24

はじめましてべえといいます。

かっこよいテンプレートですね。初めてレスポンシブデザインのテンプレートに変更
しました。ありがとうございます。
サイドバーのアコーディオンを変更してみましたが、ちょっと手間取りました。
とても参考になるブログで、勉強になります。まだまだ試行錯誤中ですので、
テンプレートを変更するかもしれませんが、これからもよろしくお願いいたします。

ところで、キャンプは楽しいですが夏は暑くて厳しいですね。今週末に行く予定ですが、
USB扇風機3台持っていきますw

Akira  

2017/08/04 (Fri) 01:47

To べえさん

ありがとうございます

カスタマイズお疲れ様でした。
少しでもお役に立てましたら幸いですー。

キャンプ…。結局相方に懇願してコテージに変更してもらいました。
ヘタレと呼ぶなら呼べば良いさ、って感じで(笑)
あと、チーズフォンデュをする予定なのですが、野外だとばかり。
コテージだから室内でした。
「それキャンプじゃなくね (;`ー´)o」
って発言したら大ブーイングくらいました(微笑み)
とりあえず頑張りまーす(なにをどう頑張るかもわかってないけど)

べえ  

2017/09/11 (Mon) 20:24

1ヶ月使いました。

こんにちは。

一ヶ月使った結果ですが、8月は毎年アクセスが落ちる時期なんですが、
7月の倍くらい来ました ^^ 7月はPCからのアクセスのほうが6割以上
でしたが、8月はスマホが70%くらいと大逆転です。
ありがとうございました。

古い画像が小さい記事で、サムネイルを取得できない不具合がある
のですが、これはFC2の関数自体が悪いのでしょうか?
ちなみに120×90くらいの画像を使った記事です。

Akira  

2017/09/11 (Mon) 23:07

To べえさん

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

アクセスについては、べえさんが良い記事を書かれているということに他なりません。
こちらこそご利用頂き光栄です

> 古い画像が小さい記事で、サムネイルを取得できない不具合がある〜

拝見しますので該当ページのURLをいくつかお知らせください。
FC2独自変数の仕様自体は「極小画像は対象外」といった縛りはありませんので、何か別の原因があるかと思います。

べえ  

2017/09/11 (Mon) 23:25

 お返事ありがとうございます。

 とりあえず、URLを書いておきます。特に小さな画像で記事を
書いてある初期のものだけのようです。
http://beebaku.blog88.fc2.com/blog-entry-37.html
http://beebaku.blog88.fc2.com/blog-entry-40.html
http://beebaku.blog88.fc2.com/blog-entry-41.html
http://beebaku.blog88.fc2.com/blog-entry-59.html

Akira  

2017/09/11 (Mon) 23:30

To べえさん

拝見しました。
この原因は「ファイル名称にカッコが付いているため」です。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-467.html

ちょっと記事内容が古く、若干の仕様変更が入ってますので書き換えなければいけないのですが、ファイル名カッコについては以前と同じくサムネイル対象から外れます。
対策としてはファイル名変更しかありません。
よろしくお願いします (o'ω')ノ

べえ  

2017/09/12 (Tue) 01:54

お返事ありがとうございます。

ちょうど画像がものすごく小さく、修正しようかと思っていたところですので、
不具合のある画像を差し替えます。ありがとうございました。

Akira  

2017/09/12 (Tue) 23:40

To べえさん

そうですね。それが一番だと思います。
お疲れ様です

べえ  

2017/09/13 (Wed) 21:06

できました

こんにちは。

画像を差し替えたら確かに直りました。ありがとうございます。

Akira  

2017/09/13 (Wed) 21:25

To べえさん

「カッコつき名称は対象外」という特徴は当面変わらないと思いますので、名称を付ける際には今後もご注意くださいね。
お疲れ様です

村上みのり  

2018/08/23 (Thu) 18:10

ファビコンの設定について

Akiraさま
初めまして。神戸市在住の村上ともうします。Akiraさんの作っておられるテンプレート、ステキなものが多くて、他のブログより引っ越してきたばかりです。早速、Velonicaを使わせていただいております! すばらしいテンプレートをどうもありがとうございます。
さて、ファビコンの設定をしてみたところ、うまく表示できずに困っております。
FC2の指示通りに、</head>の直前に、コードとアップロードしたファイルのアドレスを入れてみて、htmlを更新しているのですが、何度やってもブログの上部に画像アドレス名が表示されるだけでして…。
ご教授いただけましたらうれしいです。

あと、有料プランに加入したのですが、ブログのトップにFC2のアイコンが表示されるのを消すことはできるのでしょうか…? もしこちらもおわかりになれば、よろしくお願い致します。

質問は以上です。どうぞよろしくお願い致します。

Akira  

2018/08/23 (Thu) 23:25
vanillaice (Akira)

To 村上みのりさん

ありがとうございます

ファビコンの件ですが、スクリーンショットを見ながら修正をお願いします。
https://blog-imgs-122.fc2.com/v/a/n/vanillaice000/capfabi887.png

<html lang="この部分">

赤字部分を何かの拍子に変更してしまわれたのではないかと思います。
ここは言語の指定で大変重要ですから必ず元の状態に修復してください。
正しい内容 ↓
<html lang="<%template_language>">

-----
langのすぐ下にURLがただのテキストとして書き込まれています。
ページの上部に表示されているのはこの文字列ですので削除してください。

-----
ファビコンのlinkはできればスクショのように位置を移動させることをおすすめしますがこちらは任意です。
心配ならば位置はそのままでも問題ありません。

<link rel="shortcut icon" href="ファビコンアドレス">

という内容になっていますが、shortcut という指定はバージョン8を含みそれ以下のInternet Explorer以外は不要です。
テンプレート自体IE8以下非対応ですので削除されると良いと思います。

-----
テンプレートを再DLしてから改めてファビコン追加を行った方が良いかもしれません。
特にhtml langの指定が不正のためhead情報のほぼ全てがエラーになっているような状態です。
再DLされる際にはお手元のテンプレート名称を変更(例: Velonica_1 など)してからでないと同じ名称のものはDLできませんので事前に変更しておいてくださいね。

-----
> ブログのトップにFC2のアイコンが表示される〜

これがちょっとどこのことなのかわからないので具体的に教えてください。
・ブログのトップ --- トップページのこと?それともページの上部という意味?
・FC2のアイコン --- FC2ブログのアイコンはNo image代替画像にしか出てこないと思いますが、もしかして上部に固定されている「FC2検索バー」のことでしょうか。もし検索バーのことであれば個人設定で非表示可能です。
設定ページ: https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar

よろしくお願いします。

村上みのり  

2018/08/24 (Fri) 15:54

To Akiraさん

Akiraさま
早速のお返事、ありがとうございます! スクリーンショットを見ながら試してみると、再DLなしでうまくいきました!
詳しいご説明に感謝感激です。どうもありがとうございました。

>ブログのトップにFC2のアイコンが表示される〜 の件は、検索バーのことでして、説明不足で失礼しました。
設定ベージで非表示にすると消えました。重ねてどうもありがとうございます!

また質問なのですが
1:ブログのタイトルと説明文をもう少し大きくしたい
  (var e=100の数字を50にしたり、10にしたりしてみたのですが、サイズが変わりませんでした)
2:トップページのフォントを、ゴシックにしたい(個別記事のように)

以上、お手数をおかけしますが、どうぞよろしくお願い致します。

Akira  

2018/08/25 (Sat) 14:20
vanillaice (Akira)

To 村上みのりさん

こんにちは (o'ω')ノ

確認なんですが、
ブログタイトルとその説明文
なんでしょうか。記事タイトルとその概要文ではなく。

var e=100
の部分は記事内の説明にあるとおり、トップページの各記事の文字をどうしても大きくしたい場合には体裁が整わなくなる(よってカスタマイズ非推奨)のでその調整として行う文字の調整
ですからブログタイトルのフォントサイズとは無関係です。

どちらが目的なのか不明なのでこの件はお返事待ちにしますね。

-----
> トップページのフォントを、ゴシックにしたい(個別記事のように)〜

トップページと個別記事のフォントが別に見えているということなんでしょうか。
フォントというのは個人環境に左右されますので

・ご利用のOS(Windows or Mac など)

をお知らせ頂かないと解決できません。
このテンプレートのデフォルト設定は
Windows第一優先 --- メイリオ
Windows第二優先 --- 游ゴシック
Mac --- ヒラギノ角ゴ ProN W3
で、トップページと個別記事でフォント変更は行っていませんので同じフォントのはずです。

そして一口に「ゴシック体」と言っても、ゴシック体というのはフォントの分類であってフォント名ではありませんので、游ゴシックなのかMS Pゴシックなのか。
MS Pゴシックは好ましくないと思う方がほとんどなので恐らく游ゴシックのことかなぁ、と思いますが、いずれにしてもトップページと個別記事のフォントは同じはずですし、Windowsでメイリオが搭載されていないバージョンというのは考えにくいのですが。
ちょっとよくわからないのでトップページと個別記事それぞれのスクリーンショットをお見せ頂けないでしょうか。
フォントというのは特定個人の環境だけ考慮というわけにいきませんので、(閲覧者全員Windowの同じバージョンとは限りません。Macの人やWinのバージョン違いも考慮する必要があります)ご協力をお願いします。

村上みのり  

2018/08/25 (Sat) 16:30

To Akiraさん

Akiraさま

お世話になります。要領を得ない質問でスミマセンでした…!
的確なご対応、どうもありがとうございます!
ちなみにパソコン環境は、Mac OSX Google Chromeにてチェックしています。

文字変更の件ですが、
ブログタイトルとその説明文でして、希望の書体は「ヒラギノ角ゴ ProN W3」だと思います。
私のパソコンから見る、Akiraさんのテンプレート「Hymn」の書体が希望なので、
そちらをスクリーンショットに撮りました。

トップページと個別記事のカスタマイズしたい箇所を、スクリーンショットに取ったので
こちらでご確認お願い致します。
(カスタマイズしたいところが増えまして…、リボンの件もし変更可能ならうれしいです。お手数をおかけしますがどうぞよろしくお願い致します)

●トップページ
https://blog-imgs-122.fc2.com/m/o/m/momongashop/180825.jpg

●個別記事ページ
https://blog-imgs-122.fc2.com/m/o/m/momongashop/1808252.jpg

●ウィンドウサイズが小さくなったとき
https://blog-imgs-122.fc2.com/m/o/m/momongashop/1808253.jpg

それぞれ閲覧している条件が違うので、スクリーンショットを添えるというのは確実ですね。
ひとつひとつ勉強になります!

以上、どうぞよろしくお願い致します。

Akira  

2018/08/25 (Sat) 18:11
vanillaice (Akira)

To 村上みのりさん ②

お疲れ様です。

Velonicaの欧文書体(Lato)とHymnの欧文書体(Work Sans)を交換、さらにVelonicaの明朝体指定を辞めてヒラギノ角ゴシックで統一、ということで合ってますでしょうか。
html内の

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato%7CFanwood+Text">

赤字部位を変更して以下の通り。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans">

CSS内
/* 注)記事内基本フォント関連 */ で検索、フォント指定を以下の通り変更。

font: 1.4rem/1.9 'Work Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴシック', 'Hiragino Sans', '游ゴシック体', 'YuGothic', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', sans-serif;

CSS内以下の2箇所のfont-familyの一行を削除。

#header-wrapper
.ribbon


CSS内以下の3箇所のfontの一行を削除しそれぞれ内容を追加。

.another-title
追加
font-size: 16px;
line-height: 1.4;


.side-menu h4
追加
font-size: 13px;
line-height: 1.4;


.end
追加
font: 12px;
line-height: 1.3;



-------
ブログタイトルフォントの大きさ変更は
#blog-titlefont-size: 24px;
説明文の方は
#site-descriptionfont-size: 12px;

赤字部位をそれぞれ変更


------
スマホ幅での余白
左右余白は
#wrapper のmax-width: 1090pxの分岐(ブレイクポイント)内の
padding: 0 10px;

0が「上下」10が「左右」の指定です。
ただし余白を増やした場合320pxデバイスの方にとってはとても見辛いものになるかもしれません。

------
で、申し訳ないのですが個人カスタマイズのお手伝いを1から10までつきっきりでサポートするわけにはいきません。
今回のような移植については双方のテンプレートを確認する必要があり手間が二倍です。
リボンの変更についてもhtml, JS, CSS全てに修正が必要ですが、希望の状態があるのならばそのテンプレート内容と比較しながらご自身でお願いします。
(修正箇所はhead内の
function nw(n,e,a,w)
の文字列を含むJS内容及び .ribbon のクラス名CSS内容削除、他テンプレート .newのCSS内容移植及びCSSアニメーションの追加)

また、カスタマイズについては記事内にあるように予めガイダンスも付けてあります。
一度請け負ってしまうと次々に希望者が現れてしまいますので申し訳ありませんがこの辺で。
すみません。

村上みのり  

2018/08/25 (Sat) 18:36

To Akiraさん

Akiraさま

まずは自分でやってみることをせず、頼りぱなしで大変申し訳ありませんでした。
今後はこのようなことがないようにします。

図々しくたくさん質問したのにも関わらず、詳しく回答して下さって、
本当にありがとうございます…。
貴重なお時間をいただいてしまい、
何度もお手数をおかけしてすみませんでした。

いただいた内容とガイダンスを参考に、カスタマイズしていきます。
ご対応いただき、どうもありがとうございました。

Akira  

2018/08/25 (Sat) 20:09
vanillaice (Akira)

To 村上みのりさん

いえいえ。ちゃんとご自身で行われた作業内容も記して頂いてますし、大変丁寧にお尋ね頂いているので申し訳なく思います。
頑張ってくださいね。

-  

2018/09/03 (Mon) 12:30

管理人のみ閲覧できます

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

Akira  

2018/09/04 (Tue) 00:10
vanillaice (Akira)

To Velonica個別記事ページ送りの件 内緒さん

こんばんは ('0')/

こちらについては「何を基準としてprev, nextを定義するか」によります。
ブログのデフォルトは新しい順が基本なので、新着順とは左から順に並ぶことになります。
仮に 記事1(最新), 記事2, 記事3 とします。
記事2を起点として「前」は並びで言うところのprevです。ということは記事1です。
同じく2を起点として「後ろ(次)」は並びで言えばnextです。

時系列を基準とした場合、記事2の前(時間的に)がprevですから「2よりも古い記事(=記事3)」です。
nextは新しい記事であるところの1がnextですね。

内緒さんが基準としているのは後者の「時系列」です。
テンプレートのデフォルトは前者の「並び」です。
理由は右と左にボタンがあるページに「次のページへ進んでください」とあったならば大抵の方が反射的に「右にあるボタン」を押し、「前のページへ戻ってください」とあれば反射的に「左にあるボタン」を押すからです。
これはスマホのスワイプによる履歴を繰る際にも同じです。なので右をnextとしています。
左が「新」右が「旧」
左が「戻る(前)」右が「進む(次 or 後ろ)」
の法則です。
どちらが正しいとかではなく、また日本だけでなく海外でも同じ議論は常に行われています。
が、デフォルトでは大勢の直感を採用しています。

修正される場合には
<!-- 個別記事用ページナビここから -->

<!-- 個別記事用ページナビここまで -->
に挟まれている内容の
<!--preventry--><!--nextentry--> を入れ替え。
<!--/preventry--><!--/nextentry--> を入れ替え。
<%preventry_url><%nextentry_url> を入れ替え。
Prev entryNext entry のテキストを入れ替え。
<%preventry_title><%nextentry_title> を入れ替え。

混乱を招くと思われるようであればprev, next ではなく new, old の表記に変更するのも一つの手かと思います。
その場合には右が「old」になりますね。そして上記のようにたくさんの入れ替えではなく4つ目のテキストのみ変更(入れ替えでなく表記変更)だけで済みます。
(ただし時系列についてはブログ個人設定によります)
よろしくお願いします。

-  

2018/09/04 (Tue) 10:02

管理人のみ閲覧できます

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

Akira  

2018/09/04 (Tue) 18:20
vanillaice (Akira)

To Velonica個別記事ページ送りの件 内緒さん②

こんにちは (o'ω')ノ

ちょっと上記内容は一旦頭の中で破棄して頂いて、考え方と方針をまとめたいと思います。

-----
表記(表現)が問題である場合

感覚的に
左 = 新しい
右 = 古い
というのがほとんどの方が持つ直感的な配置である、というのは既に述べました。
内緒さんの思考ではどうでしょうか。
ここが同じ感覚だとして
prev = 時系列が「前」
next = 時系列が「後」
であるならば、prev, next のテキストを入れ替えるだけで十分だと思います。
つまり右にprevボタンがあり、押すことで感覚的には「右」へ移動、つまり「古い方」へ移動します。
左はnextで「左」の「新しい方」へ移動。
これが方法①です。

もし内緒さんの思考で
next = 新しい
prev = 古い
が強く結びついており、かつ nextは「右である」という考え方も同様に強く感じるのであれば、以前のコメントで記したような「リンクの入れ替え」を行う必要があります。
つまり左にある「prev」を押すと「古い方」へ。
右の「next」を押すと「新しい方」へ。
つまり配置的には「右へ行くほど新しい」ということになります。
これは多くの方にとって逆の感覚です。これが適当と思われるコンテンツは「小説」「漫画」などが該当します。
(古い順から新しい方へ進める方が妥当であるため)
でもブログというのは通常新しい方から古い方へ読み進めるのがデフォルトで、FC2に限らずAmebaも右を「次のページ」としていますし、エキサイトなどほとんどのブログサービスが「右にnext, 右クリックで古い記事へ移動」になっています。

なので後者はおすすめはできないんですね (´・ω・`)
個別記事だけでなくトップページを考えても、Velonicaは要約記事タイプですから左上から右方向に向かって古くなっていき、ページ送りの「next(右矢印)」は古い記事への移動です。
繰り返しになりますが「小説」「漫画」の類であればそれで良いんです。ただしその場合にはブログ個人設定で記事の表示順序を更新順とは逆に設定する のが条件です。
でないと閲覧者は混乱してしまいます。
webページの左上はスイートスポットなので最も鮮度の高い内容を持ってくるのがベスト。その思考でいくとやはり「更新順、右に行くほど古い」という感覚に根差すことになります。

------
上記内容を踏まえた上で、おすすめは テキストのみを 右にprev 左にnext と入れ替える ことです。
あるいはいっそ 右にold 左に new ですね。こちらの方が閲覧者の直感を妨げない表記ではないかと思います。
要するに「右に行くほど新しい」という感覚を持っている方は少数派だということです。

それでもやはり入れ替える必要があると思われる場合はhtml内の
<!--preventry--> の2箇所を <!--nextentry--> に
<!--nextentry--> の2箇所を <!--preventry--> に
<%next_url> の1箇所を <%prev_url> に
<%prev_url> の1箇所を <%next_url> に
Next entry の1箇所(テキストです)を Prev entry に
Prev entry の1箇所(テキスト)を Next entryに
<%nextentry_title> の1箇所を <%preventry_title> に
<%preventry_title> の1箇所を <%nextentry_title> に
<!--/preventry--> の2箇所を <!--/nextentry--> に
<!--/nextentry--> の2箇所を <!--/preventry--> に

上記全て入れ替えを行ってください。
テキストのみを変更する場合(推奨)にはNext entry と Prev entry を入れ替えてください。
よろしくお願いします。

-  

2018/09/04 (Tue) 21:56

管理人のみ閲覧できます

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

Akira  

2018/09/05 (Wed) 00:59
vanillaice (Akira)

To Velonica個別記事ページ送りの件 内緒さん(完了のご報告)

修正できたということで安心しました。
こちらこそ根気よくお時間頂きました。お疲れ様でした

コメント投稿

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)