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

To Southerlyの件 内緒さん

> 写真の形状を正方形に

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

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

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

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

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

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

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

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

--------

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

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

質問の回答

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

To JSKさん

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

.inner-image-parent2:before

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

padding-top: 70%;

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

padding-top: 100%;

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

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

お手数おかけしました。　

To JSKさん

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

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

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

To 手彫りさん

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

管理人のみ閲覧できます

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

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

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

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

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

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

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

----------

① ナビゲーションのプルダウンメニューですが、
大事なのは対象要素の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に変更してみてください。
それでもダメならお知らせくださいませ。

管理人のみ閲覧できます

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

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
が抜けておりました。
そのためにリンクが効きません。
二度手間になっちゃって申し訳ないですー！

管理人のみ閲覧できます

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

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

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

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

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

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

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

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

To Rinさん

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

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

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

({mobile:false})

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

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

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

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

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

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

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

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

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

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

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

To Rinさん

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

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

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

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

管理人のみ閲覧できます

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

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件に変更して頂くことでページ下部が綺麗に埋まります。
この件はお任せしますね。
(こちらもブログ個人設定です)

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

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

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

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

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

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

「ついで」のこと

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

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

To Rinさん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-------

RSSの件、ありがとうございました！
すっごく素敵になりました(^▽^*)ﾜｰｲ

To Rinさん

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

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

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

=====

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

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

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

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

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

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

=====

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

().init();

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

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

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

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

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を試されまして、結果をお知らせくださいね。
よろしくお願いします！

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

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

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

==== 26日 追記

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

Belongテンプレートの件

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

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

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

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

よろしくお願いします。

To マタタビさん

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

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

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

管理人のみ閲覧できます

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

To Southerlyの件 内緒さん

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

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

======

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

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に切り替えされると良いと思います。
その前にバージョンあげられると良いんだけどー （￣∀￣；）

To Southerlyの件

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

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

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

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

To Rinさん

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

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

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

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

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

To Rinさん

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

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

キーワードについて

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

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


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

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

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


私は、「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』のＳＥＯは気にしくてＯＫですよ」
ということなら、『Southerly』でのキーワードを設定するコツなどを伺いたいです。

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

To kazuさん

こんにちは ( ﾟДﾟ)ﾉ

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

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

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

不安をお感じになるようでしたら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を気にされる方はレスポンシブデザイン採用・スマホ版非表示をおすすめします。)

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

Akiraさんこんにちは。

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


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

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


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

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

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

To kazuさん

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

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

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

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

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

Akiraさん、こんばんは。

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

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

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


私は、

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

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


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


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

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

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

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


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

To kazuさん

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

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

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

管理人のみ閲覧できます

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

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対策済みを謳ってデザインが崩れているテンプレなど山ほどあります。
私のは大丈夫でしょうかね ^^;
なにせ世にある全てのデバイスで確認しているわけではないので心配(笑)

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

Akiraさん、こんにちは。


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


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


html内に、

meta name="robots" content

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

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

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

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

To kazuさん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

To kazuさん

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

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

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

Akiraさんこんばんは。

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

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

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

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

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

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

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

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

ご提供感謝です。

To kazuさん

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

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

管理人のみ閲覧できます

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

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>はテンプレソース内で使わずにお取り置きしてあります。

管理人のみ閲覧できます

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

To 見出しの件 内緒さん

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

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

To nishiさん

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

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

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

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

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

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

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

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です。
ご配慮ありがとうございます :)

To Akiraさん

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

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

よろしくお願いします

Megu

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'ω')ﾉ

To Akiraさん

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

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

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

なので、次に①の

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


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


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

To Akiraさん

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


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

よろしくお願いします。

めぐ

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) は変更可能ですので、遷移させたいページに最も適した文言に適宜修正してください。
よろしくお願いします。

To Akiraさん

お返事ありがとうございます。
<li><a href="ここにアドレス" class="submenu-anchor">About Me</a>
の
ここにアドレスとは、＃をURLに書き換えることですよね。

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

To Meguさん

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

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

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

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

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

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

To Akiraさん

Akira さん

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

To Meguさん

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

topにカテゴリー

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

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

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

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

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'●)/

ありがとうございます

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

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

To ミーネさん

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

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

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

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

To シャークネードさん

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

To Akiraさん

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

No title

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

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

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

To よつばさん

こんばんは。

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

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

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

> 同じ大きさにする〜

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

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

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

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

To よつばさん

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

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

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

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

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

ありがとうございました

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

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

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

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

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

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

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

<%topentry_jointtag>

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

よろしくお願いします。

To みねたさん

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

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

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

ありがとうございます。

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

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

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

ホバーストップとリンク

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

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

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

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のスクリプトはブロックされるため動作しません。
こちらの対処はお任せします。
よろしくお願いします。

お世話になります。

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

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

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

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

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

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

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

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

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

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つの追加になります)でも構いません。試してみてくださいね。
よろしくお願いします。

