Velonica - FC2ブログテンプレート(配布終了 2021年9月5日)

Velonica - FC2ブログテンプレート(配布終了 2021年9月5日)

テンプレート 配布終了・旧作
2017/06/01
28
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD

配布終了致しました。ご利用ありがとうございました。Sorry, this theme is no longer being developed.

Velonicaテンプレート

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ
Related post

Comments  28

べえ
2017/08/04 (Fri) 01:24

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

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

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

vanillaice (Akira)
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くらいの画像を使った記事です。

vanillaice (Akira)
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

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

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

vanillaice (Akira)
Akira
2017/09/12 (Tue) 23:40

To べえさん

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

べえ
2017/09/13 (Wed) 21:06

できました

こんにちは。

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

vanillaice (Akira)
Akira
2017/09/13 (Wed) 21:25

To べえさん

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

村上みのり
2018/08/23 (Thu) 18:10

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

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

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

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

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

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:トップページのフォントを、ゴシックにしたい(個別記事のように)

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

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

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

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

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

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

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さま

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

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

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

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

To 村上みのりさん

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

-
2018/09/03 (Mon) 12:30

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

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

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

ろんだ
2020/12/01 (Tue) 12:05

はじめまして。ろんだと申します。
素晴らしいテンプレートありがたく使わせていただいております。

記事が増えてきて初めて気づいたのですが、トップページに記事が5個しか表示されませんでした。
デモを見ると12個は並ぶようなのですがその通りになりません。
HTMLは解析タグを入れるなどで少し弄らせていただきましたが、その際に余計なことをしてしまったかもしれません。
自分では解決できず質問させていただきました。
お手すきの時にお返事いただけますとありがたいです。よろしくお願いいたします。

vanillaice (Akira)
Akira
2020/12/02 (Wed) 00:28

To ろんださん

こんばんは ('0')/

記事の表示件数は個人設定を遵守しますので、ご自身で決定してくださいね。
設定ページ
https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2

「記事(PC ページ別)」の項目に希望する件数をご記入ください。よろしくお願いします :)

ろんだ
2020/12/02 (Wed) 11:37

To Akiraさん

Akiraさんこんにちは。
お手を煩わせて申し訳ありませんでした。私のほうで設定する項目だったのですね。
こちらの不勉強にもかかわらずお返事いただきましてありがとうございました。
おかげさまで設定できました。

vanillaice (Akira)
Akira
2020/12/03 (Thu) 22:36

To ろんださん

こんばんは ('0')/
いえいえ。お気になさらず。FC2ブログは設定項目が多いので把握が大変ですよね。
お疲れ様でした :)