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

投稿 2017年11月07日
59
テンプレート
HTML5CSS3RWD
Hymnテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.1.20

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みを導入しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップのシンタックスをJSON-LDに変更しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

名称 Hymn
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大810px
サイド --- 320px
記事内で利用可能な見出しレベル h2からh6
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト)
BlogPosting
GTmetrixスピードスコア
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 左右カラム入れ替え
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
右サイドメニュー 下 or 右サイドメニュー
(デバイス幅依存)
下サイドメニュー

スマートフォンのフローティング広告が少しづつ少しづつ悪質になっていく (´・ω・`)
以前は画面の半分より下あたりから降りてきていたように思いますが、今は半分よりも上から降りてくる。
しかも下部に到達するまでの秒数も増している。
誤タップ率高すぎ。

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

TOP PAGE DEMO
ARTICLE DEMO
FAQ
DOWNLOAD

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
・テンプレートと無関係なプラグインの導入

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

全体幅調整の仕方
How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。

左右カラム入れ替えの仕方
How to reverse the direction of rows
#main-container

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

flex-direction: row-reverse;

続きまして検索。

#primary

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

margin-right: 50px;

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

ナビゲーション
Important thing to be careful when adding links to navigation

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

navi breakpoint

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

(max-width: 850px)

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

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

ドミナントカラー
Dominant colors

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

rgb(153,153,153) 基本リンク色 など
rgb(250, 250, 250) ナビゲーション背景色 など
管理人コメントと訪問者コメントを分ける方
The way to identify admin comments

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

サンプル

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

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

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

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

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

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

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

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

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

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

CSSソース内に一部変な指定がありますが Microsoftブラウザ(IE11, Edge)用のhackですので消去しないようお願いします。
もういっそマイクロソフトごと消えてなくなれ ←

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

59 COMMENTS

There are no comments yet.

べえ  

いつもお世話になっています。

このテンプレート、すっきりしていて良いですね。見出しの問題もあるので、Velonica からこちらに今から移行してみます。

2017/11/07 (Tue) 19:55

Akira  

To べえさん

いつもありがとうございます

「見出し」で思い出しましたが、記事内で使える見出しレベルを書こうと思って忘れてた ^^;
ちなみにHymnのナビゲーションの高さは40pxですので、見出しリストのJSを移設する際にスムーススクロール部分の数値をチェックしてくださいね。

2017/11/07 (Tue) 20:05

黒猫  

こんばんは!

こういうシンプルなテンプレートは好きです!
切り替えるかどうかは検討中です(^-^;
(まだ確定ではありませんが時間的に余裕が出てきたら変えたいと思っています)

話は変わりますがこの前の目次の記事のコメントでh1タグを結構いじっている人がいて笑ってしまいました(^-^;

色々と勉強になりました!

2017/11/07 (Tue) 22:12

べえ  

ナビゲーション

こんにちは。

下にスクロールするときにナビゲーションが消えて、
上にスクロールするときにナビゲーションが現れるのは
仕様でしょうか?

そのため、目次のジャンプで位置がずれてしまいます。

https://beebaku.blog.fc2.com/blog-entry-1244.html

2017/11/08 (Wed) 00:01

Akira  

To べえさん

ごめんなさい。そうでした。
こちらはスマホでの閲覧時に画面を奪わないよう、下向きスクロールでは引っ込んで上向きスクロール時に出てくるナビゲーションにしたんでした。

変更する箇所は同じですので、以下の内容に差し替えてください。

$('#toc a').click(function(){var a=$(this).attr("href");var b=$(a=="#"||a==""?'html':a);var c=b.offset().top;$("html, body").animate({scrollTop:c},800,"swing");return false});$('.back-toc a').click(function(){var a=40;var b=$(this).attr("href");var c=$(b=="#"||b==""?'html':b);var d=c.offset().top-a;$("html, body").animate({scrollTop:d},800,"swing");return false})

よろしくお願いします。

* 上向きと下向きで処理を分けていますので、テンプレートに元々入っているスムーススクロールの処理(除外指定)を確実に行なってください。

2017/11/08 (Wed) 01:14

Akira  

To 黒猫さん

黒猫さん、こんばんは ( ゚Д゚)ノ

そうなんです。同じ方が結構多かった ^^;

はい。機会があればご利用ください。
いつもありがとうございます

2017/11/08 (Wed) 01:15

べえ  

ありがとうございます

上手く動作しました。ありがとうございます ^^

2017/11/08 (Wed) 07:11

Akira  

To べえさん(完了のご報告)

べえさん、こんにちは ( ゚Д゚)ノ

またしても二度手間になっちゃってごめんなさいね。
気を利かせて40pxとお伝えしたつもりが全然足りてなかった(笑)

2017/11/08 (Wed) 13:39

べえ  

移行完了

こんにちは。やっと移行が完了しました。

今回はh3からh2、h4からh3への記事の書き換えと言う難関があり、上手く移行できるかどうか心配でしたが、FC2のデータバックアップツールで、全データをダウンロードしてから見出しを使っている記事を検索することで確実に移行できました。バックアップしたデータを書き換えてアップロードする勇気はありませんでしたが、可能だったのかな?

2017/11/09 (Thu) 23:20

Akira  

To べえさん

べえさん、こんにちは (o'ω')ノ

インポートはもうにっちもさっちも行かなくなった時の最終手段だと考えた方が良いと思います。
これまでのログのURLが狂ってしまいます。
(欠番が詰めて埋められるため)
ですから面倒ではありますが、一つ一つ修正して「更新」という形がベストだと思いますよ。インポートによる「新規投稿」ではなく。
お疲れ様でした

2017/11/10 (Fri) 15:17

匿名くん  

FC2動画の埋め込みが表示されません

はじめまして。
このテンプレートについてご質問があります。

該当のブログはこちらです・
http://testsite20180129.blog.fc2.com/blog-entry-1.html

●質問内容
PCでサイト表示したときにFC2動画の埋め込みだけ表示されません。
youtubeの埋め込み動画は無事に表示されるのですが、
FC2動画だけがダメです。
更に、スマホであればFC2動画も表示されます。

PCでもFC2動画の埋め込みを表示させたいので
改善方法を教えてもらえないでしょうか。

とても綺麗なデザインでレスポンシブで大変感謝です。
良ければお答え頂けますようお願いいたします。

2018/01/29 (Mon) 22:10

Akira  

To 匿名くんさん

ありがとうございます ( ゚Д゚)ノ

> PCでサイト表示したときにFC2動画の埋め込みだけ表示されません。

まず最初に「PCでサイト表示したときに」とありますのでスマホ専用版を併用されているという解釈でよろしいでしょうか。
Hymnはレスポンシブテンプレートですのでスマホ版は不要です。
理解した上で敢えて設定しているのであれば強制は致しません。

今更だけど「レスポンシブ」ってなんぞ?
https://vanillaice000.blog.fc2.com/blog-entry-491.html

------
本題です。
原因はスクロールアンカーとの衝突です。
実際にはJS内容というよりもJSで付加されるtransformというCSSプロパティの方ですが。

スクロールアンカー不要の方ここから削除
で検索されまして該当部分を削除してください。
FC2動画はスクリプトを利用して表示していますのでこれしか方法がないですね。すみません (´・ω・`)

