Behavior - FC2ブログテンプレート

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

Akira

To Behavior DLリンクの件 内緒さん

またやってもーた (´=д=｀)
修正しましたー。いつもお知らせ頂き感謝です ('0')/

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

Akira

To Behaviorレイアウトの件 内緒さん(終了のご報告)

こんばんは (o'ω')ﾉ

そうですね。仕様です。
縦横比については本文にある通りです。そしてそもそもメイソンリーレイアウトというのは時系列を尊重しないレイアウトなんです。
ご理解頂けると助かります。ありがとうございます :)

Akira様、ステキなテンプレート使わせて頂きましてありがとうございます。

ブログもちょっと見はステキな感じになってます。
でも、トップページのカテゴリHTMLはガタガタで「出た所勝負」な状態です。
カテゴリ番号と場所が合うように設定されているはずなのに、なぜが反映しません。
なので番号を進めて充てたりして適当に収めている状態です。
それでも最後のカテゴリ「その他」をどうしても出す事が出来ませんでした。
どこに問題があるのか、お時間のある時で結構ですので、見て頂ければ幸いです。
よろしくお願い致します。

Akira

To 秋風コスモスさん

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

こちらの記事をお読みください。
https://vanillaice000.blog.fc2.com/blog-entry-785.html

はじめまして。
写真を表示するのにとても適しているので気に入り、Behaviorを使わせていただいております。
個別記事において、画像（img）は最大幅で表示しながら、テキストだけ1行の文字数か横幅を制限することは可能でしょうか？
スタイルシートをいろいろといじってみたのですが、画像の幅だけを小さくすることはできても、テキストの幅だけ制限することができませんでした。
可能でしたらご教示ください。
よろしくお願いいたします。

Akira

To maroemonさん

ありがとうございます (●'0'●)/

同じ領域内で画像は横100%、テキストはそれよりも小さく、ということですよね。
基本的にそれをテンプレートでなんとかするというのはできません。何故ならいつどこにどのサイズの画像が掲載されるかをテンプレート構造で判断することはできないからです。
ですからこれを実現するにはmaroemonさんが書くテキストの方で一工夫しなければいけません。

幸いp要素を利用して記事を書かれていてクラス名も付いていますので、そちらにプロパティを追加されてはいかがでしょうか。p要素のクラス名は
MsoNormal
で合ってますでしょうか。そしてこのクラス名は特に何も指定されていないように見受けられます。
ただこれ、意図的なら良いんですが、もしかしてwordあるいはその類似アプリケーションやビルダーで文章を書かれてませんでしょか。文章のhtml構造についてあまりよろしくない状態になっている点はお伝えしておきます。
<span lang="EN-US"> と <o:p></o:p> が到るところに書かれていますが全てhtml構文エラーです。
そしてクラス名の文頭には小文字のみ許可されていますが見て取れるように頭が大文字になっています。

この件についてはお任せします。私からは「html専用エディターを利用した方が良いですよ」とアドバイスさせてくださいね。
本当はクラス名を利用してCSSを指定するのがベストなんですが、問題がありますので今回は以下のような内容の方が良いかもしれません。

p要素ももしかしたら意図的ではないかもしれませんが、とりあえず以下の通り。

例)
@media screen and (min-width: 560px) {
#inner-contents p {
width: 80%;
margin: auto;
}
}

赤字の数値はご自身で調整し、スタイルシートの末尾に記載。
上記内容は画面幅560px以上になった時のみ有効です。スマホでもテキストが狭くなっても構わないのであれば

#inner-contents p {
width:80%;
margin: auto;
}

でもOKです(おすすめはしませんが)
同じ要領で「見出し」も

#inner-contents h2,
#inner-contents h3,
#inner-contents h4,
#inner-contents h5,
#inner-contents h6 {
width: 80%;
margin: auto;
}

こうしてp要素と同じ指定を行ってください。

仮にエディターを変更し、p要素が自動入力されなくなった場合には上記内容は無効化されます。記事に記載するテキストは

<p>テキスト内容</p>

この形を守るようにしてください。
これが一番簡単な対処法ではないかと思います。
一度お試しください。
不正な文字列と不正なクラス名についてはいずれどこかのタイミングで綺麗に修正された方が良いと思います。

------
また、テキストの幅を制限したいというのはテキストの一文あたりの分量が気になるからではないかと思いますので、別のアプローチもお考えください。

1. 一文改行を辞めて段落を意識して書く
参考記事: 記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法
https://vanillaice000.blog.fc2.com/blog-entry-810.html

2. 文字を大きくする。

文字を大きくするだけでも見た目は違ってきます。また、上に記したp要素への指定について、widthへの%指定ではなく参考記事にあるようなmax-widthへのpx指定でも良いと思います。挙動が違いますのでどちらを選ぶかはご自身で決めてくださいね。

ありがとうございます。
ご返答いただいた文章はコピーさせいただきました。
こんな短時間に詳しく説明をいただけて感激しております。
僕はライターを生業としていることもあり、たしかにwordで原稿を作成したものがいくつかあります。
参考にして修正してみます。
しばらくwebからは遠ざかっていたものですから、助かりました。

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

Akira

To maroemonさん&内緒さん

ごめんなさい。 width が with と誤字でした。コピペされたので間違いをそのまま引き継いでしまいます。
修正しましたので改めてコピーをお願いします。

お知らせ頂いた内緒コメントさん、ありがとうございます！

