Article page

by
  • Comment:10
  • Trackback:0

sample2016.5.20 追記 重要

記事作成画面内でサムネイル画像(アイキャッチ画像)の指定ができるようになりましたので そちらをご利用ください

---------- 以下記事本文



* 記事末尾に重要追記あり *

サムネイルを抽出してトップページに表示
というのを私のテンプレではよくやるのですが
他の製作者様のも多いですよね

そのサムネイルについて
基本的には

・ 「追記」よりも前の本文にあり
・ 最初に貼り付けられているもの


というシステム上の決まりがあります
でも記事内の好きな画像をアイキャッチに使いたい という方も
そんな時にちょっと使える小技
過去にテンプレ紹介記事の方には書いておりましたが
改めて記事にしておこうと思います
すぐ参照出来たほうが良いよね ^^;



別にどうということはない簡単な方法です

記事の書き出しにサムネイルにしたい画像を貼り付けますが
そのままフツーに掲載しては 記事としての流れがおかしくなったり
もっと言えば 記事には掲載したくない アイキャッチの目的だけにしたい という時だってあります

そこで サイズを 0 × 0 で掲載します


それだけ(笑)
いつも通りに貼り付ければ良いです そしてタグ内に以下を追加


style="width: 0; height: auto;"


実際の例 ↓


<a href="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/thumbnail.jpg" target="_blank"><img src="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/thumbnail.jpg" alt="thumbnail.jpg" border="0" width="500" height="312" style="width: 0; height: auto; /></a>



打ち消し線の部分を消して 赤字を追加
赤字の前に半角スペースをお忘れなく
手間が苦にならなければ 緑色の部分も消すとさらに良いと思います


border="0"

の記述については 現在のweb標準で定められた内容と合致しませんので
削除をおすすめします(W3Cバリデートにもエラー判定としてひっかかります)


注意点は

・ FC2にアップロードしたもの

だけが有効です
ホスティングサービス等 他サイトからの直リンクでは機能しません

当該記事でもこの方法を使っています
記事内に画像はありませんが
目に見えないだけで存在していますので トップページにサムネイルとして
そしてRSSから取得する「関連記事リスト」にも表示されているかと思います
対象画像は記事の

一番最初に

入れてくださいね
記事の本文を書く前に入れちゃってください それが一番確実

で ついでにね
「絵文字」
これも「画像」なんです
ですから最初の画像が絵文字だと サムネイルとして抽出されてしまいますので
それは困るなー という方は配慮が必要です
嫌じゃない人はそのままで(笑)
私もめんどくさい時はそのまま放置です がしかし見た目はよろしくない
(FC2エディターの「絵文字」は無関係です FC2サーバーに任意アップロードした『デコメ』という意味です)

お困りの方はお試しあれ


-------------------------- 2015.5.29 追記

本文内
> 緑色の部分も消すとさらに良いと思います

の文言を

緑色の部分は消してください

に変更します
リンクが残っていると上手く動作しないようです(というか しなくなりました(笑))
ですから正しい形はこちら ↓


<img src="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/thumbnail.jpg" alt="thumbnail.jpg" style="width: 0; height: auto; />


img というタグだけの構成でお願い致します


---------- 追記 2016.2.8


FC2サムネイルの条件 もうひとつ大きなものがありました (´・ω・`)
画像をFC2サーバーにアップロードする際にですね
仕様と合致しないものがあるとこういった警告が表示されます ↓

sample

これ読んだ限りですと
「スラッシュ(/)」そして「ピリオド(.)」以外ならオッケーか そうか
と思ってしまいがちですよね
実際それ以外の記号の場合にはアップロードできてしまいます

ところが『サムネイルの抽出』となると事情が違ってきまして

サムネイル抽出可能な画像の名前(拡張子のドットの前)はハイフンとアンダースコアのみ

だと思った方が良いですね (´・ω・`)
他の記号だとどうなるのかの検証はしていません(笑)
だからもう
ハイフン( - ) と アンダースコア( _ ) 以外は使わない と決めておいた方が良いと思います
大雑把だけど(笑)

