vanillaice (Akira)

vanillaice (Akira)

Southerly
PCアイコン TBアイコン SPアイコン

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

更新履歴 2017.1.25

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

名称 Southerly
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大1010px
サイド --- 270px
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・プラグイン1と2は右のサイドメニューに プラグイン3はフッター上に配置されます
valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
プラグイン1・2 --- 右
プラグイン3 --- 下
プラグイン1・2 --- 右 or 下(デバイス幅依存)
プラグイン3 --- 下
プラグイン1・2・3 --- 下
過去の更新一覧
更新履歴 2017.1.13

・RSS新着サムネイルをFC2独自変数での表示に切り替えました

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

表示件数はブログ個人設定に依存します
デザイン上の最適件数は 8件 です

更新履歴 2016.9.9

リストマーカーの位置を調整しました
参考記事
list-item横の隙間について

更新履歴 2016.7.3

モバイル版誘導リンクのミスを修正しました
ドロップダウン内リンクが効かない件を修正しました
ご迷惑おかけしまして申し訳ございません (*_ _)
詳細はこちら ↓
Southerlyモバイル版誘導リンクとドロップダウン内リンクにミスがありました

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

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

さざりぃ
カルーセルスライダーつき グリッドレイアウト
25日申請予定

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更

カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします

背景画像変更について

該当箇所は以下を Ctrl+F キー検索

/* 注)ヘッダー画像 */

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

デフォルト画像 (縮尺掲載 実寸1800✕1125 55KB Public domain)
ページ下部のRSSサムネイル表示件数について

Google API規定最大の8件をデフォルトとしてあります
ブログ個人設定から配信数を8件以上に設定して頂きますと見た目がベストな状態になります
「全文」に設定するのもお忘れなく
詳細は仕様表にあります「任意個人設定」の項目「新着サムネイル利用」にあるリンク先でご覧ください

追記
Google feed APIの廃止に伴い、本機能は削除しました。

No image画像変更について

記事内に画像が存在しない場合の代替として表示されるNo image画像
使用箇所は以下の3つです

  • トップページサムネイル(FC2サムネイル)
  • 検索結果ページサムネイル(FC2サムネイル)
  • RSS新着サムネイル(RSSより抽出)

デフォルト画像のアドレスは以下の通り

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

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

デフォルト画像 (縮尺掲載 実寸500✕500 15KB Public domain)
Hi thereテキストと画像変更について

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

<!-- 注)About Me不要の方ここから削除 -->

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

<p><%introduction2></p>

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

背景画像を変更するには

/* 注)Hi there背景画像 */

上記を目印に(CSSソース内に1箇所あります)
url(ここに画像アドレス)
サイズは縦横比不問 横500px以上が理想です

Hi thereデフォルト画像 (縮尺掲載 実寸500✕333 20KB Public domain)
ドミナントカラー

以下が基本色調です
数字の部分だけを抜き出してCtrl+Fキー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください
例) 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リンク背景色 など
管理人コメントと訪問者コメントを分ける方

デフォルトはグレー背景アイコン。

サンプル

CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください。
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません。
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り。

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}
サンプル

* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
みなさんいつもありがとうございます (●'0'●)/

関連記事

Comments 73

There are no comments yet.
Akira  
To Southerlyの件 内緒さん

> 写真の形状を正方形に

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

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

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

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

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

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

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

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

--------

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

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

2016/06/09 (Thu) 12:32 | EDIT | REPLY |   
JSK  
質問の回答

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

2016/06/09 (Thu) 13:34 | EDIT | REPLY |   
Akira  
To JSKさん

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

.inner-image-parent2:before

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

padding-top: 70%;

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

padding-top: 100%;

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

2016/06/09 (Thu) 13:57 | EDIT | REPLY |   
JSK  

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

お手数おかけしました。 

2016/06/09 (Thu) 14:50 | EDIT | REPLY |   
Akira  
To JSKさん

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

2016/06/09 (Thu) 16:17 | EDIT | REPLY |   
手彫り  
使わせていただきました。

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

2016/06/28 (Tue) 14:13 | EDIT | REPLY |   
Akira  
To 手彫りさん

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

