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

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

テンプレート 配布中テンプレート
2016/05/24
106
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD
Southerlyテンプレート

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

名称 Southerly
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大860px
サイド --- 270px
記事内で使える見出しレベル 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 右(デバイス幅依存) サイドメニュー --- 下
最終更新 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.4.6
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.7
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
  • スライダーの動作改善(mouseover, mouseleave)
更新履歴 2019.8.2
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

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

【重要】テンプレートの変更点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"><span>Add your comment</span></h3> までを 削除

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

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

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

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

<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
  • lazyloadingの導入(グリッドページ及びカルーセルスライダー)
  • lazyloading導入に伴うトップページサムネイルのアニメーション調整
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 全記事一覧と検索結果にコメント数とトラックバック数の表記を追加

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、比較的大規模なメンテナンスでパフォーマンスも改善されています のでアップデートをおすすめします。

更新履歴 2018.2.19

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

  • jQueryのバージョンを3.3.1にUPしました
  • Font Awesomeのバージョンを5にUPしました(CSSリンク+アイコンフォントからJS+SVGに変更になります)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • floatレイアウトをflexレイアウトに変更しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました
  • コメント欄で管理人プロフィールアイコンをデフォルト表示できるようになりました(FC2独自変数の追加)
  • フッター上第3カラム及び新着サムネイル表示を削除しました
  • カルーセルのプラグインを変更しました
  • カルーセルに表示される内容を新着記事に変更しました(画像がない記事についても表示するようにしました)

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

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルをFC2独自変数での表示に切り替えました
更新履歴 2016.9.9
  • リストマーカーの位置を調整しました
更新履歴 2016.7.3
  • モバイル版誘導リンクのミスを修正しました
  • ドロップダウン内リンクが効かない件を修正しました

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

今更のiPhone6Sですが…
ゲームしにくい 指が届かない (´・ω・`)
ちなみに普段このような爪でキーボードをガシャガシャ叩いています

…これのせいか? (´・ω・`)

さざりぃ
カルーセルスライダーつき グリッドレイアウト。
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

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 background image

注)ヘッダー画像

で検索し、この行の url(ここに画像アドレス) を編集します。
デフォルトでの位置合わせは left top で、画像の左辺と上辺を基準(見切れないようにする)という指定です。
画像のポイントが中央にある場合には center center に、右下にあるならば right bottom、といった具合に 左右軸 上下軸の基点を決めてください。
サイズは横1500pxあるいはそれ以上の横長が理想、細かい縦横比は問いません。容量の削減は事前に行ってください。
画像上には白いマスクが乗りますので 若干薄くなります。

デフォルト画像 (縮尺掲載 実寸1800✕1125 55KB Public domain)

No image画像変更について

How to change alternative image

https://blog-imgs-93.fc2.com/v/a/n/vanillaice000/southnoimage.jpg

htmlソース内に1箇所 CSSソース内に2箇所、計3箇所ありますのでそれぞれURLの差し替えをしてください。画像上の白いマスクとNo imageのテキストは自動で載ります。

デフォルト画像 (縮尺掲載 実寸500✕500 15KB Public domain)

Hi thereテキストと画像変更について

How to change〝Hi there〟text and background image

右サイドメニュー最上部の Hi there の項目はブログ個人設定で登録したプロフィール説明文が表示されます。ここを編集しておられない方はデフォルトの
FC2ブログへようこそ!
の文章が表示されますので任意の内容にブログ個人設定から変更して頂くか、あるいは文章内容を直接htmlソース内に記載してください。

注)About Me不要の方ここから削除

上記を目印にして頂きますと(htmlソース内に1箇所あります)

<p><%introduction2></p>

という箇所がありますので <%introduction2> の部分を任意のテキストに置き換えます。改行は文末に <br> と記します。

背景画像を変更するには

注)Hi there背景画像

上記を目印に(CSSソース内に1箇所あります)
url(ここに画像アドレス)
サイズは文章量に合わせて縦長・横長の別を選択してください。横600px程度が理想です。

Hi thereデフォルト画像 (縮尺掲載 実寸500✕333 20KB Public domain)

ドミナントカラー

Dominant colors

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

rgb(150,150,150) 基本リンク色
rgb(51,51,51) 基本テキスト色
rgb(248,248,248) 全体背景色
rgb(240,240,240) プラグイン3背景
rgb(115,46,53) ナビゲーションホバー時背景色, ブログタイトルホバー時最初の一文字, トップページサムネイルホバー時背景色, フッター背景色 など
rgb(212,108,118) 日付リボン背景色, プラグインタイトル背景色(ホバー時), ブログタイトルホバー時文字色, カルーセル内サムネイルホバー時Read moreリンク背景色 など

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

Cautions when copying pagination in permanent page

html内の <!-- 個別記事用ページナビ(時系列) --> から <!-- 個別記事用ページナビ(時系列)ここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

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

Related post

Comments  106

Akira
2016/06/09 (Thu) 12:32

To Southerlyの件 内緒さん

> 写真の形状を正方形に

これはどの部分のことでしょうか。
カルーセルスライダー あるいは トップページのサムネイル いずれかだと思うのですが、
そちらをまずお知らせください。

> 記事のアイキャッチ画像とコメント〜

この「コメント」というのは何を指しておられますでしょうか。
記事のアイキャッチ、と表現されていますので恐らくトップページのサムネイルだと思いますが、
「表題 表題+コメント」
というのが何を指しているのかわかりかねます。鈍くてごめんなさい ^^;
「コメント」というと通常、というか私が思う「コメント」とは今現在私がこうして書いているものだと認識しています。

ちょっとこう、それぞれの方が独自の呼び方をしてしまうと伝わらないというか、混乱してしまいますので語句を統一しましょうか。

● スライダーサムネイル = トップページ最上部、記事内の写真を抽出しているスライド画像(タイトルつき)

● 記事サムネイル = トップページ要約記事並びの画像

● RSSサムネイル = ページ最下部、最新記事から数えて最大8件まで表示される画像

お手煩い、また逆質問になってしまい申し訳ありません。
よろしくお願いします (*_ _)

--------

これは別件ですが、個人設定からRSS配信数を8件に変更して頂くと下部のRSSサムネイルが8件表示になり収まりが良くなります。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object19

JSK
2016/06/09 (Thu) 13:34

質問の回答

記事サムネイル = トップページ要約記事並びの画像 です。コメントの件は私の記事の書き方を変えればOKですので問題はありませんでした。お手数をおかけします。

vanillaice (Akira)
Akira
2016/06/09 (Thu) 13:57

To JSKさん

トップページサムネイルを正方形にしたい、ということでよろしいでしょうか。
Ctrl+Fキー検索

.inner-image-parent2:before

CSSソース内に1箇所あります。
この項目の

padding-top: 70%;

の赤字数値を変更して以下の通り

padding-top: 100%;

これで正方形になりますのでお試し下さいませ。

JSK
2016/06/09 (Thu) 14:50

ありがとうございます。
縦写真が正方形でとても見やすくなりました。

お手数おかけしました。 

vanillaice (Akira)
Akira
2016/06/09 (Thu) 16:17

To JSKさん

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

手彫り
2016/06/28 (Tue) 14:13

使わせていただきました。

southerly使わせていただきました。
ありがとうございました。

Akira
2016/06/28 (Tue) 18:37

To 手彫りさん

ご報告ありがとうございます。
大変励みになります ╭( ・ㅂ・)و ̑̑

-
2016/07/02 (Sat) 21:05

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/07/03 (Sun) 01:02

To SoutherlyとBetweenNeoドロップダウンの件 内緒さん

