vanillaice (Akira)

vanillaice (Akira)

sample
スマホ読者を大切に
というお題目で書いていきます
最近とっても気になること

パソコンだけの見た目を気にしているとハマりますよ

の件について


例えばテンプレートをカスタマイズしたとします
その際 特に「コンテンツ幅を大きくした」または「小さくした」場合
スマホからの目視確認を怠ってしまうと
スマホユーザーさんに思いもよらぬストレスを与えてしまうことがあります

この記事以降に(いつかは未定(笑))
「画像にボーダーをつけるtips」というのを書くつもりで居るのですが
その前に知っておいて欲しいことですので こうして記事にしておりますー (´・ω・`)

UPする画像にボーダーやドロップシャドウをつけること自体はとっても簡単です
ただ 簡単だと思いこんでやってしまうとよろしくないんですね (´・ω・`)

端的に言うと

コンテンツのオーバーフロー

これが大きな問題になります
え 全然端的じゃない?emo
まあ お暇な方は読んでちょ ^。・x・)b

例えばね
記事の幅が 横500px (これがコンテンツ幅です) しかないところへ
横700px の画像を貼り付けたとします
大抵のテンプレ作者というのは この幅を超過しても自動縮尺で収まるように制作しています
絶対ではないです 製作者によります
とりあえず私のテンプレは全て自動縮尺です

仮に縮尺されないタイプのテンプレだった場合
パソコンから閲覧しても 超過分の 200pxが右に飛び出る形になります
これご経験あるのではないでしょうか(笑)
このパターンはパソコンから見た時点で既に
ぎょえ
ってすぐに気付けますので 恐らく修正できると思います
画像の指定サイズを変更すれば良いだけの話しです

ところが パソコンから見ただけでは全く気づけない超過
というのもしばしば起こります
コンテンツ幅そのものを大きくした場合
なんかがそれにあたります
サイズ指定の一箇所だけ変更してオッケー
というパターンはまず稀です
コンテンツの幅を大きくする際には どこを変更すれば良いのか
まず作者さんに確認をする というのをおすすめします
恐らく一箇所だけではないはず

で ここから本題なんですけどもね
スマホを持っていない という方もおられますよね
なので目視確認そのものができないんです! というパターン
もしGoogle Chromeをお持ちでしたら とっても役に立つ機能が備わってます 使ってみてください
以下は私が yahooブログで記事にした内容の抜粋です

-------------- ここから一部転載 (自身の著作です)



Google Chromeのアップデートきました (o'ω')ノ
自動アップデートにしている方はなかなか何が変わったのかわからないかもしれませんね
今回大きな目玉がありますよ

ユーザーエージェント偽装機能

わーいヽ(´エ`)ノ
「偽装」なんて言うとなんかちょっとアレですが

『スマホ持ってないからどう見えてるのかわからない
『スマホはあるけどタブレット無いからな~
『どっちも持ってない…
持ってないと どう表示されてるかわからないですよね
それを疑似体験させてくれる機能です

これがいわゆるスマホ (正式名称: スマートフォン)



そしてこちらがタブレット



大きさが随分違いますよね そしてパソコンはさらに大きな画面です
こういったそれぞれの種類のことを
デバイス
と言います
「あなたの閲覧デバイスはなんですか?」と聞かれたら
「スマホです」あるいは「パソコンです」「タブレットです」
と答えるわけです

それぞれのデバイスの画面 そしてその大きさ のことを
ビューポート
と言います
「ビューポート設定を行います」と言うときは
「画面サイズの設定をします」という意味です

ユーザーエージェント とは
この各デバイスの あるいは 各OSの 各ブラウザの
それぞれの描画特性のことを指します
描画というのがいわゆる レンダリング のことですよね
レンダリングするにはレンダリングエンジンが必要です

ie --- Trident (トライデント) -- 廃止決定済み Windows 10 では新ブラウザ 新レンダリングエンジン搭載
Google Chrome --- Webkit から Blink (ブリンク) へ移行済み
Firefox --- Gecko (ゲッコー)
Safari --- Webkit (ウェブキット)
Opera --- Presto (プレスト) から webkit へ移行済み

これが代表的なブラウザメーカーのエンジンです
ブラウザの描画が異なるのは
レンダリングエンジンが異なるためそれぞれ独自のユーザーエージェントを持っているから
という説明になります

専門用語 覚えましょう


-------------------


Google Chromeの新機能はユーザーエージェントの偽装です
この偽装は
エンジン偽装ではなくビューポート偽装です

描画自体はBlinkで行うけれども いろんなデバイスのサイズを疑似体験できるよ!
ってことです
ブラウザをマウスでどんどん小さくして行って
このぐらいでスマホのサイズ!
ってやってもですね それはスマホでの見え方とは全然違うんです
サイズが小さいってだけではないのです (´・ω・`)



パソコンのGoogle Chrome画面上で右クリックします
「要素の検証」を選択



こんなのが別画面で出てきます
webページ製作者はこれをよく使います めっちゃ使います
が 今はスルー

ブラウザ画面の方に注目



上に Device (デバイス) という項目があります
ここでデバイスを選択 ここでは iPhone5 を選択しました
なにやら注意マークと英語が出てますね
意味は画像にある通りです リロード(再読み込み) しなさい という指示です
現在の画面はただ縮小されただけです
グリッド(方眼) が出て サイズもすぐにわかりますね
これだけでも便利