To Akiraさん

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

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

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

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

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

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

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

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

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

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

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

To nanairoさん

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

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

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

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

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

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

よろしくお願いします。

ありがとうございます！

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

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

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

To nanairoさん

こんばんは ('0')/

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

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

出来ました！

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

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

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

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

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

こんにちは ('0')/

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

No title

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

To みーちゃんさん

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

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

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

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

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

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

To vanillaice (Akira)さん

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

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

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

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

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

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段にもなってしまいますから、一行にする制限をしてあります。

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

To ぼっちんさん

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

To みーちゃんさん

OOPS!

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

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

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

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

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

グローバルナビゲーションのAboutのドロップダウンのリンクについて

お世話になっております。
メンテナンス以降のものを再ダウンロードし、以前のものから必要なものを移植し、編集をし直しているのですが、グローバルナビゲーションのAboutのドロップダウンのリンクがリンク先に飛ばない状態になっています。
https://blog-imgs-170.fc2.com/n/f/t/nftlovecollector/20230715132028e16.png
上記のように編集をしたのですが、上手くいきません。
お手隙のときにアドバイスいただけると幸いです。
よろしくお願いいたします。

To みーちゃんさん

こんにちは ('0')/

私のミスでクラス対象要素が入れ替わってしまいましたので、申し訳ないですが再DLして頂くか、以下の手順で修正をお願いします。テキストエディターをご利用の場合は行数がわかる方が良いと思いますので記します。

【CSS】

622行目
/* sub menu toggle */
で検索、そのすぐ下の
.navi-item-about
を
.navi-item-toggle
に変更。

627行目
続いてこのルールセットの次のルールセットのセレクタ
.navi-item-about::after
を
.navi-item-toggle::after
に変更。

694行目
続いて
.navi-item-toggle:hover .navi-item-list
で検索し、このセレクタを
.navi-item-about:hover .navi-item-list
に変更。

全部で3箇所の変更です。

【HTML】

207行目
<li class="navi-item navi-item-toggle"><span class="navi-item-anchor navi-item-about">ABOUT</span>
を
<li class="navi-item navi-item-about"><span class="navi-item-anchor navi-item-toggle">ABOUT</span>
に変更。

JSの変更はありません。お手数おかけしてごめんなさい。

To vanillaice (Akira)さん

アドバイス通り、修正完了後、無事にリンク先に飛ぶようになりました。
ありがとうございました(^^)

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

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

本日よりSoutherlyを使わせていただいてます。

1.カルーセルつき
2.記事がワンクリックで編集できる
3.全体のバランスがとても素敵💖

テンプレートをプレビューしたとたんに
ちょうどカルーセルに入れてほしいものが
すでに入って動いていて、とても感動しました。


サイト全体を見せていただいたら、
すでにAkiraさんのものと認識していなくて
使わせてもらったものがあり、恐縮です。
Expanse、OＡTH
Sweetie、Sincerely-yours

以前はこうしてカスタマイズできるなんて、
全く知りませんでした。

これから少しずつ学んでいきたいと思います。

前置きが長くなってしまいましたが、


【質問】です。
サイドバーのテキストを左寄せにできたのですが、
Hi thereを変更した「ようこそ」としたタイトルも
左寄せになってしまいました。

「ようこそ」だけを中央にしたいのですが・・・
できますか？

よろしくお願いします。

ヘッダー部分の変更

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

ヘッダー部分のブログタイトルやブログ説明文、HOME～ADMINを削除し、
カルーセルというんでしょうか、（スライダー）はそのままで、
ブログタイトルやブログ説明文を記載した画像を貼り付け、
その画像をクリックするとHOMEが表示されるように変更したいのですが、
どのようにすれば良いでしょうか？

例えばこの方の
https://shifa-channel.com/
ようにしたいと思っています。

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

質問2つ目お願いします。
INDEXをクリックすると、タイトルがずらっと出てきますが、
なぜか、4があって、21から順番に番号がついています。
これを1からふりなおす、もしくは、全部消すことは可能ですか？

To あみきんさん

> 「ようこそ」だけを中央にしたい〜

スタイルシートの方を元の center に戻した上で、
<div><%introduction2></div>
を検索するとhtml内に1箇所ありますので以下の通り修正

<div style="text-align: left;"><%introduction2></div>

この方が簡単だと思います。お試しください。

To 冷凍食品クラブさん

こんばんは ('0')/

まずは以下の記事をご一読願います。
参考記事: 「ブログタイトルを画像に変えたいです」というアバウトすぎる質問
https://vanillaice000.blog.fc2.com/blog-entry-1152.html

Southerlyテンプレートの場合はデフォルト背景をどうするのか、等の検討も必要です。

To あみきんさん

以下の記事をご参照くださいね。

参考記事: FC2ブログ 全記事一覧「連番」の仕組み
https://vanillaice000.blog.fc2.com/blog-entry-564.html

