The other way round

ARTICLE PAGE

困ったぞの件いろいろ

author photo

Byvanillaice (Akira)

sample訪問者履歴をまず見ることがありません (´・ω・`)
がしかし 気まぐれに開くこともありまして
そんなときはコソっとお邪魔したりしております(笑)
(コメントを残すことはありません)

その際に
(私が制作したテンプレご利用の方に限定します)
「これ困ってんじゃねーかなー...emoji
なパターンに出くわすことがあるのですね
ですが私が積極的に押しかけてですね
「これはこうすると直るよ!」
といったことは致しません(笑)
ですのでお困りの方は能動的にお尋ね頂きたいと思いますー

というのを前置きに
私が拝見して「これは... (汗)」と思いましたいろいろについて
それこそ能動的に記事にしようと思った次第(笑)

表示がクッソ重たい!


テンプレートにページ遷移時のエフェクトがありましたら削除してくださいね
私自身は情緒なくパパっと切り替わるよりも何かあって欲しい方なんです
ちょっとリッチな感じになりますしーー
ですがこのエフェクト関連はページの表示を遅延することでもって表現するパターンがほとんどです
閲覧に支障をきたすようでしたらどうぞ外してください
削除の仕方は個々のテンプレ専用記事に掲載しています

それ以外の原因なんですけれども(こちらが本旨)

画像を多く掲載されます方
是非「容量削減」を行ってください
特にスマホで撮影した画像というのはメガバイト級の容量です
1MB, 2MBなんてザラです
スマホの画像は縦横のサイズが大きいですから致し方ありませんが
それをそのまま原寸で掲載できることの方が稀です
記事幅には限界がありますものね (´・ω・`)
てっとり早い方法で「サイズ縮小」というのもありますが
一般的な写真の拡張子である jpg というのは
拡大はおろか縮小しても解像度が落ちます
なんだかぼやけた画像になってしまいます
専用のツールを利用して容量の削減を行いましょう

参考記事:
画像を圧縮して軽くするおすすめサイト
画像の容量気にしてますか?

やるとやらないとでは大きな違いが出てきます
エコです エコ(笑)

そしてSNS関連のボタンを多く貼り付けされる方
SNSボタンというのは非常に表示が重たいんですね (´・ω・`)
FC2でFBなどのボタンというのは「表示」「非表示」が選択制になってます
表示を選択した場合どのように実行するかというと
Javascriptで後付をする という形
そのタイミングはテンプレート全体及び記事全てを読み込んだ「後」です
そして各SNSが独自のプロトコルを持っていますので その読み込みの関係もあります
ですからSNSボタンが多い方のページというのは基本的に重たいですね (´・ω・`)
解消法としては「テンプレートのhtmlソース内に直接記述する」というのがありますが
ちょっと上級者向けですので言及しません(ぇ)
ページ全体の一番最後に読み込み・描画をするんだよ というのを念頭に次の項 ↓


画面がガクっと下がる


これはスマホでは本当に鬱陶しいものであります(笑)
この原因は

ページの上の方に描画タイミングの遅いものがある

まあこれですよね (´・ω・`)
描画タイミングが遅いものってなんだ? というのは
先ほどのSNS関連ボタンであったり
あるいは
htmlソース内に記述が無いのに出てくるもの

・広告
・JSを利用した描画 = inner HTML (いんなー えいちてぃーえむえる)

などがそれにあたります
具体的に言うと
私がテンプレートで採用しております
新着サムネイル
ですね
これは描画タイミングが大変遅いです(描画能力でなくタイミング)
ということは
新着サムネイルが記事の上の方にあると 画面がガクリ現象が起きるわけです
毎回コンテンツの最後方(下の方)に設定しているのはそれが理由です

新着サムネイルを移動させたいなー と思われます方はここをよくよく考えてからやってくださいね
例えばコメント欄よりも「上」に移動させますと
サイドバープラグイン「最新コメント」をクリックすると
ページ遷移した後(ページ内移動の場合もあります) 該当コメントの位置まで下がりますよね
ところが上にサムネイルがあって描画が遅いもんだから
位置がガクっとズレてしまいますね これ (´・ω・`)
これは物理的法則でございます(笑)


ドロワー型サイドメニューの幅変更は要注意


ドロワー というのは要するにスライド型のことです
この項は「私のテンプレでは」という但し書きがつきます