選べるデバイスがいろいろありますが
リリースメーカー + 機種名 の表示になってます



じゃじゃーん
パソコンでiPhone画面の確認ができてしまいました
なんて便利なんだ!!!!!
(解除するには左上の○の中に斜線のマークを押します)

これはweb開発者やwebページ製作者にとって ものすごく有難いことです
今までは専用のソフトをインストールしたり 誰か所有者の方に見せてもらったり
もうそんな必要は無いのだ


ふーん… で? (´・ω・`)

って感じでしょうかしら((((笑)
ここから大事です


~~ FC2には無関係なので省略 ~~

スマホは「モバイル版表示」「PC版表示」の二種類あります
デフォルト (標準/ 初期設定) は モバイル版表示です

タブレットは「PC版表示」のみです モバイル版はありません

そう スマホのデフォルトはPC版ではないんです
PC版で閲覧する方はまず居ないと思ってください
何故ならば ↓

~~ 省略 ~~

これほぼ実寸です
めちゃくちゃ小さいでしょう? (´・ω・`)
拡大はできますよ できますが
拡大すると今度は文字が見切れますので
文字を読むのにいちいち画面を右にスライドしたり左にスライドしたり
正直閲覧に耐えません

だからスマホユーザーがPC版から見てる とは思わない方が良いです
私もPC版では見ません

ということはね
スマホモバイル版でどう見えているかは知っておかないといかんよ
ってことなんです

現在の そして今後のwebの本流というのは
モバイル・ファースト
だと言われています

mobile fast じゃないですよ
mobile first
ローディングが速い 動作がサクサク
という意味ではありません
モバイル最優先 って意味です

Google は今後の戦略を「モバイルに開発の主軸を傾ける」と宣言しています
デバイスを持っていないとなかなか体感できませんが
いまはパソコンよりもモバイル(スマホ) の時代なんですよね (´・ω・`)


--------------------- ここまで転載・引用


この記事の数週間後でしょうか
Googleの モバイルフレンドリーアップデート というのが行われました
スマホからの検索時は スマホ対応ページを優先にする というのがその主旨です

一番言いたいのは水色で背景がついている部分です

「画面が左右に振られるので正直閲覧に耐えません」

というのがそれにあたります
コンテンツ幅を何か(画像であったり 貼り付けた表であったり フラッシュであったり etc.)が超過すると
スマホの画面よりもコンテンツの方が大きくなるため
スマホをスクロールするたびに画面が左右にグラグラ揺れるんです
これはスマホユーザーにとっては 最大のストレスと言っても過言ではありません

えと 何もしていないのにはじめからこの状態になっている場合も正直あります
その辺は製作者側にその旨伝えれば良いと思う ^^;

今どのサイトでもスマホからの閲覧が半数を超えているような状況かと思います
ガラケーの生産が中止になりますので スマホユーザーの数が減少することはありません
そしてパソコン閲覧よりもスマホ閲覧の方が多い というのが現状の動かしがたい事実でもあります
機を見るに敏すぎな livedoor なんかはパソコン広告全撤廃しましたよね
これはスマホ広告の方が重要度が圧倒的に上なので
パソコン広告を廃棄する代わりに スマホ広告の非表示をどのプランからもできなくさせた
というのがカラクリですよね (´・ω・`)
とまあ そのぐらい スマホ閲覧時の挙動というのは重要視してしかるべき というのを今お伝えしています(笑)

------------------




Google Chromeの機能を使って確認した様子
私のテンプレではありませんので内容伏せます

方眼のところにグレーの部分が出てますよね
下は気にしなくて良いです 右側に注目
この超過分を画面内に収めると



こういうことですねー (´・ω・`)
この状態はパソコンからはまずわかりません
そしてこの偽装ビューポートを使う以前に
パソコン画面で「横スクロールバー」が出ていたら
スマホでは確実に画面ブレが生じています

可能性的には100%です(レスポンシブデザインの場合の話しですよ)
「レスポンシブ」を謳ってあって パソコン上でブラウザを縮小した際に横スクロールバーが出るのであれば
それは「レスポンシブ」と言って良いものではない… と思うんですけどもね 私的にemo
さらに  パソコンで横スクロールバーが出ないからといって
スマホで画面ブレが起こっていないというわけではない というのもあります
一度みなさん自分の目で確認されると良いですね

これらのことを常に頭に置いておいて欲しいんです
カスタマイズされた際には特に要チェック
仮に通りすがりの方に閲覧してもらったとして
この状態であったらば 恐らく 8割強の方がそのままブラウザバックしてしまうと思うんです
私もスマホヘビーユーザーですが こういったサイトには二度と訪れません
せっかくの読者さんを失わないためにも スマホでの見栄えも気にしましょうね
というお話でした


最後に誤解の無いように

そもそもレスポンシブ(スマホ画面対応) で作成していない
ってパターンもありますよね
スマホから閲覧した時にはパソコン画面がそのまま縮小された形で表示されるタイプ
これはこれでアリだと個人的に思ってます
寧ろ上で記した オーバーフローつきレスポンシブよりも
パソコン画面のまま の方が何倍も好ましい((((笑)
それに「パソコンからはどう見えるんだろう~」という想像力なんかも働いて
じゃあ、パソコンから見てみるか なんてことも
それはそれで一つの考え方だと思います
FC2には必ず「スマホ版」というのが設定されていますので
必ずしもレスポンシブにする必要など無いんです (´・ω・`)
もちろんパソコン画面の縮小でもビューポート設定は必要です
それがしっかり為されており かつ スマホ版への誘導ボタン等が表示されているのであれば
全然良いと思います



