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

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

テンプレート
2016/09/23 37
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD
Arrivalテンプレート

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

最終更新 2020.5.30
  • ページ送りのJSを修正
名称 Arrival
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大810px
サイド --- 260px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.4.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 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム 1カラム or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右(デバイス幅依存) サイドメニュー --- 下
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.5
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.8.1
  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内に1箇所ありますので #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: 40px 0 20px;
}
③について

<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 {
  margin: 1.9em 0;
}

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

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.28
  • Font Awesomeを廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事ブラウザサイドのページ送り(カテゴリ間遷移用)の動作を逆にしました(下にスクロールで非表示、上にスクロールで表示)
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

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

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

更新履歴 2018.2.6
  • iOS11.2.6でモーダルが開かない件修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)にアップデート
  • 新変数導入により管理人コメントプロフィールアイコンをデフォルト表示
更新履歴 2018.1.5

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

Arrival大規模メンテナンスのお知らせ - テンプレ不具合・修正など

Arrivalテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

更新履歴 2017.1.25

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

更新履歴 2017.1.13

・RSS新着サムネイルをFC2独自変数での表示に切り替えました 関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.11.7

不具合修正
・ 右サイドメニューのSNSボタンの全体が若干右に寄っていた件を修正
申し訳ございません orz

更新履歴 2016.10.12

不具合修正
・ 全記事リストページでコメント・トラックバックが全てCLOSED表示になるミスを訂正

リリース早々の修正です
凡ミスが多く申し訳ございません (*_ _)
ご迷惑をおかけします よろしくお願いします

本ページの内容は2018年12月28日メンテナンス以降のバージョンが対象です。

iPhoneのゲームアプリを間違って削除してしまったあきらでございますー (/_;)
もう最悪だよ 立ち直れない (/_;)

あらいばる (絵文字に深い意味はありません)
承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST 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

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

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

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

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

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

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

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

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

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

スクロールアンカーについて

About scrolling ancho

左右いずれかのカラムの縦(高さ)が一方よりも短いときにスクロールで画面外へ流れていかないようストップがかかります(スクロールアンカー)
現時点で以下のような注意点があります。

  • 「特定のプラグインやウィジェットのJS内容 + Google Chromeのグリッチ」でChromeブラウザ上でプラグイン・ウィジェットが表示されなくなる
  • アフィリエイトによってはスクロールアンカーへの掲載禁止

特定のプラグインに該当する具体的なものは「FC2動画」「FC2カウンター」「アフィリエイト」など、JSで内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。

注)スクロールアンカー不要の方 で検索すると該当部位が出てきますのでガイダンスに従って削除をお願いします。

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のファイルと干渉しないはずです。

ヘッダー画像変更

How to change your header image

注)ヘッダー画像

CSSソース内にこのガイドが1箇所ありますのでURLを変更してください。
デフォルトは繋ぎ目なしの画像を繰り返し表示していますので
一枚画(風景や人物の写真など)に変更されます方は 以下のような記述を行なってください。

background: url(画像アドレス) center center /cover no-repeat;

赤字の center は画像の左右位置合わせ
緑字の center は画像の上下位置合わせ
をそれぞれ意味します。

サンプル画像

center center

left top

right bottom

お使いになる画像と相談して位置を指定します。最適サイズは横1500px以上横長画像。
(縦長画像だと上下の見切れがかなり大きくなりますので横長で)
画像の容量削減は事前にしっかり行なってください。

グローバルナビゲーションについて

About global navigation

一定横幅を下回ると折りたたみ(アコーディオン)になります。
リンクを追加するなどして折りたたむ前に中のリンクが下に繰り越す(下に落ちて2段になってしまう)場合には
デフォルト設定よりも早い段階で折りたたむよう修正してください。

navi breakpoint

htmlに1箇所、CSSに1箇所、合計2箇所あります。
上記目印の近接に有る 767 の数字を 大きく 修正してください。
また、Macをご利用の方は Windowsとは横幅の取得数値が異なります ので、余裕を持った数値設定を行なってください。
要素検証などでしっかり測る場合にはちょうど良いと思った数値に20px足しておくと良いと思います。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#float-container { を検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 0 60px; の直下に flex-direction: row-reverse;追加