サイドバーの幅を大きくしたいなー という時があると思います
例えばデフォルト横幅300pxの設定のものがあったとして
サイドバーに入れているプラグインのサイズが350pxあるならば
単純にサイドバーを350pxに広げたいと思うのは当然ですよね

その場合にはhtmlソース内に含まれるJSの変更を必ず行ってください

現在このドロワーについて 毎回同じものを利用しているわけではないのですが
最近のものは統一するようにしています
その仕様は以下の通り

・ ドロワー自体の横幅よりも ドロワーが引き出されたときの画面との距離(余幅)を優先

sample


これなんですけども
ドロワーの収納を操作するボタンは上部に固定していますが
画面の外(ドロワー外)をタップしても収納できるようになっています
場合によっては画面外タップの方が使い勝手が良い というのを考慮しています
ということは例えばまだまだ現役のiPhone5系列
こちらは横幅が320pxしかありません
なのでレスポンシブでさらにiPhone5系を考慮するのであれば
サイドバーへの横幅指定は 320pxが限界だと思ってください
そして上記に記しました仕様を絡めますと サイドバーの横幅はさらに削られることになります

そういった指定の中でサイドバーに含まれるプラグインに350pxといったものがありますと
ドロワー内で横スクロールバーが出た状態になるか あるいは
収納した状態でも何かがはみ出ている(笑) といったことになってしまいます

横320が限界ですよ というのを踏まえ
サイドバー横幅を優先にするには以下の作業を行ってください

Ctrl+Fキー検索

closingLinks:'a'


上記を目印にされますと近接に

width:300


というのがあります
こちらがドロワーの最大横幅指定です
こちらを任意の数字に修正します(単位なし)
くれぐれもiPhone5を考慮するならば限界値320pxで
さらにそのすぐ後ろに

gap:'false'


と追加記述して 余幅優先を解除します
こちらの方は修正ではなく「追加」です

それぞれの記述の前後にカンマ( , )が必要ですので注意してください
widthと連続する場合には

その他の指定,width:300,gap:'false',その他の指定

こんな感じ
やろうとしてもソース内に見つからんなーemoji
という場合は 本件とは異なるJSで動いてると思ってください
すみません(笑)

ところで
レスポンシブデザインでの幅指定というのは基本的に
width: 100%;
max-width: 任意px;
この2つを使うのが基本 ってことで良いと思います
自身が置かれる場所の横幅100%であり かつ 最大でも○○px以上にはならない
という指定です
こう設定しておくと
「パソコンでは収まってるのに スマホから見たらはみ出してるemoji
といったお悩みを解消できます


文字が斜体(イタリック体)にならない


それは日本語フォントだからですー (´・ω・`)
英字フォントは当たり前に傾けることができますが 日本語というのは特殊言語
基本的には斜めにはできません(笑)

フォントにも開発元がありますが その開発元の実装状況(作成状況)に依存します
メーカーが斜体を準備していればできますし 作ってなければどうやっても斜めにはできません
Windowsユーザーさんに馴染み深い Meiryo (メイリオ) も傾けられないフォント種のひとつです

日本語でイタリック体を実現したいのならば
斜体が存在するフォントを選ぶ必要があります
ゴシック系は割りと実装されてます
おすすめは 游ゴシック(ゆう ごしっく)
(Macは OS X Mavericks (10.9)以降/ Windowsは Windows 8.1以降で標準バンドル)
記述順序は以下の通り

font-family: '游ゴシック', 'YuGothic';

日本語名を「先」に記して次に英字名
私のテンプレについては各テンプレート専用記事の「個別記事 sample」をクリックして頂きますと
太字や斜体などの確認ができます
「斜体」と銘打っている項目で斜めになっていない場合
そのテンプレートの日本語デフォルトフォントに斜体が存在しない ということになります

* 重要 2点 *

デフォルトのフォントを斜体有りのフォントに変更されましても
トップページの記事表示が「要約」タイプの場合には適用されません
FC2変数としては

<%topentry_description>


がそれにあたります
記事中で利用した全てのhtml内容(インラインCSS含む)が取り除かれ
改行も取り除かれた上で 最大200文字の表示
というのがFC2の要約表示の仕様です
<%topentry_description>
で出力される内容に斜体を適用するには
CSSで一括指定する以外ありません
つまり要約記事内容全てが「斜体」という表示形式です
部分的な変更は不可です
(個別記事は無関係ですよ)

ここでは斜体という表現をとっていますが
実際には斜体は oblique(おぶりーく) と言います
日本語にはそもそも斜体の概念がありませんので どちらを指定しても同じです
(英字含めこれも実装状況によります)


とりあえずこのぐらいかなー
あと気づいたらまた追記するかもです
関連記事

Comments 16

hige  

トップ・ボトムページ移動

FC2 コミュニティでよく拝見させていただいてます。
なんか上から眼線な人たちとかはもう出てこられないようですが、でもAkira さんの様な良い意味のお節介やさんは本当にありがたいんじゃないでしょうか。
FC2 コミュニティの困ったサイトは回答者が少なくて寂しい。
プロ級の方は日本全国に山と居られるはずなのに。

実はAkira さんのテンプレートの右側にトップページとボトムページへの移動のボタンがありますが、これはどうやれば移植できるのでしょうか。
なんか部品化されたものってあるんでしょうか。

2016/02/09 (Tue) 17:30 | EDIT | REPLY |   

Akira  

To higeさん

こんばんは (●'ω')ノ
回答者さん少ないですよね (´・ω・`)
私でも困ったときは誰かに手を差し伸べて貰えるととても嬉しいもので。
わかることであればなるべくお答えしようとは思ってます。
しかし如何せん人少すぎ(笑)