記事を拝見させていただきました。

Akiraさんへ

記事を拝見させていただきました。
そんなに複雑な構成になっているとは知りませんでした。誠に申し訳ございませんでした。
私は固定背景にしている、この画像に

--bgimage-fixed: url(https://blog-imgs-139.fc2.com/v/t/v/vtvmohnvkbh6/sakura.jpg);/* 固定背景 */

別ソフトでブログタイトルやブログ説明文を書き込み、HOME～ADMINを削除し、カルーセルはそのままで、画像をクリックするとHOMEが表示されるように
と思っています。
尚、画像サイズは以下の通りです。
1600ピクセル×1200ピクセル
解像度96dpi

もし、的外れな返答であればご指摘ください。
本当にお手数をおかけしますが、よろしくお願いいたします。

To vanillaice (Akira)さん

できました～
ありがとうございます。
(o*。_。)oペコッ

To vanillaice (Akira)さん

ありがとうございます。
修正が難しいようなので、インデックスの番号は削除しました。
重ねてありがとうございます！！(o*。_。)oペコッ

To 冷凍食品クラブさん

こんにちは ('0')/
お返事遅くなりました。

この部位(--bgimage-fixed)のデフォルト画像は背面固定なのでそのまま流用することはできません。現時点で既に背景のみ設定されている状態ですよね。PCでブラウザの横幅を広げたり狭めたりしてみてください。スクロールしても画像が画面外に流れないことと、画像の表示範囲が横幅変更に応じて変化しているのがわかります。

この画像にテキストを入れて固定しまうとテキストの表示範囲が流動的ですから調整不可です。また、HTMLの構造上も問題があります。ブログタイトルはテキストであろうと画像であろうとトップページでは見出し要素(h1)でマークアップするのが最善です。

なので現状(桜の背景が固定されている状態)を維持しつつテキストを画像にしたいのであれば以下の記事をご参照ください。

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

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

こんにちは ('0')/

削除を選択されたとのことで、それが一番簡単ですし良いのではないかと思います。
お疲れ様でした :)

記事を拝見しました

Akiraさんへ

素人とは言え、無謀なことをしようとしていた事がよくわかりました。
すみませんでした。

それでは、現状のままで画像はさわらずに
ブログタイトルとブログ説明文の文字をもう少し大きくして
書体を変更することは可能でしょうか？

何度もすみませんが、よろしくお願いいたします。

To 冷凍食品クラブさん

こんにちは ('0')/

いずれもスタイルシートの
注)主要カスタマイズ(variables)
の中にまとめてあります。

ブログタイトルの大きさは
/* ブログタイトル(スマホ基準) */
説明文は
/* ブログ説明文, パンくずリスト */
が目印です。
書体は
/* 基本 */
と
/* 明朝 */
です。

カスタマイズが予想される部位は
注)主要カスタマイズ(variables)
にまとめてありますので目を通して頂くようお願いします。
フォントの指定の仕方は以下のページをご参照ください。

参考記事: 意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html

もう一点お願いいたします。

Akiraさんへ

ブログタイトル、ブログ説明文共にサイズ変更ができました。
ありがとうございました。
書体は、もう少し勉強してから変更するようにします。

もう一点お願いいたします。
ドミナントカラーを変更して水色にしましたが
カルーセルの両サイドの色を変更するには
どのようにすれば良いでしょうか？

何度も恐縮ですが、よろしくお願いいたします。

To 冷凍食品クラブさん

はじめまして。
冷凍食品クラブさんブログでは、コメント欄が公開されておらないようですので、こちらでコメントさせて戴きます。

Akiraさんへの「カルーセルの両サイドの色を変更するにはどのようにすれば良いでしょうか？」とのご質問の件なんですが、それに合わせて弊ブログで「カスタマイズのコツ」を記事にしてみましたので、ご参照戴ければと思います。
-----------------------
FC2ブログテンプレートの色のカスタマイズにデベロッパーツールを利用する方法
https://oops0011.blog.fc2.com/blog-entry-768.html
-----------------------

To 冷凍食品クラブさん, ぼっちんさん

こんにちは ('0')/
まとめてのお返事で失礼します。

ぼっちんさん、ご協力重ねてありがとうございます。助かります :)

冷凍食品クラブさん
ぼっちんさんの記事に答えがあります。スライダーのページネーション部分は
--color-sub
が該当です。

開発者ツールを使うと対象の特定ができるようになりますので、ぼっちんさんの記事を熟読されると良いですね :)

本文左右の余白について

Akiraさん
こんにちは。

Southerlyの記事も、画像を入れ替えしたりして、
随分、全体のトーンが調整できてきました(*^^*)

どうしても文字が多めになってしまうので、
本文の左右余白を多くして、読みやすくしたいのです。

こんなイメージです。
https://blog-imgs-169.fc2.com/s/t/r/streamhens/m.png