修正したものを記載してみたのですが、
やはり画像も小さくなってしまいます。
p:not(img){
max-width: 80%;
}
でいけるかなと思ったのですがダメでした。
この構文は間違っているかもしれませんが、
やりたかったのはこういうことなのです。（汗

なにかほかの手段を考えてみます。
ありがとうございました。

Akira

To maroemonさん

こんばんは (o'ω')ﾉ

まず、昨日の誤字の件はごめんなさいね。
で、この方法を取るならば以下の2点が必須要項です。

① imgをp要素内に含めない
例)
×
<p>あいうえお<br><img src="xxxx.jpg"></p>
✔
<p>あいうえお</p><img src="xxxx.jpg">

② テキストはp要素でマークアップする
×
<div style="text-align: center;">あいうえお</div>
✔
<p style="text-align: center;">あいうえお</p>

----
2月3日以降の投稿はテキストがp要素ではなくdiv要素に変更されています。横幅の制限はp要素に指定したのですからdiv要素でマークアップしてしまえば効力はありません。

ここでmaroemonさんの方針をはっきりと定めて頂く必要があります。
htmlというのは見た目の操作に用いるのではなく意味や定義のために使用します。
注意点として「imgをp要素に含めない」としましたが、実際はimg要素というのはp要素内に書く、あるいはfigure要素として独立させるというのが適切です。

明確にしたい点はmoraemonさんが「htmlマークアップのセマンティクス(意味論)」を重視しているかどうかです。
恐らくimgのalt属性の使い方から判断するとあまり意識されていないように思います。なのでここではやはり p要素内にimg要素を含めない という方法をおすすめします。

他にもtransformプロパティを利用してテキストよりも画像を大きくする、という方法があり、今回おすすめしているのとは逆方向からのアプローチですが、緻密に計算しないとオーバーフロー(画面幅超過 = NOT モバイルフレンドリー)してしまうのと、一口にimgといっても全てを横100%で表示したいわけではないでしょうし(縦長の画像などもありますよね)、現存のimg要素にクラス名が付いていないので対象要素の特定や振り分けができない、などやはり現実的ではないと思います。

----
あと一枚あたりの画像の容量が大きすぎてページ自体が重たくなっていますので画像容量の削減もご検討くださいね。またはBehaviorはlazyloading(画像の遅延読み込み)用JSが元から含まれていますのでそちらを活用されても良いと思います。こちらについてはお任せしますが容量削減はいまや当たり前ですからせめてそれだけでも行った方が良いと思いますよ。

参考記事: 画像の容量気にしてますか？
https://vanillaice000.blog.fc2.com/blog-entry-228.html

参考記事: lazyloading関連記事(検討編と初級編をおすすめします)
https://vanillaice000.blog.fc2.com/?tag=Lazyloading

今最新記事のページスピードスコアが30%しかないのですが、lazyloadingを使うことで90%取れるはずです。ページの読み込みが遅いと離脱率が上がります(容量削減は必須)

いろいろとありがとうございます。
以前は画像サイズを500kに抑えていたのですが、制限を外して画質のバランスを見ていました。
これは戻しがほうがよさそうですね。
ほかの件は、僕のスキルでは無理そうですね。
カスタマイズに割ける時間も限りあるので、僕なりに写真を楽しむ手段を考えてみることにします。
大変、お世話になりました。

Akira

To maroemonさん(終了のご報告)

こんばんは (o'ω')ﾉ

画像は大きすぎても見づらいので原寸で長辺800〜1200px、表示領域はやはり800〜1000px程度が見やすいと思いますよ。文字も大きくされて全体のバランスも良くなり、これならテキストの領域制限は不要だと思います。
お疲れ様でした :)

* 文字の大きさは
body {
を検索し、近接にある

font: 1.4rem/ 省略

太字部位の数字を1.5や1.6に変更することで記事を書く都度エディターツールの利用も不要、過去記事も一括で大きくなります。参考までに。

ご丁寧にどうも！！

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

Akira

To Behavior背景色の件 内緒さん

こんばんは。

> カテゴリ毎に背景の色を変えたい〜

これは「カテゴリ一覧ページ(blog-category-x.html)」のことでしょうか。「個別記事ページ(blog-entry-x.html)」のことでしょうか。
それとも両方でしょうか。

対象ページ種が不明だと作業できませんのでお返事をお願いします。
それから、サイドメニュー部(ページ下部プラグイン)は元々背景色を分けてありますが、こちらをどうされるのか(メイン背景と合わせる or デフォルト色で固定)も併せてお伝え下さいね。

お返事頂きありがとうございますm(_ _)m
情報不足で申し訳ございません
個別記事ページの事になります。
どうかよろしくお願い致します。

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

Akira

To Behavior背景色の件 内緒さん②

こんばんは。

サイドメニューの背景色はどうされるのかお返事が無いので「そのまま」と仮定して進めますね。

-----
<div id="wrapper">
で検索するとhtml内に1箇所ありますのでこれを

<div id="wrapper"<!--permanent_area--><!--topentry--> class="catebg<%topentry_category_no>"<!--/topentry--><!--/permanent_area-->>

に変更。
次に各カテゴリの番号を調べてください。
例) https://vanillaice000.blog.fc2.com/blog-category-5.html
赤字の部位がカテゴリ番号です。

.catebgカテゴリ番号

これがセレクタになります。例えばカテゴリ番号が「5」ならば

.catebg5

です。

.catebgカテゴリ番号 {
background: カラーコード;
}

全てのカテゴリ番号で上記のようなルールセットを作成し、スタイルシート末尾に追加。
カテゴリが10あれば10のルールセットになります。
よろしくお願いします。