2016/06/28 (Tue) 18:37 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/02 (Sat) 21:05 | EDIT | REPLY |   
Akira  
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) 01:02 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/03 (Sun) 12:57 | EDIT | REPLY |   
Akira  
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/03 (Sun) 20:39 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/04 (Mon) 16:21 | EDIT | REPLY |   
Akira  
To Southerlyドロップダウンの件 内緒さん

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

2016/07/05 (Tue) 17:03 | EDIT | REPLY |   
Rin  
スマホで閲覧すると個別記事内の画像が表示されない件

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

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

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

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

2016/07/23 (Sat) 14:48 | EDIT | REPLY |   
Akira  
To Rinさん

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

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

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

({mobile:false})

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

2016/07/23 (Sat) 15:25 | EDIT | REPLY |   
Rin  
スマホで閲覧すると個別記事内の画像が表示されない件

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

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

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

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

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

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

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

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

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

2016/07/23 (Sat) 16:11 | EDIT | REPLY |   
Akira  
To Rinさん

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

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

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

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

2016/07/23 (Sat) 16:26 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

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

2016/07/23 (Sat) 17:06 | EDIT | REPLY |   
Rin  
スマホで閲覧すると個別記事内の画像が表示されない件

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

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

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

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

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

2016/07/23 (Sat) 17:50 | EDIT | REPLY |   
Rin  
「ついで」のこと

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

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

2016/07/23 (Sat) 17:59 | EDIT | REPLY |   
Akira  
To Rinさん

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

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

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

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

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

2016/07/24 (Sun) 01:35 | EDIT | REPLY |   
Rin  
スマホで閲覧すると個別記事内の画像が表示されない件

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

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

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

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

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

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

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

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

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

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

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

-------

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

2016/07/25 (Mon) 02:02 | EDIT | REPLY |   
Akira  
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回表示されてね?
という感じ(笑)
これが「整形よりローディングが先に終わっちゃった…」の典型例です。

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

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

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

=====

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

().init();

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

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

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

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

2016/07/25 (Mon) 13:02 | EDIT | REPLY |   
Akira  
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を試されまして、結果をお知らせくださいね。
よろしくお願いします!

2016/07/25 (Mon) 13:32 | EDIT | REPLY |   
Akira  
To Rinさん 最初に読んでくださーい!

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

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

==== 26日 追記

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

2016/07/25 (Mon) 14:42 | EDIT | REPLY |   
マタタビ  
Belongテンプレートの件

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

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

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

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

よろしくお願いします。

2016/07/28 (Thu) 20:28 | EDIT | REPLY |   
Akira  
To マタタビさん

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

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

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

2016/07/28 (Thu) 20:46 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/28 (Thu) 21:16 | EDIT | REPLY |   
Akira  
To Southerlyの件 内緒さん

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

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

======

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

2016/07/28 (Thu) 21:23 | EDIT | REPLY |   
Akira  
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に切り替えされると良いと思います。
その前にバージョンあげられると良いんだけどー ( ̄∀ ̄;)

2016/07/28 (Thu) 21:41 | EDIT | REPLY |   
Rin  
To Southerlyの件

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

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

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

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

2016/07/29 (Fri) 00:20 | EDIT | REPLY |   
Akira  
To Rinさん

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

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

2016/07/29 (Fri) 00:28 | EDIT | REPLY |   
Rin  

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

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

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

2016/07/29 (Fri) 02:24 | EDIT | REPLY |   
Akira  
To Rinさん

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

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

2016/07/29 (Fri) 14:08 | EDIT | REPLY |   
kazu  
キーワードについて

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』でのキーワードを設定するコツなどを伺いたいです。

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

2016/10/30 (Sun) 16:50 | EDIT | REPLY |   
Akira  
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を気にされる方はレスポンシブデザイン採用・スマホ版非表示をおすすめします。)

2016/10/30 (Sun) 17:15 | EDIT | REPLY |   
kazu  
素早いご回答、ありがとうございました。

Akiraさんこんにちは。

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


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

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


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

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

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


2016/10/30 (Sun) 17:38 | EDIT | REPLY |   
Akira  
To kazuさん

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

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

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

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

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

2016/10/30 (Sun) 18:01 | EDIT | REPLY |   
kazu  

Akiraさん、こんばんは。

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

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

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


私は、

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

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


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


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

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

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

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


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

2016/10/30 (Sun) 21:58 | EDIT | REPLY |   
Akira  
To kazuさん

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

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

