vanillaice (Akira)

vanillaice (Akira)

All about us



名称 All-about-us
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC, TB --- 右/ ブラウザ縮小時 下
SP --- 右からスライド
記事幅 可変 最大1070px (内寸 1010px)
サイドバー幅 固定 300px (内寸 270px)
新着サムネイル表示 あり (フッター上)
デフォルト表示件数8件
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴いFC2独自変数での表示に変更しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム スライド画像変更, テーマ色変更, 文字大きさ変更 etc.


valid-html5.png


更新履歴 2017.1.25


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

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


--------- 以下本文



更新履歴 2017.1.13


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

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


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


更新履歴 2016.10.6


・ Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 軽量化
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・ その他微調整

「Sweetie」不具合修正と「Belong」「All-about-us」メンテナンスのお知らせ


更新履歴 2016.9.14


注) 2016.9.14 追記

この更新履歴項目はFC2不具合に起因しておりました
現在では復旧していますので 以下の修正作業を行う必要はありません
一応情報として残しておきます
以下本文




記事下ユーザータグのアウトラインに表示崩れがありました
申し訳ございません (*_ _)
(ただしFC2不具合の可能性もあり)
対象になる方 記事下スポンサーサイト表示を行なっている方(画像高速表示設定をONにされている方)

画像高速表示設定をOFFにされている方は特に表示上の問題はありません(構文上もありません)
既にカスタマイズを行われており 再DLが困難な方は以下の手順で修正をお願い致します
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<!--/topentry_tag--> 

htmlソース内に1箇所あります
上記を目印にして頂きますと そのすぐ「下」に
</div>
が2つ連続しています
いずれか一方の
</div>
だけをCtrl+X(Windows)/ Command+X(Mac) キーを利用してカット(切り取り)
カットしたものを別の箇所に移動させます(すぐ近くです)

<p class="category-name">

最初の目印の少し上の方にすぐ見つかると思います
この「上」にさきほどの
</div>
をCtrl+V(Windows)/ Command+V(Mac) キーでペースト(貼り付け)


ちなみに記事下のスポンサー広告は非表示にできます
規約違反ではなくブログ個人設定から選択が可能です

記事下のSNSボタン関連とユーザータグの距離が近すぎると感じられますかたは CSSソースの末尾に

.tags {
  padding-bottom: 20px;
}

上記内容を 追加 してください
お手数おかけします よろしくお願いします (*_ _)

ただこれ なんかおかしいなー と思いながら修正しました
スポンサーサイト表示の出力コードがおかしいような気がするんだけれども
FC2の不具合… ってこともあるのかもしれない
ちょっとまだ不明なので なにかわかりましたら追記します
とりあえず不具合があるにしても 今回の修正内容で回避できるはずです
よろしくお願いします


追記

やはりFC2側の不具合のようです
修正済みのテンプレについては問題解消後に特に問題になることはないとは思いますが
CSSで調整した padding-bottom が邪魔になるかもしれません
不具合修正後に確認致しまして 再度上書きを行うか決めようと思います
とりあえず 再DL及び修正をまだ行なっていない方につきましては
すぐにでも直したい という方以外は様子見でお願いします

参考記事
FC2不具合のお知らせ「カラム落ち」「表示不備」



更新履歴 2016.9.9


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

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

--------- 以下本文



コンビニのATMでおろした15万を取り忘れたり(カードと明細だけ取って)
長男が電車で財布を落としたり
次男がどこぞで財布をなくしたり と
ふんだりけったりのあきら家 (´・ω・`)
しかし全部戻ってきた!
ついてるんだかついてないんだか
しかし日本というのはすごい国ですね 海外だったら絶対戻りませんよ(笑)



おーる あばうと あす
14日か15日頃申請予定
週末・週明け 記事書けそうにないので先出ししておきます (´・ω・`)



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・スライド画像上の気泡エフェクトは取り除けます
・サイドメニューはスマホのみドロワーに切り替わります(右からスライド)
注) でCtrl+Fキー検索されますとカスタマイズのガイドが出てきます
カスタマイズを始める前に一度ご確認ください


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更


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




スライドについて


今回は記事内画像の抽出ではなく固定画像です
単なるスライドショーですので 気に入った画像に変更されるなどしてご利用ください
もちろんそのままお使い頂いても構いません(全て public domain = 著作権が発生しない画像)

画像変更時の注意が1点
プラグインの仕様上 画像が表示されるまでのタイムラグが発生します
そのため ラグ発生中に空白が表示されないようにするための処理をCSS側で行っています
画像を変更されます方は 最初の1枚目の画像だけCSSでの処理も同時に行ってください
Ctrl+Fキー 検索

/* 注)スライド最初の一枚 */

CSSソース内に1箇所あります上記を目印に
url(ここに1枚目画像アドレス)

スライド本体はhtmlソース内にあります

<!-- 注)トップページスライドここから -->

を目印にガイダンスに従ってください



ナビゲーションについて