どこを修正すれば良いでしょうか？


追伸
それから、コメントを受け付けたいのですが、
投稿の下には書く欄が見当たらないのです。

「コメント設定」ではコメントできるような仕様に見えるのですが。
どこを修正したらコメント書けるようになりますか？

トラックバックというのはいらない気がしますが、
これは消せたら消したい。

いろいろ増えてしまいまして恐縮ですがよろしくお願いします。

完了しました。

ぼっちんさんへ
次からはAkiraさんにお聞きする前に
デベロッパーツールを活用されていただきますね。
ありがとうございました。

Akiraさんへ
次からはデベロッパーツールでわからない時だけ
お聞きしますね。
ありがとうございました。

To 冷凍食品クラブさん

おはようございます ＾＾
ご理解戴けたようで安心いたしました。
これからもカスタマイズをお楽しみくださいね ＾＾

To あみきんさん

こんばんは ('0')/
お返事遅くなりました。

メインカラムとサイドカラム間の余白は
--gap: 50px;/* メインカラムとサイドカラムの余白 */

全体の幅調整は
--width-whole: 1300px;/* 全体最大横幅 */

です。双方を操作しながら最適な状態を模索してください。

-----
> コメントを受け付けたいのですが、投稿の下には書く欄が見当たらない〜

記事編集画面の「記事の設定」「コメント」のラジオボタン「受け付ける」にチェックを入れてください。

-----
> トラックバックというのはいらない気がしますが、これは消せたら消したい〜

HTML内
<!-- トラックバックここから -->
から
<!-- トラックバックここまで -->
を削除(その前後にある <!--trackback_area--> と <!--/trackback_area--> も消して構いません)

以上です。お試しください。

To 冷凍食品クラブさん, ぼっちんさん

こんばんは ('0')/
お返事遅くなりました。

使い方を覚えれば便利なので是非ご活用ください。

ぼっちんさん、啓蒙のご協力ありがとうございます :)

To vanillaice (Akira)さん

Akiraさん

ありがとうございました。
3つとも、うまくいきました。
感謝です(o*。_。)oペコッ

追伸
あ、トップページも同じようにスリムになっちゃったんですね💦
トップページはもとのままというわけにはいかないですね(^^;
難しい～

To あみきんさん

こんにちは ('0')/

横幅の調整はいくつか種類があります。

・ 全体(全ページ)適用
・ ページ種別(グリッドページと通常の2種で分ける)
・ ページ別(全てのページにそれぞれの調整)

また、記事幅についても

・ 記事内容(本文, 追記, 公式SNSシェアボタン, 関連記事リスト 含む)のみ
・ 副情報を含む記事内容(上記にヘッダーとフッター 含む)

記事内容のみと仮定した場合は行った調整をデフォルトに戻した上で

.inner-contents {
max-width: 希望数値px;
margin: 20px auto;
}

をスタイルシートの最終に追加してください。それ以外の場合は別のアプローチが必要です。

To vanillaice (Akira)さん

Akiraさん
パソコンでは少し窮屈でしたが、スマホなどでは表示が違うので
なんとかいけるかなと思ったんですが、修正方法があるということで
ありがとうございます。

修正した部分を戻して、

.inner-contents {
max-width: 1000px;
margin: 20px auto;
}

としてみましたが、変化がありません💦

margin: 50px
でも、変わりません。

何度もすみません。。。

To あみきんさん

こんばんは ('0')/

本記事の仕様表をよくご覧ください。
記事幅(PC 最大)
の項目に
メイン --- 950px
とあります。デフォルトで記事幅の最大が950pxですから、1000px指定ではデフォルトよりも広くなってしまいます。
(実際には広くしても親要素が制御されているので広がることはありません)

950px以下の数値を指定してください。
marginはヘッダーとフッターとの余白調整です。垂直(上下)に20pxづつ、水平は中央合わせという指定です。
margin: 20px 0;
にすると記事が左に寄りますので、ヘッダーとフッターの左辺と記事の左辺が揃い、かつ、サイドメニューとの余白が大きくなりますがバランスが良いかどうかの感じ方は人それぞれなのでお好みで。

参考までに以下の記事をどうぞ。テンプレートの動作や見た目がおかしいと感じたときの対処法まではわからずとも原因を突き止めることができるかもしれません。

参考記事: テンプレートカスタマイズをする方へバリデートのススメ
https://vanillaice000.blog.fc2.com/blog-entry-1002.html

To vanillaice (Akira)さん

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

思い通りになって嬉しいです。
仕様ではない、細かいところまで教えていただき、
大変感謝しています。

なんとなくわかってきたように思いますので、
少しずつ、自分で調べることもできそうです(^▽^)/

追伸
あと、もう一つだけ、TOCのほうでご質問させていただいているのですが、
目次が２回続きで表示されてしまっていて、
再度、最初から作り直したのですが、
また、目次が2倍表示されてしまっています。

すべて外部JSのやり方でやっています。

お時間のありますときに、ヒントをいただければ幸いです。
ネットで調べてもみたのですが、原因がわからず・・・

To あみきんさん

こんばんは ('0')/

HTMLのクリティカルエラーに起因している可能性があります。

<!-- Google Tag Manager (noscript) -->
の内容をhead要素内に含めることはできません。google tag managerに限らず、iframe要素(今回の場合はnoscript要素内のiframe要素)は <body>〜</body>のどこか に記載します。今回の場合は<body>の直下でOKです。

本件はgoogleのページで設置場所についての指示があったはずです。というかnoscriptは個人的には不要だと思います(javascriptをOFFにしている場合のコードですが、JSをOFFにした場合はFC2環境では機能を活かせませんしテンプレートの表示や動作もぐちゃぐちゃになるのでgoogleどころじゃないというか)

まずはこのエラーを修正してみてください。

To vanillaice (Akira)さん

とりあえず、Googleタグマネを削除しました。
2か所ありましたね。
でも、変化ありません

To あみきんさん

> 2か所ありましたね。〜

1つは ①head内に置くコード、もう1つが ②body開始タグ直下に置くコード です。両方削除してしまったらtag managerが機能しなくなりますが大丈夫でしょうか。私がお伝えしたのは「②の方を正しい位置に設置し直すか、あるいは不要と判断できるのならば削除する」という内容です。

> でも、変化ありません〜

JSファイル内に必須スクリプト②が2回記されています。今一度記事をよく読まれまして、正しいファイルを作成してください。
必須スクリプト①の末尾は
.appendChild(toc);(window)}
です。その後には何も続きませんので確認を。あみきんさんのファイルはこの後ろに必須スクリプト②が続いています。
末尾を確認したら改めて必須スクリプト②を記します。あみきんさんは既にスクリプト②が書かれている状態でさらに②を記しているので2度処理されてダブル表示になっています。