2018/01/29 (Mon) 23:37

匿名くん  

No titleTo Akiraさん

Akira様
ありがとうございます。
本ブログ(掲載したテストブログとは別)で
テンプレートを編集したところ無事PCでも表示されました!

ご忠告ありがとうございます。
スマホの方は無しにしております。

こんなにも早く対応して頂き、感謝です!
ありがとうございました(_ _)

2018/01/30 (Tue) 01:36

Akira  

To 匿名くんさん(終了のご報告)

いえ。こちらこそ教えて頂かなかったらずっと知らないままでした ( ̄∀ ̄;)
ありがとうございます。お疲れ様でした

2018/01/30 (Tue) 02:11

あーたろう  

記事内リンクについて

こんにちは。素敵なテンプレート、ありがとうございます。
とても気に入っています。
そして、今回は2回目の質問です。

記事内でURLリンクを貼ると、何故か自分のホームページのトップページに返されてしまう不具合があって困っています。

URLを挿入するときは、例)AAAのように飛びたいリンク先アドレスを入れています。
実際にページをアップすると、リンク名が例)https://oyakoryugakumalta.blog.fc2.com”AAA”のように、自分のトップページがついてしまいます。

httpで始まるリンクや、.comで終わるリンク先の場合は問題なく指定したリンク先に飛べるのですが、それ以外のリンクの場合に不具合が起きてしまいます。

もしかすると、テンプレートを少し書き換えた際に、いじってはいけない所を変えてしまったのかもしれません。
何か解決する方法がありましたら、是非ご教授をお願い致します。

お手数をおかけして申し訳ございません。

2018/02/04 (Sun) 16:29
vanillaice (Akira)

Akira  

To あーたろうさん

