attention admin about comments trackbacks you may also like

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

2016年05月15日
テンプレート
34
HTML5 CSS3 RWD
Libertyテンプレート

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

最終更新 2019.11.7
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
名称 Liberty
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大1100px
サイド --- 240px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 なし(インラインSVG)
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 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
変則3カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右(デバイス幅依存) サイドメニュー --- 下
更新履歴 2019.8.2
  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-->

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

<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"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

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

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

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

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

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

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

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

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

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

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

<p 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要素を利用している方向けなので必要がある方だけどうぞ。

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2019.1.7
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマーク, Pinterestのシェアアイコン追加
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 文字数制限をJSからCSSに変更
  • コメント投稿フォームの横幅を広げました

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

更新履歴 2018.3.19

大規模なメンテナンス 及び 修正 を行いました。

  • iOS11.2.6でモーダルが開かない件修正
  • 画像遅延読み込み導入(デフォルト設定: グリッドサムネイル, 管理人コメントプロフィールアイコン)
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)にアップグレード
  • リセットCSS及び一部CSS内容を圧縮
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示
  • 個別記事のタイトルをh1に昇格
  • 構造化マークアップ導入(個別記事のみ)
  • その他調整多数

iPhoneでの不具合修正も含まれます ので是非アップデート(再DL)をお願いします。

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2017.1.13

・RSS新着サムネイルを削除しました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.9.9

リストマーカーの位置を調整しました

参考記事
list-item横の隙間について

今私のiPhoneこんな感じ 割れたiPhone ないわー マジないわー…
前日に長男が自分のiPhoneを落として破損(この写真の比ではない(笑))
「今iPhone6Sに変えるなんて お前ダッセ m9(*´・∀・`*)」
と 散々バカにしたのですが
翌日まさか自分もやるなんてー 仏様もびっくり (´・ω・`)
裏面 ↓
割れたiPhoneをサランラップで包む サランラップ。かっこいいだろう ←
負け組バンザーイ (´・ω・`)
(余談終わり)

りばてぃ
承認されました。ありがとうございます。
左にあるのはヘッダーです。

サンプル

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

必須個人設定

Necessary personal settings

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

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

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

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

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

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

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

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

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

Font Awesomeについて

About Font Awesome

Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。

FAがどうしても必要、という方はhtml内に

注)Font Awesome(JS)必要な方この一行削除

という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。

CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome

JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。

固定ヘッダーについて

About global navigation in header

パソコン閲覧時などブラウザ横幅が広い時には左に固定され、タブレットやスマホでは上に移動します。
ここへはあまり欲張って多くのリンクを設定されませんようお願いします。
下に著作権等の表示がありますが これはヘッダーに書いているわけではなくhtml最後方のフッターをここに表示しているだけです(SEOセオリーとしては当たり前だけど)
ヘッダー内リンクが多いとこのフッターと重なります。スクロールバーは出ますが右にあるサイドメニューと異なり、ブラウザ固有の無骨な見た目のものが表示されます。
リンク追加はアコーディオンの子メニュー部分へお願いします。下記が該当箇所です。

注)リンク先の追加はここに

グリッドレイアウトについて

About grid layout

トップページの記事並びに関連するカスタマイズはかなり高度な内容になるかと思いますので非推奨です。気軽にできるものではありませんので事前に複製を取った上で自己責任で行ってください。お手伝いは致しません。

ドミナントカラー

Dominant colors

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

rgb(139,93,111) 基本リンク色, ブログタイトルマウスホバー時テキスト色, ヘッダー内ナビゲーション About テキスト色, SNSアイコンホバー色 など
rgb(235,235,235) サイドメニュー背景色, ナビゲーション展開背景色, 関連記事・トラックバック一覧背景色
rgb(242,242,242) ヘッダー背景色

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

Cautions before asking for something.

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

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

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

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

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

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

コメント(34)

There are no comments yet.

ゆん

2016/05/16 (Mon) 16:25

こんにちは

コメントは初めてです(._.)
新着テンプレートを見たんですがこのテンプレートが乗っていませんでした。。
4つ新着があってAkiraさんのが見当たりません>_<
もしかして審査を通過しなかったということもあるんでしょうか?
その場合はブログ限定でダウンロードできるようにしてもらうことが可能ならお願いしたいです。
無理を言ってすみませんよろしくお願いします

ゆん

2016/05/16 (Mon) 16:28

何度もすみません

18日に申請と書いてありました(汗)
よく読みもせずすみませんでした
iphone残念でしたね〜。。でも少し笑ってしまいましたw
書き方がおもしろくてw
いつも素敵なテンプレートありがとうございます❤

Akira

2016/05/16 (Mon) 22:03

To ゆんさん

こんばんは ( ゚Д゚)ノ
はい。まだ申請しておりません。
ちょっとバタバタしておりましてー。
明日出そうかな、というところです。
今日iPhone6Sも購入してまいりました。
お気遣いありがとうございます(笑)
6Sでよくよく見たら調整した方が良さそうな部分もありますので、もっと遅くなるかもしんない (´・ω・`)