ナビゲーションリンクを増やすことを想定して制作しておりません (´・ω・`)
基本的には増やさない方が良いです(笑)



気泡のエフェクト


これは遊びで付けていますが
ページ上部から下へ向かって約3000px程度まではガチンコでアニメーションが入っていますので
パソコンのスペックによってはスクロールがカクつくことがあります
苦になるようでしたらご無理なさらず どうぞエフェクトを外してください
検索

<!-- 注)泡エフェクト不要の方ここから削除 -->

上記を目印にまずhtmlソース内に1箇所 そして CSSソース内に1箇所
計 2箇所ありますので それぞれガイダンスに従って削除してください



RSS新着サムネイルについて


ページの一番下にサムネイルを並べています
この機能をお使い頂くには必ずブログの個人設定を済ませてください
(非公開ブログの方はお使い頂けません)
RSSの件数は 8件 にしておくとベストな状態でレイアウトされます
詳細は仕様表の「任意個人設定」>「新着サムネイル利用」のリンク先でどうぞ



スマホのドロワーについて


みなさんにお尋ねしましてドロワーを導入することにしました
コメントでご協力頂きました方々へお礼申し上げます

というわけで 特にアフィリエイターさんは
スマホではサイドメニューの内容が全て折りたたまれる
というのを念頭に使用をご検討ください



サイドメニューの「About me」画像変更


四角形の背景画像と円形のプロフィール画像 いずれも変更可能です

● 背景画像変更
//blog-imgs-93.fc2.com/v/a/n/vanillaice000/allaboutusabout.jpg

上記が該当アドレスで htmlソース内に1箇所あります
この部分をお好きな画像アドレスに変更してください
を省略してありますが 差し替えの際は記載しても省略してもどちらでも構いません
この部分は元画像の見た目がそのまま反映されます ので
横長画像の場合には横に 縦長の場合には縦に長くなります
最適サイズは 横 600px またはそれ以上 です(自動縮尺がかかります)

デフォルト画像 (縮尺掲載 700✕466 public domain)




● プロフィール画像変更
url(<%image>)

こちらもhtmlソース内に1箇所ありますので 以下の通り変更してください

url(ここに画像アドレス)

最適サイズは短辺300px程度
縦横比不問ですが 縦横比によっては見切れる部分もあります(上下左右中央に合わせる処理をしています)



ドミナントカラー


今回ほとんど色味がありませんが 以下が基本色調です
数字の部分だけを抜き出してCtrl+Fキー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください

例) 51,51,51


rgb(209,161,98) ドロワーハンバーガーボタン(開閉ボタン)の色(スマホのみ)
rgb(51,51,51) 基本文字色
rgb(240,240,240) トップページ要約記事下SNSアイコン横ボーダー色, 個別記事日付けボーダー色 など
rgb(245,245,245) ドロワー背景色(スマホのみ)



管理人コメントと訪問者コメントを分ける方


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




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 80

There are no comments yet.
さく  
アーカイブのツリー化の件です。

Akiraさま

こんにちは!。Akiraさま
いつも本当にお世話になっております!

そして、またお世話になります…(・ω・;)…汗
当方が 現在お借りさせて頂いております
「DaisyGreen」では 月間アーカイブが全部表示されるタイプなのですが
今こちら様に設定されているテンプレのような
アーカイブを 当月のみ表示させて それ以前の年を畳む形の
アーカイブ形式にしたいのですが…(・ω・;)…
何卒、ご指南のほど どうぞ宜しくお願い致します!
 

2016/06/10 (Fri) 15:19 | EDIT | REPLY |   
Akira  
To さくさん

こんばんは ( ノ゚Д゚)

アーカイブ表示は共有プラグインをお借りしています。
作者: Daniel様
プラグイン名: Tree-Archive
DLリンク: http://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=4542&mob=

カスタマイズなし、デフォルトのままで利用させて頂いております

2016/06/11 (Sat) 00:44 | EDIT | REPLY |   
さく  
ありがとうございます!

Akiraさま

こんにちはっ。ぬおおおおぉぉ…(゚Д゚;)… 
プラグインにも共有があったのですね! 気づておりませんでした…orz orz
さっそく 追加させて頂きました!。後もう少し アーカイブがたまったら
こちらのツリータイプに切り替えたいと思います!
←プレビューでもバッチリでした♡

お手数をおかけいたしました、いつも本当に有難うございます!
 

2016/06/12 (Sun) 17:56 | EDIT | REPLY |   
Akira  
To さくさん

ツリー系のプラグインは優れたものが共有にたくさんあります。
作者のみなさまありがとうございます ( ノ゚Д゚)

2016/06/15 (Wed) 15:38 | EDIT | REPLY |   
ミッキー  
タイトル、記事の文字の大きさ、色の変更について

初めまして。ステキなテンプレートなので使用させて頂きたいのですが、タイトル、記事の文字の大きさ、文字色を変更したいのですがどこを変えればいいのでしょうか?
素人なものでお教え願えないでしょうか?

2016/07/07 (Thu) 20:54 | EDIT | REPLY |   
Akira  
To ミッキーさん

ありがとうございます (・ω・)ゞ
こちらはトップページでしょうか。
あるいは個別記事でしょうか。
それとも両方かしら。
個別記事だと仮定します。

Ctrl+Fキー検索

/* 注)記事内基本フォント関連 */

こちらが記事本文フォント該当箇所ですが、ここを変更されますとサイドメニューを除く他の部位(コメント欄など)も変わってしまいます。
全体的な変更であるならば上記該当部位を調整してください。
それが困るようであれば以下の手順でお願いします。
Ctrl+Fキー検索

.contents

上記で検索するとこんな風になってます ↓

.contents {
padding: 20px 0;
}

このすぐ「下に」以下を追加。

.inner-contents {
font-size: 数値px;
color: カラーコード;
}

上記のように「追加」を行った場合には適用範囲は「個別記事の内容」だけに限定されます。

-------

続きましてタイトルフォントの大きさ変更
Ctrl+Fキー検索

.entry-title

この項目の

font: bolder 16px/1.3 〜省略

赤字の部分が記事タイトルフォントの大きさです。
ただしここを変更されますと連動してトップページの記事タイトルも大きくなります。
それが困る場合にはhtmlの方を操作する必要が出てきますので、その旨お伝えください。

タイトルの文字色については、トップページはリンクになっていますが個別記事ではリンクはついていません。
個別記事の変更と仮定してお伝えしていますが、トップページのリンクつきタイトルを変更される場合はさらに以下の手順をお願いします。
Ctrl+Fキー検索

.entry-title a

この項目の color を修正してください。
よろしくお願いします。

2016/07/07 (Thu) 23:36 | EDIT | REPLY |   
ミッキー  
ありがとうございました。

うまく行きました。

ご丁寧にお教え下さり本当にありがとうございました。

http://mickeyjapan.blog.fc2.com/

2016/07/14 (Thu) 20:59 | EDIT | REPLY |   
Akira  
To ミッキーさん

拝見しました。
上手く行ってよかったです。
ありがとうございます

2016/07/15 (Fri) 09:15 | EDIT | REPLY |   
スノウ  
文字の濃さについて

お世話になってます。
またAkiraさんのテンプレート使わせてもらっています。

こちらのテンプレートですが、パソコンで見ると文字がグレーのようなちょっと薄く見えるのですが・・・
スマホではくっきりしてる文字ですね。
スマホのようにくっきりした文字にしたいのですが、どうしたらいいですか。
(初心者ですみません💦)
全ての文字を濃くしたいです。(フォントはそのままでOKです。)

よろしくお願いします。

2016/07/18 (Mon) 08:17 | EDIT | REPLY |   
Akira  
To スノウさん

ありがとうございます ( ゚Д゚)ノ

文字の色が薄い件。
「薄い」というのが
①「細いからそう見える」
のか
②「色自体が薄い」のかで処理が変わってきます。

=====

リンクの色ではない、という前提でお話しを進めますね。
(サイドメニューの文字が気になる場合は、ほとんどが「リンク」ですのでリンク指定色変更の必要があります。最後に記します)

①の場合
Ctrl+Fキー検索

/* 注)記事内基本フォント関連 */

この項目にある以下の2行を削除

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

上記はGoogle ChromeとFirefox限定ですが、フォントを細くすることで可読性を上げるというものです。
見る人によっては「逆に細くて読みづらい」と感じることもあるかもしれません。
上記2行を削除することによってページ内の文字全体が若干太くなります。
まずこちらをお試しください。

②の場合

基本のテキスト色は真っ黒を避けています。
①で検索して頂いたのと同じ body の項目の中の

color: rgb(51,51,51); /* 注)テキスト基本色 Night Rider */

こちらがテキストの色指定です。
真っ黒にするのであれば赤字の部分を

black

に変更、あるいは

rgb(0,0,0)

こちらがカラーコードです。
10進数指定で上記の通り。
16進数だと

#000000

こちらの方が馴染み深いかもしれません。
どちらをご利用頂いてもOKです。
真っ黒な字は目に優しくないので、段階的に黒に近づけると良いかもしれません。

例)
rgb(31,31,31)

rgb(10,10,10)

rgb(0,0,0)

様子をご覧になりながらの変更をお願いします。

=====

リンク色変更
Ctrl+Fキー検索

/* 注)基本リンク色 (approx)Pink Swan */

この行がリンクテキスト色ですので、お好きな色に変更してください。
よろしくお願いします (・ω・)ゞ

2016/07/18 (Mon) 21:20 | EDIT | REPLY |   
snow miy  
ありがとうございます

丁寧に教えていただきありがとうございます("⌒∇⌒")

週末になってしまいますが、段階を踏んで色の設定を決めたいと思います。

いつも素敵なテンプレートありがとうございます❤
今後ともよろしくお願い致しますm(._.)m

2016/07/18 (Mon) 22:13 | EDIT | REPLY |   
Akira  
To snow miyさん

はい。お手数おかけします。
よろしくお願いします

2016/07/20 (Wed) 09:12 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/18 (Thu) 01:56 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/18 (Thu) 02:09 | EDIT | REPLY |   
Akira  
To All_about_meサムネイルの件 内緒さん

自己解決して頂いたようで恐れいります。
拝見致しましたが、ちゃんと表示されていて安心しました。
お疲れ様でした

2016/08/18 (Thu) 21:52 | EDIT | REPLY |   
aki  
スライドの画像について

Akira様

こんにちは、いつもテンプレートお借りしています
素敵なテンプレートをありがとうございます!!(*^_^*)

All-about-usのスライドの画像についてお伺いしたくコメントいたしました。

画像を差し替えて使わせていただこうと思ったのですが
人物の画像にした際にPC表示の際に顔が見切れてしまうことが多く…
この表示のされ方をコントロールすることは可能でしょうか?

できれば画像の上部を表示できればいいなぁと思っています。
もしくはPC表示用の画像を用意してそれを表示できれば…など。

お手数をおかけしてすみません(>_<)
お時間ある際に教えていただけましたら幸いです。

2016/09/04 (Sun) 18:14 | EDIT | REPLY |   
Akira  
To akiさん

ありがとうございます

> スライド画像の上下合わせ位置を変更したい件

まず注意1点ですが、位置の指定はスライド画像全てに適用されます。
各画像にそれぞれの合わせを指定することはできませんので、そちらをご了承くださいね。
Ctrl+Fキー検索(CSSソース内にあります)

#header-banner

この項目に

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

という箇所があります。
赤字部分の left が左右の合わせで、左辺基準。
center が上下の合わせで、中央基準になっています。
上下合わせを上辺基準に変更される場合は

left top

に書き換えてください。
同じように左右の合わせも center あるいは right に変更可能です。
画像と相談してお決めくださいね。
よろしくお願いします。

2016/09/05 (Mon) 13:36 | EDIT | REPLY |   
aki  
スライド画像の上下合わせ位置を変更したい件について

Akira様

教えていただきありがとうございます!
無事に希望通りにスライドの画像の表示をさせることが出来て嬉しいです…!(*^^*)

このテンプレートの泡、可愛いですね~
とても気に入っています。

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

2016/09/05 (Mon) 18:42 | EDIT | REPLY |   
Akira  
To akiさん

ご希望に沿えましたならば良かったです。
作業お疲れ様でした

2016/09/06 (Tue) 09:38 | EDIT | REPLY |   
pi-  
グローバルナビゲーションについて

はじめまして、こんにちは!

ブログ3年目ということで
素敵なデザインに一新したいと思い、All-about-usを見つけ
記事や上のコメント様などを拝見しながらカスタムさせてもらってます。

そこでAll-about-usのグローバルナビゲーションについて
お伺いしたいことがありコメントさせていただきました。

グローバルナビゲーション(主にINDEX、RSS、ADMIN)の部分を
別のページ、URLに飛ばせるようにしたいのですがそれは可能でしょうか?

専門的なことはほとんど知らないため失礼な質問かもしれませんが
お手すきの時にでもご指南のほど、よろしくお願いします。

2016/09/06 (Tue) 12:15 | EDIT | REPLY |   
pi-  
グローバルナビゲーションについて

自己解決できました!

また何かあったら質問させてもらうかもしれませんが
その時はよろしくお願いします。

お手数おかけしましたm(_ _)m

2016/09/06 (Tue) 13:27 | EDIT | REPLY |   
Akira  
To pi-さん

ありがとうございます

自己解決して頂いたんですね。
お手数おかけしました。
はい。ご質問はお気軽にどうぞ。
作業お疲れ様でした

2016/09/06 (Tue) 14:49 | EDIT | REPLY |   
Akira  
To ミカさん②

ありがとうございます

画像の部分をサクっと消すってことで良いんでしょうかね。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<section class="element-item">

上記を目印に

<section class="element-item">
から
<div class="context">
までに挟まれている内容を削除
わかりにくいかもしれませんのでスクショでご確認ください。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-08%2023.27.03th__zps3ebrphxr.jpg

========

続きまして検索

<!-- 注)トップページスライドここまで -->

上記を目印にスクショの通り該当部分を削除

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-08%2023.34.42th__zpssc3bzhld.jpg

========

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

2016/09/08 (Thu) 23:38 | EDIT | REPLY |   
ミカ  
Akiraさま。

早速のお返事ありがとうございました。

丁寧な説明を書いてくださったお陰で、私にも出来ました。
本当に、ありがとうございました。

また、分からない事がありましたら質問するかと思いますが、よろしくお願いします。

夜分に失礼しました。

2016/09/09 (Fri) 00:03 | EDIT | REPLY |   
Akira  
To ミカさん

はい。ご質問はお気軽に。
作業お疲れ様でした

2016/09/09 (Fri) 00:49 | EDIT | REPLY |   
pi-  
背景について

こんにちは!

先日はありがとうございました。
再び質問させていただきますm(_ _)m

layoutのところで全体の背景色を変えて使用させていただいてるのですが、
テンプレートColonyのようにトップの各要約記事や個別記事に背景(枠)を付けることは可能でしょうか?

お時間がある時でいいのでよろしくお願いします。

2016/09/10 (Sat) 17:24 | EDIT | REPLY |   
Akira  
To pi-さん

こんばんは ( ゚Д゚)ノ

> 記事に背景

背景というのは「背景色」という意味でしょうか。
それとも「ボーダー」という意味でしょうか。
いずれにしても、簡単なように思えますよね。
ところが実際そう簡単でもないんです。
アウトラインの図解 ↓

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

赤い線は
・画像+記事概要
青い線は
・記事概要
それぞれを包括するアウトラインです。

仮に赤いアウトラインに背景あるいはボーダーをつけると
・画像上には余白が無いが、画像左右には余白がある
・下の記事の画像上辺と上の記事の概要の下辺が交わる(同じ位置)

青いアウトラインに背景あるいはボーダーだと
・概要の左右に余白が全く無い = 左右辺とテキストが密接

代替案 -------

概要の周りにさらにひとつアウトラインを追加(html修正が必要です)し、
左のSNS関連と右の要約記事とを囲う。
その追加アウトラインの左右に余白を設けつつ、背景あるいはボーダーを装飾。

上記を採用されますと画像の左辺と概要のそれとの位置が揃わなくなります。
(特に見た目がおかしいってことはないと思います)
サンプル ↓

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

bodyに黒を指定してみましたが、お気づきの通り背景部に白い点々が見えてます。
これがこのテンプレの実際の姿です。
白背景なので見えないだけで、上から3000px程度まではブクブクがあるんです(笑)
この点もお伝えしておきます。
で、アウトラインがはっきりしますと全体像としてはちょっとバランス悪いような気もしますが、そこはpi-さんの感性にお任せするとして。

どの方法を取られるかまずはご検討頂きまして、方向性をお伝えください。
選択肢
① 全体アウトラインに背景
② 概要アウトラインに背景
③ アウトラインを追加して背景

あとは「背景色なのかボーダーなのか」
こちらもお決めくださいね。

よろしくお願いします。

2016/09/10 (Sat) 20:47 | EDIT | REPLY |   
pi-  
To Akiraさん

こんばんは!( ゚Д゚)ノ

素人でも大変わかりやすく
いろいろな観点からの立案ありがとうございます。

青いアウトラインの場合の
左右の余白が無くなる改善策が③という認識で間違ってないなら、
「③アウトラインを追加して背景」という方法が好ましいです。

背景色とボーダーなら背景色のイメージが近いと思います。

大雑把な質問でお手数おかけしました、よろしくお願いします。


泡ぶくぶくはかわいくてとてもおきにいりです(´ρ`)