続きまして #primary { で検索。2箇所ヒットし、やはり最初のものが対象です。この括りの margin-right: 40px; 緑部分 rightleft に変更。
以上2手順です。

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.25バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

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

 37

There are no comments yet.
mifune
このテンプレートのことではなくて申し訳ないのですが><

テンプレートを使用させていただいてます。
お世話になっております。
このテンプレートのことではなくて申し訳ないのですが><
この間までの水彩の花のようなテンプレートの公開はなしでしょうか???
とても可愛くて気に入っていて、次に来るのかな~~♪と思っていたもので…
既にあきらさん以外のテンプレートは目もくれないような状態ですが
あちらとても好みでした**
(コメント記入記事が不適切な気もしますし問題あれば消していただいて構いませんm(__)m)

2016/09/24 (Sat) 22:27
vanillaice (Akira)
Akira
To mifuneさん

いえー。何も問題ないです。
ありがとうございます :)

水彩のテンプレは当該テンプレの後、次回申請を予定しております。
その節はよろしくお願いします (●'ω')ノ

2016/09/25 (Sun) 02:13
mifune

お返事ありがとうございますm(__)m
そうでしたか!
嬉しい&楽しみです*v-10
ありがとうございます~~♡

2016/09/25 (Sun) 08:33
vanillaice (Akira)
Akira
To mifuneさん

こちらこそ励みになります。
ありがとうございますー :)

2016/09/25 (Sun) 22:59
-
管理人のみ閲覧できます

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

2016/10/18 (Tue) 00:40
Akira
To バックリンクの件 内緒さん

ありがとうございます (o'д`o)ゝ

申し訳ございません。
「ご利用時のお願いごと」についてはどなた様にも等しくお守り頂くようお願いしています。
バックリンクが問題になるとお考えの理由はなんでしょうか。
私のブログの内容に問題があるということでしょうか(笑)
「規約」という強い表現を使っていないのは皆さんのモラルを信頼してのことです。
お守り頂けないようであれば、ご縁がなかった、ということでご利用はお控えくださいね。
よろしくお願いします。

2016/10/18 (Tue) 20:47
よっこたん
今日テンプレートを~

お世話になります。
素敵なテンプレートお借りしております(_ _)
コメント欄を一番下に配置替えしたいのですが
どうすれば良いのでしょうか?
教えてくださいませ。

2016/10/28 (Fri) 14:52
vanillaice (Akira)
Akira
To よっこたんさん

ありがとうございます :)

> コメント欄を一番下に配置替えしたい

コメント投稿フォームと受信コメント一覧を入れ替える、という解釈で合ってますでしょうか。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<!--コメント-->

上記を目印に。
このまとまりが「コメント一覧」ですので、
<article class="main-body" id="comment-top"> から </article> までをCtrl+X(Windows)/ Command+X(Mac) キーで「カット(切り取り)」し、
直近にある(切り取った部分よりも下にあります)
<!--/comment_area--> のすぐ上へCtrl+V(Windows)/ Command+V(Mac) キーで「ペースト(貼り付け)」してください。

よろしくお願いします (●'0'●)/

2016/10/29 (Sat) 11:07
よっこたん
度々すみません~( ̄▽ ̄;)

お借りしてるテンプレートは
「Arrival」なんですがこのテンプレートの場合も
コメント欄の配置の仕方は教えてくださったので
宜しいのでしょうか?
素人ですみませんm(_)m
度々申し訳ありません。

2016/10/30 (Sun) 17:06
Akira
To よっこたんさん

Arrivalだと思ってお伝えしました。
質問者様が現在設定中のテンプレートは私の制作したものではありません。
勘違いされているようでしたらフッターのデザイナー名をご確認の上、作者様に直接お尋ねくださいね。

2016/10/30 (Sun) 17:18
よっこたん
ありがとうございました。

いろいろ教えて頂きありがとうございました。
まだテンプレートは変更してないのですが
11月からArrivalに変更しようと思って
おります。
またわからないことがあれば教えてくださいね。

2016/10/30 (Sun) 21:00
Akira
To よっこたんさん

もしかしたら勘違いかな?
と思ってしまった私が勘違いでしたか(笑)
申し訳ないです ^^;