ひろし

2016/05/18 (Wed) 21:57

やっちまいましたかwww

お久しぶりです^^
亡国から戻ってきましたw
いや〜iPhone悲惨じゃないですか!
だから6にとあれほどwww
FB更新してくださいね、さびしいですよ^^;

Akira

2016/05/20 (Fri) 17:45

To ひろしさん

おはおーございます ( ゚Д゚)ノ
亡国?某国?(笑)
お帰りなさいませ

やっちまいましたよー (´・ω・`)
6Sに変えたは良いが、画面がおっきいよ
指が届かない(笑)
(fbの件はスルー (・ω・))

てっちぃ

2016/05/20 (Fri) 23:45

Facebookアイコンについて

お世話になっています。
前回は大変お世話になりました。
また一つご教授ください。

投稿記事内に表示していたFacebookのアイコンが出なくなってしまったのですが
自分で何を触ってしまったのかすらわからず・・・
考えられる原因がわかりましたら教えてくださいませ(⌒-⌒; )
申しわけありません。

Akira

2016/05/22 (Sun) 00:19

To てっちぃさん

こんばんは (o'д`o)ゝ
実は昨日からWiFiが接続できないんです ( ̄∀ ̄;)
モデムが故障したか、あるいはプロバイダの通信障害だと思うのですが。
というわけで、現在私の方で確認が、できません。
申し訳ないですー。
復旧しましたらすぐ確認しますね。
お待たせしますがよろしくお願いします (m´・ω・`)m

Akira

2016/05/23 (Mon) 03:01

To てっちぃさん

一時的に古いモデムを利用しております(笑)

fb等のSNSアイコンですが、内容がごっそり抜け落ちています。
そしてリンクの終了タグ</a>だけが残されている状態です。
これはエラーですから他の要素に影響します。
(ブログランキングのバナーも表示されていません)

デフォルトのソース内容をお伝えしますので改めてコピー&ペーストで修復してください。
Ctrl+Fキー検索

<ul class="sns-and-others">

htmlソース内に一箇所あります。
ここを始点として

</ul>

までが該当です。
まずは一旦この部分を削除。
削除した同じ場所に以下をコピペ

<ul class="sns-and-others">
<li class="right-space">
<a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" target="_blank" title="Facebookでシェアする">
<span class="fa fa-facebook fa-fw"></span>
</a>
<li class="right-space">
<a href="http://twitter.com/intent/tweet?url=<%topentry_link>&text=<%topentry_title>" target="_blank" title="Twitterでつぶやく">
<span class="fa fa-twitter fa-fw"></span>
</a>
<!--permanent_area-->
<li>
<a href="http://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" title="管理人用記事編集">
<span class="fa fa-pencil fa-fw"></span>
</a>
</li>
<!--/permanent_area-->
</ul>

消す範囲、ソースを貼り付ける範囲を間違えないように作業なさってください。

てっちぃ

2016/05/24 (Tue) 10:40

いつも大変お世話になっています。
私の誤った操作でごっそり抜けてしなったようで恐縮です。
ご指摘ありがとうございました。

早速送っていただいた内容を張り付けてみたのですが
Facebookのボタンが表示されません。

また違った部分までも私が壊してしまったのでしょうか・・・(;´・ω・)
すみません。。。

Akira

2016/05/24 (Tue) 11:10

To てっちぃさん

fbボタンというのはどれのことでしょうか (´・ω・`)
記事下にテンプレート内容の一部として表示されているアイコンでなくて他の箇所でしょうか。
今確認しましたが、記事下アイコンであれば表示されるようになってます。
(右下の紫色のアイコン fbとtwitter)
どこのことでしょう?