一番多いパターンは括弧 ( )ですね

例)
OK --- 12345.jpg
NG --- 123(45).jpg

上の括弧なし画像はサムネイルとして抽出が行われますけれども
下の括弧付き画像は抽出されません

こちら重要事項として追記しておきます
元々URLに記号を含む「名称(ユーザーが任意でつける名前)」というのは望ましくありませんですー
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 10

tak  

ありがとうございます!

2015/05/29 (Fri) 10:36 | EDIT | REPLY |   
Akira  
To takさん

何かとお手数おかけします。
よろしくおねがいしますe-454

2015/05/29 (Fri) 13:51 | EDIT | REPLY |   
藤袴  

こんにちは。上記のタグで画像を入れるとサムネは表示されますが、本文の一部が表示されなくなってしまいます。普通に画像を挿入し、stle="width: 0; height: auto; と入れると本文が一部プレビューに出てこなくなってしまいます。(消すともとに戻ります)どうすればよろしいでしょうか?

2015/07/14 (Tue) 17:14 | EDIT | REPLY |   
Akira  
To 藤袴さん

テンプレ修正中でコメントし辛かったかと思います。
ごめんなさいね (*_ _)

>本文の一部が表示されない件

念のため確認です。
ソース内容

<img src="画像アドレス" style="width: 0; height: auto;" alt="代替テキスト">

です。
まずそこをご確認頂くのと、FC2のツールバーから画像を貼り付けられました際には

<a href="画像と同じアドレス"~省略~><img 省略></a>

こうなりますので、<a>タグは必ず外してください。
このコメント欄から太字をコピペされまして、
・画像アドレス
・代替テキスト(sample など)
この二つを差し替えてみてください。
半角や全角の違い、記号の違いや記号の入れ忘れ一つでも影響してしまいますので、まずはコピペでお願いします。
ご面倒おかけします!

2015/07/14 (Tue) 17:32 | EDIT | REPLY |   
ぐおじ(の代理人)  
1枚目の画像が検出されない現象について

Akira様、はじめまして。
Website欄のブログで、デザインのお手伝いをしている者が代理でコメントさせて頂きます。

現在、Akira様のテンプレートをカスタマイズして使用させて頂いておりますが、サムネイルの抽出についてお聞きしたいことがあり、コメント致しました。
(テンプレート、新着RSS、サムネイル等の解説記事は全て目を通しています)

お聞きしたいことは、サムネイルに抽出される画像が、1枚目ではなく記事中の他の画像になってしまう現象が頻発していることについてです。
絵文字等を使用しておらず、追記ではなく本文に入力しているにも関わらず、1枚目あるいは2枚目、3枚目が無視されて、その後の画像が抽出されてしまう原因にはどのようなものが考えられますでしょうか?

画像の容量、サイズなどいろいろ検討してみましたが、1枚目が抽出されない原因が特定できず、対処に困っております。
何か思い当たることがあれば教えて頂けると助かります。
よろしくお願い致します。

2016/02/08 (Mon) 14:53 | EDIT | REPLY |   
Akira  
To ぐおじ(の代理人)さん

ご面倒おかけしております (*_ _)

こちらはですね、抽出されない画像のアドレスに括弧がついているからです。
(文字列)

これ