------


ページトップ/ ボトムボタンについて
これは特に部品化ですとかプラグインといったものを利用しているわけではなく、
ごく単純なJS(ジャバスクリプト)メソッドを利用して書いてます。
ページ下部(ボトム)への移動が欲しいってことですかね。
トップ移動は簡単に導入できますよ。
ボトム入れようと思うとちょっと注意要りますけれど。
あとはレスポンシブでサイドバーが下に移動するのであれば、サイドバー位置までの移動をどうするかですよね。
私は「menu」として毎回入れてます。

テンプレの内容にもよるもんですから、これこれこうします、と単純にお伝えできるものではないです(笑)
ページトップだけであれば、それこそ検索すれば山程情報は出てくるかと思います (・ω・)

おせっかいついでにひとつ。
bodyにoverflow: hidden;が設定されていますので、FC2ブログランキングのバナーと
楽天広告の右側ひとつ分が見切れて表示されていません。
勿体無いですから、テンプレ作者さんと相談されると良いと思います (´・ω・`)

2016/02/09 (Tue) 20:52 | EDIT | REPLY |   

hige  

RE:Akiraさま

返信、ありがとうございます。
ページトップ/ボトムボタンの件、了解です。
あっちゃこちゃで勉強してみます。と云ってもネット上ですが。
おせっかいついでの件。気づいてまして、最小幅にしたときですよね。
(実はサイドカラムのCM も一件だけわずかにケラレてます。こちらは張ったバナーが大きすぎた。)
まっ、いいかと、見ぬ振りをしてきたのですが、ちょっとどうやればいいのか調べてみます。アフィリのバナーって大きさを変えたりは駄目なんですよね。
横スライドバーとか・・・ってできるのかなぁ。

2016/02/10 (Wed) 17:11 | EDIT | REPLY |   

Akira  

To higeさん

楽天のモーションウィジェット(ボタンで切り替えるやつ)はスマホ用がありますので、スマホではそちらに切り替えるようなJSを組まれるとか (´・ω・`)
横スクロールバーは全体に出すのはマズいので、アフィリ部分の周りを

<div style="overflow-x: auto;">
ここにアフィリ
</div>

こうすれば出ますよ。
ただスマホではスクロール「バー」は不可視状態ですから、横にスクロールできることに気がついてくれる方が居るかどうかです(笑)

2016/02/10 (Wed) 21:57 | EDIT | REPLY |   

hige  

Table のスクロ-ルバー

あっ。私が見つけてきたのも同様の方法です。
スマホで常時表示させる方法も見つけてきたのでやってみました。
ただし、私はスマホを持ってないので実証できてませんが。
私の方法だとFirefox 、IE 、Chrome でそれぞれバーの表示が違います。
Chrome で表示されるスクロールバーがスマホと同じになってるような気がします。

2016/02/11 (Thu) 16:05 | EDIT | REPLY |   

Akira  

To higeさん