それからランキングバナーはやはり表示されていません。
これはテンプレデフォルトの状態では表示されるはずですので、やはりカスタマイズ段階のどこかで何かがおかしくなってますね。
ちょっとソース内容全部確認する必要が ( ̄∀ ̄;)
本来カスタマイズは自己責任でお願いしていますが、お困りでしょうから今回は検証してみますね (´・ω・`)
で、ごめんなさい。こちら別テンプレートのページなもんですから、
できれば該当テンプレページへ移動して頂くと助かります(笑)

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

これ以降は上記ページにお返事を書きますね。

ゆいぴー

2016/05/28 (Sat) 19:29

アンドロイド標準ブラウザ4.2.2について

こんにちは、イカしたテンプレートだと思い、先日から使わせて頂いています。
掲題のアンドロイド標準ブラウザ4.2.2ですと写真に白のグラデーションが掛からないようです。なおpcとスマホのchromeでは正常に表示されました。アンドロイド標準ブラウザは非対応でしょうか?

Akira

2016/05/28 (Sat) 23:11

To ゆいぴーさん

ありがとうございます。
そしてご迷惑おかけしております (*_ _)

Android標準ブラウザというのは開発を終了したAOSPブラウザのことでしょうか。
(4.3を含むそれ以前の標準)
利用に際してのお願いごとにあります通り、サポートについてはリリース時点での最新とその一つ前まで、ということでご了承頂いております。
Androidの最新OSが6.0、現在の標準はGoogle Chromeですのでサポート外となります。
というか恐らくAOSPはCSS3の大半のプロパティが未実装のまま開発終了を迎えたと記憶しております。
可能であれば最新バージョンへのアップグレードをお願い致します (*_ _)

-------- 追記

参考ページが見つかりましたので掲載しておきます。

Tech TIPS様
http://www.atmarkit.co.jp/ait/articles/1507/17/news032.html

-

2016/05/29 (Sun) 00:12

To Akiraさん

こんばんは、ご回答ありがとうございます。お願いごとの件、理解できておりませんでしたすみません…
また、初心者の質問に付き合って頂いてありがとうございます。

Akiraさんのテンプレートに決めるまで色々な物を試してみましたが、
1番カッコいいテンプレートだと思います。陰ながら応援しておりますのでがんばってください。

maru

2016/05/29 (Sun) 07:55

はじめまして

はじめましてAKIRA様、
先週より美しいテンプレートを使用させて頂いております。
HTML編集に関しての質問をさせて頂いて宜しいでしょうか?
個別ページの最下で、カテゴリー内の前記事・次記事に移動を、
単なる前ページと次ページだけに変更したいのですが、
私に出来る事があれば、ご指摘頂けますでしょうか?
ご教示のほど何卒宜しくお願い申し上げます。
maru

maru

2016/05/29 (Sun) 08:35

No title

Akira様、
今編集部分で解決できました。
今後とも何かありましたら宜しくお願い致します。




Akira

2016/05/29 (Sun) 10:07

To -さん(Yさん)

いえとんでもないです。
もう昔から思ってますけれど、
「意識高い系なら知ってるよね?」みたいなスカした感じでなく
今や誰もがスマホを使う時代ですので、誰もがすぐわかるような広報がメーカー側から提供されるよ良いのですが (´・ω・`)

ありがたいお言葉も頂戴致しました。
重ねてありがとうございます

Akira

2016/05/29 (Sun) 10:08

To maruさん

ありがとうございます。
ご返信遅くなってしまいました。
その間にご自身で解決して頂いたんですね。
お疲れ様でした。

はい。こちらこそよろしくお願いします

太郎

2016/07/21 (Thu) 12:19

Libertyのトップ画像について

こんにちは、Libertyを使わせて頂きたいと考えています。
プレビューで試してみたところ、トップページの最上段の記事画像が大きすぎため、
1段目をカットできないかと考えております。
私のブログに掲載している画像の解像度が低いのが要因です。

ちょっと文字で表すと分かりにくいですが、
下記のようなトップページの画像は下記構成です。
1段目の大画像を削除して2段目から始まるように変更は可能でしょうか。
お忙しいところ恐縮ですが、ご教示頂けますと幸いです。

1段目   大    ←この行を削除したい
2段目 中   中
3段目 小 小 小
4段目 中   中
5段目 小 小 小
6段目 中   中



Akira

2016/07/21 (Thu) 13:52

To 太郎さん

ありがとうございます (・ω・)ゞ

まず注意点です。
① 最新記事はテキストが初めから表示されています(要約文)が、それが失くなり他の記事と同じ見た目になります。
② 修正箇所はかなりたくさんあります。

上記2点ご了承くださいね。
今から修正点をさらいますのでしばらくお待ち下さい。
後ほどこちらのコメントに追記致します。

======