少しでもkazuさんの理想に近づくと良いですね e-454

2016/10/30 (Sun) 22:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

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

2016/10/30 (Sun) 23:01 | EDIT | REPLY |   
kazu  
noindexについて質問させてください

Akiraさん、こんにちは。


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


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


html内に、

meta name="robots" content

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

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

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

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

2016/10/31 (Mon) 11:32 | EDIT | REPLY |   
Akira  
To kazuさん

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

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

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

2016/10/31 (Mon) 17:24 | EDIT | REPLY |   
kazu  
貴重なお時間を割いて頂きありがとうございました。

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

大変お忙しいところ、お時間を頂き申し訳ございませんでした。
このコメントへの返信は頂かなくて大丈夫です。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されました。

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

2016/11/01 (Tue) 13:34 | EDIT | REPLY |   
Akira  
To kazuさん

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

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

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

2016/11/01 (Tue) 17:58 | EDIT | REPLY |   
kazu  

Akiraさんこんばんは。

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

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

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

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

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

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

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

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

ご提供感謝です。

2016/11/01 (Tue) 19:09 | EDIT | REPLY |   
Akira  
To kazuさん

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

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

2016/11/03 (Thu) 01:02 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/11/20 (Sun) 11:53 | EDIT | REPLY |   
Akira  
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だけで構成してしまうと、みなさん戸惑うんです。たぶん。
えー!これおかしいでしょ! e-447
ってなる。たぶん(笑)

-------

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

-------

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

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

2016/11/20 (Sun) 13:46 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/11/20 (Sun) 15:52 | EDIT | REPLY |   
Akira  
To 見出しの件 内緒さん

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

2016/11/20 (Sun) 22:21 | EDIT | REPLY |   
nishi  

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

2016/12/26 (Mon) 17:36 | EDIT | REPLY |   
Akira  
To nishiさん

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

2016/12/26 (Mon) 17:49 | EDIT | REPLY |   
Megu  
Hi There欄とプロフィールプロフィール欄について

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

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

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

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

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


2017/05/21 (Sun) 23:32 | EDIT | REPLY |   
Akira  
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です。
ご配慮ありがとうございます

2017/05/21 (Sun) 23:52 | EDIT | REPLY |   
Megu  
To Akiraさん

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

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

よろしくお願いします

Megu

2017/05/22 (Mon) 00:22 | EDIT | REPLY |   
Akira  
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'ω')ノ

2017/05/22 (Mon) 00:50 | EDIT | REPLY |   
Megu  
To Akiraさん

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

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

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

なので、次に①の

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


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


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

2017/05/22 (Mon) 01:15 | EDIT | REPLY |   
Megu  
To Akiraさん

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


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

よろしくお願いします。

めぐ

2017/05/22 (Mon) 01:21 | EDIT | REPLY |   
Akira  
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) は変更可能ですので、遷移させたいページに最も適した文言に適宜修正してください。
よろしくお願いします。

2017/05/22 (Mon) 02:47 | EDIT | REPLY |   
Megu  
To Akiraさん

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

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

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



2017/05/22 (Mon) 08:47 | EDIT | REPLY |   
Akira  
To Meguさん

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

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

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

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

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

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

2017/05/23 (Tue) 11:00 | EDIT | REPLY |   
Megu  
To Akiraさん

Akira さん

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

2017/05/23 (Tue) 20:43 | EDIT | REPLY |   
Akira  
To Meguさん

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

2017/05/23 (Tue) 23:09 | EDIT | REPLY |   
ミーネ  
topにカテゴリー

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

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

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

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

2017/07/16 (Sun) 18:10 | EDIT | REPLY |   
Akira  
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/16 (Sun) 19:18 | EDIT | REPLY |   
ミーネ  
ありがとうございます

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

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

2017/07/17 (Mon) 23:22 | EDIT | REPLY |   
Akira  
To ミーネさん

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

2017/07/18 (Tue) 14:19 | EDIT | REPLY |   
シャークネード  
スライダーサムネイルについて

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

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

2017/11/15 (Wed) 16:06 | EDIT | REPLY |   
Akira  
To シャークネードさん

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

2017/11/15 (Wed) 16:27 | EDIT | REPLY |   
シャークネード  
To Akiraさん

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

2017/11/15 (Wed) 18:42 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