To vanillaice (Akira)さん

わかりました。直りました！
ありがとうございます(o*。_。)oペコッ
お手数おかけしました～

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

Akiraさん、はじめまして

4点お聞きしたいのですが

1，背景とグローバルナビゲーションをはっきりと表示したいので
カルーセル上部の白く曇ったようなものを取り除くことは可能でしょうか？

2，グローバルナビゲーションの親部分を増やしたいのですが
増やすとバランスが崩れるようです。
親部分を増やすにはどのようにすれば良いでしょうか？

3，グローバルナビゲーションの子部分のバックグラウンドに色をつけたいのですが
どのようにすれば良いでしょうか？

4，グローバルナビゲーションをブログの幅いっぱいに表示したいのですが
どのようにすれば良いでしょうか？

すみませんがよろしくお願いいたします。

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

Akiraさん、何度も申し訳ありません。

グローバルナビゲーションの親2つめはオンマウスすると子が出てくるのですが
親3つめに子を設定するとクリックしないと出てきません
設定が間違っているのでしょうか
次のように設定しています。

<nav class="navi-sizing-inner collapsed" id="sp-navi">
<ul class="navi-list">
<li class="navi-item"><a class="navi-item-anchor" href="<%url>">Home</a></li>
<!-- 注)ドロップダウンここから 不要な方ここから削除 -->
<li class="navi-item navi-item-about"><span class="navi-item-anchor navi-item-toggle">Video editing</span>
<ul class="navi-item-list sub-collapsed" id="toggle-list">
<!-- 注)リンク先の追加はここに 同じclass名(class="submenu-anchor")を必ずつける, リンク記述 href="ここにURL" -->
<li class="navi-item submenu-item"><a class="navi-item-anchor submenu-anchor" href="https://maakochannel.blog.fc2.com/blog-category-5.html">PowerDirector</a></li>
<li class="navi-item submenu-item"><a class="navi-item-anchor submenu-anchor" href="https://maakochannel.blog.fc2.com/blog-category-6.html">VideoProc Vlogger</a></li>
<li class="navi-item submenu-item"><a class="navi-item-anchor submenu-anchor" href="https://maakochannel.blog.fc2.com/blog-category-7.html">OBS Studio</a></li>
</ul>
<li class="navi-item navi-item-about"><span class="navi-item-anchor navi-item-toggle">HTML･CSS</span>
<ul class="navi-item-list sub-collapsed" id="toggle-list">
<li class="navi-item submenu-item"><a class="navi-item-anchor submenu-anchor" href="https://maakochannel.blog.fc2.com/blog-category-8.html">HTML</a></li>
<li class="navi-item submenu-item"><a class="navi-item-anchor submenu-anchor" href="https://maakochannel.blog.fc2.com/blog-category-9.html">HTML･CSS</a></li>
<li class="navi-item submenu-item"><a class="navi-item-anchor submenu-anchor" href="https://maakochannel.blog.fc2.com/blog-category-10.html">HTML･CSS・jQ</a></li>
</ul>
<li class="navi-item"><a class="navi-item-anchor" href="https://maakochannel.blog.fc2.com/blog-category-3.html">Windows</a></li>
<li class="navi-item"><a class="navi-item-anchor" href="https://maakochannel.blog.fc2.com/blog-category-4.html">Application</a></li>
</ul>
</nav>

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