2016/09/10 (Sat) 21:49 | EDIT | REPLY |   
Akira  
To pi-さん

> 左右の余白が無くなる改善策が③という認識で間違ってないなら

はい。そういうことで合ってます。
んでは③で「背景色」ということで。

====== html修正

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

<div class="context">

htmlソース内に1箇所あります。
このすぐ「上」に以下を「追加」

<div class="context-wrapper">

上記内容へは何も指定しませんが、今後のことを考えて一応クラス名をつけた方が良いと思います。
context-wrapper は任意文字列に変更して頂いて構いません。
続きまして検索。

<p class="topentry-description">

上記を目印にして頂きますと、その下の行がこうなってます ↓

<%topentry_description>
</p>
</div>
</div>
</section>

赤字の</section>の「上」に以下を「追加」

</div>

</p>と</section>との間に</div>が3つ有ればOKです。

======== CSS追加

検索。

.context {

CSSソース内に2箇所ありますが、最初のものが対象です。
赤字部分追加で以下の通り。

.context {
display: table;
table-layout: fixed;
width: 100%;
background-color: 背景色カラーコード;
padding: 0 20px;
}


===========

以上です。
bodyへの背景色指定は既に済まされている、というのが前提です。
よろしくお願いします (●'0'●)/

2016/09/10 (Sat) 22:51 | EDIT | REPLY |   
pi-  
To Akiraさん

ありがとうございます!

とてもわかりやすい説明のおかげで無事反映できました。

それと、無礼ながらこのような処置を
個別記事ページにも施したいのですが可能でしょうか?

恐縮ですが重ねてよろしくお願いします。

2016/09/11 (Sun) 18:54 | EDIT | REPLY |   
Akira  
To pi-さん

こんばんは。
お疲れ様です。

> 個別記事にも背景

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

.main-body {

CSSソース内に2箇所あります。双方に修正が必要です。
まず最初の内容。
この項目の内容を以下の通り修正

.main-body {
margin-bottom: 60px;
background-color: カラーコード;
padding: 上余白px 0 30px;
}

上部に余白がついていませんので必要であればつけてください。

続いて2箇所目も同じ要領で以下の通り修正。
こちらはスマートフォンでの見た目です。

.main-body {
padding: 上下余白px 15px;
}

======

paddingによる余白指定の仕方は

padding: 上px 右px 下px 左px;
padding: 上下px 左右px;
padding: 上px 左右px 下px;

このいずれかです。
左右については既に指定がありますので、できれば触らない方が良いと思います。
main-bodyのクラス名が与えられている箇所は全て同じ見た目になります。
コメント周りや全記事一覧など。

この部分は背景なし、ここは有り、といった細かなカスタマイズについては自己責任・自力でお願いします。
よろしくお願いします (o'д`o)ゝ

2016/09/12 (Mon) 00:28 | EDIT | REPLY |   
pi-  
To Akiraさん

こんにちは!

無事反映させることが出来ました。

何回も質問しちゃって申し訳ありませんでした。
親切な対応していただき、感謝の気持ちでいっぱいです。

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


応援しています。これからも頑張ってください(*'ω')!

2016/09/12 (Mon) 16:23 | EDIT | REPLY |   
Akira  
To pi-さん

> 何回も質問しちゃって

そこはどうぞお気になさらず (o'ω')ノ
出来たようで良かったです。
作業お疲れ様でした (★ ̄∀ ̄)

2016/09/13 (Tue) 00:07 | EDIT | REPLY |   
ミカ  
レスポンシブについて

こんばんは。

プラグインのリンクが反応しません。

PCではリンク出来ているのですが、スマホの場合は、リンクをクリックしても反応しません。
どうすれば良いでしょうか?

どこかに同じ質問などがあり見逃していたらすみません。

よろしくお願いします。

2016/09/13 (Tue) 19:26 | EDIT | REPLY |   
Akira  
To ミカさん

申し訳ございません。
これだけでは情報が少なすぎてなんとも返答のしようがございません ^^;
リンクも頂いておりませんので目視確認も叶いません。

① プラグインは「全ての」でしょうか。それとも「一部の」あるいは「特定の」なんでしょうか
また、プラグイン1・2は右サイドメニューに、プラグイン3はフッター上サイドメニューにありますが、どちらも該当でしょうか。
② お使いのデバイス名(iPhone6, Xperia など)、OSのバージョン(iOS9.1, Android6.0 など)をお知らせください

恐らくAndroidでお使いのブラウザが「標準ブラウザ」のような気がします。
デバイスはXperiaかなぁ…(ボソッ)
記事をひとつ出しますので、そちらも併せてご確認をお願いします。
(ちょっと時間かかるかもです)

=======

記事出しましたー。

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

あと、ごめんなさい。
プラグイン1・2は右〜3はフッター上〜
これ嘘でした (´・ω・`)
このテンプレはプラグイン1・2・3全て右サイドメニューに収まってるタイプだった。
誤情報で申し訳ないですー ( ̄∀ ̄;)

2016/09/13 (Tue) 20:35 | EDIT | REPLY |   
ミカ  
Akira さんへ

雑な質問の仕方をしてすみませんでした。

① 公式プラグインのリンクです。
  メールフォームのリンクをつけています。(今のところこの1つだけです。)
 クリックしても、反応がありません。
 PCの方は問題ないのですが...。


② iPhone6s iOS9.3.5

これで大丈夫でしょうか?

お手数をお掛けして申し訳ありませんが、よろしくお願いします。

2016/09/13 (Tue) 22:47 | EDIT | REPLY |   
Akira  
To ミカさん

Androidじゃなかった!!!
とぅいまてーん ( ̄∀ ̄;)

で、今スマホから確認しました。
私のデバイスは
iPhone6S iOS9.3.5です。
検証ブラウザ
・Safari --- ○
・Sleipnir --- ○
・Firefox --- ○
・iLunascape --- ○
・Google Chrome --- ○

いずれも問題なく遷移しました。
スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/290185D9-5C89-4B23-B3B8-7BF69DDD274A_zps6nrggpbdth__zpsmgx0jw1m.jpg

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/79288FBD-B055-4EB7-8E4C-9F47226398D5_zpssioe1wlzth__zpsnlcid7en.jpg

コード的にも特に問題無いみたいですね。
んー。ひとつだけ。
最近のiPhoneは感圧システムが導入されています。リンクを押すときに
軽くタッチ = パソコンで言う「マウスオーバー」に近い動作(遷移は行われない)
強くタッチ = ページ遷移
少し強めに押してみるとどうでしょうか。遷移しますでしょうか。
ちょっと一度ご確認頂けると助かります。

2016/09/13 (Tue) 23:18 | EDIT | REPLY |   
ミカ  
Akira さんへ

強くタッチしたら!出来ましたー!

他のプラグイン(最新記事やアーカイブなどなど)は、軽いタッチで大丈夫なのに、どうしてなんでしょうね。
でも、問題が解決出来て良かったです。
ありがとうございました。


お手数をお掛けしました。

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

2016/09/13 (Tue) 23:33 | EDIT | REPLY |   
Akira  
To ミカさん

別タブで開く指定だからじゃないですかね。
target="_blank"
たぶんだけど(笑)

ご納得頂けたなら良かったです。
お疲れ様でした (★ ̄∀ ̄)

2016/09/13 (Tue) 23:47 | EDIT | REPLY |   
micu  
記事下のタグについて

いくつかユーザータグを書くと、それだけ縦に長くなりますので
横並びに出来ないでしょうか?

よろしくお願いします( *´艸`)

2016/09/14 (Wed) 17:19 | EDIT | REPLY |   
Akira  
To micuさん

お手数おかけしております。

リストアイテムの修正の際にひとつミスがありました。
申し訳ございません。
カスタマイズをされておられないようでしたら再DLをお願いします。
再DLが困難な場合には記事内に修正の仕方を掲載しますので、そちらをご参照ください。
よろしくお願いします。

2016/09/14 (Wed) 18:00 | EDIT | REPLY |   
micu  
Akira さんへ

無事!出来ました。
ありがとうございました。

2016/09/14 (Wed) 18:47 | EDIT | REPLY |   
Akira  
To micuさん

貴重なお時間頂きましたー!
ごめんなさいね ^^;
お疲れ様でした

2016/09/14 (Wed) 20:53 | EDIT | REPLY |   
ikea  
夜分にすみません

新着記事の'FC2不具合のお知らせ「カラム落ち」「表示不備」'を読んだんですが、私も上の人と同じでタグが急に縦になってしまって困っていましたi-230
それで相談したいのは、テンプレートはカスタマイズしているのでできればこのまま使いたいと思っていますが、記事にしてくだすっている修正をした方がいいんでしょうか?
不具合なら直ればテンプレートに何もしなくても元に戻るということですか?
理解が鈍くてすみません><

2016/09/15 (Thu) 02:32 | EDIT | REPLY |   
Akira  
To ikeaさん

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

今追記しました。
FC2側で修正が行われれば元に戻りますので、そのまま何もされなくても良いと思います。
私の方も修正してしまった内容をどうするか考え中(笑)
(構文上問題になることはないはずだけども)

さきほど運営宛にメールを送りましたので、また経過などもご報告できるかと思います。
お手数おかけします。
よろしくお願いします。

2016/09/15 (Thu) 02:43 | EDIT | REPLY |   
ikea  
To Akiraさん

素早いお返事ありがとうございます。
ブロ友さんも困っているみたいなのでAkiraさんの記事を紹介しましたi-234
早く直るといいですねぇ・・・
私は何もしないで待つことにします。
ありがとうございました!

2016/09/15 (Thu) 02:50 | EDIT | REPLY |   
Akira  
To ikeaさん

修正されたようですね。
今日ちょっと時間なくてやっとログインできました ^^;
午前中には改善されたのではないでしょうか。
お疲れ様でした

2016/09/15 (Thu) 21:14 | EDIT | REPLY |   
ルート423  
ヘッダー画像変更についてお願い致します。

本当に素晴らしいテンプレートばかり発表されておられて

私もお借りしております。感謝しております。

 本当に素人な質問で恐縮ですが是非教えて頂きたくコメント致しました。


Promise-meのテンプレートのトップの画像変更の方法を教えて頂けたら幸いです。

色々AkiraさんのQ&Aなど見せて頂きましたが見つからずお手数をお掛けしますが

宜しくお願い致します。

2016/09/18 (Sun) 09:56 | EDIT | REPLY |   
ルート423  
To ルート423さん

再度書き込みすみません。
なんとか解決できました。
有難うございました。

2016/09/18 (Sun) 10:52 | EDIT | REPLY |   
Akira  
To ルート423さん

ありがとうございます ( ゚Д゚)ノ

自己解決して頂いたようで恐れ入ります。
一応こちらがPromise-meの専用ページです。
ヘッダー変更の仕方も記してあります ↓

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

よろしくお願いします

2016/09/18 (Sun) 16:06 | EDIT | REPLY |   
夏  

はじめまして。
とても素敵なテンプレートで、特にヘッダーの泡がブログのテーマと合っていたので
こちらのテンプレートをお借りさせていただきました。

質問がいくつかあるので、お時間のある時に教えていただけたら幸いです。

1.ヘッダー画像のサイズ
ブラウザをある程度縮小させると、わりと良い感じに全体画像が表示されるのですが
ブラウザを最大化すると、許容範囲ではあるけれど画像が切れてしまいます。
ヘッダーの画像サイズがいくつだと、ブラウザ最大でも全部収まるのかを知りたいです。(横1920)

2.ヘッダーのブログタイトル文字サイズと位置
ヘッダーのブログタイトル文字サイズを大きく、そして位置を変えたいです。
(フォントは現在のまま)
具体的には、左上の「Welcome to my blog」の位置より若干下にブログタイトル
文字もあれぐらいの大きさで、その下に「Hello~」の文字列を置けたらと考えています。(「Welcome to my blog」自体は無くす)
グローバルナビゲーションのリンク判定が、ヘッダー上部にもあるので
その関係で左上にブログタイトルというのは難しいのでしょうか。
良かったらお願いします。

3.個別の記事ページには、フッターに泡の表現が入っていませんが
これは、記事閲覧の際、重くなるのを避けるためかと解釈しましたが
記事個別ページのフッターにも泡の表現を入れる場合は
どのようにしたらよいでしょうか。

よろしくお願いします。

2016/09/27 (Tue) 12:53 | EDIT | REPLY |   
Akira  
To 夏さん

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

1.ヘッダー画像のサイズ

途中で切れる、ということですが、CSS解釈上そういったことは通常起こらないと思います。
この表示方法は画像のサイズには依存しません。
(なるべく大きいサイズであるに越したことはありませんが、それは『解像度』の観点からです)
サンプル(27inch 横2560px)

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-09-27%2021.47.23th__zpspbu1usxg.jpg

ご利用の環境を教えてくださいね。
OS名(Windows10 など)
ブラウザ名(Firefox最新 など)

2.ヘッダーのブログタイトル文字サイズと位置

-------- html修正
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<h1 id="blog-title">
<a href="<%url>"><%blog_name></a>
</h1>

上記を削除
さらに検索。

<p id="welcome">Welcome to my blog</p>

上記を以下の通り修正

<h1 id="blog-title"><a href="<%url>"><%blog_name></a></h1>

さらに検索。

-------- CSS修正
検索。

/* 注)ブログタイトルフォント関連 */

上記を目印に、すぐ下にある

#welcome {
省略
}

を全て削除
続いてそのすぐ上にある

#blog-title {
省略
}

を以下の通り書き換え

#blog-title {
margin: 0 auto;
color: rgb(240,240,240);
line-height: 1.2;
padding-top: 画面上部からブログタイトルまでの距離px;
font-family: 'Alex Brush';
font-size: 50px;
-webkit-animation: slideInDown 1.5s;
-moz-animation: slideInDown 1.5s;
-o-animation: slideInDown 1.5s;
animation: slideInDown 1.5s;
animation-delay: .5s;
}