---------------------------


画像のドロップシャドウがダブっている部分がありますよね
これワザと今修正せずに掲載しています
これが「画像に自動で枠やドロップシャドウ」の問題点になりますので
このままで載せておきますー
記事としてはまたいずれ

関連記事

Comments 41

There are no comments yet.
-  
管理人のみ閲覧できます

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

2015/05/31 (Sun) 16:51 | EDIT | REPLY |   
tak  

いつもありがとうございます。
自分のページはPCで作ってスマホ(iPhone)でもみています。
FC2ですのでスマホはスマホ用テンプレになっておりまして、
それの標準タイプを選択しております。
どちらも快調であります。

2015/05/31 (Sun) 17:38 | EDIT | REPLY |   
Akira  
To 内緒「き」さん

私は基本的にiPhoneデフォルトの「スマホ版表示」のボタンは非表示にしてるんですよね。
なんでかというと、それが原因で崩れる場合があるもので(笑)
なにやってくれてんだApple。みたいな(笑)
や、でも表示してもらっても私のものに関しては崩れない…はず (´・ω・`)
それ以前に見た目が野暮ったいんだもんe-447
今回の設定中テンプレはモバイル誘導アイコンつけておきました(笑)

今後はスマホ表示をしっかりしていかないと、Google先生に嫌われちゃいますよね。
リクエスト項目に「スマホ版削除できるようにしてくれ」
ってのがあるけれども、それやっちゃうと知らないユーザーさんはどんどん検索から外されることに。
だからこの「スマホ版を削除できない」という仕様は親切だと思うのです (´・ω・`)
常にレスポンシブで表示したい、という方がいるとしても、です。