拝見しましたー。
webkitの独自拡張をご利用になったんですね。
素晴らしいですー
スマホはもともとスクロールバーは不可視なんです。
webkit系ブラウザは
::webkit-scrollbar
という独自のスクロールバー表示を持ってます。
ですからwebkit限定 ^^;

そもそもスクロールバーの「見た目」はブラウザの独自実装ですので、サイズから形状からみな違います。
(似通ってはいる)

webkitというと
・Safari
・Chromeを含むChomium系(Operaなど) (実際はBlinkですがwebkitから派生)
ですかね。
iPhoneはwebkitですから表示されてますよ

コンテンツ上にpaddingがちゃんと取ってあるのもすごいですね。
ここなかなか気づかないところなんですけども。
これが無いとスクロール難しいんです。
お疲れ様でした

2016/02/11 (Thu) 17:56 | EDIT | REPLY |   

さく  

No title

Akira さま

おはようございます! いつぞやは散々お世話になり本当に
ありがとうございました!。エフェクトの件とか、もう…(TωT)…
本当に丁寧に対応して下さって、涙がちょちょぎれそうになる程
感謝しておりますっ…!!

と… 今さら聞けない…ような…初歩的なトコで
つまづいてしまっているのですが…orz orz
スマホ版の  Grunge_flower_sp_p での
本文記事のフォントサイズを もう少しだけ大きくしたいのですけれど
ど…どこをさわっても… 変わらないのです…orz
←何卒 ご指導の程 どうぞ宜しくお願い致します!…(TωT)…
 

2016/02/12 (Fri) 08:29 | EDIT | REPLY |   

Akira  

To さくさん

大変遅くなりましたー!
こちらこそお世話になっております

記事フォント変更について
Ctrl+Fキー検索

font-size

で検索して出てくるものは全て文字の大きさ指定です。
bodyにあるものが記事内のフォント
h2, h2 a が記事タイトル
本文の文字を大きくしたらたぶんタイトルも大きくしたくなると思います(笑)
よろしくお願いします

2016/02/13 (Sat) 14:45 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/02/15 (Mon) 11:56 | EDIT | REPLY |   

Akira  

To プラグインの件 内緒さん

ありがとうございます

> プラグインの一部が枠外に出てしまう件

こちらについてはテンプレートの影響ではありません。
プラグインのソースを拝見しますとp要素の「中」にdiv要素が入っています。

<p>内容
<div>内容</div>
</p>

pタグの中にdivタグを入れることはできません。
これはhtmlのルールです。
間違ってpの中にdivを入れた場合、親子関係ではなく強制的に兄弟関係になります。
この場合と同じ見た目になってしまうということです ↓

<p>内容</p>
<div>内容</div>

pの中にpを入れることもできません。
pの中に入れて良いのはspanやaなどのインライン要素のみです。
というわけで、アウトラインの<p>〜</p>を
<div>〜</div>に変更してください。
よろしくお願いします。

2016/02/15 (Mon) 13:20 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/02/15 (Mon) 19:45 | EDIT | REPLY |   

Akira  

To p要素の件 内緒さん

ご丁寧にありがとうございます。
安心しました 

2016/02/16 (Tue) 14:07 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/02/18 (Thu) 17:09 | EDIT | REPLY |   

Akira  

To スマホ版フォントの件 内緒さん

そうだったんですね(笑)
お疲れ様でした

Daisy〜のスマホ版の予定はありませんですー。
レスポンシブデザインですので、スマホでもそのままお使い頂く形です (●'ω')ノ

2016/02/18 (Thu) 17:40 | EDIT | REPLY |   

sachi  

コメント欄

Akira様

いつも素敵なテンプレートありがとうございます。
私自身もAkiraさんのテンプレートでブログを使用させて頂いておりますが、
一件教えてください。
現在のテンプレートですと、スタンダードがコメント欄非表示なっておりますが
これを初めから表示させる事は可能なのでしょうか?
お忙しいところ恐れ入りますが教えて頂けると嬉しいです。

2016/12/08 (Thu) 13:50 | EDIT | REPLY |   

Akira  

To sachiさん

ありがとうございます。
該当テンプレートはBelongですので、専用記事への移動をお願いします。
そちらの方で回答させてくださいね。
お手数おかけします。

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

2016/12/08 (Thu) 16:53 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)