上記を以下の通り書き換え。
font-familyについては Welcome〜と同じものを踏襲します。
「フォントは現在のまま」がWelcomeと同じもの、を指すのならば上記の通り。
ただし日本語フォントが含まれている場合には、日本語は美しく表示されません。
日本語があるのなら

font-family: 'Alex Brush', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';

に変更してください。
Welcomeと同フォントではなく、元のブログタイトルのフォントを指すのであれば

font-family: 'Playfair Display', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';

です。

3.個別の記事ページには、フッターに泡の表現が入っていませんが〜

こちらはですね、泡は上から約3000pxまで入るように設定しています。
場所毎の適用ではありません。
トップページなど、メインコンテンツの縦幅が比較的短い場合にはフッターにも泡が。
個別記事など縦幅が3000pxを超える場所では泡が表示されていない(ように見える)という仕組みです。
フッターの部分は本来は「泡なし」にしたかったのですが、
それをするためには「重なり順」指定が必須です。
(泡よりもフッターを上位設定にする = 泡は下になって見えない)
しかしながらFC2のスマホ版広告の仕様との絡みから断念しました。
というわけで、こういった仕様ですのでごめんなさいです (*_ _)

2016/09/27 (Tue) 22:12 | EDIT | REPLY |   
夏  

とても丁寧な返信をいただき、ありがとうございます。
3の件もそういう仕組みだったのですね、了解しました。