こんばんは。
すみません。できればその現物が乗っているページURLを頂けないでしょうか。
でないと私が対象を自分で探さなければいけませんので (´・ω・`)

最新記事の記事したのリンクだと仮定しますね。他の部位に関しては探していません。

公式URL
<a href="アドレス/" target="_blank" title="Maltese" carnival="" 2018”="">Maltese Carnival 2018</a>

赤字部分全て不正な文字列です。半角ダブルクォーテーション(")の間に全角ダブルクォーテーション(”)を入れてはいけません。
正しいa要素 ↓

<a href="アドレス" target="_blank" title="タイトル">テキスト</a>

参考記事: レイアウトを崩してしまうhtmlの凡ミスいろいろ
https://vanillaice000.blog.fc2.com/blog-entry-593.html

イベント詳細URL
こちらも同じことが言えますが、さらにhref内の文字列はページURLではありません。
これは拡張子 .docx ですからwordなどのファイル保存用拡張子です。
これをクリックした閲覧者はファイルをダウンロードすることになってしまいます。
意図せぬダウンロードは相手方の不信を招きますのでしっかりと内容を確認してください。

よろしくお願いします。

2018/02/04 (Sun) 17:53

あーたろう  

To Akiraさん

いつも迅速かつ分かりやすいフォローありがとうございます。
教えて頂いた最新記事の件で、全て解決致しました。

全角と半角の凡ミスだったことが判明し、無事に修正することが出来ました。

また、意図せぬダウンロードは不信を招くとのこと、知識不足で申し訳ございません。。
勉強して読者の方に役立つブログの運営を心掛けます。
ありがとうございました。

2018/02/05 (Mon) 00:19
vanillaice (Akira)

Akira  

To あーたろうさん(完了のご報告)

修正できたようで安心しました。
そうですね。大抵の方はリンクを押すとページ遷移かページ内移動のいずれかだと思っていますので、いきなりダウンロードが始まると戸惑うし疑うと思います。
一言「ダウンロードが始まります」と注意書きがあれば別ですけどね。

お疲れ様でした

2018/02/05 (Mon) 00:58

よしあき  

Garaging Day's

はじめまして、素晴らしいテンプレートありがとうございます!
すごくシンプルで使いやすいので早速お借りしております。

少し質問させてください。
一点目なんですが、例えばこの Hymmのテンプレートの
ブログタイトル部分に画像を挿入なんてことは可能なのでしょうか?
素人質問で申し訳ありません。
それと、以前のテンプレートの時から記事の最後に
張り付けてありました、はてなブックマークのボタンが
表示されなくなっていますが、これは何か理由がおありなのでしょうか?
レスポンシブ対応ということでスマホにも同じテンプレート設定を
させていただいているのですが、スマホの方には はてなブックマークボタンは
表示されています。特に必要というわけでは無いのですが、
ふと どうしてなのかなぁと思いまして。
不躾な質問で申し訳ありません。
宜しくお願い致します。

2018/02/24 (Sat) 16:31
vanillaice (Akira)

Akira  

To よしあきさん

ありがとうございます (o'ω')ノ

> ブログタイトル部分に画像を挿入なんてことは可能なのでしょうか〜

可能ですがレスポンシブデザインですので作成の際には注意してください。
背景画像の有る無しにもよります。

参考記事:
ヘッダー背景画像カスタマイズ時の考え方
https://vanillaice000.blog.fc2.com/blog-entry-566.html

ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】
https://vanillaice000.blog.fc2.com/blog-entry-569.html

背景の組み合わせが必要な場合には上記記事を参照してください。
ロゴ自体についてもこれから作成される場合には以下の点に留意してください。
・ 横幅は最低でも640px必要(スマホ最小横幅320px及び高解像度ディスプレイに配慮)
・background-imageではなくimg要素で入れてalt属性を必ず書く
・画面幅に応じて伸縮することを想定する

固定幅のように簡単にはいきませんので事前にお伝えしておきます。

-------
> はてなブックマークのボタンが表示されなくなっています〜

はてブのAPIとテンプレートのスクロールアンカーJSとが衝突しています。
アンカーを無くせば表示されるようになります。
<!-- 注)スクロールアンカー不要の方ここから削除 -->
を目印にガイダンスに従ってください。
お手数おかけします。よろしくお願いします。

-------- 追記
既に作成済のentry-81.htmlに掲載されている画像をご利用でしょうか。
その場合にはちょっとサイズが足りない気がしますが(高解像度ディスプレイのパソコンでは「ぼやけ」ます)、

<a href="<%url>"><%blog_name></a>

という箇所がありますので以下の通り修正

<a href="<%url>"><img src="画像アドレス" alt="ブログ名"></a>

これでOKです。
alt属性の「ブログ名」の部分はブログのタイトルに置き換えてください。

* ブログ用のロゴはブログ背景色に左右されないよう背景透過PNGで、そして長辺1000px以上で作成されることをおすすめします。


--------
別件でひとつ気づいたのですが、サイドメニューにある「読者登録」のinput要素とコメント投稿フォームのinputのID名が重複(duplicate)しています。
ID重複自体も良くありませんが、inputは他要素との紐づけをしなければいけませんので特に良くないですね。
読者登録の方を変更するのは大変でしょうからテンプレート内で

id="url"

で検索されますと2箇所出てきますので url を別の内容に置き換えてください(2つ共同じ名称でOKです)
例えば id="url2" とか。
ただこれ別のテンプレートに変更された際にはまた恐らく重複になります。
製作者問わず大抵のテンプレートはこの部位に url というIDを割り当てているからです。
(公式テンプレートと公式のJS内容に寄せるため)

2018/02/24 (Sat) 18:21

よしあき  

To Akiraさま

!!!!
なんというご対応の速さ!
他の注意点まで 的確にご指示いただきまして!
ありがとうございますーーー!!!!
Akiraさま もう勝手に女神とよばせていただきます!

すみません。感激しすぎて話ソレました。

なるほど、画像挿入に関しては僕のように
CSSを少しいじるぐらいのスキルでは 敷居が高いですね。
Akiraさんのブログを読ませていただいて 勉強します!

その他 ご指摘いただいた部分の書き換えは
出来そうなのでやってみます。

数年後には 
Akiraさん・・・もとい
女神のテンプレートを使わせていただいている
代表のようなブログになるように頑張ります!

本当にありがとうございました。

2018/02/25 (Sun) 07:24
vanillaice (Akira)

Akira  

To よしあきさん

いえ。そんな良いモンではないです ^^;

よしあきさんは元々スキルをお持ちですので、新たに作るにしても造作ないことだと思います。
既にあるデザインをPNG化・もう少し大きめにする、というだけで十分ではないかと。
(表示の調整はCSSの方でできます)

こちらこそありがとうございます

------ 気づかれるかどうかわかりませんが追記

レスポンシブに関する記事内容に気づけば良かったのですが、例えにされている公式ブロガーの方はレスポンシブデザインではありません。
ご本人もレスポンシブだと思っているフシがありますけれど、残念ながら違います。
ただ単に「PC版とスマホ版のデザインがお揃い」というだけです。
誤解を生まないようお伝えしておきますね。
よろしくお願いします。

2018/02/25 (Sun) 16:00

よしあき  

To Akiraさん

今、気が付きました!
えーーーーそうなんですかー???
素人のパッと見 完全にレスポンシブデザインだと思いました。

それにしても、ブログのデザインって
本当に大切なものですねー。
それだけで読者さんが引き込まれるかどうかさえ
決まってしまう場合がありますもんね~

自分だけの お洒落なデザインのHP!
憧れます。。。
もっと勉強せねば・・・

ありがとうございます!!!

2018/03/06 (Tue) 17:27
vanillaice (Akira)

Akira  

To よしあきさん

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

そうですね。一見して気が付きにくいですよね。
取り敢えず返信内容に気づいて頂けて良かったです(笑)

2018/03/06 (Tue) 19:48

なつ  

質問です。

こんにちは。
先日FC2より、とっても綺麗なテンプレートなので使用させて頂いております。
ありがとうございます。
今日は質問がありコメント致しました。
HOME画面の上部にあるバーの、ABOUTの中に、紹介文を入れるにはどうしたらよいですか?
それから、同じくHONE画面の記事項目の中にある、SNSのリンクアイコンを消すにはどうしたらよいでしょうか?
因みに、文章の中のリンクアイコンは消せました。
ご返答を、よろしくお願いいたします。

2018/03/07 (Wed) 13:39
vanillaice (Akira)

Akira  

To なつさん

ありがとうございます (。・w・。)ゝ

> ABOUTの中に、紹介文を入れるにはどうしたらよいですか?〜

こちらはグローバルナビゲーション(リンクの集合体)ですのでテキスト掲載ではなくページ遷移を促すリンクを設定する箇所です。
FC2ブログではいわゆる「固定ページ」はありません。
(プロフィールやブログ説明の専用ページなど)
なのでaboutに該当する内容を「記事」としてアップして頂き、そちらのURLを入れて頂く形になります。
あるいは他サイトなどをお持ちであればそちらへの誘導としてもお使い頂けます。
リンク設定の仕方は記事内の説明にある通りです。

------
> SNSのリンクアイコンを消すにはどうしたらよいでしょうか?〜

sns-navigation-ul
で検索されますとhtml内に1箇所出てきます。
その近接(下)に
<li>
という要素が一行づつあります。不要なものを行単位で削除してください。
(上から4つ目までがSNSリンクに相当します。)
文字列の折り返しがありますので「行」がわかりづらいかもしれません。その場合には対象の <li> から次の <li> の直前までが同じ行です。
4つ目のli要素は <!--not_permanent_area--> の直前までが同要素ですので <!--not_permanent_area--> を削除しないようご注意ください。
個別記事へのリンク(矢印アイコン)もろとも不要という場合には
<!-- 注)記事下SNSシェアボタン不要の方ここから削除 -->
を目印にガイダンスに従ってください。

カスタマイズされそうな項目については記事内にある通り
注)
で検索されますとガイダンスが出てきますので事前にご確認を。

よろしくお願いします。

2018/03/07 (Wed) 15:39

なつ  

ありがとうございます。

ご返答ありがとうございます。
ABOUTにつきましては、記事のリンクを致しました。
ありがとうございます!
リンクアイコンにつきましては、教えて頂いた、sns-navigation-ul の検索の仕方が分からず、目で追って行きましたが、どこにあるものなのか見つけられませんでした(><)。
そのままでもいいかなと思いましたが、検索とは、どうするのですか?
分かればやってみたいと思います。

2018/03/07 (Wed) 16:49

なつ  

出来ました。

sns-navigation-ul、見つかりました。
何とか出来ました!
ありがとうございました。

2018/03/08 (Thu) 10:11
vanillaice (Akira)

Akira  

To なつさん

こんにちは。
お出来になったということで良かったです。
webページ上での文字列検索は Ctrl+F(Windows)/ Command+F(Mac)キーを利用すると便利ですので覚えておかれると良いですね。
お疲れ様でした

2018/03/08 (Thu) 15:05

ホピオ  

コメント欄に関しまして

こんにちは。
新しくこちらのテンプレートにしようと思ってます。
1つ質問なのですが
コメント欄が最初からオープンになってますよね。
それを最初はクローズになってるんですが
オープンとかいう文字をクリックしたら下にそのまま出てくるようにできますでしょうか?
そしてクローズとか言う文字文字をクリックで見えなくなる。

意味がわからなかったらすいません。
m(_ _;)m

宜しくお願いいたします。

2018/03/09 (Fri) 17:12
vanillaice (Akira)

Akira  

To ホピオさん

こんにちは ('0')/

開閉(展開)にしたい、ということでしょうか。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-487.html

JS及びhtmlの追加が必要ですのでご自身でカスタマイズをお願いします。
注意点としてはプラグインの「最新コメント」をクリックしても該当コメントへの位置合わせが行われません。
また、閉じていることに気づかないユーザーさんも出てくると思いますのでコメント受信の機会は減るかもしれません。
よろしくお願いします。

2018/03/09 (Fri) 17:18

ホピオ  

No titleTo Akiraさん

さっそくのお返事本当にありがとうございます。

今のブログのデザインからどうしてもこちらに変えたいと思ってたので。
お返事もらえてうれしいです。

そうですね。開閉(展開) と書けばよかったですね
m(_ _;)m

記事を参考にさせていただいて
やってみようと思います。

ありがとうございました。

2018/03/09 (Fri) 17:24
vanillaice (Akira)

Akira  

To ホピオさん

はい。クラス名指定だけ指定箇所だけ気をつければ実装できると思います。
ガンバです ('0')/

(クラス名関係なかったので訂正です。ごめんなさい)

2018/03/09 (Fri) 17:27

-  

管理人のみ閲覧できます

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

2018/03/28 (Wed) 23:50
vanillaice (Akira)

Akira  

Yahoo!ブラウザの件 内緒さん

こんばんは。
まずお約束に則ったご質問をお願いしたいところですが、明らかな表示不備があるということと私の方でYahoo!ブラウザの検証はできませんので、致し方ないパターンとさせてもらいますね。
(ご質問時には該当テンプレートを設定状態にして頂くことをお願いしています。カスタマイズの作用等の判断が困難になるためです)

YmobileのAndroidとのことですが、AndroidOSが不明である点、Android機のデフォルトブラウザはあくまでもChromeである点などに加え、繰り返しになりますが私の方では検証が叶いません。
(iPhoneは既にYahooブラウザの提供は終了しています)

レンダリングエンジンやOSの問題かもしれませんし、機種固有バグあるいはもしかしたら遅延読み込みが影響している可能性もあります。
申し訳ないのですが

① 全文
https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45923
② 要約
https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45890

上記2つのテンプレートをプレビューして頂きまして、双方に問題が生じるのかそれともいずれか一方だけなのかお知らせ頂けると助かります。
②だけの場合には遅延読み込みが関係していると判断できるかと思います。
その場合には遅延を排除して通常の読み込みを行う形に修正を行なって頂くことになります。
(その際には当然ですがページ表示スピードは落ちます)
お手数おかけしますがよろしくご協力をお願いします。
(AndroidOSのバージョンもお知らせください)

また、yahooブラウザの特徴として
・メモリ解放、メモリ最適化
・JS無効
などがあると思いますのでそちらの確認もお願いします。
(特殊な機能はOFFにして頂いた方が良いと思います)

2018/03/29 (Thu) 02:53

-  

管理人のみ閲覧できます

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

2018/03/29 (Thu) 08:59
vanillaice (Akira)

Akira  

Yahoo!ブラウザの件 内緒さん②

お手数おかけしております。

ではanimationCSSの解釈で間違いないと思います。
ショートハンドでの記述は正しく書いても誤解釈するブラウザがありますので、わざわざ分けて書いたのですがそれが却って良くなかったのかもしれません。

body {

で検索すると3つヒットします。最初のものが対象です。
その括りの中に
opacity: 0;
というのがありますので、これを含まず。その下にある7行を一旦削除してください。
削除した箇所に

animation: fadeIn 1s ease-in forwards;

を追加。
消去した内容と全く同じCSS指定ですがこちらはショートハンドです。
それでもダメな場合にはanimationの削除しかありません。
その場合には先程の7行を削除し、目印にした opacity: 0; も削除してください。

--------
> 古いタブレットにYahooブラウザをダウンロードして見てみたところ、不具合が出ませんでした〜

OSバージョン名などのご協力ありがとうございます。
で、私書き忘れましたがAndroidの方は「機種名」も教えて頂きたいんですね。
OS名ではなく機種名。iPhone6, Xperiaとかそういうのです。

というのはAndroidはご存知の通りGoogleのスマホOSですがAppleのiPhoneと違い仕様の統率がされていません。
iPhoneのiOSはApple独占OSですから「器(ガワ)」になるのもApple社製のiPhone以外には存在しません。
ですがAndroidの場合には例えば富士通であったりソニーであったりと、ガワの製造メーカーがたくさん存在するわけです。
ですから機種固有バグの可能性もiPhoneと比べて遥かに高くなります。
そしてiPhoneの場合、デフォルトブラウザはSafariで他に第三ブラウザの利用もできますけれど、実際にはどのブラウザを利用してもレンダリングエンジンは全てwebkitで統一されています(Appleがそう縛っているから)
例えばChromeはBlinkエンジンですがiOS版Chromeはwebkitです。FirefoxもQuantumですがiOS版はwebkit。
Appleはそういう路線ですがAndroidはそうではないんですね。
ですから「機種固有バグ」「OSバグ」「各ブラウザの独自バグ」などの断定が非常に難しいんです。
Yahoo!ブラウザがiOS版を断念したのもwebkitベースでの開発を諦めたという意味だと思います(開発コスト・技術面両方の意味で)

ちょっとだらだら書いてしまいましたが、Androidのご質問をされる際には私に限らず機種名・OS名及びバージョン・他検証機種があればその情報も同じく詳細に
お伝え頂くことで質疑応答がスムースになるのではないかな、と思います。例えばQ&Aサイトとか。

-------
animationの操作で問題が解消されない場合にはその旨お伝えください。
よろしくお願いします。

-------
ごめんなさい。追加です。
yahooブラウザはwebkitエンジンではないと思いますが(情報が出てこないので不明です)、一応以下の内容も追加してください。

-webkit-animation: fadeIn 1s ease-in forwards;

整理します。
追加する内容は以下の通りで(順序もこのまま)

-webkit-animation: fadeIn 1s ease-in forwards;
animation: fadeIn 1s ease-in forwards;

2018/03/29 (Thu) 15:47

-  

管理人のみ閲覧できます

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

2018/03/29 (Thu) 19:04
vanillaice (Akira)

Akira  

Yahoo!ブラウザの件 内緒さん(終了のご報告)

こんばんは。
恐らくanimation-fill-modeの誤解釈または未実装が原因だと思います。
forwards値の解釈が上手くできずopacity操作を繰り返しているのではないかと。
そのため初期の値 opacity: 0; (完全透明)が再適用されてしまっているのかなと推測。

Androidが自由なのは良いのですがブラウザ間格差が生じますよね。
そういう意味ではAppleの独裁に反対ではありません(笑)
iPhoneも同じwebkitエンジンとはいえ各ブラウザの特徴・特色はありますのでもちろん独自バグあるいはグリッチというのはあるのですが。
それでも大きくかけ離れることは無いのである程度対処もできるんですけどね (´・ω・`)
Androidはその点が難しいですね。
いずれにしても正しい構文を解釈できないとなるとそれはグリッチか未実装という結論にせざるを得ませんので、個人カスタマイズ・個人レベルの対策ということでお願いします。
お手数おかけします。