上記手順でできますのでお試しくださいね。
よろしくお願いします。

2016/10/30 (Sun) 22:06
T
Twitterなどの埋め込み

こんばんは。
カッコいい、素敵なテンプレートですね!
サイドのFacebook、Twitterなどのリンクはソースのどこに入れれば良いでしょうか。教えてください。

2016/11/02 (Wed) 02:03
vanillaice (Akira)
Akira
To Tさん

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

> SNSのリンク設定

Ctrl+F(Windows)/ Command+F(Mac)キー検索で以下の太字の文字列を探します。

<!-- 注)サイドメニューSNSリンク不要の方ここから削除 -->

この直近(下にあります)に
Facebook, Twitter, Instagram, Pinterest, Google+
の文字が見つかると思います。
各対応行の
<a href="#" 〜省略
ハッシュ(#)をアドレスと置き換えてください。

例) Facebook
<li><a href="ここにアドレス" target="_blank" class="c-facebook">Facebook</a>

よろしくお願いします。

2016/11/03 (Thu) 00:25
さゆ
ヘッダー?のリンクメニューについて

こんにちは、初めまして。
Akiraさまご制作のテンプレートはどれも素敵で、どれを使わせていただくかとても迷ったのですが、こちらのテンプレートをお借りいたします!
「利用時のお願い」も拝見しましたが、まだ製作中のブログのため、非公開にしておりリンクを貼れず申し訳ございません。現状、テンプレートには一切手を加えていない状態です。

そこで、こちらのテンプレートについて質問なのですが、ヘッダーのリンクメニューバー(という呼び方であっているのか不安ですが…)の「HOME・INDEX・検索・RSS・ADMIN」の部分を、ブログカテゴリへのリンクに置き換えることは可能でしょうか?
たとえば「HOME・カテゴリ1・カテゴリ2・(検索を削除)・RSS・(ADMINを削除)」にしたい場合はどのように書き換えたら良いでしょうか?「カテゴリ1」を押すと、ブログのカテゴリ別記事ページが表示されるようにしたいのです。

また、記事の下部にある、黒い5つのアイコン(SNSへのシェアボタン等)を削除することは可能でしょうか?

お手数おかけいたしますが、ご回答のほどよろしくお願い申し上げます。

2016/11/11 (Fri) 18:26
vanillaice (Akira)
Akira
To さゆさん

ありがとうございます ( ゚Д゚)ノ
順に説明しますので混乱されないようひとつづつ作業してください。
ちょっとややこしい箇所もあります。

① 検索の削除

2箇所の削除です。
Ctrl+F(Windows)/ Command+F(Mac)キーを利用して以下を探します。
まずひとつ目

<!-- グローバルナビゲーション -->

2つ目は

<!-- グローバルナビゲーション2 上からスライド -->

各々 スクリーンショットをご覧になって該当箇所を削除

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/9w8374ro34wth_zpsbitaend6.jpg

=======

② 各リンク先の変更

こちらはご都合に合わせて修正・追加してください。
グローバルナビは上で検索して頂いたとおり2つあります。
両方を修正しますので、ひとつのリンク設定につき2箇所の変更、ということになります。
事前に注意が一点。
スマートフォンからの閲覧時はデフォルトの各リンクはテキスト表示ではなくアイコン表示になります。
リンクを変更された際のアイコンについては私の方では準備できませんので、
以下のソース内容はアイコン表示を「無し」(パソコン閲覧時と同じくテキスト表示のまま)という形です。
太字が訂正箇所です。それ以外は変更されないようにお願いします。

<ul class="dropmenu">
<li class="underline-reveal"><a href="<%url>">HOME</a>
<li class="underline-reveal"><a href="カテゴリ1URL">カテゴリ1</a>
<li class="underline-reveal"><a href="カテゴリ2URL">カテゴリ2</a>
<li class="sp-hide underline-reveal"><a href="<%url>?xml" target="_blank">RSS</a>

</ul>

RSSはスマホで押してしまうと白紙ページが表示されてしまうので、スマホでは非表示になります。
非表示解除するには
<li class="sp-hide underline-reveal"> の部分を
<li class="underline-reveal"> に修正してください。
モバイル版への誘導ボタンが必要な場合には
<ul class="dropmenu">〜</ul> 内のいずれかの行に