To まあこさん

こんにちは ('0')/

まずナビゲーションの件から。
ドロップダウン部位は複製を想定した構造にはなっていません。何故かというとドロップダウンは展開した際の調整を緻密に行わないと画面幅を超過(オーバーフロー, はみ出し)してしまうからです。

ただ、本件については同じ要望の方がいらっしゃるかもしれませんのでJS内容を変更して上書きしました。お手数ですが再DLをお願いします。更新日が
*2023.9.25
になっていることを確認してDLしてください。

テンプレート自体の差し替えが難しい場合は
<!-- グローバルナビゲーション -->
のHTML部位と
<!-- navi breakpoint 1/2 -->
のJSを差し替えてください。
ただ、HTMLのクリティカルエラーがたくさんありますので、再DLしてはじめから慎重にカスタマイズされた方が良いと思います。内容はbogus comment error といってコメントアウトのミスです。

参考記事: コメントアウトを活用しよう
https://vanillaice000.blog.fc2.com/blog-entry-1080.html

コメントアウトのミスや誤用は構造を壊してしまう重大なエラーなので注意してください。エラー箇所を特定できない場合は以下の記事を参照のこと。

参考記事: テンプレートカスタマイズをする方へバリデートのススメ
https://vanillaice000.blog.fc2.com/blog-entry-1002.html

ナビ横幅制限の解除はスタイルシート内
--navi-width-max: 700px;
を
--navi-width-max: initial;
に変更。オーバーフローへの対処はご自身でお願いします。また、「グローバルナビゲーションをブログの幅いっぱいに表示したい〜」とのご希望ですが、ご自身でbodyにpaddingを設けていらっしゃいますので横100%にはなりません。

一旦投稿します。

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

これらについては、まずはHTMLの構造回復が第一なので、修正を行った上で再度目視確認を行ってください。

> カルーセル上部の白く曇ったようなもの〜

これはテキストの視認性を確保するための重要なレイヤーです。カスタイマイズとHTMLエラーによってレイヤーが分断されるなど見た目も崩れていますので、修正後に目視確認をされまして再検討をお願いします。

> グローバルナビゲーションの子部分のバックグラウンドに色をつけたい〜

--navi-bgcolor
の値を変更してください。

再DLしました。

Akiraさん、再DLしました。

とりあえず、ブログは現状のまま表示しておいて
ゆっくりと再カスタマイズして行きます。

> 自身でbodyにpaddingを設けて

自分では記憶にないのですが、どの部分のことかお教えいただけないでしょうか。

> カルーセル上部の白く曇ったようなもの

レイヤーが分断されるのであれば、触らないようにします。

> --navi-bgcolor

変更できました。ありがとうございました。

> 自身でbodyにpaddingを設けて
の件よろしくお願いいたします。
本当にありがとうございます。

To まぁこさん

> bodyにpaddingを設けて〜自分では記憶にない〜

/*▼------------------------------▼
左に画像右にテキスト
------------------------------*/

のところに

body {
margin: 20px;
padding: 0;
}

と指定されています。paddingではなくmarginでした。ごめんなさいね。
とにかくこのままではクリティカルエラー(致命的エラー)が大量にあるのでカスタマイズはどうやっても上手くいきません。例えば上記のCSSコメントも

×
/*▼------------------------------▼
左に画像右にテキスト
------------------------------*/

✔
/* 左に画像右にテキスト */

✔
/*===============
左に画像右にテキスト
===============*/

なぜダメなのかは参考記事を熟読してください。


> ブログは現状のまま表示しておいてゆっくりと再カスタマイズして行きます。〜

HTMLの回復は火急の要件です。head内にもクリティカルエラーがあるためGoogleはまあこさんのブログを正しく認識できません。
とりあえず表示しおく、というのであれば、新規DLされた方(カスタマイズ前の方)をおすすめします。

HTMLの回復

Akiraさん、ありがとうございます。

HTMLの回復はできるだけ早く行うようにします。
▼は文字として読み込むと思っていました。

FC2アクセス解析もそのままでは構文エラーなんですね。
FC2アクセス解析は対処出来ましたが
例えば
<!-- ▼ User Local無料アクセス解析▼-->
<script type="text/javascript">
(function(a,b,c,d,e,f,g){
e='//d.nakanohito.jp/ua/uwa.js';
a['UlGlobalObject']=d;a[d]=a[d]||function(){(a[d].q=a[d].q||[]).push(arguments)};
a[d].l=1*new Date();
f=b.createElement(c),g=b.getElementsByTagName(c)[0];
f.async=1;f.src=e;g.parentNode.insertBefore(f,g)
})(window,document,'script','_uao');