ヘッダー画像1の件ですが、そういうことでしたら
私の環境などが悪いのかもしれません。

23インチモニタ(1920:1080)
Windows10
ブラウザは普段Chromeで、IE11でも確認してみましたが同じでした。
両ブラウザ共、上部にツールバーを表示しています。

クロームほぼ最大時
https://gyazo.com/b06185372db23f13c2e70b3d0ecc6819

クローム縮小時(適当な大きさ)
https://gyazo.com/5dced7b00899f4397212d41c6f1dfeed

IEほぼ最大時
https://gyazo.com/36506250fff8d0ebd4854e09e873253a

IE縮小時(適当な大きさ)
https://gyazo.com/ae9e6864e0508d63bc5e408a9b312376

ブラウザを適当な大きさに縮小していくと、画像の全体が出ます。
画像サイズは1920×600で作成しました。

もしアドバイス等があれば、教えていただけると幸いです。
テンプレート以外のことになってしまうようであれば
そのように伝えていただければ、こちらで何とか調べます。
よろしくお願いします。

2016/09/28 (Wed) 06:39 | EDIT | REPLY |   
Akira  
To 夏さん

おはようございます (●'ω')ノ

ちょっと確認なんですが、
> 画像が切れる

この意味を私は
「横幅が埋まらない」
と捉えました。
スクショを見る限り「画像の途切れ(横の寸足らず)」は無いように思います。
(②のChromeで右側にほんの少しだけ白い空白がありますが、これは横幅が奇数になった時のみ1px誤差が出る、というChromeのグリッチです)

もしかしたら、画像内のオブジェクト(チョコボ?)が思うような位置にならない、ということなんでしょうか。
元画像の全体が表示されない、という意味かしら。
仮にそうだと仮定して。

このヘッダー部分はどんな縦横比の画像を使用しても縦横ともに寸足らずが起こらないようなCSSを書いてます。
横幅についてはブラウザをマウスで引っ張るだけで大きくなったり小さくなったりしますよね。
ですが縦幅については変わりません
縦幅は固定、横幅のみ可変、ということになります。
縦横比を固定すると縦幅も可変になります(技術的には可能です)

縦幅が変わってしまうということは即ち、ブログタイトル周りの空白が横幅によって大きく異なってしまうようになり、かつ 横幅が大きくなるとそれに従って縦も大きくなるわけですから、W1900pxにもなればブラウザ画面全体がヘッダー(あるいはそれ以上)というカタチになってしまう、というのを意味します。
これは物理的な問題です。
つまり、ヘッダーの縦幅を可変にしない限りどうやっても元画像全体を常に表示するのは物理的に不可能です。
元画像自体を拡大・縮小してみてください。
画像が大きくなれば当然縦も大きくなりますよね?
それがそのままヘッダーのサイズになってしまう、ということです。
どうしてもヘッダー縦幅固定・横幅可変の上で画像全体表示、となるとあとはもう画像縦横比を壊してしまう他ありません。
縦横比を崩すということは、ひどく歪んだ(横広がり・縦潰れ)画像表示になる、ということです。

画像内のオブジェクトで一番大事なのがどこかを判断されまして、それを基準にある程度の位置を合わせる、といった対策しかありません。
デフォルトは
・左右位置は左辺を基準
・上下位置は中央を基準
に設定しています。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-417.html
↑ このページの「ヘッダー画像変更」の見出しを持つ内容をご確認ください。

どの位置合わせが最も都合が良いのかをお決め頂きまして修正をお願いします。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

/* 注)スライド最初の一枚 */

この行の対象箇所を変更です。
よろしくお願いします。

2016/09/28 (Wed) 08:10 | EDIT | REPLY |   
夏  

とても丁寧な返答ありがとうございます。