* ちなみにforwards値が原因だとすると
opacity: 0;
の記述を外して
animation: fadeIn 1s ease-in;
を追加するという作業で上手く折り合いがつくかもしれません。
(ただし初回表示時に若干のチラツキは起こるかも)

2018/03/29 (Thu) 19:19

1010  

iPhoneでの初期表示

こんにちは。
テンプレートお借りしています。
このブログのどこかの記事で読んだ気がしたのですが、うまく探せなかったので質問させて下さい。

iPhoneで開いたときにアプリ風に見せるように作ってあると思うのですが、それをはずしたいと思っています。
<meta name="apple-mobile-web-app-capable" content="yes">
だけを外せばいけるかな?と思い消してみたのですが、どうも違うような雰囲気になってしまってまた復活させています。

すみませんが方法を教えて下さい。
よろしくお願いいたします。

2018/03/31 (Sat) 10:03
vanillaice (Akira)

Akira  

To 1010さん

こんにちは。

その記述はホーム画面に登録した際にのみ有効ですが、「ホーム画面に登録した時に」というのを前提としたご質問でしょうか。
1010さんの現時点での「何が問題で」と「どうしたいのか」が見えてきませんので何をお答えしたら良いのかがわかりません。
もう少し詳細な内容をお願いします。
端末のバージョン、OSのバージョンも併せてお願いします。