_uao('init', '20154427', {oem_id: 1,fpf: true});
_uao('set', 'lg_id', '');
_uao('send', 'pv');
</script>

の<script type="text/javascript">が
Warning: The type attribute is unnecessary for JavaScript resources.
と警告されます。
この場合はUser Local無料アクセス解析事態を
削除した方が良いのでしょうか？

> 新規DLされた方(カスタマイズ前の方)をおすすめします。

最低限の部分のみ変更して再DLしたものを表示するようにします。
ご忠告ありがとうございます。

To まあこさん

こんにちは ('0')/

> ▼は文字として読み込むと思っていました。〜

コメント内の文字列はHTML, CSSなどのweb言語ではない文字として解釈されますよ。今回の問題は▼記号にあるのではなく、コメント記号の間違いです。

例) × コメント開始記号ミス
<!▼-- コメント▼ -->

例) × コメント開始記号ミス
<!-▼- コメント▼ -->

例) × コメント終了記号ミス
<!--▼ コメント --▼>

正しい例)
<!-- ▼コメント▼ -->

上記バリエーションのミスが多くあり、最初のミスがhead内にあったため後続のコメントのほとんどと、HTML内容の一部も巻き込まれてエラーになっていました。エラー発生の時点が早いほど巻き込まれる後続要素が多いのでエラー数が増えていきます。

-----
> FC2アクセス解析もそのままでは構文エラーなんですね〜

FC2アクセス解析が上記内容で間違いないのであればエラーはありません。エラーと警告は意味が全く違いますので注意してください。
エラー(error)は『修正(ほぼ)必須』
警告(warning)は『修正が望ましいが必須ではない』
です。

参考記事: W3C validatorのエラーの説明
https://vanillaice000.blog.fc2.com/blog-entry-782.html

The type attribute is unnecessary for JavaScript resources.
というのは「JSリソースの初期タイプは type="text/javascript" なので書かなくても初期値が適用されますよ(書く必要はありませんよ, 書いても無意味ですよ)」といった内容の警告・注意であって「書いてはならない」という意味ではありません。

警告については過敏になる必要はありませんのでそのままご利用ください。あるいは
<script type="text/javascript">
を
<script>
に書き換えればなお良いですね(その他の内容は改行の状態など含め決して変更しないよう注意してください)

-----
> 最低限の部分のみ変更して再DLしたものを表示するようにします〜

スタイルシートの一部を旧内容と合体させてしまっているように思います。各バージョンそれぞれにHTMLとCSSの整合性を保つよう設計されていますので、一部差し替えやマージは行わないようにしてください。
整合性が無いためスライダーやアイテムの設計が狂っています。
本記事内のDEMO画面と比較してくださいね。
また、スタイルシートにも多くのミスがあります。

・ブレイス記号の欠損が多く見られます。
・FC2ではCSSのネストはできません(Less, Sass, Scss など)
・セミコロンの欠損に注意

テンプレートのスタイルシートにエラーはありませんので、個人で追加する内容をしっかりチェックしてから追加してください。

https://jigsaw.w3.org/css-validator/

まずデフォルトのスタイルシート(一切何も追加しない状態)を上記バリデータでチェックし、エラーが無いことを確認
↓
なにか一つ追加したらバリデート
↓
またなにか一つ追加したらバリデート

という手順を踏むと良いと思います。一括で行ってしまうとミスの部位特定が困難になります。その前にスタイルシートをデフォルトの状態(テンプレートのバージョンと合致するもの)に戻してくださいね。

-----
カテゴリプラグインの内容にもエラーがあります。これはカスタマイズが原因かどうか私にはわかりませんし、共有プラグインの修正を請け負うことはしませんので、現在のweb標準に見合ったものに変更されることをおすすめします。

参考記事: 弊テンプレートと相性の良い共有プラグインの紹介
https://vanillaice000.blog.fc2.com/blog-entry-954.html

再DLを1からやり直します

Akiraさん、再DLしたものを1からやり直します。

おっしゃるように一つ追加したらバリデートを
繰り返すようにします。

ただ、デフォルトの状態で

1　警告:このborder属性は廃止されました。代わりに CSS で指定することを検討してくださいimg { border: 0; }。

869行目、92列目から。869行目、213列目まで

="_blank"><img src="https://b.blogmura.com/internet/vtuber/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ネットブログ Vtuber"></a>↩<

2　警告:このborder属性は廃止されました。代わりに CSS で指定することを検討してくださいimg { border: 0; }。

870行目、91列目から。870行目、214列目まで

="_blank"><img src="https://b.blogmura.com/internet/youtube/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ネットブログ YouTube"></a>↩<

3　エラー:特定の条件を除いて、要素には属性imgが必要ですalt。詳細については、画像の代替テキストの提供に関するガイダンスを参照してください。