縦のサイズをヘッダーのサイズに合わせた画像を用意したら
上手く収まるのかな~などと思って、気軽な気持ちで聞いてしまったのですが
分かりやすく教えていただきありがとうございます。
お時間とらせてしまって申し訳ないです。

教えていただいた記事を参考にカスタマイズしてみます!

2016/09/29 (Thu) 10:51 | EDIT | REPLY |   
Akira  
To 夏さん

いえー。それはお気になさらず。
少しでも理想に近づけると良いのですけれど ^^;

2016/09/30 (Fri) 00:26 | EDIT | REPLY |   
Okan  
助けてください

こんにちは
素敵なテンプレート使用させていただいてます。
Akiraさんにお手間をかけない様ド素人なりに、日々テンプレートと睨めっこし、カスタマイズに励んでおります。(無知だけど、結構おもしろい)
どうしても出来ない(分からない)事があって、、
教えてください。
TOPページのバナーに表示されるBLOG NAMEを、Google wab fontで変更しました。
が、、、
最初のページはwebフォントに変更できたものの、READ MOREで個別記事に移動すると
フォントは全く別モノ(苦笑)
・HTMLに<link要素を追加
・CSSにfont-familyを挿入
(PC用語間違っていたら、ごめんなさい)
スライド画像変更の様に、もう一箇所どこか?に追加しないといけないのでしょうか??

お手数ですが、よろしくおねがいします。

URL: http://voyageparis.blog.fc2.com/.
TITLE tricolore de paris

2017/01/21 (Sat) 15:50 | EDIT | REPLY |   
Akira  
To Okanさん

ありがとうございます

> ブログ名「のみ」をKaushan scriptに変更したい

という解釈で合ってますでしょうか。
まず解消手段を先にお伝えして、次にweb fontを利用する際の注意点をお伝えします。

=======


追加した
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
削除


①で消した内容の少し下に以下の内容がありますので見つけてください。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Playfair+Display%7CAlex+Brush%7CRoboto:400,700">

上記内容を以下の通り書き換え(内容一部追加)

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Kaushan+Script%7CPlayfair+Display%7CAlex+Brush%7CRoboto:400,700">

これで正しく表示されるようになるはずですのでお試しください。

=======

原因

追加したlinkの位置が
<!--not_permanent_area-->

<!--/not-permanent_area-->
の間に挟まれていたのだと思います。
こちらはFC2独自変数で「個別記事(パーマリンク or パーマネントリンク)以外のページで表示」を意味します。
変数はページとして変換されてしまうと、どの位置に記してあったのか第三者からは目視確認が叶いません。
ですから「恐らく」という但し書きつきでの指摘です。

=========

webフォントを使う際の注意点

既にデフォルトでwebフォントが導入されている場合には、Googleで提供されるlink要素をそのまま追加するのではなく、既存のlink要素を探します。
今回の場合には

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Playfair+Display%7CAlex+Brush%7CRoboto:400,700">

がそれにあたります。
デフォルトでは
Playfair Display --- ブログタイトル
Alex Brush --- ブログタイトル上welcome
Roboto --- 記事内使用英字フォント
この3種が既に利用できる状態になっています。
ここへフォント名だけを追加する形での導入をしてください。
<link>とは外部へアクセスして情報を拾うために使いますが、向かう先はGoogle fontsですよね。
一つの場所へ行ったらば、必要な情報はその一度で全て取得してください。
今回Okanさんが行った<link>の追加は

Google fontsへ一度行って3種フォントを取得

再度Google fontsへ行って1種を取得

という形で、アクセスが無駄になります。
一度行って4種拾う方が効率的です。
フォントの繋ぎはパイプライン(|)で記しますが、より正確な記述のためには
%7C
の使用をおすすめします。

例)
BETTERな記述
Playfair+Display|Alex+Brush|Roboto

BESTな記述
Playfair+Display%7CAlex+Brush%7CRoboto

=====

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

=====

追加です。
今度はCSSでのフォント指定について。
これは一応有効にはなっていますので、修正必須ではありませんが、
「できれば変えておいた方が良いよ」ぐらいでお願いします。

Kaushan scriptの追加の仕方が現在はこうなってます ↓

#blog-title {
margin: 0 auto;
width: 100%;
line-height: 1.2;
padding: 26px 0;
font: bolder 38px/1.2 'Playfair Display', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';
text-align: center;
font-family: 'Kaushan Script', cursive;
-webkit-animation: slideInUp 1.5s;
-moz-animation: slideInUp 1.5s;
-o-animation: slideInUp 1.5s;
animation: slideInUp 1.5s;
}

この書き方は既に別のフォントが指定されており、それを「上書き」することになってます。
CSS内容は上から読み込まれた順に瞬時に描画をしていきますので、一旦はデフォルト指定フォントが解釈されてるんですね。
それをわざわざ打ち消して上書き、というのが現在の状況。

#blog-title {
margin: 0 auto;
width: 100%;
line-height: 1.2;
padding: 26px 0;
font: bolder 38px/1.2 'Kaushan Script', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'cursive';
text-align: center;
-webkit-animation: slideInUp 1.5s;
-moz-animation: slideInUp 1.5s;
-o-animation: slideInUp 1.5s;
animation: slideInUp 1.5s;
}

こうした方が解釈はスムースです。
あるいはOkanさんのブログ名はフランス語オンリーですので、fontの部分は以下のようなシンプルな書き方でもOKです。

font: bolder 38px/1.2 'Kaushan Script', 'cursive';

余力があれば修正してください(笑)

2017/01/21 (Sat) 18:30 | EDIT | REPLY |   
Okan  
ありがとうございます。

お忙しい中、早々にお返事ありがとうございますMerci.

出来るかどうか⁇
正直、全く自信がありませんが、、、
明日、朝から頑張ってみます(^^)v
多分、また質問するかも?ですが
よろしくお願いします。

ps. 肝心な記事も書かずに
テンプレートのカスタマイズに
ハマってしまいました(笑)

2017/01/21 (Sat) 21:21 | EDIT | REPLY |   
Akira  
To Okanさん

はい。お試しください。
お疲れ様です
記事も頑張って書いてくださいね(笑)

2017/01/22 (Sun) 00:50 | EDIT | REPLY |   
Okan  
No title

教えて頂いた様にしてみたんですが、反映されないんです(泪)

①<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">を削除 (全部削除するんですよね?)

②<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Playfair+Display%7CAlex+Brush%7CRoboto:400,700">

③/css?family=(    )Playfair+
(  )にKaushan+Script%7Cを追加

cssは、ややこしくなったら大変なので、触ってません。
(触らぬ神にたたりなし)

どこか間違ってますか??

ふと、思った事は、、
《更新》ボタンを押さないと、個別記事へ移動した際の画面は確認できないの?って
《更新》を押す前に、Akiraさんに確認しておこうと思い又おじゃましました。

助言よろしくおねがいします。

2017/01/22 (Sun) 11:48 | EDIT | REPLY |   
Akira  
To Okanさん

はい。更新を押してください(笑)
ブラウザにはキャッシュという機能がありますし、FC2のテンプレプレビューはJSの処理が走らないことがあります。
正しい確認をするには「更新」を押してくださいね。

もう既に手を加えた後かと思いますが、カスタマイズの前には複製をお取りになられることをおすすめします ^^;

②③の手順についてはコピペでやってみてください ↓
(Ctrl+C(Windows)/ Command+C(Mac)でコピー、Ctrl+V(Windows)/ Command+V(Mac)でペースト)

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Kaushan+Script%7CPlayfair+Display%7CAlex+Brush%7CRoboto:400,700">

なにせ一文字でも違えば反映されませんので、コピペで ╭( ・ㅂ・)و
一度思い切って更新してみてください。
更新しないと私の方でソースの確認もできませんので、更新されましたら再度拝見しに参ります。

2017/01/22 (Sun) 12:46 | EDIT | REPLY |   
Okan  
お世話になりました、ありがとうございます。

Akiraさん、ありがとうございますv-352
個別記事TOPのフォント無事に変更できましたv-433

Akiraさんのテンプレートは、どれも素敵でいっぱいDLさせて頂いてます。
(私のイメージするブログにぴったりなテンプレートばかり)
どれを使おうか? 贅沢な悩みです!!

また、テンプレートを交換して、ブログ名にWEBフォントを使う場合は
デフォルトでwebフォントが導入されている時は、Playfair Display の要素が
含まれているか探して、含まれていれば既存linKのcss?family=(    )Playfair+
(  )にフォント名%7Cを追加すればOKですか??