<li class="pc-hide"><a href="<%url>?sp">MOBILE</a>

を追加してください。
このリンクはスマホとタブレット以外では表示されません。
スマホ版非表示設定・レスポンシブ利用の場合には無意味なものになりますので記載の必要はありません。

=========

③ SNSリンクの削除

Ctrl+F(Windows)/ Command+F(Mac)キー検索。

<!-- 注)サイドメニューSNSリンク不要の方ここから削除 -->

上記を目印にガイダンスに従って削除してください。

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

2016/11/12 (Sat) 11:59
さゆ

Akira様、こんにちは。
とても詳しい解説を、ご親切にありがとうございました。
おかげさまで該当箇所の変更ができました。
本当にありがとうございました!

2016/11/12 (Sat) 16:50
さゆ

Akira様、たびたび申し訳ございません。
カテゴリ別ページなど、トップページ以外のページでも全文表示にするにはどうしたらよいでしょうか?

2016/11/12 (Sat) 19:07
vanillaice (Akira)
Akira
To さゆさん

お返事遅くなりました (*_ _)

> リスト表示を全文にしたい件

手順数は5です。


Ctrl+F(Windows)/ Command+F(Mac)キー検索

<div id="main">

このすぐ下の行にある

<!--not_category_area--><!--not_tag_area--><!--not_date_area-->

削除


検索

<!--comment_area--><!--コメント-->

このすぐ上にある

<!--/not_date_area--><!--/not_tag_area--><!--/not_category_area-->

削除


検索

category: <%sub_title>

上記を目印に、2行上にある
<!--category_area-->
から
<!--/category_area-->
までを削除
(まとまっているのでわかると思います)


③で削除したすぐ下の
<!--tag_area-->
から
<!--/tag_area-->
までを削除


④で削除したすぐ下の
<!--date_area-->
から
<!--/date_area-->
までを削除


以上です。よろしくお願いします ( ゚Д゚)ノ

2016/11/15 (Tue) 16:51
さゆ

Akiraさま、こんばんは。
多忙でお返事やコメントの確認が遅くなってしまいました。
おかげさまで作業完了できました。ありがとうございます。
ブログができましたらまたご挨拶させていただきます♫

2016/11/22 (Tue) 00:23
vanillaice (Akira)
Akira
To さゆさん

上手くお出来になったようで安心しました。
ご丁寧にありがとうございます :)

2016/11/22 (Tue) 21:14
The Artsy Asian
Arrival ; コメントフォームへのリンクをトップページに表示する方法

こんにちは vanillaice (Akira)さん、

どれも素敵なテンプレートばかりでどちらを使わせて頂くかとても迷いましたが、”Arrival”をお借りしています。
デザインが秀逸で使いやすく、SNSのリンクも表示出来るので、とても重宝しています。

質問なのですが、表題の通り、コメント入力フォームへ直接飛べるリンクをトップページに設置したいのですが、どのようにカスタマイズしたらよろしいでしょうか?
(*現在は ”READ MORE" の表記を ”COMMENT" に変えるだけの簡単な策でしのいでいます)

現在 vanillaice (Akira)さんがご自身のブログ上でお使いのテンプレの様に、記事下にコメントアイコンを表示させて、そのアイコンをクリックするとすぐにコメントが出来る設定にしたいです。

*余談ですが、vanillaice (Akira)さんがお作りになられたTheCityのコメント欄も同じ様な仕様でしたので、そちらのHTMLからコピーして、Arrivalの方へペーストしてみましたが、余白の配置が上手くいかなったのと、コメントとトラバのアイコンが縦列に表示されてしまったため断念しました…自力で解決できず申し訳ないです…

お時間頂戴して大変恐縮ですが、お手すきの際ご教示いただけますと幸いです。よろしくお願いいたします。

The Artsy Asian

2017/02/21 (Tue) 10:57
vanillaice (Akira)
Akira
To The Artsy Asianさん

こんにちは。ありがとうございます :)

> コメント入力フォームへ直接飛べるリンクをトップページに

トップページの各記事タイトル下に
COMMET: 数字
という項目があり、数字をクリックすると
ページ遷移+オブジェクト(この場合はコメントフォーム)
の位置まで移動するようになっていますが、それとは別で設けたい、という解釈で合ってますでしょうか。

======

> 現在は ”READ MORE" の表記を ”COMMENT" に変えるだけの簡単な策で〜

まずこの部位をどのようにカスタマイズされたのか教えてください。
Asianさん(省略形で申し訳ないです)の場合は、記事を書かれる際に「追記」を利用せず「本文」のみに書いていますよね。
デフォルトでは「追記を利用した場合のみ」このREAD MOREが出るようにしてあります。
ですから
<div class="read-more">
の周辺にはFC2ブログの「独自変数」と呼ばれる文字列があると思います。
そして独自変数はアップロードされると実態変換されてソースコード確認ができなくなります。
つまり独自変数がどこに有って、どう機能しているかが、html本体を有しているAsianさん以外の第三者には見えなくなってしまいます。

● デフォルトのREAD MOREを残したままAsianさんがこの部位をさらにhtmlソース内に「追加」をされたのか。
● それとも独自変数を操作して、追記を利用しない場合でも表示されるようにしたのか。

上記2点の確認をさせてください。
ソース内容ベタ貼りでも良いですし、該当箇所を含む周辺スクリーンショットでも構いません。

======

上記の件についてお返事を待つとして。
Asianさんが「追記」を利用しておらず、これが以前から、そして今後もその方針で書くことが決定している場合に限り
READ MORE をCOMMENTに割り当てても良いと思います。
(その処理のために上記2点のお返事が必要です)

READ MORE を COMMENT に置き換えますと、今後Asianさんが「追記」をご利用になった際に、
閲覧者には「追記が存在すること・続きが存在すること」が伝わりません。
なので方針確認が必須です。

======

まとめ
① タイトル下 COMMENT: 数字 以外にも必要かどうか YES/ NO
② カスタマイズ内容をお知らせください (ソース貼り or スクショ)
③ ご自身で方針の検討をお願いします。

上記3点にお返事を頂きまして、具体的作業をお伝えしようと思います。
よろしくお願いします。

余談
<strong>の正しい使い方については以下の記事をご参照ください
http://vanillaice000.blog.fc2.com/blog-entry-471.html

現在の状態だとちょっとよろしくないです。
勿体ないですから修正されると良いですね。
正しい使い方をすればGoogle検索にその意図が伝わりますので、結果、閲覧してもらう機会も増えるかと思います。

2017/02/21 (Tue) 16:54
The Artsy Asian
No titleTo Akiraさん

早速のお返事ありがとうございます。
私の知識不足がゆえ必要な情報が抜けてしまっており、大変申し訳ありません。

ご質問のお答えですが
① タイトル下 COMMENT: 数字 以外にも必要かどうか →YES

② カスタマイズ内容をお知らせください (ソース貼り or スクショ)  →

↓ランキングに参加しております。クリックして頂けますと泣いて喜びます<BR> <a href="//overseas.blogmura.com/americawest/ranking.html" target="_blank"><img src="//overseas.blogmura.com/americawest/img/americawest88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 海外生活ブログ アメリカ西部情報へ" /></a> <a href="//lifestyle.blogmura.com/funlife/ranking.html" target="_blank"><img src="//lifestyle.blogmura.com/funlife/img/funlife88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ" /></a> <a href="//handmade.blogmura.com/handmadeartist/ranking.html" target="_blank"><img src="//handmade.blogmura.com/handmadeartist/img/handmadeartist88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ハンドメイドブログ ハンドメイド作家へ" /></a>
<BR>
  <div class="read-more">
<a href="<%topentry_link>#postscript">Comment</a>
</div>
<BR>
<a href="https://px.a8.net/svt/ejp?a8mat=2TCEM6+73EZAQ+3BSS+68MF5" target="_blank" rel="nofollow"><img border="0" width="728" height="90" alt="" src="https://www24.a8.net/svt/bgt?aid=170220030429&wid=001&eno=01&mid=s00000015526001048000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=2TCEM6+73EZAQ+3BSS+68MF5" alt="">
<BR>

