attention admin about comments trackbacks you may also like

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

2017年11月07日
テンプレート
63
HTML5 CSS3 RWD
Hymnテンプレート

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

最終更新 2019.10.29
  • コメント主のリンク表示用JS及びデザインの変更
  • 独自クラス.curlのIE向け修正
名称 Hymn
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大810px
サイド --- 320px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.1 CSS)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス 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 下
(デバイス幅依存)
サイドメニュー --- 下
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author-->
<!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 5px 0 4px;
}
②について

#community" で検索するとhtml内に2箇所あります。2箇所とも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<div class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<div class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

#inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてスタイルシート末尾に以下を 追加

#inner-contents {
  margin: 20px 0;
}

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

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

履歴更新 2018.12.15
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • ページ表示直後のアニメーション秒数調整
  • サイドメニュー部プロフィール画像の幅制限解除(元画像依存, 最大値はサイドメニューの横幅と同等)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

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

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

最終更新 2018.1.20

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

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

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

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

現在ではフローティングが廃止され固定になりました(サイズは大きくなりましたが)

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

サンプル

Samples

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

カスタマイズのコツ

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

全体幅調整の仕方

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 { を検索、CSS内で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) ナビゲーション背景色 など

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(63)

There are no comments yet.

べえ

2017/11/07 (Tue) 19:55

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

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

Akira

2017/11/07 (Tue) 20:05

To べえさん

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

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

黒猫

2017/11/07 (Tue) 22:12

こんばんは!

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

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

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

べえ

2017/11/08 (Wed) 00:01

ナビゲーション

こんにちは。

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

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

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

Akira

2017/11/08 (Wed) 01:14

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})

よろしくお願いします。

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

Akira

2017/11/08 (Wed) 01:15

To 黒猫さん

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

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

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

べえ

2017/11/08 (Wed) 07:11

ありがとうございます

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

Akira

2017/11/08 (Wed) 13:39

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

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

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

べえ

2017/11/09 (Thu) 23:20

移行完了

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

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

Akira

2017/11/10 (Fri) 15:17

To べえさん

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

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

匿名くん

2018/01/29 (Mon) 22:10

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

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

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

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

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

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

Akira

2018/01/29 (Mon) 23:37

To 匿名くんさん

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

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

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

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

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

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

匿名くん

2018/01/30 (Tue) 01:36

No titleTo Akiraさん

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

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

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

Akira

2018/01/30 (Tue) 02:11

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

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

あーたろう

2018/02/04 (Sun) 16:29

記事内リンクについて

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

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

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

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

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

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

Akira