交換して分からない時は、また教えてくださいね。
このたびは、本当に本当にお世話になりましたありがとうございます

ps これからも素敵なテンプレートを期待しています。

2017/01/22 (Sun) 15:00 | EDIT | REPLY |   
Akira  
To Okanさん

Playfair Displayは数あるフォントのひとつにすぎませんので、テンプレ内で必ず利用されているわけではないんです。
Google fontsへのlinkが記載済みであるかどうかは

fonts.googleapis

の文字列を検索してチェックしてくださいね。
既に記載されているフォントと繋ぐ際にはご自身で書かれた通りです。

... 省略 ...css?family=フォント名%7Cフォント名%7Cフォント名%7C...

この形になっていればOKです。
Google fontsがテンプレに導入されていない場合には、
<link>
のタグが多数集まっている箇所があるはずですので、その一番上か一番下に追加してください。
その際には
<!--not_permanent_area-->

<!--/not_permanent_area-->
との間、あるいは
<!--permanent_area-->

<!--/permanent_area-->
との間など、
<!-- 文字列 -->〜<!--/文字列 -->
挟まれないようにご注意ください
(意図的に表示ページ操作をするなら別です)

例)
元の内容 ↓

<link>
<!--permanent_area-->
<link>
<!--/permanent_area-->


上記に対し…

ここはOK
<link>
ここはOK
<!--permanent_area-->
ここはNG
<link>
ここはNG
<!--/permanent_area-->
ここはOK

はい。ご質問はお気軽にどうぞ。
こちらこそありがとうございます。
お疲れ様でした

2017/01/22 (Sun) 15:13 | EDIT | REPLY |   
Aoi  
No title

はじめまして。とても素敵なデザインなのでこちらのテンプレートをDLさせていただきました。
ありがとうございます。

質問させて頂きたいことがあるのですが
全く未熟な者で、まず自分の質問が最初の注意書きにある受け付けていない質問の範疇に入るのかが分からず失礼になるかもしれませんが

サイドバーの形状変更の質問は受け付けていらっしゃらないと言うことなので
スマホのサイドメニューをドロワーにしない方法の質問もそれに該当するでしょうか?

もし、その範疇でなければスマホでドロワーにしない方法をご助言頂ければと思うのですが

宜しくお願いします。
場違いな質問でしたらすみません。

2017/06/01 (Thu) 11:12 | EDIT | REPLY |   
Akira  
To Aoiさん

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

> スマホのドロワー解除の件〜

まず注意点です。
ドロワーを解除した場合にはサイドメニューがメインコンテンツの「下」になりますが、ページmiddle(サイドメニュー上部への頭出し)がありませんので、
従来通り「ページ最上部」「ページ最下部」のみの移動になります。
こちらをご了承くださいね。

-------- ① ドロワー解除

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

<script src="http://blog-imgs-88.fc2.com/v/a/n/vanillaice000/simplersb1_4_5min.js"></script>

上記スクリプトファイルを削除
続きまして検索

$("#secondary").attr("id","sidenav")

上記を目印に、その内容を含み

css:{zIndex:1000009}}});});

までを削除
後ろの記号に気をつけてくださいね。一つでも間違えるとページ全体が崩れてしまいます。
ここまでがドロワーの解除です。
まだドロワー開閉ボタンが残っているのと、ナビゲーションの位置修正も必要です。

------ ② 開閉ボタン削除

検索

<div class="mobile-toggle2">

htmlソース内に1箇所ヒットします。上記を目印に

<div class="mobile-toggle2">
<span></span>
<span></span>
<span></span>
</div>


上記内容を削除
続きまして検索

$('.mobile-toggle2')

こちらもhtmlに1箇所。
上記を目印に

$('.mobile-toggle2').css('display','block');

上記内容を削除
やはり記号には留意してください。
以上がボタンの処理です。

--------- ③ ナビゲーションテキスト位置修正

$('.navi-menu2').css('padding-right','58px');

html内です。
上記を削除

以上です。
今回CSSの方は触りません。
一度に全て行わず、段階を踏んで修正されることをおすすめします。
① → 目視確認 → ② → 目視確認 → ③ → 最終確認

よろしくお願いします。

2017/06/01 (Thu) 12:43 | EDIT | REPLY |   
Aoi  
ありがとうございます!

Akiraさんへ
削除箇所をとても分かりやすく教えて頂きありがとうございます!
おかげさまですぐに出来ました。v-353

とても素敵なデザインのテンプレートも本当にありがとうございます♥

2017/06/02 (Fri) 00:01 | EDIT | REPLY |   
Akira  
To Aoiさん

ご希望の形になりましたでしょうか。
こちらこそありがとうございます。
作業お疲れ様でした

2017/06/03 (Sat) 10:57 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/06/08 (Thu) 18:15 | EDIT | REPLY |   
Akira  
To All-about-us全記事リストの件 内緒さん

こんばんは。ありがとうございます (●'0'●)/

> 全記事リストの連番が歯抜けになる件〜

FC2ブログの仕様をお伝えしますと、この番号というのは サーバーにアップロードされた時点で自動付加 されるものです。
例えば古い順に

1. 公開記事
2. 非公開記事(下書き)
3. 削除記事
4. 公開記事
5. 非公開記事(下書き)
6. 公開記事

この順序で書いたとします。そして「保存」を行った、と。
すると公開記事はそのうち3件だけ。その番号が 1.2.3 と続いてくれれば良いですが、実際には

1. タイトル
4. タイトル
6. タイトル

こうなります。(デフォルトの表示順序は上から 6. 4. 1 の順ですが)
URL末尾の数字とも関わってます。
これはFC2ブログの、というよりもブログサービスの一般的な仕様ではないかと思います。
ブログなどは「時系列」というのがとても大事なので、これはこれで正しいというか。

この順序を作為的に変更するとなると方法は ul や ol などのリスト形式を利用することですかね (´・ω・`)
ただしそれをやったとしてもですね、あくまでもこの形にしかできません ↓

<ul>
<li>タイトル
<li>タイトル
<li>タイトル
</ul>

<li>の行の先頭にCSSで連番を振る形。
ですがこれはあくまでも <ul>〜</ul> 内の<li>要素に割り当てられますので、記事数が増えて関連記事ページ自体が複数に渡った場合、例えば3ページだとしますと
1ページ目のリストは 1〜100までの連番
2ページ目のリストも1〜100までの連番
3ページ目の 以下同文。
(CSSではカウンターリセットの方法(リスト番号のスタート番号操作)もできるのですが、ページが違うとなるとそのページの指定自体がFC2では困難です)
これが果たして良いものかどうか。
(私的には良くないと思います)
全記事リストに番号が有る場合は、そのブログ内の総記事数がいったいいくつであるのか、というおおよその目安の役割にもなっているわけで。
連番の意味を為さないとでもいえばよいでしょうかね (´・ω・`)

代替案として、連番が不都合であるならば無理に表示せずに削られてはいかがでしょうか。
番号なしにする、という意味です。
その場合には Ctrl+F(Windows)/ Command+F(Mac)キー検索

<%titlelist_eno>:

これが番号を表示させる変数ですので、ここを削除
後ろに半角スペースがありますので、それも含め削除です。
まずこの案でお考え頂ければ、と思います。
どうしても番号を… ということでしたら、htmlの比較的大きな修正(アウトライン変更・定義変更)になります。
というわけでお返事待ちにしますね。
よろしくお願いします ( ゚Д゚)ノ

2017/06/08 (Thu) 20:09 | EDIT | REPLY |   
gao  
ご質問失礼いたします

はじめまして!
先日よりAll-about-usのテンプレートを拝見し、
カスタムさせていただいています。
素敵なテンプレートを共有いただき、ありがとうございます。

fc2ブログ初心者のため、調べながらカスタムさせていただいているのですが、
以下の2点、ご教示いただければと思い、コメントしてみました!

1)以前「pi-」様からもご質問があったようなのですが、自己解決できず。。。
グローバルナビゲーションの「ADMIN」の部分に
Webページをリンクしたいのですが、どの部分にURLを入れたらよろしいでしょうか?

2)「You may also like」の上に固定文を挿入したいのですが、
どこにタグを入れたら良いでしょうか?
現在「スポンサーサイト」の下にしか入れることができずに困っています。。。

ご都合のよいときにでも、ご返信いただけるととても嬉しいです。
どうぞよろしくお願いいたします。

2017/06/26 (Mon) 10:21 | EDIT | REPLY |   
Akira  
To gaoさん

ありがとうございます (●'0'●)/
コメント欄で正解を探そうとして頂いたんですね。
ご配慮ありがとうございます

> ナビゲーションのリンク設定

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

ADMIN</a>

上記を目印にして頂くと該当箇所が以下のようになっていると思います。

<li class="sweep-to-top"><a href="<%server_url>control.php">ADMIN</a>

デフォルトではFC2ブログアカウント所有者は自身の管理画面へ。
アカウントをお持ちでない方はログイン画面が表示されます。
その上で変更されます場合は「Admin」のテキストも書き換えをしてくださいね(閲覧者が混乱します)
変更するのは赤字の部位です。

<li class="sweep-to-top"><a href="ここに遷移先アドレス">テキスト</a>

赤字部分以外のクラス名などは触らないようお願いします。

---------

> 「You may also like」の上に固定文〜

FC2の仕様上htmlだけではできません。

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

移動先ページでは「ランキングバナー」を「SNSボタン(FC2ブログ個人設定で表示させるもの)」の「前」としてありますが、原理は同じです。
JSを用いてhtmlを書き出す方法です。
まず注意点ですが、SNSボタンを「軸(基準)」としています。
仮に今後SNSボタンを非表示にされますと、今回これからお伝えする内容は破棄されます。
簡単に言うと
「SNSボタンを見つけて、発見したらその前(or 後)に某かの内容を書き足してください。」
というJS構文を書きます。
ですからそのボタンが無くなれば見つける対象が失われてしまいます。
そこをまずよくお考えになってくださいね。
問題がありそうならば別の軸を据える必要があります。

表示したい内容がどういったものかわかりかねますので「テキストのみ」という仮定でご説明します。
そしてSNSボタンの「後」ということで合ってますでしょうか。
SNSボタンとyou may〜 の間に挟まれる形になります。

<script>
$(function() {
$('<div style="text-align: center; margin: 30px auto;">テキスト内容</div>').insertAfter('.fc2_footer');
});
</script>

説明

text-align: center;
は文章のセンタリングです。左寄せで良ければ不要ですので赤字部分を削除。
; の後ろに半角スペースがありますので、それも削除

<script>
$(function() {
$('<div style="margin: 30px auto;〜以下省略〜


30pxの数値は上下内容との空白指定ですので任意です。
状態を確認しながら適切な数値に変更してください。


改行したい箇所はEnter/ Returnキーを押下するのではなく <br> と明示してください。
上記コードの <div 省略>〜</div> 内でキーボード改行を行わないようご注意ください。


X
最善のものを希望せよ。
しかし最悪のものに備えよ。


最善のものを希望せよ。<br>しかし最悪のものに備えよ。

--------

以上です。
わかりにくい点がございましたらお申し付けください。
ちなみにスポンサーサイトの表示は任意設定で消すことができますよ。
(ただし画像高速化表示(CDNサーバー利用)が適用されなくなります)
よろしくお願いします ( ゚Д゚)ノ

2017/06/26 (Mon) 11:52 | EDIT | REPLY |   
gao  
To Akiraさん

早速ご返信くださり、ありがとうございました!
おかげさまで無事に解決しました!!

> 「You may also like」の上に固定文〜

上記の件についてはしっかり検討して、編集してみたいと思います。
また何かありましたら、ご相談させてください。

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

2017/07/03 (Mon) 10:57 | EDIT | REPLY |   
Akira  
To gaoさん

ご報告ありがとうございます。
はい。固定文についてはよくお考えになった上でどうぞ。
修正作業お疲れ様です

2017/07/03 (Mon) 12:48 | EDIT | REPLY |   
gao  

度々失礼いたします。
サイドバー欄の一番下に広告を挿入したく、操作していたのですが、
通常ヘッターの部分にあった表示がサイドバー欄に移動してしまいました。。。

プラグインカテゴリ1、2でも試してみたのですが、
同じ状況。。。

何か解決策をご存知であれば、ご教示ください。

2017/09/26 (Tue) 14:20 | EDIT | REPLY |   
Akira  
To gaoさん

こんにちは。

html構文上の大きなエラーがありますので、それを修正しないことには正しく表示されません。

① アクセス解析の貼り付け位置
テンプレートのガイダンスにある通り、

<!-- アクセス解析はここから -->
<!-- ここの間 -->


ここへ貼り付けてください。でないとこの手のタイプの解析システムでは正しい情報が取得できません。
現在はhtmlの最後方にあります。
解析コードは最前方への掲載が最も効率的です。

また、gaoさんはスマホ版を併用されていますので、スマホ版でも同じ作業をしなければスマホアクセスがカウントできません。
広告についても同じです。
今はどのサイトでもPCよりモバイル閲覧の方が多いですし、近い将来(来年あたり)はPCよりもモバイルでの見た目や動作が「上位」となります。
ですのでカスタマイズの意識はPC版よりもモバイル版の方へ集中してください。
All-about-usはレスポンシブデザインですので本来はスマホ版を非表示にしてお使い頂くのが最善ですが、そちらについてはお任せします。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-579.html
-------

② ナビゲーションリンク「オンラインショップ」のリンク構文エラー
X
<a href="アドレス"_blank">オンラインショップ</a>

<a href="アドレス" target="_blank">オンラインショップ</a>

属性間に半角スペースを入れた上で
target="_blank"
です。半角スペースを忘れないよう注意。

X
<a href="アドレス"target="_blank">オンラインショップ</a>

<a href="アドレス" target="_blank">オンラインショップ</a>

このエラーが後々まで後を引き、かつ以降の内容でもさらにエラーが追加されたことで問題が起きています。
これ1つで4のエラーに該当。
------------

現時点でエラーが13ありますが、そのほとんどがリンク修正で消えるはずです。
上記内容を一度お試し頂き、再度お見せください。
よろしくお願いします。

2017/09/26 (Tue) 16:14 | EDIT | REPLY |   
gao  
To Akiraさん

いつも丁寧にご教示いただきありがとうございます。

初心者でいろいろ調べながらさわっているので、
きっとどこかでおかしくなってしまったんですね。

いろいろとお手数おかけいたします。

早速Akiraさんにご指摘いただいた箇所、

① アクセス解析の貼り付け位置
>>貼り付け位置を修正しました。
また、スマホ版は以前のテンプレートは以前のものがそのままになってしまっていたため、
今回を機に非表示に訂正しました。


② ナビゲーションリンク「オンラインショップ」のリンク構文エラー
>>修正しました。
半角も入っています。

以上2箇所を修正しましたが、
現在のところヘッターの部分はそのままです。

またまたお手数おかけしてしまいますが、
お手すきのときにでもご覧いただければ幸いです。

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

2017/09/30 (Sat) 16:38 | EDIT | REPLY |   
Akira  
To gaoさん

こんにちは ( ゚Д゚)ノ

ヘッダーではなくフッターではないですかね?
前にコメント頂いた時は単なる書き間違いだと思ってスルーしたのですが、やっぱりヘッダーなんでしょうか。
(ページ最上部が「ヘッダー」ページ最下部が「フッター」)
私が取り違えていたらご指摘ください。
とりあえずフッターの方は明らかに崩れていますので、そちらの修正をお伝えします。

admax広告のコード内が以下のようになってます。

<!-- admax -->
<script src="アドレス"></script>
<!-- admax ->

赤字のコメント部分は正しくは

<!-- admax -->

です。
コメントの記述エラーも重大エラーになりますのでご注意ください。
よろしくお願いします。

2017/09/30 (Sat) 17:27 | EDIT | REPLY |   
gao  

いつもご丁寧にありがとうございます!!
おかげさまで直りました!

しかも、混乱させてしまって申し訳ないです。
フッターでした。

大変お騒がせしてしまい、すみませんでした。

これからもどうぞよろしくお願いいたします。

2017/10/05 (Thu) 11:58 | EDIT | REPLY |   
Akira  
To gaoさん(完了のご報告)

修正できたということで安心しました。
お疲れ様でした。
こちらこそよろしくお願いします

2017/10/05 (Thu) 18:07 | EDIT | REPLY |   

Leave a reply

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