FC2でアップロードできない画像の名称はスラッシュとピリオドのみ(末尾拡張子のドットは除く)、という謳い文句になっていますので、
カッコつきアドレスは受付されてしまいます。
ですがサムネイルとして抽出はできないんです (´・ω・`)
元々アドレス中に日本語などの2バイト言語ですとか、ハイフン(-)及びアンダースコア(_)以外の記号は望ましくありません。

んで、大変ご面倒とは思いますが、この事象を解消するにはアドレスを変更して頂いて再アップロードにて差し替え、
あるいは新たに括弧なしの同じ画像をアップロードされましてこの記事の内容のとおり0✕0掲載されるかのいずれか... ( ̄∀ ̄;)
この点先にご説明すべきでしたね。
私の手落ちです。こめんなさい (*_ _)

-------

別件ですが、GirlOnWireとChillingとを組み合わせたカスタマイズをされている、ということでお間違いないでしょうか。
ちょっとスマホからの閲覧がマズいことになっております(笑)
スマホ版を適用されておられましたら、まあ良いのかな、と思いますけれども。
レスポンシブでのご利用でしたら修正した方が良いかとー (´・ω・`)
(ご判断はお任せします)

2016/02/08 (Mon) 15:58 | EDIT | REPLY |   
ぐおじ(の代理人)  
No title

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

ファイル名が抽出できていなかった原因だったのですね!
たしかにファイル名に普通カッコとか2バイト言語は使用しませんよね。
手落ちだなんてとんでもないです!
ぐおじさん本人にも指導しておきたいと思います。


この記事とは関係ない別件になってしまいますが、スマホからの閲覧のマズい部分は具体的にどの部分かご教授頂けないでしょうか?
私がカスタマイズした当初は、Android実機、iPhone実機、その他エミュレーターで表示確認は行っているのですが……
問題点さえご教授頂ければ、あとは自分で調査・対応します。

現時点での問題点としてはスマホからの表示が当初より明らかに重くなってしまっているので、そこの対策を指導しようかなと考えております。
ヘッダー画像が1.5MBになっているのが一番の要因だと思いますが(笑)

2016/02/09 (Tue) 01:17 | EDIT | REPLY |   
Akira  
To ぐおじ(の代理人)さん

ファイル名の件、申し訳ないです ( ̄∀ ̄;)
作業大変かと思いますが、変更ガンバです ╭( ・ㅂ・)و ̑̑ グッ

------

スマホの件

①慣性スクロールが効いていない
②広告が常に上部に表示されてブログタイトルに被るスレスレ

この2点です。

①について
iPhoneで検証しております。
iPhoneはトゥルルーンという滑らかなスクロールが実装されていますが、それが失われています。
ギコ..ギコ..ギコ... という感じのスクロール感になっています。
Ctrl+Fキー検索(CSSソース内です)

html, body {
height: 100%;
}

を削除。

②について。
これちょっと私の方で確認できないのですが、htmlソース後方の
<%ad> <%ad2>
の広告用変数を移動させましたでしょうか。
変数は一度投稿されますと実態に変換されますので私の方でソース確認ができません。
アド関連変数の「位置」は規定がありません(可視状態ならOK)ので規約的な問題にはなりません。
ただページ最上部に広告というのはちょっと疎ましいと思います(笑)
そしてドロワーを操作するボタンが左上にありますので、広告の上にチョコンと載っているような感じ。
押しどころによっては広告が開いてしまいますね (´・ω・`)
ただ、上部設定するとフローティング(フワーっと降りてくる)にはなりませんので、天秤にかけてどちらが良いか、というところです。
一度ご確認くださいませ。

2016/02/09 (Tue) 11:58 | EDIT | REPLY |   
ぐおじ(の代理人)  

Akira様、スマートフォン表示の件についてもご教授頂きありがとうございました!

早速対応いたしました。
②については特に広告用変数はいじっていなかったのですが、iPhoneでのみオーバーレイ広告が表示されているということを確認しました。
現在は画面下部に追従するように表示されていて、ページ最下部までくると上部に表示されるという形になっているので、これで問題はないかなと思います。

細かい点までご相談に応じて頂きありがとうございました!
これからもテンプレート作成、がんばってください。

2016/02/11 (Thu) 19:25 | EDIT | REPLY |   
Akira  
To ぐおじ(の代理人)さん

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

できたようで安心しました。
お疲れ様でした

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

Leave a reply

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