yahooなんてホントひどいからねe-263
仕様の問題上、スマホブログ背景色と文字色のバッティングが起こってる方がすんごく多い((((笑)
中途半端なhtml(しかも古いバージョン)使ってる方に起こるんだけども。
「あなたのブログ背景色は「黒」だよね?記事内で白い装飾用壁紙使って黒文字で書いてるから、htmlが全く反映されないスマホから見ると黒背景+黒文字で全くなにも見えないのよ。」
って伝えるんだけど。
伝えるんだけどーーー!聞く耳持たず((((笑)
スマホ実際に持ってないから疎かなのです (´・ω・`)
でもそれは… ねぇ?e-263
愚痴っちゃった(笑)

2015/05/31 (Sun) 18:13 | EDIT | REPLY |   
Akira  
To takさん

スマホではスマホ専用版で見てもらう、というのも一つの正解だと思います ( ̄∀ ̄)
問題なのは、
「レスポンシブって書いてあったから正しく表示されているであろう。」
と思い込んで使ってる方だよね (´・ω・`)
これはユーザーさんの責ではありませんけどもね。
んでもって、SEO対策がしっかり為されていることと、デザインが崩れないことはまた別物なんです。
いくらhtmlでSEOを完璧にしたところで、スマホからデザインが著しく崩れていれば。
訪問者増やすどころじゃないよね (´・ω・`)
何事もバランス((((笑)

2015/05/31 (Sun) 18:17 | EDIT | REPLY |   
tak  

ありがとうございます。
で今の私のページだとスマホで見ているときに何か不具合ありますでしょうか?
ご指摘頂ければ幸いです。
(以前ご教示頂いた画RSSは横幅300pxに改定しておきました。)

2015/05/31 (Sun) 18:26 | EDIT | REPLY |   
Akira  
To takさん

今拝見しました。
修正前は左右ブレがあったけど、今はRSSを変更されたおかげで全く差し障りありませんe-257

製作者本人でも気づかない・気づけない場合ってのもあるんですよね。
ですから教えて頂けるとありがたいんです。逆に(笑)
指摘を嫌う人もいるかもしれませんからなんとも言えんけど ^^;
私の場合は「有難い」と思う方です。
意地悪感醸してなければ(笑)

2015/05/31 (Sun) 18:31 | EDIT | REPLY |   
tak  

いつ時もありがとうございます。
作者の方とこうやってブログのデザインをイメージ通りに詰めて行けた事は
勉強になり凄くためになり楽しかったです。
また気が付くことあれば教えて下さい。
素敵なテンプレートを作っていただいたことを感謝いたします。
こちらからもまたお願いする時あればそのときはよろしくお願いいたします。^^

2015/05/31 (Sun) 19:39 | EDIT | REPLY |   
sae  
Ivory  テンプレ 太字表記が反映されない

こんにちは。
昨日から、Ivory のテンプレを使用させていただいてます。

初期設定が太字表記なしになっているようです。
設定は苦手で難しい事が出来ません。
何処を修正すればよいのか教えて下さい。
宜しくお願いいたします。

2015/06/01 (Mon) 08:13 | EDIT | REPLY |   
Akira  
To takさん

こちらこそありがとうございますe-454
私もお勉強になりました。
はい。今後共よろしくお願い致します ヽ(`▽´)/

2015/06/01 (Mon) 08:16 | EDIT | REPLY |   
Akira  
To saeさん

ご不便おかけしております。

> 太字表記が反映されない件

CSSソース(テンプレ管理画面「下」)の末尾に以下をコピペで追加してください。

strong, b {
font-weight: bold;
}

i {
font-style: italic;
}


これで反映すると思います。
お手数おかけして申し訳ありません (*_ _)

2015/06/01 (Mon) 08:18 | EDIT | REPLY |   
Akira  
To saeさん

今公式の方も修正版にしました。
カスタマイズ等されておられないようであれば、一旦削除→再DLの方が楽かもしれません。
その他若干の修正も加えました。
お手数おかけします!

2015/06/01 (Mon) 08:31 | EDIT | REPLY |   
きろろ  
To Akiraさん

うーーん、さっき気になって
自分のスマホ、富士通のarrowsなんですが
スマホ版Akiraのテンプレートで見てみましたが、
レイアウトは崩れていないし、別に問題はないですね~

スマホで見られる限界ってあると思うんですよね~
どうしても崩れると言う人には、FC2で用意している
スマホ用のテンプレートを使用するしかないのでは?

「スマホ版を削除してくれ」って、
それはいくらなんでも乱暴なリクエストだわw

うん、でもAkiraさんのテンプレートは
PC版もスマホ版も、少なくてもうちでは正常に動作しております。
ご報告までに!(^^)!

2015/06/01 (Mon) 15:27 | EDIT | REPLY |   
Akira  
To きろろさん

今問題のご報告を頂いてしまいました((((笑)
わー 気付かなかった ( ̄∀ ̄;)
バージョンアップこえー… OSグレードアップこえー…
みたいなー!e-259

や、でもおばちゃん頑張る (´・ω・`)
ババアなりに頑張る(笑)
もうなんか…疲れ果ててヨボヨボ(草むしっただけだけど)

きろろさんいつもありがとねー!

2015/06/01 (Mon) 21:19 | EDIT | REPLY |   
さく  

初めまして Akira様

いつも素敵なテンプレートを本当にありがとうございます!。
ど素人ながらも なんとかアレコレと頑張って
Akira様の素敵テンプレートを使わせて頂いております。

当方かなりの率で i-Phone 読者様を含めたスマホ読者様が多い為
Akira様の 待望のスマホ版が登場しましたので、使わせて頂きたく
思っているのですが、

Grunge_flower_sp_p

のテンプレートの 記事のテキスト部分の行間をもう少しだけ
空けたいのですが… どうやってもお手上げ状態でして…orz
CSSの body で文字色やフォントが変更できましたので
そこに line-height タグを入れますと 記事の行間は広がるのですが
インデックスページで、一部表示される記事の冒頭が
左のサムネ表示の画像の下に回り込んでしまいます。
サムネの下に回り込ませないようにして… 行間を広げる術を…な、何卒…orz
どうしてもあのテンプレートが使いたいので
ご迷惑を承知で ここまでお邪魔してしまいました…orz
どうかご指導のほど、宜しくお願いいたします…(>_<)…

2015/06/14 (Sun) 19:34 | EDIT | REPLY |   
Akira  
To さくさん

お返事遅くなりました (*_ _)
お使いいただき嬉しく思います。ありがとうございますe-257

>行間の修正をしたい件

さくさんが既にされましたように、行間設定はbodyへの指定でいけると思います。
CSSソースの末尾に

body {
line-height: 希望の数値;
}


注意点としては「単位をつけない」ことです。
pxやptなどの単位の指定をせずに数字だけでお願いします。
また、bodyに行間設定を行いますと、記事タイトルなども同じように行間が開いてしまいますので、
タイトルへは別で設けた方が良いと思います。

.entry h2 {
line-height: 希望の数値;
}


-------------

で、サムネイルの「下に回りこむ」ということですが、これは

『画像の下(重なり順の下位ではなく、見た目上下)にさせたくない」

という意味で合ってますでしょうか。
「文字が画像下(重なり順の下位)に潜り込んでしまう」
という意味では無いですよね (´・ω・`)
一応確認(笑)
潜り込みだとしたらもうそれはマズいですもんね(笑)


元ソースでは float という処理を行っていますので、重なることは無いと思うんです。
ちょっと説明しづらいのでスクショでご確認頂けると助かります ↓

★現在の状態(line-height: 2; の場合) これを…

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0004_zpsg0fmbpkc.gif~original

★こうしたい?

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0005_zpswetmjnmc.gif~original

ということかしら。
こうするのは簡単です。
ただ、写真を含まない記事の扱いをどうするか、というのが問題になってきます。

・No image画像を用意する。
・文字だけ記事の場合には写真用に空いたスペース(右側)を詰める。

この二択です。
どちらを選ぶかによってhtmlソースの修正が異なりますので、選んで貰えると助かります(笑)

2015/06/15 (Mon) 14:07 | EDIT | REPLY |   
Akira  
To さくさん

先に「画像下に文字が回り込まない」ようにするソース内容だけ書いておきますね。

以下の文字列をCtrl+Fキー検索。

.tmb img {
border: 2px inset rgb(189, 172, 180);
width: 68px;
height: 68px;
float: left;
margin-right: 7px;

}

赤字部分を修正して以下の通り。

.tmb img {
border: 2px inset rgb(189, 172, 180);
width: 68px;
height: 68px;
position: absolute;
left: 7px;
top: 7px;

}



------------

続いて以下を検索

.entry p {
font-size: 12px;
color: rgb(255, 255, 255);
padding: 5px 0 5px 5px;
}

赤字修正で以下の通り。

.entry p {
font-size: 12px;
color: rgb(255, 255, 255);
padding: 5px 0 5px 75px;
}


さらに先ほどの「記事タイトル」にも追加
(スクショはこれを忘れましたので画像下にタイトルが潜ってます(笑))

.entry h2 {
line-height: 希望の数値;
padding-left: 75px;
}


-------------

まず一旦修正されまして、画像なしの記事がどうなるかをご確認くださいませe-257

2015/06/15 (Mon) 14:13 | EDIT | REPLY |   
さく  

Akira様

こんばんはっ、お忙しい中、早速のお返事を本当にありがとうございます!
あああぁぁぁ… スクショのところ、まさにまさに、そのとおりなのです…(>_<)…
私の あのビミョな説明をご理解下さって 重ねてありがとうございますっ。感涙
当方のブログではテキストのみの記事が、ほぼナイに等しいですので
教えて頂きました方法で なんとか頑張ってみます!。
 
 

2015/06/16 (Tue) 01:26 | EDIT | REPLY |   
Akira  
To さくさん

なんとかなりそうですかね。
良かったe-454
また何か不備等ありましたらお気軽にどうぞ。
ありがとうございますe-257

2015/06/16 (Tue) 16:38 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/06/16 (Tue) 21:42 | EDIT | REPLY |   
Akira  
To 内緒「さ」さん

大変申し訳ございませーん!
デフォです((((笑)
簡単に修正できますので、こちらからコピペでお願いします (*_ _)

------- edit項目追加

Ctrl+Fキー検索

<%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute>|

この「下」に太字追加で以下の通り修正

<%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute>|
<a href="<%comment_edit_link>">Edit</a>

-------- 編集ページ追加

検索

</div><!--/pnpage-->
<!--/respage_area-->
<!--/trackback_area-->

この「下」に太字追加で以下の通り修正

</div><!--/pnpage-->
<!--/respage_area-->
<!--/trackback_area-->

<!--edit_area-->
<!--コメント投稿ページ-->
<section class="comment_post">
<h2>コメントを編集する</h2>
<form method="post" name="form1" action="./">
<dl class="form">
<dt>名前</dt>
<dd><input type="text" name="edit[name]" value="<%edit_name>" /></dd>
<dt>タイトル</dt>
<dd><input type="text" name="edit[title]" value="<%edit_title>" /></dd>
<dt>メールアドレス</dt>
<dd><input type="text" name="edit[mail]" value="<%edit_mail>" ></dd>
<dt>URL</dt>
<dd><input type="text" name="edit[url]" value="<%edit_url>" /></dd>
<dt>コメント本文(必須)</dt>
<dd><textarea name="edit[body]"><%edit_body></textarea></dd>
<dt>編集用パスワード</dt>
<dd><input type="password" name="edit[pass]" /></dd>
<dt>公開設定</dt>
<dd>
<select name="comment[himitu]">
<option value ="0">公開コメント</option>
<option value ="1">管理人への秘密コメント</option>
</select>
</dd>
</dl>
<input type="hidden" name="mode" value="edit">
<input type="hidden" name="mode2" value="edited" />
<input type="hidden" name="edit[rno]" value="<%eno>">
<input type="hidden" name="sp" value="1" />
<!--private_area--><input type="hidden" name="spass" value="<%spass>" /><!--/private_area-->
<div class="submit_btn">
<a href="#" onclick="submit()">Submit</a>
</div>
</form>
<ul class="foot">
<li><a href="<%url>?no=<%pno><%tail_url>&sp">記事本文へもどる</a></li>
</ul>
</section>
<!--/edit_area-->


----------

これで編集できるようになります。
私のミスを内緒コメントでお気遣いまで頂きまして。
ホントすみません(笑)
や、笑い事でなく ( ̄∀ ̄;)

お手数おかけしますが、よろしくお願い致します。
公式の方も追って修正しておきます(汗)

2015/06/17 (Wed) 01:11 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/06/17 (Wed) 03:56 | EDIT | REPLY |   
Akira  
To 内緒「さ」さん

こちらこそお手間取らせてしまい申し訳ありませんですー!
何度でも納得できるまでお尋ねくださいませe-257

>コメント欄を広げたい件(手順数2です)

-------- コメント投稿

以下の文字列を検索。

<dd><textarea name="comment[body]"></textarea></dd>

赤字追加で以下の通り修正(コピペでどうぞ)

<dd><textarea name="comment[body]" cols="40" rows="7"></textarea></dd>

-------- コメント修正

続いて検索

<dd><textarea name="edit[body]"><%edit_body></textarea></dd>

赤字追加で以下の通り。

<dd><textarea name="edit[body]" cols="40" rows="7"><%edit_body></textarea></dd>

----------

縦サイズを意味するのが「rows="数値"」です。
単位なしで指定します。
7で6~7行ですかね。
ここで調節してくださいね。

==========

このままだと文字が小さいですよね。
CSSソース(テンプレ管理画面「下段」)末尾に以下を追加すると大きくなります。

textarea {
font-size: large;
}


さらに大きくするには large を x-large に変えてください。
また何かありましたらお気軽にどうぞe-454

2015/06/17 (Wed) 13:39 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/06/18 (Thu) 08:38 | EDIT | REPLY |   
Akira  
To 内緒「さ」さん

いえもう何度でもどうぞ(笑)
ご自分が気に入った状態でお使い頂くのが一番だと思いますので、カスタマイズのその点も問題ありませんよe-454

>お花の「上部」をもう少し空けたい

この内容で合ってますでしょうか

★現在の状態と修正後(ご希望)の状態

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0005_zpsysjnuvly.gif~original

----------------

CSSソース(テンプレ管理画面「下段」)の末尾に以下の文字列を追加。

.list {
margin-top: 10px;
}


スクショは10pxを指定したものです。
お好きな数字で調節してください。

-----------

また、お花のついた行(コメントタイトル)と本文との間にも空白を設けたい場合にはさらに以下を追加。

.list dt {
margin-bottom: 10px;
}


-----------

一度お試しくださいませe-257

2015/06/19 (Fri) 01:18 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/06/19 (Fri) 22:30 | EDIT | REPLY |   
Akira  
To 内緒「さ」さん

はい。タイトルですね。
昨日のコメントの一番下

.list dt

に関する内容をもし書いておられましたら、そちらに追加して以下の通り。

.list dt {
margin-bottom: 希望の数値px;
font-weight: bold;
} 色付きの文字

昨日追加をしていなければ、CSS末尾に以下をマルっと追加。

.list dt {
font-weight: bold;
}


-------

これでできますですー

2015/06/20 (Sat) 00:41 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/06/20 (Sat) 21:49 | EDIT | REPLY |   
Akira  
To 内緒「さ」さん

なんとか整ったようで良かったですーe-257
最後の疑問点についてですが、これFC2の仕様なんです。
私も最初ちょっと戸惑いました(笑)

投げ出すこと無く頑張って頂いたこと、お気遣いの言葉、それぞれに感謝致します。
ありがとうございますe-454

2015/06/21 (Sun) 17:10 | EDIT | REPLY |   
さく  

Akira様

こんばんはっ、先日は本当にお世話になりました!
と うおお… 恐ろしい程のメール… そんなお忙しい中…
きょ… 恐縮なのですが… まだアレコレとやっておりまして…orz
Grunge_flower_sp_p

の、記事内の”リンク”のタップ前の文字色なのですが
デフォでは青系なのですけれど、ここを変えたいのですけれど
pc版だと、link,hover,visited,あたりで なんとなく
判るのですけれど スマホ版がお手上げでして…orz

body の -webkit-tap-highlight-color:
などの部分は、タップした時のボックスの色?なのでしょうか

リンクの後の色と、タップした時のボックスの色は
自分の好きな色に出来たのですが、タップ前の記事の文字リンク色が
どうしても変わりません…orz

記事のリンクの青は、トップのインデックスページの最下部にあります
Akira様のお名前部分と同じ色なのですが、

body の
h2, h2 a {

の色を変えると、インデックスページの一番最下部の Akira様の
お名前の色は、希望色に変わったのですけれど 記事リンク色に変化は
ありませんでした。な、何卒…どこを変更すればよいのか
どうぞご指導の程 宜しくお願い致します…(>_<)…!
 

2015/06/24 (Wed) 03:31 | EDIT | REPLY |   
Akira  
To さくさん

まだまだ頑張っておられましたかe-257

>リンク色の件

デフォルトの「記事内」リンク色は、ブラウザのユーザーエージェントに従うようになってます。
任意の色に設定するには以下を追加しますが、いつものように『CSSソース末尾』に書いてしまうとマズいことになりますので、まず以下を検索

-------------- 記述する場所の確保 Ctrl+F検索

/*----- blockquote
-----------------------------------------*/


こちらを見つけましたら そのすぐ『上』に以下を追加

a {
color: 任意の色コード;
}


--------------

-webkit-tap-highlight-color というのは、スマホのiPhoneの特殊動作で、
デフォルトではタップした時に反応範囲にグレーの背景色が付きます。
これが煩わしいという方もいらっしゃるので、初期設定だけは書いておきました。
これを出さないようにするには

-webkit-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);

こう設定します。
(今回は関係無いと思います)

くれぐれも『末尾に書かない』という点にお気をつけてやってみてくださいねe-284

2015/06/24 (Wed) 09:33 | EDIT | REPLY |   
さく  

Akira様

こんばんはっ、出来ましたです!!…(>_<)…!。
お忙しい中 本当に有難うございましたっ。もう…思わず
ジャンピング土下座っ、どちゃ。平伏。

お仕事お忙しいかと思われますが、また素敵なテンプレを
楽しみにさせて頂いております!。
 

2015/06/25 (Thu) 01:57 | EDIT | REPLY |   
Akira  
To さくさん

土下座まで((((笑)
できましたか。良かったですーe-257
またいつでもお気軽にどうぞe-278

2015/06/25 (Thu) 02:31 | EDIT | REPLY |   
さく  
スマホのindex ページのサムネで、gifを動かしたい件。

Akira様

お、おはようございます!。ま… また来たんかっ…!
と言われそうなのですが…orz

Grunge_flower_sp_p

での、インデックスページで サムネに表示される画像なのですが…
当方では一番top記事の画像を gifファイルにしてあるのですけれど
インデックスページで、このgif をサムネサイズで動いている状態で
表示させたいのですが…
Grunge_flower_sp_p のデフォの状態ですと、サムネでgifは
静止画像になっているのですけれど


.tmb img {
border: 2px inset rgb(189, 172, 180);
width: 68px;
height: 68px;
position: absolute;
left: 7px;
top: 7px;
}


の部分に何か追加すれば 出来るのでしょうか?


たまにそういったテンプレもお見かけしたりもして cssを見てみると

.entry-thumb{

のとこだとは思うのですが、サムネの形をラウンドにするような
部分はあるのですが、特に…それらしきタグが見当たらず…
ちなみによそ様のタグで恐縮なのですが、こんな感じで
サムネの大きさや形状、枠の色や左寄せ… という部分かと…
サムネで gifが 動くか動かないか?という指定のようなモノは…
どこで?されているのかが判らず…orz

.entry-thumb{
width: 80px;
height: 80px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0 0 0 5px rgba(255,255,255,0.5);
-moz-box-shadow: inset 0 0 0 5px rgba(255,255,255,0.5);
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.5);
float: left;


あと、以前おっしゃっておられました、画像がナイ場合の no image画像を
用意した場合なのですが 上の場合ですと

.entry-thumb:empty{


background: url
に no image を引っ張ってきているのですけれど、


「Grunge_flower_sp_p」 で、それをする場合、

自分でno image の画像を用意して、
どのようにタグを追加すれば宜しいでしょうか?

何卒 ご指南の程 どうぞ宜しくお願い致します…(>_<)…!
 
  

2015/07/02 (Thu) 06:27 | EDIT | REPLY |   
Akira  
To さくさん

おはおーございます ( ゚Д゚)ノ
ちょっと説明が細切れになるかと思いますがご容赦ください。
子供の行事が…(笑)

まずFC2の『画像』の扱いの特徴をweb一般と絡めてご説明しますね。
ややこしいので慌てずゆっくりついて来てね(笑)

---------- FC2の『画像』は『img』

『画像』の種類はたくさんありますが(JPG/ PNG/ GIF等々)、その掲載の仕方は大きく分けて二つあります。

・img として掲載
・background-image として掲載

両者の元画像は同じものですが、掲載「方法」によって特徴が大きく異なります。
imgというのはいわゆる通常の『写真』です。
background-image というのは『背景』です。

img の特徴
・横に文章などを並べることができる
・コピペができる
任意のサイズを指定すると縦横比が壊れる(元画像300×500だとして、それを300×300と指定すると縦が縮小されてしまう)

background-image の特徴
・横には何も置けませんが「上(重なり順 上位)」に文字などを置ける
・コピペができない
任意のサイズを指定しても縦横比は壊れませんが、その代わりに『見切れ』『寸足らず』が起こる(300×500のものを 400×400と指定すると 横は100の寸足らずで(通常は)右側に真っ白な部分ができてしまう 縦は100の見切れ発生)

FC2でアップロード画像を『独自変数』を利用して掲載する場合
強制的に img が適用されます
background-image へ変換するには Javascriptの手助けが必要になります。


一旦投稿しまーす。

2015/07/02 (Thu) 06:57 | EDIT | REPLY |   
Akira  
To さくさん

--------- FC2の独自変数3つ

FC2のimgの種類は3つあります。

・topentry_image = アップロード画像そのもの
・topentry_image_72 = スマホ向けサムネイル
・topentry_image_w300 = パソコン向けサムネイル

サムネイルの役割は、画質は落とす代わりに容量を削減することができます。
そして、それぞれ異なる縦横比を持つ写真群のサイズを一定に揃えることができます
ただし写真には必ず縦横比がありますから、多少の見切れ・補填(足りない部分は『黒』く塗りつぶされます)が起こりますが、気にならない程度に割りと上手く処理してくれます(笑)
さらにサムネイルの特徴は、GIF動画が静止画に変換されてしまいます

-------------

以上から導き出される事実として

・サムネイル画像を利用せずtopentry_imageでサイズを揃えようとすると、縦横比で悩まされることになる。
・縦横比を重要視してtopentry_imageを利用すると、ページは重たくなり、要約記事のリストの見た目がまちまちになる
・静止画になるのを防ぐためにはtopentry_imageを利用する以外の方法は無い

これですねー (´・ω・`)
その上で何を最も重要視するか、を考える必要があります。

・リストが揃っていた方が綺麗 = サムネイルを利用(動画GIF不可)
・写真のサイズは揃えたい・縦横比が著しく狂うのは防ぎたい = サムネイルを利用(動画GIF不可)
・縦横比は写真の元画像に従う = オリジナル(topentry_image)を利用、サイズ揃え不可(歪むから)
・写真毎にサムネイルとオリジナルを分けたい = 不可能

さあ選ぶのですっ!(笑)
個人的意見としては、やはりサムネイル掲載が望ましいかな と思います。
スマホの画面は狭いですので、リストの大きさがまちまちだと可視性の意味からちょっと厳しいかな と。

2015/07/02 (Thu) 07:11 | EDIT | REPLY |   
Akira  
To さくさん

で、縦横比を保持しつつbackground-imageへ変換するにはjavascriptを使うことになりますが、スマホ専用版ではこちらもちょっと厳しいかもしれない (´・ω・`)
スマホ版って文章掲載に特化していますし、ページ遷移量がパソコン版よりも多いので軽く仕上げる必要もあります。
要約記事リスト(トップページ)の見た目をどうするかをご自分の希望と照らし合わせて、その上でtopentry_imageへ変更するかどうか決めてくださいね。
よろしくお願いしますe-257

2015/07/02 (Thu) 07:15 | EDIT | REPLY |   
Akira  
To さくさん

No image画像を追加するには、以下をCtrl+F検索。

<!--body_img-->
<%topentry_image_72>
<!--/body_img-->

この『下』に続けて以下を追加記述。

<!--body_img_none-->
<img src="画像アドレス" alt="代替テキスト">
<!--/body_img_none-->


これで設定できます。
んで、上で縦横比のお話をしましたけれど、さくさんのアップロード画像が『正方形』である場合、その問題は起こりません。
縦横のサイズが同じならば歪みは起こりません ( ̄∀ ̄)

2015/07/02 (Thu) 07:22 | EDIT | REPLY |   
さく  

Akira様

こんばんは、ド深夜に失礼つかまつりまするっ…i-201
どあああぁぁ… お子様の行事が… というのに、このような丁寧なお返事を
本当にありがとうございますっ…!

というか、イキナリ余談ですが Akira様が ママさんだったのに…
勝手に驚く…(゚Д゚;)…  な、なんとなく… 
オサレな(←お洒落)シングルライフなイメージ…が… ←勝手にスイマセン汗。

全部を拝読させて頂きまして…

======
・リストが揃っていた方が綺麗 = サムネイルを利用(動画GIF不可)
・写真のサイズは揃えたい・縦横比が著しく狂うのは防ぎたい = サムネイルを利用(動画GIF不可)
・縦横比は写真の元画像に従う = オリジナル(topentry_image)を利用、サイズ揃え不可(歪むから)
・写真毎にサムネイルとオリジナルを分けたい = 不可能

「さあ選ぶのですっ!(笑)」
======

え… 選べない…(-∀-`;)…orz orz ←少なくとも現段階では。
拙者、少し山に籠って 滝に打たれて修行してまいります…。

まずは、no-imageの方から トライしてみたいと思っている所存です!
お忙しい中、本当にありがとうございましたっ…(>_<)ノ…!

p.s. アップロード画像…
ほぼ全部が「正方形」じゃ… ない…です… ( ̄∀ ̄;)…… 
 

2015/07/03 (Fri) 03:38 | EDIT | REPLY |   
Akira  
To さくさん

お返事が大変遅くなりましたー!
ごめんなさいね。

一度javascriptでやってみますか。
ただ心配なのはモバイル版の利点を奪ってしまわないか、というところです。
ほとんどの画像が動画GIFとなると、どうだろう ( ̄∀ ̄;)
で、Java~を使っても一旦は元画像を読み込むんです。
処理が追いつかない時に一瞬大きな画像が表示されてしまうことも。
これはパソコンでもフツーに起こるんですけどね (´・ω・`)

2015/07/05 (Sun) 14:11 | EDIT | REPLY |   
さく  
No title

Akira様

こんにちは!。お忙しい所 本当に色々とありがとうございます!
No Imageの設定は無事に出来ております、ホントに有難うございますっ。

GIFの表示の件は、全ての記事のTOP画像…というのではなくて
一番最初のTOPページの 一番上のTOP記事だけ、記事に日付を
未来設定にしてあって、TOP記事を固定しておりまして
ブログの説明などが書いてあるのですが、その記事だけ 一番上に
GIFファイルを持ってきている状態なのです。他の記事は TOPはJPEGかPNGの
静止ファイルです。私の書き方が言葉足らずだったのですけれど
なので、全部の記事にGIFが表示されるということには
ならないのです…i-201

な、なのですが… 色々と考えてみて、今の状態でも十分に
気にいっているので… javascript とかに手を出して…
Akira様のおっしゃるように せっかくのモバイル版の利点を
奪う形になってしまったり、
新たにテンプレに 他の不具合が出てしまったら…
というのも考ましたし、また ちょっとしたことで テンプレって…
不具合が生じたりするデリケートなトコもあるので…
その際に、私が ひとつひとつのトラブルに対処できるダケの知識がない…orz
ということも合わせて考えまして、やはり今の状態でやっていこうっ
そう思っております!(`・ω・´)ノキリっ

この度は スマホテンプレというものに四苦八苦してしまい
振り返ってみれば”行間”からのお世話になり…(>_<)…
ホントに丁寧に教えて頂き、本当に本当に有難うございました!

Akira様のテンプレは ただ見てるだけでも
目の保養になるような 素敵テンプレートばかりなので
また素敵なテンプレを楽しみにさせて頂いております!

(PCも今のテンプレが気にいっているので そのままでは
あるのですが、AnotherDay_azure  とかも
とっても可愛いですね! 丸い小窓が くるんと回転するのとか♡)
 
 

2015/07/08 (Wed) 14:32 | EDIT | REPLY |   
Akira  
To さくさん

わー そうでしたかe-451
なんで「ほとんどが動画GIF」って決めてかかったんでしょう。私(笑)
早とちりですみません ( ̄∀ ̄;)

なるほど。
一つだけだったんですね。
ということはJavascript使う間でもないかもしれないですね (´・ω・`)

こちらこそ色々お勉強になりました。
またいつでもお気軽にどうぞe-454

2015/07/08 (Wed) 15:59 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません