Article page

by
  • Comment:62
  • Trackback:0

Alternative テンプレート


名称 Alternative
カラム数 2
プラグイン対応 ○(プラグイン1, 2 --- 右サイドメニュー/ プラグイン3 --- フッター上サイドメニュー
レスポンシブ対応
右サイドメニュー PC --- 右/ ブラウザ縮小時・デバイス変更時 --- 下(横幅依存)
記事幅 可変 最大960px (内寸 900px)
サイドバー幅 固定 300px (内寸 270px)
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします
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 使用にあたっての損害・損失に対する責の一切を負いません


valid-html5.png


更新履歴 2017.1.25


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

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


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



更新履歴 2017.1.13


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

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


更新履歴 2016.10.9


メンテナンス
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整

現状把握しているWindows Edge及び IE11に於いて Decoyに関連する表示不備については以下の通りです(Microsoftの修正待ちで ^^;)
・ リンクにtransition効果が与えられている場合のhover色継承バグ
・ 特定の状況下でfixed要素の位置がずれる


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



こんにちは へくせんびーすとです(ニコ)
海外ドラマGRIMMがおもしろすぎ 続き気になりすぎでハゲそう (´ぅω・`)


おるたなてぃぶ emo
互い違いタイルレイアウト
(12日あたり申請予定です)



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・トップページサムネイル画像はマウスオーバーで薄いブルーのマスクがかかります
・No image画像を簡単に変更できるようにしました
・個別記事ページにはブラウザ左右固定のページ送りがついてます(カテゴリ間移動 削除可)
・プラグイン1と2は右サイドメニュー プラグイン3はフッター上に配置されます
全体の見た目バランスについてはプラグインカテゴリでの個人設定での操作をお願いします
注) でCtrl+Fキー検索されますとカスタマイズのガイドが出てきます
カスタマイズを始める前に一度ご確認ください
* スマートフォンはiPhone5S, iPhone6 タブレットはiPad Air での実機検証を行っております
Android端末の実機での検証はできておりませんので 何かあればご指摘ください


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


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




トップページのグリッド配列について


えっとー カスタマイズは非推奨で ╭( ・ㅂ・)و ̑̑ グッ
フォントを大きく あるいは小さくされます方はボックスの縦幅変更(em)必須です
お分かりになる方はどうぞ
そうでない方はご無理なさいませんよう(ごめんね)



No image画像変更


然るべきページの然るべき箇所に画像が存在しない場合に代替として表示される No image画像 ですが
表示対象ページは

・トップページ (FC2サムネイル)
sample

・検索結果ページ (FC2サムネイル)
sample

・新着サムネイル (RSSから取得)
sample


上記3箇所です
該当URLは

//blog-imgs-84.fc2.com/v/a/n/vanillaice000/alternativenoimage.jpg

htmlソース内に1箇所
CSSソース内に2箇所
3箇所 それぞれ希望の画像アドレスに差し替えてください

準備する画像のサイズは長辺が600px程度 縦横比不問
新着サムネイルと検索結果のサムネイルは表示サイズが小さいので
トップページ用とは別に 長辺150px程度のものを用意されても良いかと思います
その方がページは軽くなります(微々たるものですが)
いずれにしろ事前に容量の削減は行っておいてください

デフォルト画像 (600✕400 縮尺掲載, 34KB, public domain)

sample



新着サムネイル表示件数変更


まず 鍵付きブログ(非公開ブログ)の方が表示できるようなコードになっていません
Ctrl+Fキー検索で以下の文言を目印に ガイドに従って削除をお願いします

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここから削除 -->


一般公開ブログの方
デフォルト設定はGoogle API規定最大件数の 8件です
8件表示されてないよ という方はブログ個人設定をご確認ください

RSS設定

件数を変更する方はCtrl+Fキー検索

setNumEntries(8)

緑の数字を希望の件数に変更します
既にMAX件数設定ですので 9を含むそれ以上の数字はエラーです
ですから7を含むそれ以下への変更 ということになります

また リンクは別タブで開く設定になっています
同タブ遷移をご希望の方は

p[j].target='_blank'

緑の blank の部分を
self に変更してください



個別記事ページのページ送りについて


ブラウザ左右にあるものは「同一カテゴリ間移動」
記事下にあるものは「時系列移動」です

左右固定のページ送りを削除される方はCtrl+Fキー検索

<!-- 個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここから削除 -->

を目印にガイドに従ってください
htmlソース内に 2箇所 あります



Microsoft Edgeについて


左右固定のページ送りですが
Edgeでは位置指定の誤認識があり上手く動作しませんので 機能自体を削除(適用外)しています



ドミナントカラー


rgb(148,170,201) 基本リンク色, サイドメニューリンク色, ナビゲーションマウスホバー下線色 など
rgb(245,245,245) 全体背景色 など
rgb(51,51,51) 基本文字色 など
rgb(240,240,240) フッタープラグイン背景色 など


数字だけを抜き出してCtrl+Fキー検索されますと 不透明度つきのものも全て出てきます
例) 51,51,51



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


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


icon

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

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

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

割りと大きめな円形ですので プロフなどの画像を設定しても良いと思います
その場合には以下の通り

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


サンプル
sample


* この方法をお使い頂けないハンドルネームの方 * ・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)



ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


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



---------- 追記 2016.4.15


スマートフォン・タブレットでもトップページサムネイルにリンクを付けておきたい方


こちらのテンプレートはサムネイルにマウスオーバーでアニメーションしながらマスクがかかる仕様になっています
タブレットやスマホではまだ感圧システムが完成していませんので(iPhone6あたりはビミョーに使える)
タブレット・スマホの両デバイスではリンク設定それ自体を外しています
サムネイル画像タップでのページ遷移をご希望の方は以下の手順でカスタマイズをお願いします
(アニメーション及びマスクの適用は外し Read More だけを表示する形です)


sample


内容がゴチャゴチャしておりますので htmlエディターをお持ちの方はそちらでの作業をおすすめします
Ctrl+Fキー検索

$('.image-caption-wrapper').css('display','none');

上記文字列がhtmlソース内に 2箇所 あります
最初に出てくるものが スマホ向けコード
二番目が タブレット向けコード です

screen shot


これから上記文字列の部分を以下のものへと 差し替え を行います
削除ではなく差し替えですので 元の場所と該当範囲を見失わぬようよくよくご注意の上作業されてください

修正コード
$('.image-caption-wrapper').css('visibility','hidden');$('.image-caption').addClass('sp-image-caption');$('.sp-image-caption').removeClass('image-caption');

スマホだけ タブレットだけ 両デバイス
この選択はお任せします


続きまして今度は CSSソースの末尾 に以下の内容(2項目)を 追加 します

.sp-image-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 1.5em;
  visibility: visible;
  font-family: 'Playfair Display';
  line-height: 1.5em;
  font-size: 20px;
}

.sp-image-caption a {
  color: white;
}


以上です
やっぱりみなさん画像タップでのリンクは欲しいようですので
次回から念頭に置いて制作しようと思います
今回はこれでご容赦emoji



プラグイン内の 横並びになるはずのものが縦並びになってしまう方


テンプレート側の指定でそうなってます
特定プラグインだけその指定から外すには以下の内容をCSSソース末尾へ記載してください

.対象プラグインクラス名 ul li a {
  display: inline !important;
  border: none !important;
}


クラス名ってなんぞ? な方は以下の記事をご参照ください

FC2プラグインにclassやid名を付けた方が良い理由
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 62

ちこりん  
No title

楽しみです!
いつも素敵なテンプレートありがとうございます!(^ ^)

2016/04/10 (Sun) 15:54 | EDIT | REPLY |   
yousinkai  
ブログの名前の位置移動について

心眼流 空手道 桜神会館 の名前の位置を左側にずらしたいのですが移動方法を教えていただけないでしょうか?

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

2016/04/10 (Sun) 17:32 | EDIT | REPLY |   
Akira  
To ちこりんさん

こちらこそありがとうございますー ∩(●'ᴗ'●)∩

2016/04/11 (Mon) 09:43 | EDIT | REPLY |   
Akira  
To yousinkaiさん

ありがとうございます。
テンプレートはSakura_Nightglow(夜桜背景)でお間違いないでしょうか。
Ctrl+Fキー検索

p.ttl

詳細は以下の通り
p.ttl {
margin: 0 auto;
max-width: 600px;
font-family: 'Great Vibes', cursive, georgia;
font-size: 35px;
padding: 65px 0 10px;
text-align: center;
}

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

p.ttl {
margin: 0 auto;
width: 80%;
max-width: 1200px;

font-family: 'Great Vibes', cursive, georgia;
font-size: 35px;
padding: 65px 0 10px;
}


続きまして検索。

p.ttl a

詳細は以下の通り。
p.ttl a {
padding: 0 1em;
}

上記を削除

続きまして検索

.sub

詳細
.sub {
margin: 0 auto;
max-width: 650px;
padding: 0 8px;
font-family: 'Great Vibes', cursive, georgia;
font-size: 15px;
color: rgb(150, 6, 74);
text-align: center;
}

赤字部分修正で以下の通り。

.sub {
margin: 0 auto;
width: 80%;
max-width: 1200px;

font-family: 'Great Vibes', cursive, georgia;
font-size: 15px;
color: rgb(150, 6, 74);
}



--------

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

2016/04/11 (Mon) 09:58 | EDIT | REPLY |   
いちご  
はじめまして

.
スマホ表示(トップページ)の画像に個別記事へのリンクは、付けられませんか?

教えてください。

お願い致します。

2016/04/14 (Thu) 22:15 | EDIT | REPLY |   
きろろ  
タグクラウドについて

こんばんは、きろろです<(_ _)>

Alternative、DLさせていただきました!(^^)!
これ、待っていたんですよねw

で、さっそく本題に……

ユーザタグ、TagCloudなんですが、
なぜか一個ずつ縦に表示されてしまいます。

以前、AkiraさんのところでTagCloudをこうすればいいよ、的な記事を読んで、
プラグインの書き直した記憶があるんですよね。

それからずっといじってないのですが、
なぜ今回、このテンプレートだけTagがずらっと縦に一個ずつ表示されてしまうのでしょうか?

ちなみに3カラム目にTagを、持って来ました。
Akiraさんの配置と一緒にしてみたんですが、やはり縦に表示されてしまいます。

お暇な時に、レクチャーをお願いします<(_ _)>

2016/04/15 (Fri) 00:25 | EDIT | REPLY |   
きろろ  
TagCloudについて

連投で申し訳ございません。

ご報告までに。
プラグインを入れ直したら、ちゃんと表示されました<(_ _)>
Alternativeでも、問題なく表示されてます。

お騒がせしました<(_ _)>

2016/04/15 (Fri) 03:44 | EDIT | REPLY |   
Akira  
To いちごさん

ありがとうございます

結論から言うと、付けられます。
これちょっと不親切だったかもですね。ごめんなさい。
他にも付けたい方がいらっしゃるかもしれませんので、後ほど記事の方に手順を掲載しておきますね。

2016/04/15 (Fri) 08:48 | EDIT | REPLY |   
Akira  
To きろろさん

きろろさんこれね、理由があるんです。
公式のプラグインについては縦にならないような装飾を私の方で組んでます。
以前ご紹介したタグクラウドのパターンだと一手間必要。
その件に関連して記事を出そう出そうと思いながら半年ほど過ぎてしまいました(笑)
お題目としては
「プラグインにはclassまたはid名をつけておきましょう のススメ」
今日書けたら書きますね。
申し訳ないです。

2016/04/15 (Fri) 08:50 | EDIT | REPLY |   
いちご  
こんばんは

.
返信&回答ありがとうございます。

挑戦してみます。

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


2016/04/15 (Fri) 18:36 | EDIT | REPLY |   
Akira  
To いちごさん

お手数おかけします。
よろしくお願いします (*_ _)

2016/04/16 (Sat) 11:44 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/04/17 (Sun) 21:23 | EDIT | REPLY |   
Akira  
To Alternative 過去記事のfloatが解除された件 内緒さん

ありがとうございます

過去記事でフロートされていたものが全て無効に、ということですが、
ソース内にfloatの文字を見つけることができませんでした。
で、推測なのですが
クラス名にpull-leftというのがありますよね。
これはもしかしたら以前お使いになっていたテンプレートの「独自クラス」ではないでしょうか。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-289.html

恐らく間違いないと思います。
独自クラスの問題というのは、テンプレートを変更してしまったら全て無効化されてしまう点にあります。
同じ製作者のテンプレであればたぶん同じクラスが使われていると思いますが、
別の製作者が全く同じソース内容を記載していることの方が稀というか奇跡(笑)

対処法
・以前と同じ製作者様のテンプレートで選びなおす
(絶対とは言い切れませんが)

・独自クラスの該当内容を当該テンプレに移植する
(これは内緒さんとその製作者様との間のことですので私はどうこう言えません)

・記事内でfloat処理できるように書き直しをする(独自クラスに頼らない)

このいずれかでしょうかね (´・ω・`)
以前のテンプレからの移植のお手伝いやソース内容への言及は致しかねますのでごめんなさい (*_ _)
おすすめは最後の「書き直す」なんだけども(笑)
結構大変な作業ですよね。
移植については私はなんとも言えませんですー (´・ω・`)
(心象が良くないのは確かです。や、どうだろう。わからん(笑))

2016/04/17 (Sun) 23:18 | EDIT | REPLY |   
みなみ  
No title

トップページで表示される
サムネイル画像サイズと文字数の変更は可能なのでしょうか?
宜しくお願いいたします。

2016/05/06 (Fri) 15:58 | EDIT | REPLY |   
Akira  
To みなみさん

こんばんは。

できるにはできますが、
・画像サイズを大きく? or 小さく?
・縦横比を変更?
・文字数は増やす? or 減らす?

この如何によってお伝えする内容が異なります。
画像に関しては、レスポンシブデザインですから画面サイズが変われば画像のサイズも変わりますので、どこを基準にされるかというのがまず一つ。
文字数の方は、このテンプレについては「文字数」での制御ではなく「高さ」で制御しています。
(ちなみにFC2要約記事で抽出できる文字数は最大200文字までです。)
でないと左右(画像とコンテンツ内容)とのバランスを取ることができません。
いずれにしてもかなり苦労すると思われます。

2016/05/07 (Sat) 02:02 | EDIT | REPLY |   
みなみ  
ありがとうございます

トップページサムネイル画像サイズを小さくし文字数を減らせたらと思いまして・・・

いずれにしてもかなり苦労するとありましたので、

その知識がありませんので諦めこのままご使用させていただきます。

ご丁寧にお教えいただき有難うございました。

2016/05/09 (Mon) 02:56 | EDIT | REPLY |   
Akira  
To みなみさん

こんにちは (・ω・)ゞ

共に縮小の方向なんですね。
一応手順をお伝えしておきます。

① サムネイルを小さく

こちらはサムネイル自体を小さくするということよりも、全体のコンテンツ幅を縮小という形が一番良いと思います。
Ctrl+Fキー検索

#container

4つマッチしますが一番最初のものが対象です。
CSSソース内の上の方にあります。
この項目の
width: 80%;


width: 70%;

に変更。
ブラウザの中央にギュっと凝縮されたような見た目にはなりますけれど。
続いて検索

#wrapper

この項目の
min-width: 80%;
の80を変更した数字と同じものに。

-------
② 文字数を減らす

こちらも文字数を減らすというよりも高さを減らします。
Ctrl+Fキー検索

.topentry-description

2つマッチしますので最初のものを。
項目
height: 7.5em;


height: 6em;

あるいは 4.5em あたりに変更します。

-------

以上ですが、いずれにしてもおすすめではありませんし、画面幅との兼ね合いもありますのでブラウザを大きくしたり小さくしたり、という確認をされながら進めてくださいませ。

2016/05/09 (Mon) 14:30 | EDIT | REPLY |   
みなみ  

ご丁寧にありがとうございます。

一度挑戦してみます、多分元に戻しそのまま

使用させていただくと思います(笑)

2016/05/10 (Tue) 10:59 | EDIT | REPLY |   
Akira  
To みなみさん

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

はい。その方が良いと思います(笑)
お時間のあるときにでもお試しください

2016/05/12 (Thu) 00:15 | EDIT | REPLY |   
みなみ  

<table width="600" border="0" cellpadding="0" cellspacing="0">
に横幅600の画像と改行し文章を入力した場合、パソコンで見る分には
問題ないのですがスマホで見るとずれているのですが表がダメなのでしょうか?

2016/05/12 (Thu) 14:47 | EDIT | REPLY |   
Akira  
To みなみさん

表が「ずれる」というのはどういった意味合いでしょうか。
画面からはみ出す、ということかしら (´・ω・`)
tableはそうですね。それがtable(表)の特徴です。

Alternativeはレスポンシブデザインですので、タブレットやスマホではコンテンツの幅をリサイズする設定になってます。
tableへの横幅設定に600pxという具体的数値を用いられますと、スマホの横幅は600pxありませんので当然はみ出します。
tableはdivと異なり、自身の外側のサイズを重視しません。
tableは外ではなく内側のサイズ(セル内容)によって横幅が決定します。
例えば600pxと指定していても、仮にセル内容が改行なしで600pxの幅を超えた場合
全体幅は指定の600を無視してどんどん大きくなります。
(このソース内容では、という意味です。回避する方法はあります。)
ですからtable自体がレスポンシブに向いていないというのは事実です。

回避策
① max-width: 100%;
を指定

これはブラウザ依存です。
600pxの指定だけれども、画面の100%が600pxに満たない場合にはそこで広がりをストップ。
という指定。
正確なCSS解釈としては
「tableにmax-width」は効かない」
というのが正しいですが、iPhoneのSafariなどでは効きます(笑)
パソコンでもChromeやFirefoxでは効きません。
で、今「パソコンでは大丈夫」とのことですが、ブラウザがChromeやFirefoxであれば画面縮小ではみ出すはずです。
tableへのmax-width, min-widthはたぶんie11では効くかも(確認してません)
でもまあ、とりあえずiPhoneでは(今のところ)効きます。
この方法を用いるのならばCSSソースをCtrl+Fキー検索されますと

table {
word-break: break-all;
}

という項目がありますので、一部追加で以下の通り。

table {
word-break: break-all;
max-width: 100%;
}

この方法の利点 = 作業が簡単(笑)
デメリット = 本来は正しくない挙動

② tableへの横幅指定に%を使う

これが一番良い方法です。
テンプレートのソースを編集するのではなく、記事内ソース(今みなみさんが掲載されている内容)を修正します。

width="600"



width="100%"

あるいはそれ以下に設定します。
100%にしておくとスマホ画面で横幅いっぱいになり、画面幅を超過することはありません。
デメリット = 600px指定がなくなるので当初の見た目が思い通りにならない。
あるいは①の内容を踏襲して以下の修正も可能(正確なCSSでないというデメリットも受け継ぎます)

<table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="padding: 0;">

ちょっと難しいかもしれませんが ^^;
掲載されているソース内容自体がhtml4の古い記述方式です。
html5に則した内容は上記です。
cellspacingやcellpadding, border という属性は既に廃止されています。

③ オーバーフローでスクロール

こちらはtableが超過してしまったら横スクロールバーを出してテンプレ全体の横幅が崩れないようにする方法です。
テンプレではなく記事内ソース修正。

<div style="width: 100%; overflow-x: auto;">
ここにtable内容
</div>

こうしてdivで囲います。
今は改行してわかりやすく書いていますが、実際の記述時は
<div><table>〜〜〜</table></div>
と横繋ぎで書いてください。
(FC2エディターの表作成ツールを利用している・改行をhtmlタグに限定していない、というのを前提に)
デメリット = スマホだとスクロールバーが出ていることに気がつきにくい。

---------

tableはちょっと難しいですよね (´・ω・`)
新エディターから表作成が削除されているのも無理からんことです。
こちら当ブログ内参考記事です。

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

2016/05/12 (Thu) 16:03 | EDIT | REPLY |   
みなみ  
度々申し訳ありません

何度も申し訳ありませんm(_ _)m
こんな感じでしょうか?


<table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="padding: 0;">見出し</td>

</tr>

<tr>
<td style="padding: 0;">画像</td>

</tr>

<tr>
<td style="padding: 0;">本文</td>

</tr>

</table>

2016/05/12 (Thu) 18:43 | EDIT | REPLY |   
Akira  
To みなみさん

もしかしてなさりたいことは、
「画像の横に文章を並べる」
ということでしょうか。
それならばtableを使うよりもfloatをお使いになってはいかがでしょう。
ちょっとお待ちくださいね。
実際の画像を見ていただいた方がわかりやすいと思いますので準備します。

2016/05/12 (Thu) 19:49 | EDIT | REPLY |   
みなみ  

http://yazaemon23.blog45.fc2.com/blog-entry-2623.html
このような感じで縦並びで画像size統一でと考えてまして・・・
1記事に付き画像6枚で
本文で画像1枚と詳細
追記で画像5枚と詳細
と思っております。
その為雛形のような表があると記事がばらつかず
書きやすいかと思いまして。

2016/05/12 (Thu) 21:40 | EDIT | REPLY |   
Akira  
To みなみさん

画像と文章を横並びにしないのですね。
ということはtableを利用する必要は全くないです。
単にclassを指定してサイズ制御すれば良い話し。
文章は画像横からの改行でそのすぐ下に書くと良いですね。

img に
class="image-size"
を追加(名前はこれでなくてもOKです)
こんな感じ ↓

<img src="画像アドレス" alt="" class="image-size">

これは記事を書く時に毎回記述します。
そしてテンプレートの方へはCSSソース内に

.image-size {
width: ●●px;
height: auto;
}

と入れておきます。
CSSソース末尾で構いません。
こうしておけばimage-sizeというクラスを持つ画像は全て同じ横幅での掲載になります。
tableは本当に必要な時以外極力お使いにならないことをおすすめ(笑)
ですが上で掲載して頂いたtableタグでも大丈夫ですよ。
ただしmax-widthは基本的に「効かない」というのをご理解頂いた上で、ということになります。

2016/05/12 (Thu) 22:06 | EDIT | REPLY |   
みなみ  

何度も何度もありがとうございます。

2016/05/12 (Thu) 22:43 | EDIT | REPLY |   
Akira  
To みなみさん

いえいえ。
お役に立てたなら良いんだけど ^^;

2016/05/13 (Fri) 16:41 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/08/15 (Mon) 19:08 | EDIT | REPLY |   
タケタケ  
食彩夜話  さんのテンプレート

お世話になります。
追伸ですが、FC2を利用していますが
食彩夜話さんのテンプレートは配布されていますか?

もし配布されているなら
どこにあるのでしょうか?
FC2で探しても見つかりません。
また、もし配布されていない場合
食彩夜話さんのような白基調の
しんぷるなテンプレートを利用したいのですが
どうすればよろしでしょうか?

2016/08/15 (Mon) 19:11 | EDIT | REPLY |   
Akira  
To Alternativeカスタマイズの件 内緒さん

ありがとうございます

> カスタマイズを簡単に〜

どんなカスタマイズをされるかによって難易度に大きな開きがありますので、「簡単にできる方法」というのはちょっと厳しいです ^^;
現在のところ私のテンプレートに有料のものはありません(全て無料でご利用頂けます)。
そして有料サポートも行っておりません。
なので気軽にその都度お尋ねください(笑)

> 背景を白に

Ctrl+Fキー検索

/* 注)全体背景色 White Smoke(nearly) */

上記コメントのある行が対象です。

background-color: rgb(245,245,245);



background-color: white;

に変更してくださいね。

2016/08/16 (Tue) 16:53 | EDIT | REPLY |   
Akira  
To タケタケさん

食彩夜話さん
はtakさんのことですかね (´・ω・`)
彼の方はBeHappyをご利用頂いていると記憶していますが、変更していなければ、です。
BeHappyのページ(DLリンクは記事内にあります) ↓

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

このテンプレでない場合は食彩夜話さんのアドレスを鍵付きでお知らせください。
私のテンプレートではない場合もあるかと思います(笑)
よろしくお願いします。

2016/08/16 (Tue) 16:57 | EDIT | REPLY |   
いますず  
初めまして

こちらのテンプレートをDLさせていただきました。
質問なのですが、サイドバーにある「Follow Me」のアイコンを変更したいというのはサイドバーの形状変更にあたりますか?
facebookを削除してmixiを追加したいといったことは可能ですか?
色々タグ内を探したのですがどこをどのようにいじればいいのかがわからず…
よろしければ教えてください。
よろしくお願いします。

2016/10/25 (Tue) 15:39 | EDIT | REPLY |   
Akira  
To いますずさん

ありがとうございます

> 「Follow Me」のアイコンを変更したいというのはサイドバーの形状変更にあたりますか?

いえ。大丈夫ですー。
Follow Meのアイコンの仕組みをご説明しますと、
「Font Awesome」という海外のサイトから各社のブランドアイコンを表示させており、これらは画像とはいえ「SVG」という特殊なものです。
SVGの特徴
・ フォントと同じ感覚でサイズや色の指定ができる
・ 拡大しても解像度にほとんど影響が出ない
ですから通常のJPGなどの画像とは一線を画するものです。
そして海外のサイトですので、日本のカルチャーとは縁がありません。
つまりミクシィのアイコンがありません (´・ω・`;)

何が言いたいかというと
「Follow Me内にある他のブランドアイコンと形状を揃えたい かつ 実物のロゴにこだわるのであれば」という前提で
・ 画像をご自分で用意して頂く必要あり(背景透過PNG, 60px四方, 色は「白」が妥当)
これですね (´・ω・`)

http://developer.mixi.co.jp/about-platform/policies/image_guidelines/

上記ページにミクシィのブランドロゴが掲載されていますが、
ミクシィのロゴは

ですので、テキストで代替にするという手もあります。
「m」という表記で「ミクシィ」だと理解してもらえる、という判断をいますずさんが出来るのであればそちらがおすすめです。
こちらを採用される場合は
Ctrl+F(Windows)/ Command+F(Mac) キー検索

fbへのリンク不要な方この一行削除

この1行を

<li><a href="#" target="_blank" class="sns-a"><span class="fa mixi">m</span></a>

と修正してください。
リンクの設定は # の部分をリンクアドレスに置き換えます。
これだけですとmのフォントが細いので、気になる場合は上記の

<span class="fa">

の部分を

<span class="fa mixi" style="font-weight: bold;">

にしてみてください。

=======

まとめ
方法二択

① 画像を用意する(この方法を取られる場合はご連絡ください。その後に設定の仕方をお伝えします)
② mのテキストを利用する(おすすめ)

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

----------- 追記

ごめんなさい。追加です。
マウスホバーの際に背景色を変えたい場合には ミクシィのブランドカラーをお使いになると良いと思います。
CSSソースの末尾で構いませんので

#sns-ul a:hover .mixi {
background-color: rgb(209,173,89);
}

を追加してください。

2016/10/25 (Tue) 18:59 | EDIT | REPLY |   
いますず  
ありがとうございます!

丁寧にありがとうございました!
ちょっと検討してみます。
もし方法1を使うとなったらまた書き込ませていただくと思います。
よろしくお願いします。

2016/10/25 (Tue) 19:20 | EDIT | REPLY |   
Akira  
To いますずさん

はい。了解です ( ゚Д゚)ノ

2016/10/25 (Tue) 19:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/11/02 (Wed) 22:05 | EDIT | REPLY |   
Akira  
To Alternativeヘッダー画像の件 内緒さん

ご事情理解致しました。
ご丁寧にありがとうございます

> ヘッダー画像設定

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

.header-banner

CSSソース内に上下並んで2箇所見つかりますが、上の方が対象です。
この項目を以下の通り修正。
(コピペで差し替えてください)

.header-banner {
margin: 0 auto 60px;
background: url(画像アドレス) center center /cover no-repeat;
opacity: 1;
padding: 110px 0 90px;
-webkit-transition: all .7s ease;
transition: all .7s ease;
}


① 60pxの数字はヘッダーとコンテンツとの空白指定ですので、ご希望の数値に変更可です。

② ヘッダーの上下幅はあまり大きく作っていませんので、画像はかなり横長になります。
設定する画像の縦横比は不問(サイズは横1000px以上が理想です)。
不問とはいえ横長の方が望ましいです。
縦が短すぎると感じられる場合には

padding: px 0 px;

上記で調整してください。
デフォルトは 上110px、下90pxですので、それぞれ数字を大きくするとヘッダー自体の縦幅も大きくなります。
(間に挟まれた 0 は変更や削除しないようご注意ください)

③ 赤字の center は画像の左右合わせ位置、ピンクの方の center は上下合わせ位置の指定です。
画像のメインオブジェクトが左寄り、上寄りなど、中央基準では表示の具合がよろしくない場合には、どこに画像のメインがあるかをお考えになられまして適宜修正してください。
例えば
「左右は右寄り、上下は下寄り」
right bottom

「左右は中央、上下は上寄り」
center top

左右で可能な値 --- left, center, right
上下で可能な値 --- top, center, bottom

④ 設定画像によっては文字が見辛くなります。
その場合の修正箇所は

#blog-name-container

text-align: center; の下に
color: 色コード;
を「追加」

#blog-title a

color: rgb(51,51,51); を
color: 色コード;
に「修正」

サンプル
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/adeaowth_zpsfaulmbfk.jpg

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

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

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

2016/11/04 (Fri) 14:52 | EDIT | REPLY |   
Akira  
To Alternative ヘッダー画像の件 内緒さん

お出来になったようで良かったですー。
作業お疲れ様でした
お気遣いもありがとうございます (●'0'●)/

2016/11/05 (Sat) 14:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/11/26 (Sat) 19:28 | EDIT | REPLY |   
Akira  
To Alternative スマホ表示の件 内緒さん

現在他所から投稿しておりますー。
帰宅してから改めますね。
取り急ぎ「拝見しました。」というお知らせです。
お手数おかけします。
よろしくお願いします。

2016/11/28 (Mon) 15:43 | EDIT | REPLY |   
Akira  
To Alternative スマホ表示の件 内緒さん

① スマホでのトップページサムネイル画像の高さをiPhone縦画面サイズ見切れなしで表示したい

上記の解釈で合ってますでしょうか。
かなりの縦長になりますのでPC表示で採用してしまってはこのテンプレでは体裁が取れません。
ですからスマホ限定、ということでお願いします。
スマホとPCのユーザーエージェントを判別して切り替えるのではなく、
「画面サイズが小さくなって縦一列のレイアウト(シングルレイアウト)になった時に」
という方式でお願いします。
(UA判別の場合はJSコードを組む必要が生じます)

お写真の見切れを無くしたい、というのがご希望の主旨だと思うのですが、
一口に「iPhoneで撮った〜」と言っても、バージョンのよって縦横比が異なります。
整数比で言うと
iPhone4は2:3
iPhone5は40:71
iPhone6は375:667
iPhone6plusは9:16
全ての画像のサイズを揃えようと思った場合に最も大切なのは「縦横比」です。
あるいは
画像のサイズがまちまちで構わない、ということであれば、
元画像を単純に表示させれば良いだけですが、このテンプレではhtmlを大きく書き直すことになりますので今回後者についてはお断りさせてください。

---------

どのバージョンに合わせるかが不明ですが、現況で最もユーザー数が多いであろうiPhone6を基準にします。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

@media screen and (max-width: 767px)

5つヒットしますが、一番最初のもので直下に
.liquid-wrapper:before {
と記されているものが対象です。
この項目を以下の通り修正

@media screen and (max-width: 767px) {
.liquid-wrapper:before {
padding-top: 177.9%;
}
}

赤字部分が修正箇所です。
これで縦長にはなりますが、仮に横長画像がサムネイルになった際にはかなりぼやけるであろうことをご承知おきくださいね。
(寸足らずは起こりません)

-----------

② スマホのトップページサムネイル文字数を少なくしたい

こちらは行数でheightを計算してください。
1行のみなら 1.5em
2行なら 3em
3行なら 4.5em
....
と、1.5の倍々で計算します。
修正箇所は

@media screen and (max-width: 767px)

同じく5箇所出ますが今度は5つ目の、直下に
.topentry-description {
と表記されているものが対象です。
この項目を

@media screen and (max-width: 767px) {
.topentry-description {
height: auto;
max-height: 数値em;
}
}

上記の通り修正。
以上です。よろしくお願いします。

2016/11/28 (Mon) 16:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/11/29 (Tue) 17:02 | EDIT | REPLY |   
Akira  
To Alternative画像縦サイズの件 内緒さん

お返事大変遅れております (*_ _)
時間が取れず申し訳ありません。
近日中に改めて回答させてくださいね。
よろしくお願いします。

2016/12/02 (Fri) 12:38 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/12/03 (Sat) 14:00 | EDIT | REPLY |   
Akira  
To Alternativeサムネイル高さの件 内緒さん

お返事大変遅れてしまいました。
申し訳ないです (*_ _)

> 元のサムネイル画像の高さサイズをもう一個分増やした高さに変更〜

これはデフォルトデザインの2倍の高さにしたい、という解釈で合ってますでしょうか。
デフォルトの縱橫比率は横を100%とし、それに対する高さが102%です。
若干縦長のデザインになってます。
先回お伝えしたカスタマイズ数値が177.9%で、iPhone6系列の画像をほぼそのまま踏襲するサイズ設定です。
で、今回「デフォルトの2倍」をご希望ということですが、つまり200%になりますから先回のものよりもさらに縦長になってしまいます。

● 先回数値設定を変更した同じ箇所(177.9%)をご希望に沿うようにご自分で目視確認されながら調整されると良いかな、と思います。
このパーセンテージ指定は「横を100%と換算した場合の縦の比率」を表します。
つまり50%ならば縦サイズは横サイズの半分に。
100%ならば横と縦は同等のサイズになります。

● デフォルトの画像の「位置合わせ」について
位置合わせというのは、画像は正方形であることの方が稀ですから、ほぼ正方形に近いマスの中に収めようと思った時には横・縦のいずれかが見切れることになります。
デザインとしては「寸足らず」が最も見苦しいので、寸足らずを起こさないためにはどちらかを見切れさせることに。
例えば横200px縦200pxのマスに、横200px縦100pxの画像を横を基準に入れてしまうと、縦が100px足りません。
逆に縦の方を200pxに(拡大することになります)指定すると、横は拡大率に従って400pxになり、200px分は収まりませんので見切れることになります。
ここで大事なのは「どこを表示して」「どこを見切れさせるのか」です。
内緒さんの場合はお顔が左右軸ではほぼ中央、上下軸では上の方に配されていることが多いので、
左右中央・上下中央というデフォルトの指定を変更されても良いかと思います。
Ctrl+F(Windows)/ Command+F(Mac)キー検索
(htmlソース内です)

img-liquid-fill

くれぐれも、htmlソース内です。CSSソースでなく。
この近接を以下の通り修正。

center top /cover no-repeat

デフォルトで赤字の部分は center になっていますので、ここを top に変更。
すると画像の左右軸は中央、上下軸は上を基準にして表示しますので、この部位にあたる画像オブジェクトは見切れることがありません。

* オブジェクト = 画像内に写っている人・物(人物の顔などメインになるもの)

これが画像内でどこに配置されているかを確認。

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

まとめ

① %の設定を目視確認しながら再調整(150%ぐらいが妥当な気がします)
② htmlソースの画像オブジェクト表示位置を変更


以上です。
返信が遅れましたことを再度お詫びします。
ごめんなさいね。

2016/12/04 (Sun) 13:58 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/12/05 (Mon) 18:17 | EDIT | REPLY |   
Akira  
To Alternativeサムネイルの件(解決) 内緒さん

お返事またしても遅くなりましたー!

上手く行ったようで安心しました
中学生の息子さんがいらっしゃるんですね。
お母様がお綺麗でいらっしゃるから、きっとイケメン e-440
うちも長女が今中学2年生です ( ゚Д゚)ノ

こちらこそご不便をおかけしました。
ありがとうございます

2016/12/08 (Thu) 16:32 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/30 (Thu) 17:20 | EDIT | REPLY |   
Akira  
To Alternative ヘッダー画像の件 内緒さん

お世話になっております (●'0'●)/

> ヘッダー画像を数枚増やしページが切り替わると違う画像に〜

これは
① ヘッダーをスライドにする、という意味でしょうか。
それとも、
② 各ページ種毎に異なるヘッダー画像を表示したい、という意味でしょうか。
それとも、
③ ヘッダー画像をランダム表示にしたい(スライドするわけではなく、どのヘッダー画像になるかランダムに決定)、でしょうか。

①は複雑なJS及び多くのhtml,CSSの追加が必要ですのでお断りさせてくださいね。
そして内緒さんご自身や記事の著作主さんがおっしゃる通り、その方法だとSEO的な問題はありますね (´・ω・`)
その方法にあたるのは①です。

基本的にテンプレートにJaueryプラグインの「追加」をするお手伝いはお断りしています。
②のような「ページ別でヘッダー画像を分ける」程度、あるいは
③のような簡素なJSであれば良いのですが。

こちらお返事待ちにしますね。
よろしくお願いします。

2017/03/30 (Thu) 23:12 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/31 (Fri) 03:22 | EDIT | REPLY |   
Akira  
To Alternative ヘッダー画像の件 内緒さん②

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

ちょっとですね、私のお返事内容がひどい ( ̄∀ ̄;)
誤字と間違いだらけ ><

X その方法だとSEO的な問題はありますね
✔ 「問題があったので修正しました」という「修正前の内容」だとSEO的な問題はありますね

新しい方法(つまり該当ページに掲載されている内容)では問題ありません。

X その方法にあたるのは①です
✔ その方法にあたるのは③です

番号間違えました。ごめんなさい ( ̄∀ ̄;)

=========

ランダム表示という結論で大丈夫でしょうかね。
で、これからお伝えする方法は内緒さんがお調べになったものと大差ありません。
(記事主さんのコード内容とは異なりますが理屈は同じです)
いずれもSEO的な問題は生じません。

① </body>の直前に以下を追加

<script>
RANDOMimageURL = new Array();
RANDOMimageURL[0]="画像アドレス";
RANDOMimageURL[1]="画像アドレス";
Rndm = Math.floor(Math.random()*RANDOMimageURL.length);
document.getElementById("banner-bg").style.background="url("+RANDOMimageURL[Rndm]+") center center /cover no-repeat";
</script>

3枚目以降の追加は
RANDOMimageURL[2]="画像アドレス";
RANDOMimageURL[3]="画像アドレス";

上記のように[数字]
数字をひとつづつ増やして記載してください。

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

<header class="header-banner">

上記を以下の通り追加修正

<header class="header-banner" id="banner-bg">

③ CSS修正
検索

.header-banner

こちらの background の一行を削除
続いて

-webkit-transition: all .7s ease;
transition: all .7s ease;


この2行を削除
以上です。

あくまでもランダムですので、同じ画像が立て続けに表示されることもあります。
全ページにランダム表示が適用されます。
また、別ページへ移動した際の表示画像をコントロールすることはできません(ランダムです。必ず遷移前のページと別にする、などの操作はできません。)
これらについては事前にご了承くださいね。
よろしくお願いします。

2017/04/01 (Sat) 13:25 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/03 (Mon) 00:54 | EDIT | REPLY |   
Akira  
To Alternative ランダムヘッダーが上手くいかない件 内緒さん

scriptコードを書く場所は
</body>
直前です。
今書いてあるのは <body>の直前ですよね。
<body> ではなく </body> です。
htmlソースの最後方にあります。

それから[0]に指定している画像がNot foundということで、URLが消失しています。
画像のアドレスと併せ、今一度ご確認くださいね。
よろしくお願いします (o'ω')ノ

2017/04/03 (Mon) 13:39 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/04 (Tue) 18:51 | EDIT | REPLY |   
Akira  
To Alternative ランダムヘッダーの件 内緒さん

出来ましたね。安心しました

はい。受験生でございます(笑)
息子さんとお花見楽しんでくださいね。
ありがとうございます

2017/04/05 (Wed) 10:50 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/30 (Sun) 21:27 | EDIT | REPLY |   
Akira  
To Alternative文字大きさの件 内緒さん

ありがとうございます

> ①トップページの記事要約の文字サイズと ②各記事本文の文字サイズを大きくしたい件

① トップページ
Ctrl+F(Windows)/ Command+F(Mac)キー検索

.topentry-description {

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

overflow: hidden;

の直下に以下を追加。

font-size: 数値px;

デフォルトは13pxですので、それ以上の数字でお願いします。

====

② 各記事本文
検索。

.inner-contents {

こちらも1箇所あります。

font-family: 省略;

の直下に以下を追加。

font-size: 数値px;

こちらも同じく13pxがデフォルトです。
ここで数値を変更しても
・関連記事リスト
・タグ
の文字はそのままの大きさで残ります。
上記2要素の変更も必要なようでしたら、
検索

.relate_dl,

この括りの

font-size: 13px;

赤字の数値を変更。こちらが関連記事リスト。
タグは

.tags {

の同じくfont-size: 13px; の数値を調整してください。
よろしくお願いします。

2017/05/01 (Mon) 20:23 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/05/01 (Mon) 22:06 | EDIT | REPLY |   
Akira  
To Alternative文字大きさの件 内緒さん②

> ②の件
.inner-contents の内容は以下のようになっているはすですので ↓

.inner-contents {
font-family: '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';
}

これをこう追加修正です ↓

.inner-contents {
font-family: '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';
font-size: 数値px;
}

よろしくお願いします (o'ω')ノ

2017/05/01 (Mon) 23:18 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/05/02 (Tue) 12:09 | EDIT | REPLY |   
Akira  
To Alternative文字大きさの件(完了のご報告) 内緒さん

良かったです。
作業お疲れ様でした

2017/05/02 (Tue) 21:49 | EDIT | REPLY |   

Leave a reply

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