873行目、73列目から。873行目、142列目まで

="_blank"><img src="https://static.fc2.com/blogranking/ranking_banner/c_01.gif"></a>↩<

プラグインは
検索フォーム
プロフィール
ブログランキング
のみ表示しています。

ブログランキングのバナーはどうしようもないですよね。

To まあこさん

> ブログランキングのバナーはどうしようもないですよね〜

ランキングバナーはフリーエリアプラグインを利用してご自身でHTMLを記載したはずです。FC2ブログが自動的に出力する内容はどうにもできませんが、自分で書いたのですからなんとでもなります。
記載したソースコードを指摘の通り修正するだけです。

『このborder属性は廃止』

<img src="https://b.blogmura.com/internet/vtuber/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ネットブログ Vtuber">
↓
<img src="https://b.blogmura.com/internet/vtuber/88_31.gif" width="88" height="31" alt="にほんブログ村 ネットブログ Vtuber">

『特定の条件を除いて、img要素にはalt属性が必要です。』

<img src="https://static.fc2.com/blogranking/ranking_banner/c_01.gif">
↓
<img src="https://static.fc2.com/blogranking/ranking_banner/c_01.gif" alt="適切な値を記載">

適切な値というのは例えば「xxxランキング」「yyyネット」など各バナーが所属するサービス名称などで良いと思います。

先回のコメントでお伝えしたバリデートの件はスタイルシート(CSS)のことです。もちろんHTMLの方も同じようにできるならそれに越したことはありません。
現時点で既にCSSエラーが出ているので、カスタマイズ前に一度バリデートして確認し、追加内容は一つづつバリデートにかけて行う という手順をおすすめしました。

これまで利用してきたであろう個人カスタマイズ内容に明らかにミスが存在しているのですから、精査しながら慎重に追加を行ってください。

バリデートについて

Akiraさん、毎回ありがとうございます。

ブログランキングのバナーは、ご指示通りの方法で
警告やエラーが出なくなりました。
バナーはブログランキングサイトから提供されているものなので
どうしようもないと思っていました。
ありがとうございました。

現在はブログを表示するためにCSSエラーを承知で掲載しています。
これからHTMLに関しては教えて頂いたThe W3C Markup Validation Serviceで
CSSに関してはW3C CSS 検証サービスで一つ一つバリデートしていくようにして行きます。

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

To まあこさん

こんばんは ('0')/

手打ちしたものについては修正可能です。コード変更についての規約とはまた別の話なので規約に沿った利用をしてくださいね。

YouTubeが再生出来なくなりまして…

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

久しぶりに、こちらのテンプレートへ引っ越しました。

やっと、問題なく移行がほぼ終わったかな？と思った所で、新しいこちらのテンプレにてブログを公開。
細かいところはこれから調整していこうと考えていました。

ところが早速、記事冒頭に埋め込んだYouTube動画が再生できないのを発見しまして…
いろいろ試してみたのですが、今まで使っていたテンプレでは再生できるのに、こちらのテンプレではどうしても再生できません。

実は、今もまだLazy Loadで画像を遅延ロードする方法で記事作成をしていて、YouTubeの埋め込みに関してもLazy Loadを使用しています。

もしかして、こちらのテンプレ（Southerly）はLazy Load未対応なのでしょうか？

どうしてもこのYouTube再生の件だけが解決できず、苦慮しております。

もう少し自分で調べてから、とも思ったのですが、Lazy Loadに関する記事がなくなってしまったので、やむを得ず質問させてもらいました。

お忙しい中、大変恐縮ですが、何か不備などがございましたらご教授頂けますと幸いです。

【返信不要】自己解決させました

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

ご返信頂くまでの間に何とか自己解決させましたので、そのご報告です。

To Mさん(自己解決のご報告)

お返事遅くなりごめんなさい。

lazysizesのvideo embedのことでしたら、限定配布以外のテンプレート(公式DLページで提供しているもの)には導入していませんので、ご自身で追加して頂く必要があります。

いずれにしろ自己解決されたということで良かったです。お疲れ様でした :)

ヘッダーイメージ

いつもお世話になっております。
AkiraさんのFrancescaに設定されているような
ヘッダーイメージ（3枚の画像が切り替わるもの）を
SoutherlyにもSoutherlyの画像の大きさで設置することは
できないでしょうか？
また、枚数を5枚にできないでしょうか？
もしできるのであればLuminousで質問させていただいた
新しいサイトに設置したいと思います。
よろしくお願いします。

To ヘッダーイメージ まあこさん

こんばんは ( ﾟДﾟ)ﾉ

可能かどうかを問われれば大抵のことは可能です。テンプレートのデフォルトに含まれない機能の導入などについては指南の一切をお断りしています。弊テンプレート間に限りJSやCSSなどの移設を許可していますので、自己責任のもとで移植して頂くことは構いません。