2018/02/04 (Sun) 17:53
vanillaice (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/05 (Mon) 00:19

To Akiraさん

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

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

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

Akira

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

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

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

お疲れ様でした

よしあき

2018/02/24 (Sat) 16:31

Garaging Day's

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

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

Akira

2018/02/24 (Sat) 18:21
vanillaice (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/25 (Sun) 07:24

To Akiraさま

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

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

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

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

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

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

Akira

2018/02/25 (Sun) 16:00
vanillaice (Akira)

To よしあきさん

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

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

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

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

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

よしあき

2018/03/06 (Tue) 17:27

To Akiraさん

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

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

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

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

Akira

2018/03/06 (Tue) 19:48
vanillaice (Akira)

To よしあきさん

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

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

なつ

2018/03/07 (Wed) 13:39

質問です。

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

Akira

2018/03/07 (Wed) 15:39
vanillaice (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) 16:49

ありがとうございます。

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

なつ

2018/03/08 (Thu) 10:11

出来ました。

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

Akira

2018/03/08 (Thu) 15:05
vanillaice (Akira)

To なつさん

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

ホピオ

2018/03/09 (Fri) 17:12

コメント欄に関しまして

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

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

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

Akira

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

To ホピオさん

こんにちは ('0')/

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

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

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

ホピオ

2018/03/09 (Fri) 17:24

No titleTo Akiraさん

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

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

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

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

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

Akira

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

To ホピオさん

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

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

-

2018/03/28 (Wed) 23:50

管理人のみ閲覧できます

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

Akira

2018/03/29 (Thu) 02:53
vanillaice (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) 08:59

管理人のみ閲覧できます

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

Akira

2018/03/29 (Thu) 15:47
vanillaice (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) 19:04

管理人のみ閲覧できます

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

Akira

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

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

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

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

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

1010

2018/03/31 (Sat) 10:03

iPhoneでの初期表示

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

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

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

Akira

2018/03/31 (Sat) 11:26
vanillaice (Akira)

To 1010さん

こんにちは。

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

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

1010

2018/03/31 (Sat) 13:14

解決しました

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

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

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

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

Akira

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

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

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

みなみ

2018/04/05 (Thu) 23:42

動画を中央に配置

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

Akira

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

To みなみさん

こんばんは。

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

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

[html]

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

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

.xxx div {
margin: auto !important;
}

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

みなみ

2018/04/06 (Fri) 00:50

ありがとうございます

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

Akira

2018/04/06 (Fri) 01:31
vanillaice (Akira)

To みなみさん

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

よしあき

2018/05/12 (Sat) 06:07

ADSENSE コード設置について

ご無沙汰しております!

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

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

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

Akira

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

To よしあきさん

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

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

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

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

よしあき

2018/05/12 (Sat) 19:11

To Akiraさん

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

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

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

Akira

2018/05/14 (Mon) 17:22
vanillaice (Akira)

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

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

水海 月子

2018/07/30 (Mon) 20:16

No title

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

Akira

2018/07/30 (Mon) 22:08
vanillaice (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:15

To Akiraさん-解決しました

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

Akira

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

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

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

村上みのり

2018/10/20 (Sat) 18:09

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

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

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

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

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

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

Akira

2018/10/20 (Sat) 21:00
vanillaice (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/21 (Sun) 01:33

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

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

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

Akira

2018/10/22 (Mon) 02:15
vanillaice (Akira)

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

こんばんは ('0')/

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

なんちゃん

2019/09/10 (Tue) 00:11

フォントのサイズ変更および画像のドロップシャドウについて

はじめまして!
Yahoo!ブログの閉店(涙)に伴ってFC2に移行して来たばかりの者です。
センスの良いHymnに一目惚れして使用させていただいています。
CSSも全くの初心者なので参考書を購入し少しずつカスタマイズに挑戦していますが、
早速標記の基本的な箇所で頓挫してしまいました。
質問は以下の2点です。
(1)個別記事のフォントサイズを大きくしたい
 →修正すべき箇所(HTML?CSS?)がどうしても分かりません
(2)画像に対するドロップシャドウが反映していない
 →どのタイミングから反映していないのか判然としません
以上、大変初歩的な質問で恐縮ですがご教示いただけると幸いです。
宜しくお願い致します。

Akira

2019/09/10 (Tue) 00:33
vanillaice (Akira)

To なんちゃんさん

こんばんは。Yahoo!からのお引越しお疲れ様です。

> 個別記事のフォントサイズを大きくしたい

#inner-contents {
で検索するとスタイルシート内に1箇所ありますので、
margin: 20px 0;
の直下に

font-size: 数値rem;

を追加。デフォルトは1.4remですから大きくされる場合は1.5、1.6と様子を見ながら変更してみてください。

-----
> 画像に対するドロップシャドウが反映していない〜

ドロップシャドウというのはHymnテンプレート固有のCSS装飾のことでしょうか。それとも以前(Yahoo!からの移転記事やFC2で他テンプレートを利用していたとき)のものでしょうか。
Hymnテンプレートで画像のドロップシャドウを付ける場合は記事作成時(記事掲載時)のhtmlソースに独自クラスの追加記載が必須です。

class="shadow-attachment"

が該当です。詳細は本記事内にあるARTICLE DEMOをご覧くださいね。

なんちゃん

2019/09/10 (Tue) 11:57

To Akiraさん

深夜だというのに迅速なご回答誠にありがとうございました。
お陰様で質問させていただいた2点とも解決することが出来ました!(本人談(^^;)
CSSの基本をもう少しマスターしてみたい思いますので、今後改めて質問することが
ありましたら何卒よろしくご指導いただきますようお願い致します。m(__)m

記事の閲覧パスワードは「20190910」です。
一度ご確認いただけると幸甚です。

Akira

2019/09/10 (Tue) 14:53
vanillaice (Akira)

To なんちゃんさん

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

はい。文字大きさは1.5rem、drop-shadowの方も正しく導入できています。
こちらこそよろしくお願いします。お疲れ様でした :)

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

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