ホーム画面からアクセスした際にステイタスバーが必要である、という意味であれば該当metaの削除で合ってますが、ご自身が「これじゃない」と感じているということは違うんですよね (´・ω・`)

2018/03/31 (Sat) 11:26

1010  

解決しました

お手数をかけてます。
Akiraさんのブログだいぶ読んでいたつもりなのに、いざ自分が質問するとなると肝心な情報が抜けていて申し訳ないです。
iPhone8plusでiOSは11.2.6になっています。

やりたいこととしては
>ホーム画面からアクセスした際にステイタスバーが必要である、という意味であれば
これなのですが、該当部分を削除後、Safariの全タブを消去し、再度ホーム画面への登録を試してみたのですが、代わりがありませんでした。

iPhoneはこの機種が初めてでPCブラウザ等ではあるキャッシュのクリアも、消去されるのが閲覧履歴だけではないようで躊躇していました。

と、ここまで書いて、iPhoneを再起動してみたところ希望どおりの表示になっていました。
お手数をおかけしてもうしわけありまんでした。

2018/03/31 (Sat) 13:14
vanillaice (Akira)

Akira  

To 1010さん(完了のご報告)

Safariはキャッシュがかなりしつこいブラウザですのでそういったことも結構起こりますね (´・ω・`)
解決されたということで安心しました。
お疲れ様でした

2018/03/31 (Sat) 16:03

みなみ  

動画を中央に配置

お世話になっております
質問なのですが画像、文章、動画を中央に配置したく
<div style="text-align: center;">
<img src="アドレス" alt="">
</div>で使用していますが画像、文章は中央(center)になりますが
動画(FC2動画)だけは左になってしまいます。
動画を中央にできますでしょか?
宜しくお願い致します。
アダルトなので非表示でお願い致します。

2018/04/05 (Thu) 23:42
vanillaice (Akira)

Akira  

To みなみさん

こんばんは。

FC2動画はテンプレートとは何の関係もありませんので、当たり前のように聞かれると困ってしまいます。
FC2動画に行き、コードを取得し、仕様を確認し… すみませんが以後はご勘弁願います。

FC2動画はJSでの掲載です。吐き出されるコードには識別子が含まれませんので、以下の方法で。

[html]

<div class="xxx">
ここに埋め込みコード
</div>

[css]スタイルシート末尾に追加

.xxx div {
margin: auto !important;
}

xxx は任意文字列。
こちらの方法で生じた不備・不具合などの責任は取りません。事前にお伝えしておきます。
よろしくお願いします。

2018/04/06 (Fri) 00:33

みなみ  

ありがとうございます

<div style="text-align: center;">内容</div>
テキスト、画像、youtubeなどの動画はこれで移動できますとありましたので
できるかと思いまして。申し訳ありませんでした。以後気をつけます。

2018/04/06 (Fri) 00:50
vanillaice (Akira)

Akira  

To みなみさん

text-alignはdisplay値がinlineあるいはinline-blockなど旧htmlで言うところのインライン要素にしか使えません。
FC2動画はdiv要素(display値blockの代表)の中にiframeが入っており、iframe自体はインラインですがコンテナのdivのサイズとiframeのサイズは同等ですので結局のところはブロックです。
左に寄った横300pxの箱の中に300pxのモノ(iframe)が入っているわけですから、中央に寄せるには中のモノでなく箱自体を移動させる必要がある、という理屈ですね。
ブロックの位置はmarginでないと動きませんのでこの機会に覚えておかれると良いと思います。

2018/04/06 (Fri) 01:31

よしあき  

ADSENSE コード設置について

ご無沙汰しております!

Garaging Day's 管理者のよしあきです。
先日は レスポンシブについて いろいろと
ご教授いただきまして ありがとうございました!

今回 ちょっとお伺いしたいのですが
Goodle の dsense審査に通過しまして
広告を張ろうと思っているのですが
FC2ブログのフリーエリアに 広告コードを張り付けても
表示がされません??
HTMLの編集で広告を表示させようと思えば
どの位置にコードを張り付ければいいものなのでしょうか?
毎度 ド素人質問ですみません・・

もしよければお教え下さい。。

2018/05/12 (Sat) 06:07
vanillaice (Akira)

Akira  

To よしあきさん

こんにちは。お久しぶりです

サイドバーなどがスクロール画面外に流れていかないようにする(スクロールアンカー)ための位置指定を一般的に「sticky position (スティッキーポジション)」と言います。
(CSS用語で言うfixed, absolute, stickyなど全て含む)

GoogleAdsenseはこのsticky positionへの掲載がポリシー違反になりますのでhtml内にある
注)スクロールアンカー不要の方ここから削除
を目印にガイダンスに従ってアンカーの解除を行なってください。
当然ですがsticky状態にはならなくなりますが表示は行われるようになるはずです。

サイドメニューへの掲載もポリシー的な注意点があるはずなので
adsense サイドバー 規約
などで検索すると情報が得られるかと思います。
よろしくお願いします。

2018/05/12 (Sat) 13:07

よしあき  

To Akiraさん

早々のお返事
ありがとうございます!!

以前の はてブボタンの表示にも
ご指摘頂きましたので、
スクロールアンカーは削除させていただきましたー!
毎回毎回、ご丁寧なご指南に
感謝します!
また何かわからない事がありましたら
質問させていただきます。

ホントにありがとうございましたー!

2018/05/12 (Sat) 19:11
vanillaice (Akira)

Akira  

To よしあきさん(完了のご報告)

はい。いつでもどうぞ。
お疲れ様でした

2018/05/14 (Mon) 17:22

水海 月子  

No title

こんばんは。はじめまして、Akiraさんのテンプレートが好きで、その中でも一際シンプルなこのテンプレートを選んでカスタムさせていただいています。
質問なのですが、個別記事用ページナビの背景画像を変更することは可能なのでしょうか?
トップページのNo imageと同じ画像を背景に使いたいのですが、どこを変更すれば反映されるのか分かりませんでした。
お返事お待ちしております。

2018/07/30 (Mon) 20:16
vanillaice (Akira)

Akira  

To 水海 月子さん

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

トップページと個別記事は
https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/hymnnoimage.jpg
で検索されますとhtml内に2箇所あります。
(うち1箇所(トップページ)は既に変更済みだと思いますので残り1箇所)
このアドレスを差し替えます。

全記事リストは
注)全記事リストページ送り背景画像
で検索されますとCSS内に1箇所ありますのでアドレスを差し替えてください。
よろしくお願いします。

2018/07/30 (Mon) 22:08

水海 月子  

To Akiraさん-解決しました

基礎的な質問に、迅速かつ丁寧なご対応をありがとうございました。
無事変更することが出来ました。
これからもAkiraさんのテンプレートを使い続けたいと思います。
この度はありがとうございました。

2018/07/30 (Mon) 22:15
vanillaice (Akira)

Akira  

To 水海 月子さん(完了のご報告)

良かったですー。
こちらこそありがとうございます ('-'*)

2018/07/30 (Mon) 22:21

村上みのり  

commentの削除、余白について質問です

お世話になっております。
以前、Velonicaをお借りしていたのですが、
シンプルなデザインに惹かれ、先日からこちらのHymnをお借りしています。
いつもステキなテンプレートをありがとうございます。

自分なりに少しずつカスタマイズしているのですが、
個別記事のページについて、わからないところがあるので、質問させて下さい。
https://blog-imgs-111.fc2.com/m/o/m/momongashop/1049.jpg

1:コメントのアイコンを消したいです
…コメントを受け付けてない設定にしているのでカットしたいです。
 htmlとCSS内のcommentソースを消してみたらいけるかなと思ってやってみたのですが、
 レイアウトが崩れてしまいました…。
 どこを変更すれば反映されるのかお願いします。

2:写真と記事の余白を空けたいです
…多分、「individual article」のどこかだろうと思って数字を変えてみたのですが、
 該当する場所がわかりませんでした。
 こちらもどうぞよろしくお願いします。

お手数をおかけしますが、お時間があるときで結構ですので、ご回答よろしくお願いいたします。

2018/10/20 (Sat) 18:09
vanillaice (Akira)

Akira  

To 村上みのりさん

こんばんは。ありがとうございます ('0')/

> コメントのアイコンを消したいです〜

【処理①】
<div class="grid-comment">
で検索するとhtml内に1箇所あります。以下のキャプチャを見ながら該当箇所を 削除。

https://file.blog.fc2.com/vanillaice000/capture/capgridcm.png

こちらがトップページのコメントアイコンです。
続いて個別記事アイコンは

【処理②】
<div class="entry-header-content-box" id="entry-comment">
で検索するとhtml内に1箇所あります。こちらもキャプチャを見ながらどうぞ。

https://file.blog.fc2.com/vanillaice000/capture/caparticlecm.png

【処理③】
続いて個別記事アイコンのCSS修正です。
.entry-header-content-box
で検索するとCSS内に2箇所あります。まず最初の方の
width: calc(100% / 4);
4の数字を 3 に変更。

【処理④】
続いて2つ目は
@media screen and (max-width: 720px) {
.entry-header-content-box {
width: 50%;
}
}

こういう形になっていると思います。この内容を全て削除。
削除した後に以下の内容を追加

*::-ms-backdrop, .entry-header-content-box {
width: 33.33%;
}

IE用のフォールバックです(calc functionの解釈にバグがあるため)
IEを無視できるなら記述する必要はありません。

個別記事のコメントアイコンを削除するとスマホでの並びが3つ(著者, 投稿日, カテゴリ)になりますので、投稿日は折返しがかかり見づらいかもしれませんが、カテゴリだけを下にするより見栄えは良いと思いますので3つを並べるスタイリングにしてあります。
カテゴリが下へ繰り下がっても構わない場合には【処理④】の作業は行わずそのまま残してください。
よろしくお願いします。

注意) これらの修正後は仮に一部記事でコメント欄を開放した場合でもコメント数表示は行われませんので予めご了承ください。

2018/10/20 (Sat) 21:00

村上みのり  

To Akiraさん(作業終了のご報告)

いつも迅速なご回答、ありがとうございます!
早速書き換えたところ、うまくいきました。
キャプチャを付けて下さっていたので、すごくわかりやすかったです。
注意事項も了解しました。

細やかなご指導をいただき、どうもありがとうございました。

2018/10/21 (Sun) 01:33
vanillaice (Akira)

Akira  

To 村上みのりさん(完了のご報告)

こんばんは ('0')/

ごめんなさい。コメント見落としてお返事遅れてしまいました (*_ _)
修正できたということでお疲れ様でした :)

2018/10/22 (Mon) 02:15

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)