私がいじった部分は赤字の”Comment" と言う部分と、あとは(ご覧の通り)SNSのシェアツールよりも上部に表示させたかったため、配置だけ移動させました。

③ ご自身で方針の検討をお願いします。 →追記は使う予定はないので、そのままコメント欄に割り当てたいです。

><strong>の正しい使い方について
わざわざご指南頂き、ありがとうございます!!!見ての通り無知な初心者でして、全く知りませんでした。
早速直したいと思います。本当にありがとうございます!!

2017/02/22 (Wed) 01:11
vanillaice (Akira)
Akira
To The Artsy Asianさん

ちょっと私の伝え方がまずかったですね。
「どこに」というのが焦点ですので、該当箇所とその近接の範囲(特に上記ソース内容の「上下」)を含めて教えて頂きたかったんです(笑)

現在はread moreが重複している状態でしょうか。
それとも切り取ってで移動されたんでしょうか。
だとするとデフォルト位置のread moreは上下に

<!--not_permanent_area-->
<!--more_link-->

<div class="read-more">
<a href="<%topentry_link>#postscript">Read more</a>
</div>
<!--/more_link-->
<!--/not_permanent_area-->


こうして独自変数で囲われていたはずなんです。
カット&ペーストでの移動であるのか、コピー&ペーストであるのか。
上記内容を拝見しますと変数がありませんので、

① 変数だけがデフォルト位置に置き去りになっているのか
② 変数がデフォルト位置にread-moreと一緒にそのまま存在しているのか

この2つがとっても大事です。
私が確認できれば良いのですが、Asianさんに追記を利用して頂かないことには確認できません(笑)

とりあえずですね、仮にデフォルト位置にも同じく上に記した内容が残っているのであれば、それは削除してください。
read-moreの内容だけが居なくなって、変数だけが取り残されている場合(以下のように)

<!--not_permanent_area-->
<!--more_link-->
<!--/more_link-->
<!--/not_permanent_area-->


この場合も同じく削除をお願いします。
その上で、Asianさんが書かれたソース内容の中の

<%topentry_link>#postscript

の赤字部分を

<%topentry_link>#community

変更してください。
それで
ページ遷移+コメントフォーム位置まで移動、という形になります。
Asianさんは「FC2検索バー(ブラウザの上辺に固定されているバー)をご利用ですので、オブジェクト移動後の位置が若干(27px)ずれます。
ピッタリに合わせたい場合には検索バーの非表示設定をお願いします。
でもって、基本的にhtmlで大文字は使いませんので
<BR>は<br>の方が良いですが、こちらはお任せしますね。
ホントは<br>で距離を取るのもあんま良くないですけどね ^^;

わかりにくければその旨お申し付けください。
よろしくお願いします。

2017/02/22 (Wed) 02:03
The Artsy Asian
To Akiraさん

早速のお返事ありがとうございます!
まったく要領を得ない回答で本当に申し訳ないです。。
カット&ペーストをしたので、仰る通り変数だけが置き去りになった状態でした。
ですのでご指示通り置き去り変数の削除をし、ソース内容の中をcommunity に変更した所、無事にページ遷移+コメントフォーム位置まで移動にする事が出来ました!!!!

おすすめされました通り、FC2 の検索バーを非表示にし、<br>も直してみました!
アドバイス本当にありがとうございます!!
何も知らないまま見よう見まねで無理やりカスタマイズしてしまったので、次回からはもっと下調べと勉強が必要ですね…。苦笑

私の様な初心者にこんなに丁寧にアドバイスして頂いて、本当に感激です。ありがとうございます!
貴重なお時間割いていただき、本当に本当にありがとうございます!!

2017/02/22 (Wed) 12:37
vanillaice (Akira)
Akira
To The Artsy Asianさん

良かったですー。
こちらこそありがとうございます。
お疲れ様でした :)

2017/02/22 (Wed) 16:04
Akira
To Arrivalサムネイルの件 内緒さん(移動先)

http://vanillaice000.blog.fc2.com/blog-entry-555.html#comment3933

> What's newのサムネイルが表示されない〜

私が拝見したところ問題なく表示されているように思いますがいかがでしょうか。
今一度ご確認をお願いします。
サムネイルの取得条件は以下の通りですので照らし合わせもお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object11