こんばんは (o'д`o)ゝ

基本的には細かい個人カスタマイズのお手伝いはお断りしています。
ですので、ナビゲーションに関してこれ以上複雑な内容変更は無しでお願いします(笑)
それと、ご説明は元ソースに準じた形でさせて頂きますので、現状のソース(カスタマイズ後ソース)内容から「ここをこう変えて…」といった修正はできません。
ごめんなさいね (*_ _)
理想としては一旦デフォルトテンプレ内容に戻して頂いた方が良いと思います。
あるいは現状のままいくのであれば、html内容で表に出てくる箇所(描画されるもの)については

<nav class="ordinary-navi">
から
</nav>
までですので、他の部分は作業中に触らないよう注意してください。
(他にhtmlソース内に記載されているJSコードも修正しますが、こちらは描画が行われる類のものではありません)

修正すべき箇所がたくさんありますので返信が長くなります。
先にお伝えしておきます(笑)
混乱されませんよう、ひとつひとつ順を追って作業なさってください。
Promise-Me, BetweenNeoの方はそもそもナビゲーションの形式が全く違いますので、今回は申し訳ありません(Promise〜とBetween〜は『固定』ナビですので変更が煩雑)

修正点 (ご希望)
① ナビゲーションプルダウンを2つに
② モバイルリンク修正

----------

① ナビゲーションのプルダウンメニューですが、
大事なのは対象要素のidとclassが正しく設定されているかどうかです。
恐らくDecoyから移植されたと思いますが、id名もclass名も違いますので単純な移植だけでは動きません。
そしてJSの修正も必要です。
Decoyのような「カテゴリの『子』をさらに下の階層にする」といったことも今回はご容赦ください(JS, CSS共に大幅な追加・変更が必要になってしまいます)
親カテゴリと子カテゴリは上下に並ぶ形です(一応区別はつくようにしてあります)

以下はデフォルト状態からのご説明です。
以下のファイルに修正点をまとめましたので、別タブから該当項目を適宜コピペしてください。

http://blog-imgs-93.fc2.com/v/a/n/vanillaice000/southerlymod.txt

どこからどこまでが説明文で、実際にコピペする内容がどこなのか、
よくよくご確認頂きながらの作業をお願いします。


現在のカスタマイズ後ナビには<strong>が使われていますが、これは使わない方が良いですね。
strongというhtmlタグは「文字を太くする」ためのものではありません。
ページ全体の主旨となり得る文章としての「強調」を意味します。
リンクがページの主旨となることはありませんので、利用NGです。

② モバイルリンクの件はごめんなさい。
私のFC2変数指定ミスです。
上記テキストファイルで同時に修正が行われます。
悩まれましたよね。
すみませんホント (*_ _)

☆ファイルが文字化けする場合には、ブラウザの文字コードをShift-JISに変更してみてください。
それでもダメならお知らせくださいませ。

-
2016/07/03 (Sun) 12:57

管理人のみ閲覧できます

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

Akira
2016/07/03 (Sun) 20:39

To Southerly ドロップダウン内リンクの件 内緒さん

わぁぁぁーごめんなさい。
一部間違いがありました!

Ctrl+Fキー検索(コメント欄に掲載したテキストファイルを検索です)

$('.marking').on("click",function()

修正して以下の通り

$('.marking span').on("click",function()

--------

Ctrl+Fキー検索

$('.marking2').on("click",function()

修正して以下の通り

$('.marking2 span').on("click",function()

--------

どちら共
span
が抜けておりました。
そのためにリンクが効きません。
二度手間になっちゃって申し訳ないですー!

-
2016/07/04 (Mon) 16:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/07/05 (Tue) 17:03

To Southerlyドロップダウンの件 内緒さん

良かったですー。
こちらこそお手数おかけしました。
作業お疲れ様でした :)

Rin
2016/07/23 (Sat) 14:48

スマホで閲覧すると個別記事内の画像が表示されない件

初めまして。
こちらのテンプレートを拝見し、fc2を利用することを決めました。
素晴らしいテンプレートの配布、ありがとうございます。

すごく満足していますが、自分のスマホから閲覧すると、個別記事内の画像が表示されないようです。
トップの一覧表示では見れます。
何故でしょうか。。

お時間ございましたら、ご対応お願い致します。

今後ともどうぞよろしくお願い致します。

vanillaice (Akira)
Akira
2016/07/23 (Sat) 15:25

To Rinさん

ご不便おかけしております (*_ _)

お使いのデバイス名とOSのバージョンを教えて下さいね。
私の環境(iPhone6 iOS最新)では問題なく閲覧できております。
iPad air(OS最新)でも同様。

もしかしたらこれかな?と思うものが一点ありますので修正してみても良いかもです。
Ctrl+Fキー検索(htmlソース内にあります)

({mobile:false})

上記の赤字部分を削除(かっこは残します)
一度お試しください。

Rin
2016/07/23 (Sat) 16:11

スマホで閲覧すると個別記事内の画像が表示されない件

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

携帯はdocomo
Xperia SO-02E
Android バージョン4.4.2
です。
情報に不足がございましたらすぐ調べますので仰ってください。

教えていただいたhtmlの該当箇所を消してみました。
まだ時間が経っていないからか、反映しませんでした。

念のため、同じ機種の人にも見てもらったら、画像は表示されていましたが、トップのテンプレートが違っていました。

わたしの携帯ではPCのテンプレートのまま記事が縦一列になっただけ(ピンクのリボンの日付もあり、トップのはいけなどは無し)、という感じなのですが、その人の携帯では、サムネイルを左に、文章を右に、という記事が縦一列に並んでいました。
これって、わたしが設定画面のどこかで変なことをしてしまっているのでしょうか...。。

あと、重ね重ね厚かましいですが、ヘッダーのナビゲーション?の、about meのリンクですが、リンク先の設定をし、クリックしても画面が変わりません...。

それと、コメントを受け付けない設定にして、フォームを非表示にするところまではできたのですが、記事一覧や個別記事の下に「0comments」と表示されるのを消す方法がわかりません。。

これらも、お時間が出来てからで結構ですので、教えていただけると幸いです。

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

Akira
2016/07/23 (Sat) 16:26

To Rinさん

あー。やっぱりXperiaでしたかー ( ̄∀ ̄;)
Sonyのブラウザはちょっとアレでソレで(汗)
他機種と同じAndroid OSのはずなのにXperiaだけが… ってのが非常に多いんですよね (´・ω・`;)

で、バージョンが4.4.2ということで、こちら2013年にリリースされたものでかなり古いです。
現在既に7(OS名 ヌガー)がリリースされようか、というところですので、4だともう相当旧式バージョンです。
初期AndroidはCSS3実装が追いついていませんので、表示不具合も多く見られると思います。
できるようでしたら最新版にアップグレードをお願いしたいところです。
(セキュリティ上でも大事なことです)

お友達の方の見え方なんですけども、
サムネイルが左、文章が右… という状態がちょっと想像できないので、
もしスクリーンショットがお有りでしたら見せて頂きたいなと思います(鍵つきコメントで構いません)
そしてやはりその方がご利用のバージョンも教えて欲しいです。

ちょっと一旦離れますので、また改めて追記させてくださいね。
申し訳ないですー!

-
2016/07/23 (Sat) 16:55

管理人のみ閲覧できます

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

Akira
2016/07/23 (Sat) 17:06

To Rinさん (スクショ拝見しました)

まずRinさんのスクショの方、やはり正しくない表示です。
せっかくの背景が出ていませんよね。
アップグレードでこれは解決すると思います。

先ほどの件、既に修正されたと思いますが、こちらもアップグレードで解決すると思います。
本件はvisibilityというCSSに係るものですが、古いAndroidではバグが有った模様。
ですからホントは戻した方が良いです。

ご友人のスクショですが、こちらはスマートフォン版が表示されています。
これは私が制作したものではなく、FC2のものです。
現状のスマホ閲覧スタイルは以下の通り

・パソコン版とスマホ版を全く別のhtmlで分ける = Rinさんの現在の設定
・レスポンシブデザインを採用し、スマホ版は非表示にする

Rinさんはパソコン版を見ていますが、ご友人はスマホ版をご覧になっている状態です。
スマホ版非表示の手順については記事内の仕様表に「任意個人設定」「レスポンシブ利用」の項目にリンク設置していますので、遷移先でご覧ください。
スマホ版を非表示にするメリットとしては
・html管理が楽(スマホ版は別管理です)
・Googleの推奨

======

Aboutリンクの件ですが、こちら修正した旨のお知らせを本記事内に記し忘れておりました。
ごめんなさいね (*_ _)
公式の方は既に修正済み、カスタマイズをされていて再DL困難な方は手作業での修正をお願いしています。
該当記事はこちら ↓

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

大変お手数おかけします。
よろしくお願いします (*_ _)

=====

あとこちら「ついで」というとなんですが、
現在RSS配信が5件の設定になっているかと思います。
8件に変更して頂くことでページ下部が綺麗に埋まります。
この件はお任せしますね。
(こちらもブログ個人設定です)

Rin
2016/07/23 (Sat) 17:50

スマホで閲覧すると個別記事内の画像が表示されない件

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

About meの修正、やってみました!
ページ移動もモバイルへの誘導も出来て、嬉しいです。
ありがとうございます!

お手数だなんてとんでもないです。
こちらこそ、本当にありがとうございます。

アップグレードしましたが、まだPCビューだと何も変わりません。
でもモバイルページへの移動が出来るようになったので、
モバイルで見るPC画面を整える必要性が薄れてしまいましたが
やっぱり画像だけ表示されない画面を用意したままなのはおかしいです・・・よね??
任意個人設定やレスポンシブの話が
わたしの頭では時間をかけないと理解できなさそうです。
用事で今から出掛けないといけないので、帰ってから落ち着いて取り組んでみます!
そうしたら結果をご報告にきます。

Akiraさん、貴重なお時間をいただき、本当にありがとうございます。
このテンプレートに出会えて、嬉しいです。

Rin
2016/07/23 (Sat) 17:59

「ついで」のこと

ありがとうございます!
RSSが何なのかわからないまま、教えていただいた通りにしましたw
RSS、少し検索してもちんぷんかんぷんでした。すみません。
Latest postsが8個で下部が綺麗に埋まるということでしょうか?

ご親切にしていただいて、ありがとうございます!

Akira
2016/07/24 (Sun) 01:35

To Rinさん

アップグレードしても直らないということは、やはりダメなんだと思います。
タイムラグ的なものはありませんので、現状上手くいっていないのならダメかと ^^;

色々調べましたが、Xperiaの機種固有バグにひっかかったのかもしれません。
背景が出ていないのは恐らくそれです。

スマホ版をご利用になるというスタイルでお間違いないでしょうか。
ただどちらのビューを選択するかは閲覧者に委ねられているわけですので、直せるものは直した方が良いと思います。
FC2ブログはスマホから見ると自動的にスマホ版になる、と言われていますが(非表示設定を除く)、実際そんなこともないです (´・ω・`)
FC2にはPCビューでしか閲覧できないページというのがまだまだあって、そこから遷移してきた方はパソコン版のビューに振り分けられます。

どうされるかはお任せしますが、修正されるのであれば画像のフェイドエフェクトを取り除く処理を試されると良いかもしれません。
html, CSS共に編集の必要がありますので、修正するお気持ちがあれば一言頂ければお伝えしますね。
よろしくお願いします。

RSSについてはその通りです。
Latest postが埋まります(笑)

Rin
2016/07/25 (Mon) 02:02

スマホで閲覧すると個別記事内の画像が表示されない件

ご報告が遅くなり、大変申し訳ございません。
色々調べていただいて、ありがとうございます!

わたしは、スマホでもこのテンプレートで見れるようにしたいです。
レスポンシブにしたい、ということだと思います。(間違ってたらすみません)

でも、フェイドエフェクトっていうのを取り除いた場合に、大きな影響が出て、どこかしら何かカッコいい部分が大幅になくなってしまうほどなら、悩んでしまいます。
個別記事の画像が少しだけゆっくり表示されるのが解除されるということでしょうか??

それは、携帯用表示のために取り除いた場合、PCビューでも変わってきますか?
もしフェイドエフェクト=「画像の表示を少しゆっくりにする」ということでわたしの理解が合っているなら、そこは我慢できます。

それとも、トップ画面の、スライドみたいな部分がなくなる=フェイドエフェクトいうことでしょうか??
それは出来れば残したいところです。

PCで見ても携帯で見てもこのテンプレートで、
トップの画像はスライドされて(今でもちゃんと出来てます)、
トップの背景も出て(これはアップグレード済みでだめだったので、諦めます)、
個別記事でもちゃんと画像が出たら、最高です。

そんなことは可能でしょうか??

【第1希望】
携帯ビューは選べず、レスポンシブで個別記事の画像も表示される

【第2希望】
携帯ビューも選べて、PCビューの個別記事の画像も表示される

PCビューになってしまうことがあるのなら、やっぱりPCビューの個別記事の画像はどうにか表示させるたいです。

このどちらか、可能でしょうか。。
何度も本当に申し訳ございませんが、ご教授いただけますようお願い致します。
いつでもお時間の出来たときで結構です!

-------

RSSの件、ありがとうございました!
すっごく素敵になりました(^▽^*)ワーイ

vanillaice (Akira)
Akira
2016/07/25 (Mon) 13:02

To Rinさん

レスポンシブとしてご利用になりたい、ということですね。
スマートフォンから見た際にもパソコン版が表示されるようにする = レスポンシブで使う
という解釈で合ってます。

私の手元にXpeiaの実機がありませんので、推測での作業になります。
先日お伺いしましたアップグレードの件ですが、お伝え頂いたビルド番号は「ソフトウェア・アップデート」のものだと思います。
Xperiaはそういうシステムなのですね。
iPhoneユーザーには馴染みがないもので ^^;
Xperiaそのもののソフトウェア更新とOS(Android)更新とを同時に行うということなのかしら。
iPhoneはソフトウェア更新というのが無いんですよね。
あるのはOSのアップデート・アップグレードのみなので大変わかりやすいんです。
独占OSならではって感じなんだとも思うけど(笑)

そのビルド番号(ソフトウェアアップデート・アップグレードの番号)をインストールすることでAndroidのバージョン自体がいくつになったのかをご確認願います。
恐らく6になってるとは思いますけれど。
バージョンが6 あるいは 6.○○ ならばOKです。

=====

まずテンプレートのエフェクトについてデフォルトの仕様をご説明しておきます。

トップページにはカルーセルスライダーがあります。
そして下に続く記事。
いずれもそのサムネイル画像は、各々異なるサイズ・異なる縦横比のものを拾って表示しています。
それを同じサイズと縦横比で表示させるためにJava script(ジャバスクリプト 以下JSと称す)を利用しています。

元の画像をそのまま表示するのと違い「整形」という作業を行います。
その担い手がJSですけれども、整形に多少時間がかかるんですね。
ページを表示する際に「ローディング」が行われますが、JSでの整形よりこちらのローディングの方が速いんです。
結果として整形前の状態が一瞬表示され、その後整形された状態に変化すると言えばおわかりになるでしょうか。
参考としてお時間ありましたら、公式テンプレートの
basic_white
をプレビューしてみてください。
FC2ブログ新規開設者はこのテンプレートがデフォルトになってますけれども、開いてみると
一瞬ページ全体が表示されて、直後にボワーっと再度フェイドするような感じ。
なんか2回表示されてね? (;`ー´)o
という感じ(笑)
これが「整形よりローディングが先に終わっちゃった…」の典型例です。

それを避けるためにSoutherlyテンプレでは
・整形対象の要素を「一旦隠しておく」= visibility: hidden;
・整形が終わったら「見せる」= visibility: visible;
こういうことをしています。
非表示 → 徐々に表示
という意味ですが、どうもこれがXperiaで上手く解釈されていないようです。

推測
① JSの切り替えが上手くできない
② visibilityに誤解釈がある (こちらはCSS解釈です)

このどちらかではないかと。
あるいは両方か(笑)
で、これから修正をして頂くわけですが、原因の特定を交えた作業をして頂きたいので、段階的になります。
方法1をやってみてダメなら方法2へ…。
という感じで。

=====

まず一旦テンプレート内容をデフォルトに戻して頂きたいので、再度Ctrl+Fキー検索

().init();

これ先日直して頂いた箇所ですが、元に戻して

({mobile:false}).init();

この状態にしてください。
二度手間で申し訳ないです。
この意味なんですけども、パソコンのフェイドエフェクトをスマホでは無効にする、というものです。
トップページのフェイドや個別記事での画像フェイドのエフェクトはデフォルトでは無効化しています。
(スマホの方がJS整形が速いのと、スクロール動作主体ですのでフェイドが鬱陶しいと感じられることがあるからです。スマホでは動かした後指を離してようやくフェイドインが行われます。)

元に戻したらこれから修正作業に入ります。
一旦投稿します。

Akira
2016/07/25 (Mon) 13:32

To Rinさん ②

Ctrl+Fキー検索

<script>var _ua=(function(u)

上記を目印にして頂きまして、スクショの通り該当箇所を削除

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/34988fuw94eth__zps5u13pkbe.jpg

消した箇所にこれから別のコードと差し替えを行いますので、場所を見失わないようご注意ください。

http://blog-imgs-93.fc2.com/v/a/n/vanillaice000/southerlyremoveimgfade.txt

文字化けがあるようでしたらお申し付けください。
別タブでコードが開かれますので、Ctrl+Aで全選択、Ctrl+Cでコピー、先ほど該当コードを消した同じ箇所に
Ctrl+Vでペースト。

こちらが方法1です。
これで画像が出ないようでしたら、JSの解釈ができていないということになります。
その場合には方法2をお伝えします。
方法1で上手くいけばそれが一番良いですが、方法2の場合にはパソコン版での表示に影響が出ます。
先に述べたように、個別記事の画像が一瞬表示された後に再度フェイドインというパターン。
あるいはフェイドエフェクト自体を取り除くか…。
まずは方法1を試されまして、結果をお知らせくださいね。
よろしくお願いします!

Akira
2016/07/25 (Mon) 14:42

To Rinさん 最初に読んでくださーい!

ごめんなさい。時系列狂いましたが、このコメントを先に読んでもらえると助かります(笑)

肝心なこと聞き忘れちゃったんですけど、Xperiaでお使いの「ブラウザ」って何ですかね?
OS4.4 を継続利用されていたところをみると、もしかして「標準ブラウザ」ではないだろうか と。
標準ブラウザ(という名称のブラウザ(笑))は既に開発が終了していますので、これ以上良くなることはありません。
最新機種では既に搭載されていないと思います。
Xperiaで4.4のバージョンを有しているということは、ギリギリこの標準ブラウザがバンドルされているかもしれないです。
現在のAndroidデフォルトブラウザはGoogle Chromeですので、こちらの確認も併せてお願いします。
ブラウザ変えただけで解決するかもしれないです。
元からChrome使ってます、ということなら作業継続で(笑)

==== 26日 追記

現在同じエフェクトを適用しています(サイドメニューに茶系アラベスク模様のテンプレ)
お手数ですが、お手持ちのスマホから見て同じ挙動かどうか確認して頂けると助かります。
よろしくお願いします。

マタタビ
2016/07/28 (Thu) 20:28

Belongテンプレートの件

初めまして。テンプレートに関する質問はこちらで大丈夫でしょうか?

PC用にBelongテンプレートをお借りしているのですが、「mobile」を押してスマホ仕様にすると、ブログの写真が収まりきらずにはみ出してしまいます。

スマホ用のテンプレートは公式の「new_basic_white_ap」を使っています。
PCテンプレも公式のレスポンシブ仕様のものを使うと、スマホで見たときに写真はきれいに収まっています。

ですが、公式のPCテンプレではなくPC用にBelongを使い続けたいので、スマホで見たときに写真が自動で収まる方法を教えていただけますか?

よろしくお願いします。

Akira
2016/07/28 (Thu) 20:46

To マタタビさん

お手数おかけしております。
こちらは別のテンプレートのページですので、移動をお願いします。

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

ご質問内容へのお返事もそちらで致しますね。
よろしくお願いします。

-
2016/07/28 (Thu) 21:16

管理人のみ閲覧できます

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

Akira
2016/07/28 (Thu) 21:23

To Southerlyの件 内緒さん

ごめんなさい。
私テンプレート変えてしまったんです(笑)
このテンプレートはまた別の方法でフェイドさせてます ^^;

ちょっと今スマホからですので、後ほど改めてきちんとお返事しますね。

======

スクショ拝見しましたら、Androidのバージョンが4.4.2のままですね(笑)
これ最新の6.○○にアップして頂きたいところですが、なにせiPhoneユーザーなもので詳細な手順がわからない(笑)

vanillaice (Akira)
Akira
2016/07/28 (Thu) 21:41

To Southerlyの件 内緒さん ②

画像は表示されるようになった、ということですよね。
良かったですーーー!(笑)
で、現在設定中の私のテンプレートで鳥かご画像が出ていない件と、Southerly背景が出ていない件。
これはやはりAndroidのバージョンが低いせいか、あるいはXperiaの機種固有バグのいずれかだと思います。
今までXperiaには結構泣かされてまして、私の方で把握しているのが

・background-sizeの誤認識
z-indexの誤認識(特にネガティブ(マイナス)指定)

下のz-indexなんですけれども、広義で言うと
「position指定含む」
なんですよ。
鳥かごの部分は
position: absolute;
という指定で表示させています。
やっぱXperiaはposition指定+z-indexを正しく認識できないのではないか、と思います。
Androidのバージョンアップで修正されれば良いんですけどもねー (´・ω・`)

で、ちょっと該当機種かどうかわかりませんが参考記事を見つけましたのでリンク貼っておきます。

ASCII.jp 様
http://ascii.jp/elem/000/001/155/1155781/

あと、やはり標準ブラウザをお使いだったんですね。
こちらは既にGoogleが開発を終了していますのでChromeに切り替えされると良いと思います。
その前にバージョンあげられると良いんだけどー ( ̄∀ ̄;)

Rin
2016/07/29 (Fri) 00:20

To Southerlyの件

たくさんお調べいただいて、本当にありがとうございます。
貼っていただいたリンク先を拝見していましたが、
どうも対象外のようです;;
この間教えていただいたときにアップデートして、
この機種で出来る範囲では最新になったようなんですが><
ちょっとこういうの、疎すぎて・・・
携帯、見た目が好みで、もう3年くらい使っているので相当古いんですね~;

z-indexっていうのが、重ねているやつですね?!
htmlとかcssとかJSとか・・・
こういうのがわかる人の脳みそってすごすぎます。

このたびchromeに乗り換えました。教えていただいてたのに対応が遅くてすみません!
chromeなら、何の問題もなく、トップもHi Thereも完璧でした!
これにて一件落着です!^▽^

メインの問題以外にも、細かいことにたくさんご対応くださり、
本当にありがとうございました!!
ご縁に感謝です。
どうも、ありがとうございました!

vanillaice (Akira)
Akira
2016/07/29 (Fri) 00:28

To Rinさん

Chromeなら大丈夫でしたか。
それはなにより。安心しましたー ( ̄∀ ̄;)
こちらこそ、ありがとうございます :)

ご新居の件、楽しくもあり大変でもありますよね。
悩みに悩んだほうが良いと思います。
実際私、今になって直したいところがたくさんある… ( ;∀;)
壁紙でしょ〜? コンセントの数と位置でしょ〜?あと…あれもこれも ( ̄∀ ̄;)
気になるところは徹底的に考えた方が良いですよ。
元インテリアコーディネータより((((笑)

Rin
2016/07/29 (Fri) 02:24

ななっ なんですとー?!!
PCに強くて、インテリアにも強いなんて。
インテリアはセンスの人、PCは知識の人ってイメージで正反対みたいに思ってました。
あ・・・両方あるからこんな素敵なテンプレートが出来るんですよね(°□ °

Akiraさんのお宅は、ヨーロッパのゴシックアンティーク(?)という
勝手なイメージです(ピックアップされてる洋楽に対する勝手なイメージで)。

インテリア、一般の人とプロの人とでは雲泥の差がありますよね。
例えば、同じ素材を使ってても、
なんか雑誌で見た、小物は三角形に配置!とかのテクニックを使っても。
やっぱりプロとは違うって思うんです。
しょぼくなるというか、庶民な感じになってしまう。
なぜそうなるのかまだわかりませんが、たくさん勉強して、
素敵なおうちになるように頑張ります!^^

vanillaice (Akira)
Akira
2016/07/29 (Fri) 14:08

To Rinさん

いやー… ( ̄∀ ̄;)
コーディネータって言っても、つまるところは営業なんですよ。
家具売ってなんぼ、照明・エアコン売ってなんぼ、的な(汗)
内情をお話するとイメージを壊してしまいそうな…(笑)

素敵なおうちになりますよう :)

kazu
2016/10/30 (Sun) 16:50

キーワードについて

Akiraさん、はじめましてこんにちは。

Southerlyテンプレートを使わせてもらっています。


ちょっとお聞きしたいのです。
Southerlyを導入後、一週間を過ぎた頃なのですが、
検索エンジンにインデックスがされていないんですね。

「それくらいは普通じゃない?」ということならいいのですが、
このテンプレートは、『SEO対策済み』とは記載されていないので、
ちょっとSEOに関して不安を感じているのです。

そこで質問させてください。


私は、「meta name="keywords"」の部分に、「,」で区切ってキーワードを設定するタイプのテンプレしか利用したことがないのですが、『Southerly』にも「meta name="keywords"」の部分を組み込み、ワードをカンマで区切って設定することはできないのでしょうか。

以下のサイト↓で、
http://seo.ypp.info/plan/02.htm


XHTML1.0の一般的なヘッダとして、コピペできるコードがありました。


以下コード転記
━━━━━━━━━━━━

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="keywords" content="***,***,***" />
<meta name="description" content="***" />
<title>***</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen,print" />
</head>

━━━━━━━━━━━━

上記のコードを『Southerly』でも不具合なく組み込めるとしましたら、
どの部分に入れれば良いのか、教えて頂けると助かります。


「もう、そんなことしなくても、サイトタイトルとか、個別記事のタグからキーワードを引っ張ってるから、『Southerly』のSEOは気にしくてOKですよ」
ということなら、『Southerly』でのキーワードを設定するコツなどを伺いたいです。

よろしくお願いいたします。

Akira
2016/10/30 (Sun) 17:15

To kazuさん

こんにちは ( ゚Д゚)ノ

> 一週間を過ぎた頃なのですが、
検索エンジンにインデックスがされていない

Search consoleでクロールが行われたかどうかをご確認ください。
インデックスされるか否かはGoogleのクロール状況次第です。
なにかしら問題があってインデックスされないのであればその問題点の指摘も確認できるはずです。
Fetch as googleへクロール依頼をされても良いかもしれません。
(ただしあくまでも「依頼」であってインデックスが確約されるわけではありません)

> 『SEO対策済み』とは記載されていないので、
ちょっとSEOに関して不安を感じている

不安をお感じになるようでしたらSEOに特化したテンプレートに変更されることをおすすめします。
一般的なテンプレよりは対策していると自負はしておりますが、そこは私の主旨ではありませんので謳い文句にはしていません。

> XHTML1.0の一般的なヘッダとして、コピペできるコードがありました

こちらのテンプレートはhtml5であってxhtmlではありません。
(現在のweb標準はhtml5です)
仮にxhtmlであったとしてもそのコード内容では重複エラーがかなり出ると思います(笑)
FC2ではエリア別の対策が必要です。
というわけで、htmlのバージョンが異なりますので組み込むことはできません。

> キーワードを設定するコツ

meta keywordは現在ではどこのbotもサポートしていません。
(中国のバイドゥはしているらしい)

参考: SEOラボ様
http://seolaboratory.jp/internal/2016051334998.php

上記の事実をご覧頂きまして、それでも必要とお考えであれば導入されても良いと思います。

FC2でのSEO対策で大事なのは
・ follow, nofollowの振り分け
・ canonical
・ description重複
・ <title>をエリア別に設定すること

nofollowについてはページ送りでの対策も必要です。
上記の内容についてはデフォルトで行っております。
descriptionはgoogleが自動で生成してくれますので、重複するよりはそちらのほうがよほど安全、という考えから敢えて指定を最小限にしています。
SEOの結果は比較的長期で見ないとなんとも言えません。
テンプレートを変更したら即座にその内容が影響するわけではありませんので。
こればっかりはご自身でお決め頂かないと… というところでしょうか。
「不安だ」とはっきり感じていらっしゃるのであれば、精神衛生上に於いても変更されるべきではないかと思います。
よろしくお願いします。
(ついでですが、スマホ版をご利用の場合にはさらなるSEO対策が必要です。
SEOを気にされる方はレスポンシブデザイン採用・スマホ版非表示をおすすめします。)

kazu
2016/10/30 (Sun) 17:38

素早いご回答、ありがとうございました。

Akiraさんこんにちは。

本当に早い回答で、大変驚きました。
そして、助かりました。
ご回答ありがとうございます。


「meta name="keywords"」が昔の物であること。
今更ながら理解させていただきました。

SEOラボ様の記事も拝見いたしました。
ありがとうございます。


Akiraさんのテンプレートは、大変気に入っているので、これからも使わせてください。

気に入っているだけに、「ちょっとした疑問も解決しておきたい」といった心境です。

今後ともよろしくお願いいたします。


Akira
2016/10/30 (Sun) 18:01

To kazuさん

今ちょっと私の方でも調べてみました。
毎年秋口にFC2へのクロール頻度が減るのは恒例行事、みたいな記事もありました ^^;
その仕組みがよくわからないですけどもね。

FC2ブログは「コンテンツ重複」というのが必ず起こるんです。
それをいかに回避するか、というのが私のテンプレのhead情報の主旨なのですが。
FC2は独自ドメインではありませんので、サイト全体(FC2ブログ全体)の状況というのも大いに影響します。
このサイト様がわかりやすいかもです ↓

参考: はるか彼方の星の光 様
http://www.distantstarlight.com/12.htm

「ついで」ということでスマホ版非表示をおすすめしましたが、それも重複を避ける作業の一貫です。
重複コンテンツ = 異なるURLなのに内容が同じ
スマホ版はPC版とはURLが異なりますが、記事内容は全く同じなわけで。
もちろんスマホ版のheadに相応の対策が施されていればまた別ですけれどもね。
通常はPC版とスマホ版に内部情報の互換性はありません。
双方が同一作者であり かつ 意図的にしっかりと対策しない限りは。

ということで、FC2自体へのクロール頻度が減っている、という状況も併せてご報告でした。
参考は2012年の古い内容ですが、状況はあまり変わっておらず。
その上で最もわかりやすいと私自身が思ったのでご紹介させて頂きました。
よろしくお願いします。

kazu
2016/10/30 (Sun) 21:58

Akiraさん、こんばんは。

いろいろと調べてお伝えいただき、大変有り難い思いです。

『毎年秋口にFC2へのクロール頻度が減る』覚えておきますね。

用意して頂いたリンクも確認いたしました。


私は、

● かっこいいテンプレ
● レスポンシブ

が目的で導入させていただいたので、
akiraさんの説明を見て、
スマホの非表示設定は、最初に行っています。


・ follow, nofollowの振り分け
・ canonical
・ description重複
・ <title>をエリア別に設定すること


Akiraさんに上記4つの対策を挙げて頂き、
少しでもご面倒を減らそうと思って、
自分なりに調べてみました。

canonicalについては、若輩ながら
「だいたいわかった」し「完璧に作られているのだから、分かる必要すらなかった」という結論です。

descriptionは、記事文頭の100文字程度に変更するコードに書き換えていましたが、これも「Akiraさんが最善を尽くしてくださったものを、変更する意味はない」と強く感じ、初期状態に戻しました。

その他2つに関しましては、自分でももう少し調べた上、質問させていただこうかと考えています。


重なる応対、ありがとうございました。

vanillaice (Akira)
Akira
2016/10/30 (Sun) 22:14

To kazuさん

こちらこそありがとうございます :)
以下の内容はご返信不要です。

● nofollow について
FC2のトップページのアドレスは
http://アドレス/
ですよね。
そこからページ送りをクリックして2ページ目へ行き、再度1ページ目に戻ると
http://アドレス/
であったはずが
http://アドレス//page-0.html
に変わってしまいます。
これ即ち「コンテンツ重複」にあたります。
内容は同じなのにURLの異なるページができてしまうんです。
それを避けるためにページ送りの「前に戻る」については
rel="nofollow"
をつけておかないと両者がインデックスされてしまいます。
この点についても処理済みです。
FC2特有のことですのでお調べになってもなかなかヒットしないかも、と思って記しました。

少しでもkazuさんの理想に近づくと良いですね :)

-
2016/10/30 (Sun) 22:38

管理人のみ閲覧できます

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

Akira
2016/10/30 (Sun) 23:01

To SEOの件 内緒さん

いえ。どうぞお気になさらず。
ご本人も気にされないと思います。

> HTMLで100点なのでSEO対策〜

・htmlが完璧であること
・レイアウトが崩れないこと
・SEO対策

上記3つは全く別物です。
htmlが完璧 ≠ SEO対策
SEO対策 = htmlが完璧であることが望ましい

htmlにエラーがないからSEO対策になっている、というのは暴論です(笑)
SEO対策の一貫とは言えますが、それ自体がイコールとはなり得ません。
head情報を正しく記載して初めて「SEO対策」ですので、特にFC2のように特殊なしくみを有するサイトで単純なheadを記載しただけでSEO対策になるはずがありません。
htmlをvalidにし、head情報を正しく記載して初めて言えることじゃないかと思いますよ。
デザイン崩れについてはhtmlが起因することもありますが、基本はCSSですね。
SEO対策済みを謳ってデザインが崩れているテンプレなど山ほどあります。
私のは大丈夫でしょうかね ^^;
なにせ世にある全てのデバイスで確認しているわけではないので心配(笑)

kazu
2016/10/31 (Mon) 11:32

noindexについて質問させてください

Akiraさん、こんにちは。


先日は、丁寧にご返信いただき、
ありがとうございます。
とても勉強になりました。


改めて、もう1つ質問させてください。
indexに関しての質問です。


html内に、

meta name="robots" content

という部分が3つあるのですが、
上の2つが、『noindex,nofollow』
最後の1つが『noindex, follow』となっていました。

私の知識が乏しい為だとは思いますが、
「noindexということは、全検索エンジンのクロールを断っているのかな?」という思考が働いてしまいました。

しかしそうではなく、これこそが『FC2特有ページ送りの重複コンテンツ』を避けるための処理である。という理解で問題ないでしょうか。

連日質問をぶつけて恐縮ですが、よろしくお願いいたします。

Akira
2016/10/31 (Mon) 17:24

To kazuさん

申し訳ないんですが、別の方のテンプレを設定している状況でインデックスがどうの、不安だのと言われても非常に困ってしまいます (´・ω・`)
作者様とご相談なさるべきではないでしょうか。
現時点で導かれる結果は設定しておられるテンプレによるものですし、それを今後上手く軌道に乗せたいにしてもそこまでの責任は負い兼ねます。
Googleのbotはユーザーの都合では動いてくれません。
その基本をまずお考えになられてからご質問をお願いします。
ここでの質疑応答は私のテンプレユーザーさん第一であり最優先。
そしてハウツーを目的としたブログでもありません。
カスタマイズ関連でUPしている記事に関連しているのならばまた別ですけれどもね。
ブログアドレスのご提示をお願い致します。
当方の勘違いでしたら相当失礼なことを私は言っていることになりますのでご指摘ください(笑)

クロールのお断りが nofollo
インデックスのお断りが noindexです

noindex, follow というのは
リンクの集合体のようなページはGoogleから訝しく思われるのでインデックスされるのは避けたい。
でもリンク自体は辿ることができるようにしておきたい、という時に使います。
(サイト内コンテンツ案内などができるようにしておくための処理)
botはリンクからリンクへと旅をしています。
それがクロールです。

kazu
2016/11/01 (Tue) 13:34

貴重なお時間を割いて頂きありがとうございました。

> 申し訳ないんですが、別の方のテンプレを設定している状況でインデックスがどうの、不安だのと言われても非常に困ってしまいます (´・ω・`)

大変お忙しいところ、お時間を頂き申し訳ございませんでした。
このコメントへの返信は頂かなくて大丈夫です。m(_ _)m
私こそ理解がたりず、誤解しているかもしれませんが、
お返事をさせていただきますね。

> 作者様とご相談なさるべきではないでしょうか。

Akiraさんのテンプレート『Southerly』をお借りして、私個人で使わせていただいています。(作者様であるAkiraさんに、『Southerly』のhtml内について質問しています。)

> 現時点で導かれる結果は設定しておられるテンプレによるものですし、それを今後上手く軌道に乗せたいにしてもそこまでの責任は負い兼ねます。
> Googleのbotはユーザーの都合では動いてくれません。

仰る通りです。「誰かに責任をとってもらおう」という意識での質問ではありませんので、どうか寛容いただきたいと思います。

> ここでの質疑応答は私のテンプレユーザーさん第一であり最優先。
> そしてハウツーを目的としたブログでもありません。
> カスタマイズ関連でUPしている記事に関連しているのならばまた別ですけれどもね。
> ブログアドレスのご提示をお願い致します。
> 当方の勘違いでしたら相当失礼なことを私は言っていることになりますのでご指摘ください(笑)

Akiraさんのテンプレート『Southerly』について質問しています。

今回の私のブログカテゴリーは、アダルトカテゴリです。そのため、ココにアドレスを提示することは控えさせていただきますね。これをお伝えすることにも抵抗がありましたが、隠せば更なる不信感を抱かせてしまうのでお伝えしました。

> クロールのお断りが nofollo
> インデックスのお断りが noindexです

勉強になります。ありがとうございました。


「noindexについて質問させてください」というのは、『Southerly』html内にある、
<meta name="robots" content="noindex,nofollow">は、『no』の状態で大丈夫なのでしょうか?という、作者様を信用しきれていない大変失礼な質問でした。

気に障られるのも当然かと思います。申し訳ございませんでした。

文章で気持ちを伝えるのはとても難しく、もどかしく感じています。
私の気持ちとしては、「本当にありがとうございました」という気持ちと、「貴重なお時間を頂いて申し訳ございません」という気持ち。この2つだけです。

Akiraさん、お陰様でFetch as googleへクロール依頼を行い、少しINDEXされました。

それでは失礼します。素敵なテンプレートのご提供、ありがとうございました。

Akira
2016/11/01 (Tue) 17:58

To kazuさん

こちらこそ大変失礼を致しました。
故あって勘違い、というか疑いの目を向けてしまいました。
頻繁に訪れる方でパーツだけ持っていかれる方がいらっしゃいます。
スライダーなどのJqueryプラグインやhead情報の記述などを抜き出して公式テンプレに組み込み、デザイン者名を不明瞭にしている方。
もう一つは他ブログサービスの方(この方はたぶんコメント欄も読んでると思います。以前から他のユーザーさんから何度か指摘があった元FC2ブロガーです)
時期が来たら記事にしようかと思います。
その時は名指しする (´・ω・`)

というわけでして、気分を害したからということではないんです。
実際私のテンプレユーザーさんではない方とも会話を交わしていますし、ご質問頂いたり逆に私が教えて頂いたり。

そういう経緯ですのでお許し願えれば幸いです。
ただ今後は質問時のアドレス提示をお願いしようかと思っております。
疑心暗鬼はお互い疲れるだけなので(笑)
ただkazuさんのような方も多いでしょうから考え中 (゚ω゚)

kazu
2016/11/01 (Tue) 19:09

Akiraさんこんばんは。

「気分を害していない」とのことで、安心しました。
ただ、疑わせてしまうような内容であったことをお詫びいたします。

> スライダーなどのJqueryプラグインやhead情報の記述などを抜き出して公式テンプレに組み込み、デザイン者名を不明瞭にしている方。
> もう一つは他ブログサービスの方。

小心者ですので、悪事を働くような度胸はありません(・・;)
知識がなく、聞いてもできそうな気すらしませんし・・・。

> そういう経緯ですのでお許し願えれば幸いです。

許すなんて、そんな「上からの気持ち」はありませんよ。
もともと感謝しかありませんから。

> ただ今後は質問時のアドレス提示をお願いしようかと思っております。
> 疑心暗鬼はお互い疲れるだけなので(笑)
> ただkazuさんのような方も多いでしょうから考え中 (゚ω゚)

女性が見て気持ちのよいコンテンツではありませんが、「テンプレ作者として確認したい」ということでしたら、個人的な場で開示することを拒むつもりは全くありませんよ。

グローバルメニュー項目を増やしたり減らしたりはしていますが、
まるごと『Southerly』を使わせてもらっています。

ご提供感謝です。

vanillaice (Akira)
Akira
2016/11/03 (Thu) 01:02

To kazuさん

本来はそんなことしなくて良いんですけどね (´・ω・`)
みなさんがマナーさえ守ってくだされば(笑)
あらぬ疑いをおかけしましたことを改めてお詫びします。
ごめんなさいね。

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

-
2016/11/20 (Sun) 11:53

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/11/20 (Sun) 13:46

To Southerly見出しの件 内緒さん

こんにちは ( ゚Д゚)ノ

お尋ねの件は「セマンティックに書くことを考慮する場合に見出しをどうしたら良いか」
という主旨で合ってますでしょうか。
* セマンティック = 意味・定義・関連付けを正しく行うこと

どこまでご説明すれば良いのか、内緒さんのhtmlに関する知識がどの程度かにもよりますが、
なるべく詳細の方が良いんでしょうかね (´・ω・`)
結論を先に言うと
<h3>を使ってください

① html5に於ける「見出し(hタグ)」

html5構成のテンプレートである、というのが大前提で、かつ、
<article>と<section>を用いたセクショニングが行われている場合、全ての見出しは h1 でもOKなんです。
これ疑いたくなりますけどもね。事実です。
そもそも<article>も<section>も「見出し必須」のアウトラインであり、この両要素自体がセクショニングを意味します。
セクショニングというのは「項目分け」であって、各項目には通常「見出し」が必要。
<article>や<section>それ自体が分割項目である、という定義です。
その定義があるならば、見出しはネスティングの状態に合わせて
<h1> → <h2> → <h3> → ...
と降格させていく必要がありません。
* ネスティング = 入れ子

例) 全見出しがh1ではいけないパターン

<body>
<div>

<h1>ブログタイトル</h1>

<div>
<h1>見出し</h1>
</div>

<div>
<h1>見出しその2</h1>
</div>

</div>
</body>

例) 全見出しがh1でもOKなパターン

<body>
<div>

<h1>ブログタイトル</h1>

<article>
<h1>見出し</h1>
</article>

<section>
<h1>見出しその2</h1>
</section>

</div>
</body>

------

divは意味や定義を持ちません。
従ってセクショニングも行いません。
articleはそれ単体でも成り立つコンテンツ = 個別記事など
sectionは明示的リスト = トップページ要約記事リストなど

html5での見出し定義は2つの考え方があって。
一つは従来のようにネスト状態で降格させていくやり方。
もう一つは上で述べたようにh1で揃えるやり方。
私の採用しているのは前者です。
理由 ↓
・html4から5へ頭の切り替え準備が出来ていない方が大多数
・記事内でアウトライン作成を「する」という考え方の人がまず居ない(記事内で<section>を用いることを指します)

つまり私がh1だけで構成してしまうと、みなさん戸惑うんです。たぶん。
えー!これおかしいでしょ!
ってなる。たぶん(笑)

-------

記事を書くアウトラインは<article>になっています。
そしてその大見出しは<h2>を使っています。
ですからそれ以降で使用する見出しはネストされることになりますので
<h3>
から利用すると良いと思います。

-------

SEO的にどうか、という点ですが、
例えば最大の大見出しであるブログタイトルが<h6>で、記事タイトルが<h1>
なんていう摩訶不思議な構成でなければ、よほど深く考える必要は無いと思います。
大抵の場合は<h3>使っとけばオッケー (´・ω・`)
(私のテンプレは、という但し書きつきですよ)

記事タイトルはh1にしたらすっごい効果ある!
なんてのは都市伝説。
Googleのアルゴリズムはそんなアホな子ちゃんではありません。
あまり考えすぎると記事書けなくなっちゃいますよ (´・ω・`)
ちゅーかそもそも記事内でご利用頂けるように<h3>はテンプレソース内で使わずにお取り置きしてあります。

-
2016/11/20 (Sun) 15:52

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2016/11/20 (Sun) 22:21

To 見出しの件 内緒さん

はい。それで特に問題ないと思います。
お疲れ様です :)

nishi
2016/12/26 (Mon) 17:36

カルーセル内を自分の記事内はなく他の画像、リンク先をにしたいのですがどうすればいいのでしょうか?

Akira
2016/12/26 (Mon) 17:49

To nishiさん

コメント投稿欄
Post a commentのすぐ下にある一文をよくご覧ください。

Megu
2017/05/21 (Sun) 23:32

Hi There欄とプロフィールプロフィール欄について

こんにちは、このテンプレートを一目惚れしまして、使わせていただきたいと思っています。とっても素敵です。
私は、コンピューター系は得意ではなく、初めの初期設定で四苦八苦しております。
プロフィールを作成しているのですが、
『環境設定』→『プロフィール』→『あなたの紹介文』に文を入れましたら
Homeのページの『Hi There』の欄とその下の『プロフィール』欄にも同じ文が重複してのってあります。
これを、『Hi There』の欄だけに文を載せて、
『プロフィール』欄には写真だけを載せたいのですが、どのようにすればよろしいでしょうか?

もしくは、同じ文を重複させないように、『Hi There』の欄と『プロフィール』欄は違う文字を入れたりしたいのですが

・ ご自身のブログアドレス明記
http://megusbbl.blog.fc2.com

・ 該当テンプレートを設定状態に
あまりよくわからないのですが、この状態でよろしいでしょうか?

よろしくお願いします。
Megu


vanillaice (Akira)
Akira
2017/05/21 (Sun) 23:52

To Meguさん

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

> 『Hi There』の欄とその下の『プロフィール』欄にも同じ文が重複〜

Hi thereの部分はテンプレートに直接記載しているもので、記事内に説明のある通りプロフィールの自己紹介文を自動で抽出・表示しています。
変更されます場合には記事内にある手順(見出し「Hi thereテキストと画像変更について」)で作業して頂くことになりますが、わかりにくい点がありましたでしょうか。

① Ctrl+F(Windows)/ Command+F(Mac)キー検索を利用して
<%introduction>
の文字列を探す

② <%introduction>を削除して、代わりに記したい内容を直接記載する。
例)
こんにちは<br>あかちゃん<br>私が<br>ママよ

<br>が付いた箇所で改行されて表示されます。
よろしくお願いします。

--------- 追記

「ご自身のアドレス明記」につきましては、このコメント送信欄の「website」項目にURLが入っていればOKですし、今回のようにURLをコメント内に記載して頂いてもOKです。
ご配慮ありがとうございます :)

Megu
2017/05/22 (Mon) 00:22

To Akiraさん

お早いお返事ありがとうございます。
早速
プロフィール欄を非表示にしました。
そしたら、Hi thereの欄には紹介文が残り、それは気に入っております。
プロフィール欄には、写真だけの出ることは可能でしょうか?

お返事でいただきました
記事内にある手順(見出し「Hi thereテキストと画像変更について」)で作業
の行程は、まだ怖いので手をつけていません。
もし、その行程が必要であればトライします。

よろしくお願いします

Megu

vanillaice (Akira)
Akira
2017/05/22 (Mon) 00:50

To Meguさん

> プロフィール欄には、写真だけ〜

可能ですがプラグインhtmlの修正は必要です。
この公式プラグインは
・画像
・自己紹介文
がワンセットですので、いずれかを消したいのであればhtml内容も削除しなければいけません。

===== 方法① プラグインソースを修正

デメリット: テンプレート変更時に自己紹介文が無くなってしまう

プラグインのhtml編集画面を開き、
<p &ialign> を含んで </p> まで含み全て削除。

===== 方法① フリープラグインを導入し、プロフ画像だけを出力。プロフィールプラグインは非表示

「公式プラグイン追加」から「拡張プラグイン」の「フリーエリア」をダウンロードし、以下のhtml内容を記載

<!--myimage-->
<p class="plugin-myimage" &align>
<img src="<%image>" alt="<%author_name>" alt="プロフィール画像">
</p>
<!--/myimage-->

======

以上です。
①②いずれかの方法で可能ですが、どちらにしろhtml編集は必要です。
内容削除が怖いなぁ、とお感じになる場合にはコメント化(一部を無効化)しても良いと思います。
①の作業で「削除」はせず以下のようにします。

〜省略〜
<!-- 一時的非表示ここから -->
<p &ialign>
Author:<%author_name><br>
<%introduction2>
</p>
<!-- 一時的非表示ここまで -->

赤字部分を「追加」します。
「一時的非表示〜」 のテキストは変更可能です。
(記号の変更は不可)
ご自分がわかりやすい注意書きでOK。
こうしておけば目印になりますし、テンプレートを変更してプロフィールプラグインを元に戻したい時にも便利です。
よろしくお願いします (o'ω')ノ

Megu
2017/05/22 (Mon) 01:15

To Akiraさん

ありがとうございます。
削除は怖かったので、

<!-- 一時的非表示ここから -->
</p>
<!--/myimage-->
<p &ialign>
Author:<%author_name><br>
<%introduction2>
</p>
<!-- 一時的非表示ここまで -->

のこ方法でやってみました。
そしたら、写真と文章がついてるプロフィール欄が二つになってしまいました。

なので、次に①の

プラグインのhtml編集画面を開き、
<p &ialign> を含んで </p> まで含み全て削除。


を試したら
写真だけになりましたが、
二重になった新しいプロフィール欄は残ってしまいました。
これを消すにはどうしたらいいでしょうか?


もう一つ質問があります。
homeのページのaboutの欄の「about me」と「contact」へも記入はできますか?

Megu
2017/05/22 (Mon) 01:21

To Akiraさん

二重になったプロフィール欄は消えていました。
これは解決いたしました。ありがとうございます。


それから、
homeのページのaboutの欄の「about me」と「contact」へも記入はできますか?
お返事は後ででもいいです。

よろしくお願いします。

めぐ

vanillaice (Akira)
Akira
2017/05/22 (Mon) 02:47

To Meguさん

> 「about me」と「contact」へも記入〜

<!-- 注)リンク先の追加はここに 同じclass名(class="submenu-anchor")を必ずつける -->

で検索して頂くとhtmlソース内に1箇所あります。
その直下とその下がabout meとcontact該当箇所です。

<li><a href="ここにアドレス" class="submenu-anchor">About Me</a>

赤字部位を遷移先ページURLにそれぞれ書き換えてください。
また、表示テキスト(about me, contact) は変更可能ですので、遷移させたいページに最も適した文言に適宜修正してください。
よろしくお願いします。

Megu
2017/05/22 (Mon) 08:47

To Akiraさん

お返事ありがとうございます。
<li><a href="ここにアドレス" class="submenu-anchor">About Me</a>

ここにアドレスとは、#をURLに書き換えることですよね。

それは、 Akiraさんのテンプレートの中にはそのURLページは作られてなく、
about meをクリックすると、記入するページとかではなく、
例えば自分のホームページとか他のサイトのURLを貼り付けるということですか?



Akira
2017/05/23 (Tue) 11:00

To Meguさん

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

> テンプレートの中にはそのURLページは作られてなく〜

はい。私のテンプレでは、ということではなく、FC2では「プロフィール」専用ページというのが設けられていません。
みなさんの利用法を拝見しますと、外部のプロフィールサイトに飛ばしたり、通常と同じように「記事」としてページ作成してそこへ飛ばすなどされているようです。

> 例えば自分のホームページとか他のサイトのURLを貼り付けるということですか〜

そうですね。誘導したいページ(あるいはサイト)などがあればそちらのURLを入れてください。
特に用途が無ければ該当部位(about, contact)の削除をお願いしています。

FC2もプルフィールページを実装してくれると良いんですけどねぇ (´・ω・`)
どこのサービスも大抵ありますよね ^^;

Megu
2017/05/23 (Tue) 20:43

To Akiraさん

Akira さん

お返事ありがとうございました。
はい、ではそのようにしますね。
ご親切にありがとうございました。
また、質問ありましたらよろしくお願いします。

vanillaice (Akira)
Akira
2017/05/23 (Tue) 23:09

To Meguさん

こちらこそありがとうございます。
はい、何かありましたらお気軽に :)

ミーネ
2017/07/16 (Sun) 18:10

topにカテゴリー

Akiraさんのテンプレはいつも素敵で♥
私の関わるブログは全部Akiraさんのものを使わせていただいております(๑و•̀ω•́)و

今現在私のショップブログはこちらのSoutherlyを使わせていただいておりますが
客層によってカテゴリー分けが必要となり(今少しずつ変更中なのですが)
Empty-streetのようにトップのナビゲーションのところにCategoryがあったら
PCからもスマホからも見やすいかなと思い立ち質問させていただきました。

素人の私にもできるカスタマイズでしょうか。。。?

またSoutherlyのABOUTは気に入って使っているので
テンプレをEmpty-streetに変えて
Empty-streetにABOUTを増やす方が難易度低いでしょうか。。?

vanillaice (Akira)
Akira
2017/07/16 (Sun) 19:18

To ミーネさん

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

> ナビゲーションにモーダルを追加したい件

① Southerly → Empty-street (aboutを移設)
② Empty-street → Southerly (カテゴリモーダルを移設)

いずれにしても難易度は高いと思います。
Southeryの方は既にサイト内検索でモーダルを設置済みで、こちらはhtml + CSS + JS の3組で動かしています。
Empty-streetの方のモーダルは html + CSS の2組で、JSは利用していませんが、その分html, CSSが複雑な内容かもしれません。

Southerlyのaboutはやはり html + CSS + JS の3組で動作しています。
Empty-streetへの移設は厳しいと思います(そもそもナビゲーションのスタイルも違います)
①②のどちらを選ぶにしろ、こっちからあっちへコピペ、というわけにはいきません。

一番簡単なのは
・ テンプレートは Empty-street を選択
・ about 設置はJSを用いない = マウスオーバーエフェクトを諦め「ホームページ」「コンタクト」を分ける = 2つのリンクを追加

これが一番確実で簡単だと思います。
ただしリンク数が増えますので、記事内にある通り「ナビゲーション内容が下へ繰り越さない処置」を行う必要はでてきます。
この方法を取られるのであれば、Ctrl+F(Windows)/ Command+F(Mac)キー検索(テンプレはEmpty〜です)

<ul class="navi-item-ul">

上記を目印にhtmlソースをご覧頂きますと、すぐ下に縦並びで

<li>〜省略
<li>〜省略

といった具合に <li>を頭にした行がいくつかありますので、ご自身のページ状態と見比べながらナビゲーションのリンク並びのどこに追加するかを決めてください。
そしてこれから2つ追加をしていきますが、

webページ上でカスタマイズをする場合
<li>の位置(文頭)を揃えるための半角スペースあるいは全角スペースの連打はしない

● html専用エディターを利用する場合
エディターの仕様に則ってください

重要なのは前者「web上でのカスタマイズ
です。
<li>というhtmlタグはスペースや改行(Shift+Enter 実際は改段落)が見た目に影響して崩れてしまいます。
追加する際にいずれかの既存<li>の行の文末で改行を行うことになりますが、改行したらすぐに内容を記入してください。
しつこいですが、半角スペースでの頭位置合わせは行わない。
ソースコードがズレてて気持ち悪かもしれませんが我慢 ^^;

追加内容

<li><a href="遷移先アドレス">テキスト</a>
<li><a href="遷移先アドレス">テキスト</a>

簡単 (´・ω・`)
遷移先が外部サイトの場合にはaタグに別タブ指定を行った方が良いと思います。

<a href="アドレス" target="_blank">

-----------

手順を整理しますね。

・ Empty-streetを選択できるか YES/ NO
・ Southerlyのaboutの形状を諦められるか YES/ NO

ここまでが方針決定。
いずれもYESの場合は

・ Empty-streetのナビゲーションにリンクを2つ追加
・ 出来上がりを見てナビゲーション横幅の修正をするか否か決定(やり方は記事内にあります)

簡単な方法をお伝えしましたが、これではよろしくないと思われましたらその旨お伝えください。
よろしくお願いします (●'0'●)/

ミーネ
2017/07/17 (Mon) 23:22

ありがとうございます

Akiraさん、連休中にもかかわらず、早々にお返事いただきありがとうございます(๐•ω•๐)♡
>・ Empty-streetを選択できるか YES/ NO
>・ Southerlyのaboutの形状を諦められるか YES/ NO
どちらもyesですので
チャレンジしてみます(๑و•̀ω•́)و

素人の私にもできるよう、わかりやすく解説していただき感謝です♡
ありがとうございました(๐•ω•๐)

vanillaice (Akira)
Akira
2017/07/18 (Tue) 14:19

To ミーネさん

はい。一度お試しください。
お疲れ様です :)

シャークネード
2017/11/15 (Wed) 16:06

スライダーサムネイルについて

Akiraさんはじめまして
質問なのですが、TOPページのカル―セルは外部サイトのRSSフィードを指定して読み込ませることは可能でしょうか?
(スライダーサムネイル = トップページ最上部、記事内の写真を抽出しているスライド画像(タイトルつき) )

コメント内や弊ブログ内を探したのですがわからなくて、、、

Akira
2017/11/15 (Wed) 16:27

To シャークネードさん

ご質問の前にお願い事・お約束をお読み頂けないものでしょうか。
いずれにしろ個人的なカスタマイズのお手伝いをお受けすることはありません。
よろしくお願いします。

シャークネード
2017/11/15 (Wed) 18:42

To Akiraさん

気分を害させてしまい申し訳ありませんでした。

よつば
2018/03/31 (Sat) 18:37

No title

はじめて質問させて頂きます

このコメント記入欄の文字をタイトル記入欄と同じ大きさにするには、どこを変えたらよいでしょうか?

ご指導のほど よろしくお願いします

vanillaice (Akira)
Akira
2018/03/31 (Sat) 18:48

To よつばさん

こんばんは。

ちょっとよくわからないのですが「記入欄」というのは投稿フォームのことでしょうか。
記入をする欄というとフォームかなぁと思うのですが。
投稿フォームのタイトル入力とコメント入力の大きさを同じにしたい… ということかしら。
え。たぶん違いますよね ^^;

> このコメント記入欄の文字を〜

「記入欄」というのは何(what)で「この」とはどこ(what, where)を指すのでしょうか。

> 同じ大きさにする〜

「範囲を」ですか?それとも「文字サイズ」を?
対象となるものは?

それともフォームでなく受信コメントの一覧に係る何かでしょうか。
察しが悪くて申し訳ないです。もう少し詳細にお願いします。
説明が難しければスクリーンショットでも構いません。よろしくお願いします。

よつば
2018/03/31 (Sat) 23:13

解りにくくてゴメンナサイ

早速のお返事ありがとうございます
文章が上手く書けないので・・・https://blog-imgs-120.fc2.com/c/y/a/cyakotokomomonoie/komeransukusyo.jpg
お時間のある時で良いので」よろしくお願いします

vanillaice (Akira)
Akira
2018/04/01 (Sun) 00:19

To よつばさん

いえいえ。こちらこそ鈍くてすみません。
わかりやすい説明もありがとうございます。

-----
名前・タイトルの該当箇所は
#comment_form input
本文入力のtextareaは
#comment
が対象です。
いずれも既に記述がありますが、個別の指定が面倒であれば以下の内容をCSS末尾に追加してください。

#comment_form input,
#comment {
font-size: 数値px;
}

スマートフォン閲覧時のコメント関連フォーム文字サイズは自動で16pxになります。
それ以上(あるいは以下)にしたい場合には特殊な方法が要りますので処理の必要があればお知らせください。
(注: 16px未満はおすすめしません)

また、OSやブラウザによってはtextareaの文字の大きさが思い通りにならないことがあります。
その場合にはフォント名の指定が必要ですので、反映されないようであればその旨お伝えください。
よろしくお願いします。

よつば
2018/04/01 (Sun) 08:33

ありがとうございました

すっごく素早いご返答、ありがとうございましたm(_ _)m

早速 CSS末尾に追加してみました!
無事に希望のサイズのフォントが表示されました。

vanillaice (Akira)
Akira
2018/04/01 (Sun) 21:59

To よつばさん(完了のご報告)

こんばんは (o'ω')ノ
上手くいったようで安心しました。
お疲れ様でした :)

みねた
2018/04/05 (Thu) 14:52

タグの自サイトへのリンク

初めまして。
Akira様のテンプレートを使わせていただき、初めてブログをやってみようと思っております。
PCの知識もほぼなくHTML,CSS等の知識は分からない部分を逐一調べているような者で、質問違いでしたら申し訳ありません。

エントリー内、本文中のタグのリンク先をFC2全体のタグ検索ページから、自サイト内のタグ検索ページにリンクさせたく調べてみたのですが

<%topentry_jointtag>

の部分をを書き換えると良いとまでは辿り着きましたが、Southerlyのテンプレート内には見つからず
どの部分を書き換えればいいのかご指導いただけたらと思います。

よろしくお願いします。

vanillaice (Akira)
Akira
2018/04/05 (Thu) 17:35

To みねたさん

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

> 本文中のタグのリンク先を〜

「本文中の」とありますので、記事内のキーワード自動リンクのことですよね。
これはFC2ブログの機能で
ユーザタグ変換 --- 記事本文のタグテキストをリンクに「変換する」
を選択すると自動でリンクになりますが、これはいわゆるweb一般の「ハッシュタグ」と同じ機能です。
FC2ブログの機能であってテンプレートのhtmlやJSとは関わりがありませんので変更することはできません。
テンプレート内容で変更できるのは記事下にあるタグ一覧のみです。
よろしくお願いします。

みねた
2018/04/05 (Thu) 21:33

ありがとうございます。

迅速な返答で助かります。
そもそもいじれない部分なのですね。余計な労力使うところでした
初歩的な質問でしたが助かりました。ありがとうございます。

vanillaice (Akira)
Akira
2018/04/05 (Thu) 22:45

To みねたさん(終了のご報告)

そうなんですー (´・ω・`)
本文中はもう一般的なハッシュタグだと割り切ってお使い頂くしか。
何もお手伝いできませんでしたが、ともかくお疲れ様でした :)

果報丸
2019/03/24 (Sun) 17:50

ホバーストップとリンク

Akiraさんへ
DecoyとGirlOnWireでは大変お世話になりました。
Southerlyもホバーストップするにはどうすれば良いでしょうか?
また、リンクで

a:hover {
position: relative;
top: 2px;
left: 2px;
text-decoration: none;
}

を追加するとカルーセルにマウスオーバーすると消えてしまいます。
良い方法があれば教えてください。

vanillaice (Akira)
Akira
2019/03/24 (Sun) 23:32

To 果報丸さん

こんばんは。

> (カルーセルスライダーの)ホバーストップ〜

var swiper=
で検索するとhtml内に1箇所あります。この文字列を挟む<script>と</script>までの内容を以下の通り変更してください。

<script>'use strict';var swiper=new Swiper('.swiper-container',{autoplay:{delay:2500},loop:'true',slidesPerView:5,spaceBetween:12,breakpoints:{480:{slidesPerView:1},768:{slidesPerView:2},1024:{slidesPerView:3},1400:{slidesPerView:4}},navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev'}});swiper.el.addEventListener('mouseenter',function(){swiper.autoplay.stop()}),swiper.el.addEventListener('mouseleave',function(){swiper.autoplay.start()});</script>

-----
> リンクで〜追加するとカルーセルにマウスオーバーすると消えてしまいます。〜

このホバーの目的はなんでしょうか。リンクにrelativeやtopなどの位置指定をするとズレてしまいます。記事内リンクホバー時の下線を取り除きたい場合は
#inner-contents a:hover {
で検索し、この内容を削除してください。
その他の意図がはっきりしませんのでこちらは保留で。

-----
別件です。SSL化されていますがJSの混在コンテンツがいくつかあります。Chromeではhttpのスクリプトはブロックされるため動作しません。
こちらの対処はお任せします。
よろしくお願いします。

果報丸
2019/03/25 (Mon) 13:58

お世話になります。

Akiraさんへ
いつもながら素早い対応ありがとうございます。

ホバーストップは教えていただいた通りにして
解決しました。

ホバーの目的はマウスオーバー時に
リンクの文字が動くようにしたかっただけなので
是が非でもと言う事ではありません。

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

vanillaice (Akira)
Akira
2019/03/25 (Mon) 14:16

To 果報丸さん(完了のご報告)

こんにちは。
上手く行ったようで良かったです。
お疲れ様でした :)

いまゆ
2019/05/09 (Thu) 11:55

カルーセル内のタイトルの文字の大きさ

初めまして、こんにちは。
質問をさせていただきたいのですが、
カルーセル内に表示される、記事のタイトルを大きくする、また色の変更をすることは可能でしょうか?
CSS内、carousel slider部carousel-titleを見てみたのですが、わかりませんでした。

初歩的な質問で本当に申し訳ありません。
お忙しい中恐れ入りますが、ご教授いただければ幸いです。

vanillaice (Akira)
Akira
2019/05/09 (Thu) 16:27

To いまゆさん

こんにちは。

> 記事のタイトルを大きくする、また色の変更をする〜

.carousel-title {
で検索するとスタイルシート内に2箇所あります。最初のものが対象です。
この括りの
transition: transform .35s;
の直下に以下の内容を追加してください。

color: 色コード;
font-size: 数値em;


色コードは #xxxxxx の16進数、 rgb(x,x,x) の10進数どちらでも構いません。
font-sizeの数値は基本フォントサイズのx倍という指定です。今の見た目が 1em ですから、1.1emから始めて1.2em、1.3em と数値を増やして調整してみてください。

フォントの色なんですが、今後UPする画像の色合いによっては変更した色でも見えづらいことがあります。その場合はcolor指定は行わずに影をつける方法の方が良いかもしれません。
color: 色コード;
の代わりに

text-shadow: 2px 0 2px rgba(85,85,85,.8);

を指定します。あるいは両方(全部で3つの追加になります)でも構いません。試してみてくださいね。
よろしくお願いします。

いまゆ
2019/05/10 (Fri) 11:11

To Akiraさん

お返事、ありがとうございました!
早速試しまして、変更できましたのでご連絡いたしました。

また、影をつける方法についても教えていただきありがとうございます。
今、影をつけてみたので、色と影についてはいろいろ試しつつ変更しようと思います。

この度は本当にありがとうございました。

vanillaice (Akira)
Akira
2019/05/10 (Fri) 15:53

To いまゆさん(完了のご報告)

上手く行ったようで安心しました。
お疲れ様でした :)

nanairo
2019/08/07 (Wed) 18:56

トップページの画像の大きさの変更について

はじめまして
Southerlyを使わせていただくことになりました。
とても素敵なテンプレートに出会えて、とても嬉しいです^^

過去のコメントも読ませていただいたのですが、解決できないので質問をさせていただきます。

質問1:トップページのカルーセル内と、同じくトップページの個別記事の画像の縦横比を1:1にできればと思うのですが
    どのようにしたらよいでしょうか。
    (コメント欄の最初の方に同じような質問があったのでやってみたのですが
     「.inner-image-parent2:before 」に一致するものがないと表示されます)

質問2:トップページのタイトルの下の「HOME」や「ABOUT」の部分をなくすことはできますでしょうか。
    (タイトルのすぐ下が、カルーセルになるように)

質問は以上2点です。
お忙しい中 お手数をおかけいたしますが、よろしくお願いいたします。

vanillaice (Akira)
Akira
2019/08/08 (Thu) 00:17

To nanairoさん

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

> トップページの個別記事の画像の縦横比を1:1に〜

.grid-image::before
で検索するとスタイルシート内にありますので、
padding-top: 70%;
の赤字の数字を 100 に変更してください。

-----
> 「HOME」や「ABOUT」の部分をなくす〜

<!-- グローバルナビゲーション -->
で検索するとhtml内に出てきます。
<!-- グローバルナビゲーションここまで -->
までの内容を削除してください。

この部位は主要ページを行き来するためのリンクの集合体なので、見た目だけではなく使い勝手(ユーザービリティ)の変化が起こります。実行前に今一度ご検討くださいね。
(私はナビゲーションは必要だと思います)

よろしくお願いします。

nanairo
2019/08/08 (Thu) 14:51

ありがとうございます!

この度は、すごく早いお返事をいただきましてありがとうございました。
個別記事の大きさ変更と、グローバルナビゲーションの削除、出来ました!
今までいろいろ調べてもさっぱりわからなかったので、感動です!

ナビゲーションが必要だと思うとのご意見も、とっても嬉しかったです^^
わたしも そう思うのですが
実は今回のブログは、81歳の母の作品を載せて、母に見せるのが目的で、
今まではwordpressで、なーんにも触るところがないくらいシンプルなテーマだったのですが、
今回のナビゲーションのところに なぜか母が毎回反応してクリックしてしまって
全然個別記事が見られないという、オモシロ現象が起きておりまして^^
母が気持ちよく見られるのが一番なので、削除させていただこうと思った次第なのです。
でも、wordpressの時から、一人で黙々と調べながらやってきたので
とても詳しい方から助言をいただくなんて、じーんときてしまいました。
ありがとうございます。

それと、申し訳ありません。
わたしの質問の仕方が上手くなかったのですが
トップページのカルーセル内の画像も、縦横比を1:1にすることはできますでしょうか。
まったく急いでおりませんので、お時間のある時に教えていただけると助かります。
重ね重ねすみません。
よろしくい願いいたします。

vanillaice (Akira)
Akira
2019/08/08 (Thu) 19:51

To nanairoさん

こんばんは ('0')/

そういう明確な理由があったんですね。了解です。
「なんとなく」「雰囲気で」「見た目で」ではなく確たる理由があればそれを実行されるのが良いと思います。お母様押しちゃうんですね(笑)

で、ごめんなさい。カルーセルの方書き忘れてしまいました。
.swiper-slide::before
で検索。
padding-top: 70%;
を同じく 100 に変更です。二度手間で申し訳ないです。よろしくお願いします。

nanairo
2019/08/08 (Thu) 20:47

出来ました!

カルーセル内の画像の大きさの変更も出来ました!
いろいろ教えていただき、本当にありがとうございました!。

このテンプレート、機能とか、色合いとか
まさに「こんなのあったらいいなー」と思っていたことがみんな叶っていて
出会えてほんとに嬉しかったです。
このテンプレートのおかげで、wordpressをスッパリやめる気になったんです^^
(お金かかるし、でも写真ごと引越しはできないし、ずっとどうしようか迷ってたんです)

しかも、開発者の方に直接質問させていただけるなんて、ありがたすぎます。。

この度は ほんとうにありがとうございました!
Akira様が ますますお幸せでありますように☆

vanillaice (Akira)
Akira
2019/08/09 (Fri) 18:18

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

こんにちは ('0')/

修正できたということで安心しました。また励みになるお言葉もありがとうございます。
お疲れ様でした :)

みーちゃん
2023/05/08 (Mon) 11:44

No title

お世話になります。
今度はテンプレートのことでお聞きしたいことがあり、コメントさせてもらってます。
パソコンで見たときのメニュー下に表示される記事の画像が表示されるところのリンクの色を変えたい場合、どこを変更したらいいでしょうか。
基本リンクの色を指定している場所は分かったのですが、全体のリンクの色を変えたいわけではなく、トップページのメニュー下の記事の画像のところのリンクの色を変えたいだけなので、どこを変えていいのかわからず(;´・ω・)
お忙しい中、お手数ですが、ご教授いただけると幸いです。
よろしくお願いいたしますm(__)m

vanillaice (Akira)
vanillaice (Akira)
2023/05/11 (Thu) 15:10

To みーちゃんさん

こんにちは ('0')/
お返事遅くなりごめんなさい。

> トップページのメニュー下の記事の画像のところのリンクの色〜

すみません、これがどこを指すのかわからないです。スライダーの記事タイトルことかしら。それともグリッドアイテムの記事タイトルのことでしょうか(伝えづらい場合はスクリーンショットの活用などをおすすめします)

【スライダーの場合】
.carousel-title {
color: カラーコード;
}

【グリッドの場合】
.grid-title a {
color: カラーコード;
}

いずれもスタイルシートの最終に記載してください。

みーちゃん
2023/05/13 (Sat) 11:06

To vanillaice (Akira)さん

こちらこそ、お返事遅くなり申し訳ありません(;´・ω・)
プラス、わかりづらい箇所の説明だったにも関わらず、お返事ありがとうございます。
私が変更したかったのは、スライダーのほうのリンクの色でした。
白背景の時と黒背景の時と両方で見える色を探すのがなかなか難しかったですが、なんとか、その両方で見える色を見つけて、変更しました。
自分がアイキャッチに使う画像をどっちかの色にまとめればいいんだと思うんですけど、なかなかそうもいかないので(;´・ω・)
この度はありがとうございましたm(__)m

vanillaice (Akira)
vanillaice (Akira)
2023/05/14 (Sun) 20:09

To みーちゃんさん(完了のご報告)

こんばんは ('0')/
うまく行ったようで良かったです。お疲れ様でした :)

みーちゃん
2023/05/15 (Mon) 12:08

スライダーのリンクの背景の件

https://blog-imgs-165.fc2.com/n/f/t/nftlovecollector/20230515115652adc.jpeg
たびたびすいません(・_・;)
また、質問させてください。
上記のスライダーのリンクを文字が見づらいので白の背景を付けて透過したのですが、横幅がタイトルの文字数になっているので、その記事ごとによって横幅が変わってしまうので、横幅だけ、画像の横幅と同じにしたいのですが、どこを修正したらいいでしょうか?
お手数ですが、アドバイスのほど、よろしくお願いいたしますm(_ _)m

ぼっちん
2023/05/15 (Mon) 18:12

To みーちゃんさん

横から失礼致します。
みーちゃんさんの思惑と違うかもしれませんが、私なら
https://blog-imgs-162.fc2.com/o/o/p/oops0011/2023-05-15-carousel-title-1390-comp.png
こんな感じにしますけど 😊
これで良ければ

.carousel-title {
line-height: 1.5;
position: absolute;
bottom: 0;
left: 0;
padding: 15px;
font-family: 'Playball', YuGothic, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
transition: transform .35s;
/* 追加CSS */
background-color: rgba(0, 0, 0, 0.4); /* スライダー記事タイトル背景色 */
color: rgb(255, 255, 255); /* スライダー記事タイトル色 */
/* スライダー記事タイトルを一行に納める制御 */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

こんなCSSになります。
アイキャッチ画像の色合いが様々でも見やすくしてあります。
記事タイトルが長くなると、2段になったり3段にもなってしまいますから、一行にする制限をしてあります。

気に入ってくださるようでしたら、お使いくださいね。
改変もご自由に ^^

みーちゃん
2023/05/16 (Tue) 09:37

To ぼっちんさん

ぼっちさん、私の求めてたものはこれです(≧▽≦)
お言葉に甘えて、有り難く使わせていただきますm(_ _)m
ありがとうございますm(_ _)m

ぼっちん
2023/05/16 (Tue) 09:58

To みーちゃんさん

OOPS!

気に入って戴けたようで良かったです 😍

Akiraちゃん、横からお節介してしまってごめんなさいです m(_ _)m
お返事ご無用です~ 👌

vanillaice (Akira)
vanillaice (Akira)
2023/05/17 (Wed) 22:57

To みーちゃんさん, ぼっちんさん

こんばんは ('0')/
なかなかログインできず遅くなってすみません。
ぼっちんさんのご指導の元でうまく行ったようで安心しました。お疲れ様でした :)

ぼっちんさん、いつもご協力ありがとうございます :)
* まとめてのお返事でごめんなさい。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)