まず最初に修正するのはCSSソース(管理画面下段)です。
たくさんあります。
html(管理画面上段)は1箇所だけ最後に触ります。

Ctrl+Fキー検索

:first-of-type

この文字列を含むものが全部で14箇所ありますので、そちらを全て削除します。
太郎さんがどの程度知識がおありかがわかりませんので、なるべく詳細にお伝えしようと思います ^^;
削除対象項目は以下の通り


.element-item:first-of-type .context{
省略
}


.element-item:first-of-type .context-table {
省略
}


.element-item:first-of-type .grid-entry-title {
省略
}


.element-item:first-of-type .topentry-description {
省略
}


.element-item:first-of-type .inner-image-parent {
省略
}


.element-item:first-of-type .inner-image-parent:before {
省略
}


.element-item:first-of-type .context-parent:before {
省略
}


.element-item:first-of-type .element-datetime:before {
省略
}


.element-item:first-of-type .read-more {
省略
}


.element-item:first-of-type .inner-footer-sns {
省略
}


/***------------------------------------------
less than 806 (include iPad)
------------------------------------------***/

この間に挟まれている内容全て削除

/***------------------------------------------
less than 767 (exclude iPad)
------------------------------------------***/


.element-item:first-of-type .inner-image-parent:before,


,
.element-item:first-of-type .context-table


.element-item:first-of-type .grid-entry-title {
省略
}



13番は注意が必要です。
上の行の
.context-table
のすぐ後ろにあるカンマを含めて、下の行の
.element-item:first-of-type .context-table
までを削除です。
ここ間違えてしまうとデザインが崩れます。

==== 次のステップ

続きましてCtrl+Fキー検索

/* each article */

上記を目印にして頂きますと、こんなのがたくさんあります ↓

.element-item:nth-of-type(数字)

この中にある数字を全て1つづつ減らしてください。
最初のまとまりの数字は

2, 3, 7, 8, 12, 13, n+17

ですので、それぞれひとつづつ減らして

1, 2, 6, 7, 11, 12, n+16

といった具合です。
続いて

4, 5, 6, 9, 10, 11, 14, 15, 16



3, 4, 5, 8, 9, 10, 13, 14, 15

続きまして
その下のまとまりも上記と同じ数字ですので同じように修正。
全部で3つのまとまりを修正です。

==== 次のステップ

上で修正したまとまりのすぐ下にある

.element-item:nth-of-type(n+2) .context

を以下の通り修正

.element-item .context

さらにその下の

.element-item:nth-of-type(n+2) .context:hover

を修正

.element-item .context:hover

==== 次のステップ

Ctrl+Fキー検索

/***------------------------------------------
less than 767 (exclude iPad)
------------------------------------------***/

このまとまりの中の

.element-item:nth-of-type(n+2) {
width: 100%;
}

を以下の通り修正

.element-item {
width: 100% !important;
}

その下にはまた
:nth-of-type(数字)
がたくさんありますので、一つづつ減らします。

4, 5, 6, 9, 10, 11, 14, 15, 16



3, 4, 5, 8, 9, 10, 13, 14, 15

に修正


==== 次のステップ

Ctrl+Fキー検索

/***------------------------------------------
less than 480
------------------------------------------***/

このまとまりの

.element-item:nth-of-type(n+2) .context

を下記の通り修正

.element-item .context



==== 最後にhtml修正

Ctrl+Fキー検索

e=90;$('.topentry-description:not(.element-item:first-of-type .topentry-description)')

以下の通り修正

e=90;$('.topentry-description')





以上です。
修正箇所がかなり多く、また複雑ですから必ず複製をお取りになってからはじめてくださいね。
よろしくお願いします。

太郎

2016/07/21 (Thu) 15:34

ありがとうございます!
こんなにも丁寧に教えて頂けるなんて感激です!(´;ω;`)
教えて頂いた通りコピーをとってから挑戦してみます!

Akira

2016/07/21 (Thu) 19:14

To 太郎さん

ちょっと混乱するかもしれませんが、ガンバです╭( ・ㅂ・)و ̑̑
わかりにくい点がありましたらお尋ねくださいませ。

太郎

2016/07/22 (Fri) 11:26

No title

ちょっとやってみましたがレイアウトが崩れてしまいました笑
バックアップはとってあるので、またチャレンジしてみます!

Akira

2016/07/22 (Fri) 12:39

To 太郎さん

お疲れ様ですー (´・ω・`)

ちょっと太郎さん、作業されずにそのままお待ち頂けますか。
私が動作確認したソース内容が取ってあると思いますので、そちらをコピペして頂いた方が話しが早いです。
今別の用事をこなしておりますので、しばしお時間くださいね。