本日より10日ほど留守にします。
ご質問の際は鍵をつけずにオープンでエントリーして頂くと、ここには有志の方も数名いらっしゃいますので回答を頂けるかもしれません。
私事で申し訳ないです。よろしくお願いします。

2017/08/08 (Tue) 08:17
るか

るかです。
arrival の記事のところにコメントさせていただくべきだったのですね。
お手数をかけてしまって、ほんとうにすみません。

お忙しいところ、さっそくのご返信、ありがとうございます。
たいへん嬉しかったです。

そうですか……私のブラウザでは、what's new ?のサムネイルの画像がまだ表示されていないのですが
私のブラウザのほうの問題かもしれないですね。
(サムネイル取得条件についての記事も読ませていただいております)
実は、こちらのブログも、トップページが縦に文字が一列になるように読めてしまっていて
arrivalの記事が探せなかったんです。
(そんなわけで、お手数をかけてすみません)
サファリを使っているのですが、私のブラウザの問題なのかもしれません。

まずは私のサファリを最新にしてみようと思っています。
鍵付きで質問させていただいたので、
Akiraさんのお答えだけ頂戴するかたちになってしまって、
他のたくさんの方と共有できず、誠に申し訳ありませんでした。

お忙しいところ、すぐにご返信くださって、ほんとうにありがとうございました。
感謝の言葉しか申し上げられなくて、ごめんなさい。
それでは。

2017/08/08 (Tue) 09:23
vanillaice (Akira)
Akira
To るかさん

空港からです(笑)

鍵の件は任意なのでなにも問題ないですよ。
たまたま私が留守にしますので、火急の件は有志頼みという私の身勝手発想です(笑)

はい。一度safariが最新版かどうかの確認をお願いします。
セキュリティの問題もありますので、できるだけOSやブラウザは常に最新にしておかれることをおすすめします。
よろしくお願いします :)

2017/08/08 (Tue) 10:53
-
管理人のみ閲覧できます

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

2019/08/30 (Fri) 11:10
vanillaice (Akira)
Akira
To 素材配付について 内緒さん

こんばんは。

> ブログで無料提供しようと思うのですがよろしいでしょうか〜

もちろん内緒さんが著作主ですからご自由になさってください。ただArrivalテンプレート限定にはされずに「ブログヘッダー用画像」として配付されるのが望ましいと思います。せっかくですから汎く使ってもらう方が本望ですよね。

Arrivalの場合はシームレスの繰り返し可能な画像にしておかないとスマホでナビゲーションを展開した時に画像がガバっと拡大されてしまいます(background-size: cover の場合)
あるいは高さが寸足らずになるか(width: 100% の場合)
なのでArrival用のヘッダーとしてはちょっと向いていないのではないかな、と思います。
あとはレスポンシブの場合は「テキストが折り返す」ことを想定しておかないと、例えば①の画像の場合はボーダー部位(枠)の中にブログタイトルが入ることを想定されていると思いますが、かなり短いブログタイトルでないと収まりません。あるいはスマホで背景のCSSを調整するか。

使用者が画像について知りたいのは「シームレスかどうか」「レスポンシブ掲載可能かどうか」だと思いますので、その点の質問は寄せられるかもしれません。

いずれにしろ可愛らしい画像ですから使いたいという方はいらっしゃると思いますよ :)

2019/08/30 (Fri) 23:06
-
管理人のみ閲覧できます

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

2019/08/31 (Sat) 07:19
-
管理人のみ閲覧できます

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

2019/08/31 (Sat) 17:15
vanillaice (Akira)
Akira
To 素材配付について 内緒さん②

こんばんは。

そうですか。もったいない気がしますが内緒さんがそうおっしゃるなら。
確かに何かを配付すればほぼ間違いなく質問が届くことになりますので、その点の心構えが必要かもしれませんね。
お疲れ様です :)

2019/09/01 (Sun) 00:00
-
管理人のみ閲覧できます

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

2019/09/01 (Sun) 12:06
vanillaice (Akira)
Akira
To 素材配付について 内緒さん③

いえいえ。また何かありましたらお気軽にどうぞ :)

2019/09/01 (Sun) 14:02

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

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

テンプレート