太郎

2016/07/22 (Fri) 13:47

なんと!(´;ω;`)
お忙しいところ恐縮です!

Akira

2016/07/22 (Fri) 17:20

To 太郎さん

遅くなりました (o'д`o)ゝ

--- 作業終了につき削除致しました ---

こちら別タブで開いてCtrl+Aで全選択、Ctrl+Cでコピー、
CSSソースを全て消去してCtrl+Vでペースト。
丸々差し替えてください。
(Macの場合はCtrlではなくcommandキー)

htmlソース内の修正1箇所だけはご自分でやってくださいね。
文字化けする等ありましたらお伝えください。

太郎

2016/07/23 (Sat) 00:14

ありがとうございます!思い通りにできました!
ご丁寧に対応いただきありがとうございました(´;ω;`)

Akira

2016/07/23 (Sat) 14:08

To 太郎さん

無事終了したようで良かったです。
お疲れ様でした

(掲載ファイルは削除しておきます)

FUKU

2017/01/11 (Wed) 21:48

What's New?のコンテンツが表示されなくなってしまいました…

初めまして。初めてコメント及び質問させていただきます。
私のブログで現在こちらのテンプレートを使わせていただいておりますが、タイトルにありますように本日「What's New?」のコンテンツが表示されなくなってしまいました。
(リンクは添付したURLでございます)
昨日やおとといくらいまでは普段通り表示されており、特にここ最近テンプレートをいじったり記事を更新したりしておりません。
Chrome、Firefox、IE、iphoneのSafariで確認しましたが、すべて表示されません。
これは一時的なものなのでFC2側の不具合でしょうか? それとも別の原因でしょうか? 大変お忙しい中だとは思いますが、ご回答いただけると幸いです。

Akira

2017/01/12 (Thu) 00:20

To FUKUさん

ご迷惑おかけしております (*_ _)

どうもGoogleがAPIを正式に廃止したようです。

引用(official)
This API is officially deprecated and will stop working after December 15th, 2016.

このAPIは公式に廃止され、2016年12月15日以降は機能しなくなります。

私がGoogleニュースの把握を怠っておりました。
申し訳ございません (*_ _)

FC2が公式に同等のプラグインをリリースしておりますので、そちらへの切り替えをお願いします。
見た目などはこれまでのRSSのものとほとんど変わりません。
対応が遅れましたこと、重ねてお詫びします。

* 公式プラグイン「新着記事(サムネイル付き)」がそれにあたります。

FUKU

2017/01/13 (Fri) 09:15

To Akiraさん

ご回答ありがとうございます。

そうでしたか。わかりました。ではFC2のプラグインの方へ切り替えてみます。
また改めてご質問させていただくかもしれませんが、よろしくお願いいたします。

Akira

2017/01/13 (Fri) 13:57

To FUKUさん

お手数おかけして申し訳ないですー (*_ _)
はい。ご質問はいつでもお気軽にどうぞ。

本件の参考記事もよろしければご覧くださいね。

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

ゆき

2018/03/03 (Sat) 19:28

表示についての質問

こんばんは。記事部分の表示の質問をさせて頂こうかと思ったのですが…
お受け出来ない質問・相談の所に「トップページの表示タイプ変更」とあったので、もしかしたらLibertyの記事部分を全文表示に出来ませんか?という質問にはご回答頂けないのでしょうか?
他の方の(疑似?)フレームテンプレも見て来ましたが、やっぱりLibertyが良いなぁと。
でも画像をほとんど使わないので、プレビューすると一面No imageになってしまうのが気になりまして。
とりあえず質問を残してみる事にしました。宜しくお願いします。

Akira

2018/03/03 (Sat) 21:09
vanillaice (Akira)

To ゆきさん

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

まず誤解のないようお伝えします。
疑似フレームというのはかなり古い技術で現在のweb標準を満たしていません(廃止要素です)ので利用していません。

表示タイプ変更についてはhtml, CSS共に大規模な修正が必要になりますので、自己責任でして頂く分には構いませんがお手伝いは致しかねます。
ご理解のほどお願いします。

ゆき

2018/03/04 (Sun) 01:09

To Akiraさん

お返事ありがとうございます!
なるほど。共有テンプレにフレームっぽいものが新しく出てこないなー?と思っていたんですが、そういう事だったんでしょうか。
大規模修正となると、私には無理そうですね…。
了解致しました!ありがとうございました!

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

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