The other way round

ARTICLE PAGE

Mocha

テンプレート
  • comment115
  • trackback0
Mocha



名称 Mocha
カラム数 2
プラグイン対応 ○(サイドメニュー集約型)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時 下
SP --- 左からスライド
記事幅 可変 最大1170px (内寸 1090px)
サイドバー幅 固定 300px (内寸 260px)
新着サムネイル表示 あり
フッター上
デフォルト 6件表示
鍵つきブログの方は表示されませんので削除をお願いします

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 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム スライド画像変更, テーマ色変更, 文字大きさ変更 etc.


valid-html5.png


更新履歴 2017.1.25


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

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


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



更新履歴 2017.1.13


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

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


表示件数はブログ個人設定に依存します
デザイン上の最適件数は 6件 です


更新履歴 2016.10.6


・ Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
・ ベンダープレフィックスの整理
・ その他微調整

「Nostalgia」「Little-thing」「Mocha」メンテナンスのお知らせ


更新履歴 2016.9.9


リストマーカーの位置を調整しました

参考記事
list-item横の隙間について


更新履歴 2016.7.31


関連記事サムネイルリストの整形を行いました
RSSによる関連記事表示を削除しました 重要

[詳細を見る]

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



カニエ・ウエストが大嫌いなあきらでございます (o'д`o)ゝ
(嫁も嫌い)



もか
メイソンリーレイアウト 7日に申請予定です
夏場に暑苦しい色合いですみません(笑)



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・トップページはメイソンリーレイアウト
・関連記事サムネイルを導入しました
・スライド画像は変更できます
・スマホのみサイドメニューがドロワーに切り替わります(左からスライド)
・「新着」及び「関連記事」サムネイルをご利用の方は ブログ個人設定のRSS配信数が 6件以上 かつ 全文 での設定をお願いします
注)でCtrl+Fキー検索されますとカスタマイズのガイダンスが出てきます
カスタマイズを始める前に一度目を通してください


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


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




メイソンリーの配列について


レンガ状の配置を「メイソンリー」と一般的に呼びますが
グリッドレイアウトと違って
必ずしも時系列通りに並ぶとは限りません
今回はサムネイルのサイズも揃えていませんので 各記事の大きさがまちまちです
写真が無い場合にはとても小さくなります
レンガ状に配置しようと思うと 空いたところにポンポンと上手に並べる必要がありますので
時系を重視ではなく 見た目のデザイン重視のレイアウトです
ブラウザ縮小やスマホなどへのデバイス変更で縦一列になった際には時系列通りに整列し直します
この点をご理解頂いた上でのご利用をお願い致します



関連記事サムネイルの位置について 公式実装に伴い削除致しました


今回新しく導入しました「関連記事サムネイル」ですが
FC2にはカテゴリ括りでの画像を取得するプログラムがありませんので
新着サムネイルと同様 RSSから内容を取得しています
従来通り 非公開ブログの方は表示されませんので該当箇所の削除をお願いします

関連記事サムネイルの掲載場所は個別記事のページ送りの「上」コメント欄の「下」にしてあります
JSを利用しますので どうしても一歩遅れた描画になります
コメント欄より「上」に移動させてしまうと 最新コメントクリックでのページ遷移+オブジェクト移動の位置が大きくズレるのと
スマホから閲覧した際に「画面が下へガクリ」と下がる現象が起きてしまいます
よってこの位置がベストではないにしろ ベターであろうという私の判断です
記事の直下などに移動されます方はこの点を踏まえた上でお願いします

ページ遷移+オブジェクト移動についてさらに言及しますと
今回ナビゲーションが上部固定です
固定ナビの場合 このページ遷移+オブジェクト移動 の位置合わせにちょっとテクニック要るんですね
せっかく苦労して合わせても FC2検索バーをご利用の方はズレます
ナビと検索バーは衝突しないように(重なったりしないように)調整していますが
検索バー表示状態の方はページ遷移+オブフェクト移動の位置が合いません
なので非表示推奨 (*´・ω・)
表示状態の方 非表示の方と切り分けることも可能ですが
そんなことやってるとソースがごった煮になってしまいますので 見た目の重なりだけ調整してあとはスルー (´・ω・`)


● 非公開ブログの方
新着・関連記事ともに表示されませんので以下を目印に削除
Ctrl+Fキー検索

注)新着サムネイル, 関連記事サムネイル 共に不要の方この行削除

上記は
<head>〜</head>

htmlソース内の 場所としてはかなり上の方にあります
続きまして

注)関連記事RSSサムネイル 不要の方ここから削除

上記はhtmlソースの中ほどに
続きまして

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

こちらはhtmlソース内 下の方にあります
3箇所 を削除(あるいはコメント化)です


● いずれか一方だけ削除されます方
<head>〜</head>
内にあるものは消さないように注意してください
この箇所は双方を使わない場合にのみ削除です


関連記事はFC2の個人設定で記事の近接箇所に挿入することができますが(サムネイルは無し)
RSSの方と内容が被りますので どちらか一方を非表示 あるいは 削除した方が良いかもしれません
個人設定で「0件」を選択するとFC2の関連記事は非表示になります
一応スタイリングは以下のように設けてあります ↓
お好きな方をお選びください



消すべき箇所はきちんと消してくださいね
特に無駄なJSはページ表示を遅らせる原因になります



スライド画像変更


変更されます方は以下を目印にガイドに従ってください

注)スライド最初の画像

最初の1枚だけはCSS指定が必要ですのでご注意を
縦横比不問 最適サイズは 長辺1500px以上が望ましいです
画像の容量削減は事前に行ってください

デフォルト画像は全てpublic domain(著作権不在)ですのでそのままお使い頂いても問題ありません
で この箇所今回は上にテキストを載せたり リンクを設けたり といった仕様にはしてありません
単なるスライドです(笑)



サイドメニューについて


プラグイン1と2は右サイドメニューに
プラグイン3はフッター上サイドメニューにそれぞれ表示されます
スマートフォンでは 右サイドメニューがドロワーになります ので
折りたたまれたくないものについては プラグイン3への登録をお願いします



No image画像変更


こちらのテンプレートではトップページにNo image画像は出てきません
記事内の然るべき箇所に画像が存在しない場合には トップページの該当記事は「画像なし テキストのみ」になります
No image画像が使われる箇所は

・検索結果
・関連記事サムネイル
・新着サムネイル

上記3種ページです
Ctrl+Fキー検索

注)No image画像 RSS新着・関連記事サムネイル

注)No image画像 検索結果

上記2箇所を目印にガイドに従ってください
最適サイズは 長辺600px程度(高解像度ディスプレイを考慮)

デフォルト画像 (縮尺掲載 600✕375 12KB public domain)





ドミナントカラー


以下が基本色調です
数字の部分だけを抜き出してCtrl+Fキー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください

例) 51,51,51



rgb(30,32,35) 全体背景色
rgb(210,210,210) 個別記事本文以外テキスト基本色
rgb(209,161,98) 基本リンク色
rgb(48,41,43) トップページ メイソンリー背景色, ドロワー背景色(スマホのみ), ページ送りホバー時背景色, フッター上プラグイン3背景色 など



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


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




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

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

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

プロフィール画像などを設定する場合は以下の通り

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


サンプル



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





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


いつもありがとうございます ヽ(´▽`)/



---------- 2016.7.31 追記


関連記事サムネイル公式実装に伴う表示切り替え


リリース時は関連記事リストをRSSを利用して取得していましたが
FC2が公式にサムネイル対応しましたので RSSの方から切替を致しました
表示場所や見た目など若干変更となりますので
既にご利用中で 見た目の変更が望ましくない方は再DLをお控えください

変更後のスタイリングは以下の通りです


● 関連記事サムネイルを「表示する」設定の場合



● 関連記事サムネイルを「表示しない」設定の場合



No image画像変更は Ctrl+Fキー検索

/* 注)No image画像 関連記事サムネイル */

上記を目印に画像アドレスを差し替えてください
関連記事

Comments 115

きろろ  
おぉぉぉ~~~

データ、復旧できたんですねぇ~
公開されるのが楽しみです!(^^)!
明日、申請ですね!

暑苦しい?
そうかな?
真っ黒な背景じゃないところが、おしゃれではありませんか!
はやく、申請通らないかなぁ(*^_^*)

2016/07/06 (Wed) 00:46 | EDIT | REPLY |   
Akira  
To きろろさん

これから最終チェックして申請しますー。
チェックしても何故かしらどこかしらミスるんですよね
何かお気づきの点があればみなさん教えてくださいね ( ̄∀ ̄;)

2016/07/06 (Wed) 21:09 | EDIT | REPLY |   
-  

初めまして、とても素敵なデザインですね。FC2での公開はいつ頃になりますでしょうか?楽しみに待ってます(^ ^)

2016/07/08 (Fri) 07:20 | EDIT | REPLY |   
sakura  
突然失礼します

テンプレートを探してこちらにたどり着きました。
早速質問ですが、このテンプレートは有料ですか?
どこからダウンロードできるか教えてください。
一目惚れして有料でもお借りしたいと思っています。
よろしくお願い致します。

2016/07/08 (Fri) 20:45 | EDIT | REPLY |   
きろろ  
早速お借りしました~~~~

やっぱり、これ素敵です!
思っていた以上に早く公開されて、嬉しいですよぉ。

3箇所ですよね? 削るところは?
今のところ、不具合は見当たりませんね。

素敵なテンプレートをありがとうございます<(_ _)>

2016/07/09 (Sat) 00:09 | EDIT | REPLY |   
きろろ  
連投ですみません

フォントサイズの変更についてうかがいたいのですが……。

CSSのbodyからフォントサイズを変更すると、すべてに反映されちゃいますよね?
すべてとは、サイドメニューのことです。

記事のテキストだけ、フォントサイズを大きくすることは可能ですか?
無理ならいいのですが、もし可能でしたらお願いいたします<(_ _)>

2016/07/09 (Sat) 00:50 | EDIT | REPLY |   
Akira  
To Mochaの件 匿名さんとsakuraさん

ありがとうございます (o'д`o)ゝ

審査通過しておりましたので、記事中にDLリンクを追加しておきました。
今回早かった (´・ω・`)
よろしくお願いします

sakuraさん

FC2ブログを開設されている方でしたらどなたでも無料でお使い頂けます。
(暴力的な内容・バイラルやまとめ等他人の著作を侵害する内容 を除く)
重ねてありがとうございます

2016/07/09 (Sat) 00:52 | EDIT | REPLY |   
Akira  
To きろろさん

早かったですね。今回は(笑)
審査の曜日ぐらいは決めて頂けると助かるんだけどもね ( ̄∀ ̄;)

はい。きろろさんの場合は3箇所の削除です。
何か不備がありましたら教えてくださいね ^^;

2016/07/09 (Sat) 00:54 | EDIT | REPLY |   
Akira  
To きろろさん

サイドメニューの方は切り分けしてあるので大きくなりませんです。
その部分を変更して影響が出るのは、サイドメニュー以外の部分。
トップページ含む。

個別記事の文章だけ大きさを変えるには、

.inner-contents {
color: white;
}

というのがありますので、以下の通り追加修正。

.inner-contents {
color: white;
font-size: 数値px;
}

で、このままだと後付要素(タグや関連記事リストなど、ブログ設定から描画するもの)も連動して大きくなってしまいます。
Ctrl+Fキー検索。

.relate_ul, .tb_ul

この括りの「下」に以下を追加。

.relate_ul {
font-size: 数値px;
}

上記が関連記事の文字大きさ。
続きまして検索。

.tags

この括りの内容を追加修正して以下の通り。

.tags {
margin: 70px auto 30px;
position: relative;
z-index: 1;
font-size: 数値px;
}

もちろん両方とも記事内テキストと同じで良ければ修正の必要なしです。
よろしくお願いします ( ノ゚Д゚)

2016/07/09 (Sat) 01:16 | EDIT | REPLY |   
きろろ  
To Akiraさん

早速のレクチャーありがとうございます!(^^)!

即行で直せました。
いつもいつも、わがままばかり言って申し訳ありません<(_ _)>

なんせ、年寄りが集うブログなので
老眼で……
字が小さいと見えないの……

って、人ばかり(爆)

いつもbodyで直していたのですが、
今回、bodyのサイズ表記が変わっていたの、教えていただいた方が
確実かなと思いまして。

ありがとうございました<(_ _)>

2016/07/10 (Sun) 00:30 | EDIT | REPLY |   
ねこみ  

匿名でコメントした者です。早速お借りして使わせて頂いてます(^^)ほんと素敵なテンプレートです。探し求めていた物!という感じです。ありがとうございます。

ひとつ質問宜しいでしょうか?当方の端末の問題かもしれませんが、トップページの表示がどうも重いので、トップページのスライド画像を消してみようかと思うのですが、どこを削除すればいいのか分かりません(゚o゚;;もし宜しければご教授下さい。

2016/07/10 (Sun) 06:19 | EDIT | REPLY |   
Akira  
To きろろさん

できたようで安心しました。
今回はショートハンド(一括指定)で書いてます。
難しいかもしれないのでなるべくショートハンドは避けてましたけども、最近はみなさんとてもお勉強してらっしゃるから良いかな、と思って ^^;

作業お疲れ様でした

2016/07/10 (Sun) 08:07 | EDIT | REPLY |   
Akira  
To ねこみさん

ありがとうございます

スライダー削除手順

① htmlソース内 Ctrl+Fキー検索

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

この「下」にある該当部分を削除します(上記スクリプト含まず)
わかりにくいかもなのでスクショでご確認ください ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sakujobubunnth__zps3lqqudcm.jpg

ここまでの作業で「スライド」の機能はなくなり、最初に指定した画像だけが静止画で表示されます。
続きまして静止画も削除して綺麗に失くす場合。

② CSSソース内 Ctrl+Fキー検索

<div id="header-image-container">

上記を目印にスクショの通り該当箇所を削除。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sakujo2th__zpsjqhred4b.jpg

これで表には出てこなくなりますが、CSSソースに余分な指定が残ります。
気になるようでしたら以下の手順をどうぞ。

③ CSSソース内 Ctrl+Fキー検索

#header-image-container

上記を目印にスクショの通り。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sakujo3th__zpswasydmke.jpg

お手数おかけします。
よろしくお願いします。

2016/07/10 (Sun) 08:25 | EDIT | REPLY |   
ねこみ  
To Akiraさん

早速の対応ありがとうございます!うまく削除する事が出来ました。やはりスライドが重かったようで、さくさく表示されるようになりました。ご丁寧に説明頂きありがとうございました(*^_^*)とても分かりやすかったです。

2016/07/10 (Sun) 09:12 | EDIT | REPLY |   
Akira  
To ねこみさん

上手くいったようで良かったです。
こちらこそありがとうございます

2016/07/11 (Mon) 21:29 | EDIT | REPLY |   
sakura  
お返事ありがとうございます

ダウンロードさせて頂きました。
このハイレベルで無料なんて信じられないi-1
良いテンプレートをありがとうございます!

2016/07/11 (Mon) 22:07 | EDIT | REPLY |   
Akira  
To sakuraさん

ありがとうございます
励みになりますですー ╭( ・ㅂ・)و ̑̑

2016/07/12 (Tue) 01:37 | EDIT | REPLY |   
hige  
おぉっ

おっしゃれなデザインですねぇ。
右端の Next Belong もいいですねぇ。

Akira 先生のテンプレートはとても洒脱で、びっくりしてます。

でも、私には似合わない。ので、色々質問して技術を教えて戴いているだけで、申し訳ありません。

2016/07/13 (Wed) 21:43 | EDIT | REPLY |   
Akira  
To higeさん

おはおーございます (´ぅω・`)

ご自分で気にいったのをお使いになるのが一番でございます。
どうぞお気になさらず

2016/07/14 (Thu) 06:55 | EDIT | REPLY |   
さき  
記事の並び方が

こんばんは^^いつもお世話になっております。
実は、今日の17時過ぎだと思うのですが、記事がタイルを散りばめたように、
表示されなくなってしまいました。
現在は、左一列に縦に日付順に並んで、表示されている状態です。
この現象が起きているのは、私だけでしょうか?(汗)

追加したスプリクトなども、確認しながら行いました。
今日の15時半ころまでは、記事も普通にタイル状に表示されていました。
その他、HTMLも、CSSも何も変更しておりません。
休日なのに、すみませんです。

2016/08/06 (Sat) 19:03 | EDIT | REPLY |   
Akira  
To さきさん

いつもありがとうございます

Mac/ Windows環境 双方
(OSは共に最新, WindowsはAnniversary update「前」)
・Microsoft Edge
・IE11
・Google Chrome
・Firefox
・Opera
・Safari
・Vivaldi
で確認しましたが、特に問題なくレイアウトされているようです。
FC2サーバーの一時的な不調か、あるいは個人環境に起因しているかもしれません。
現在も続いているようであれば、

① パソコンのクリーニング及び再起動
② ブラウザのクッキーやキャッシュのクリア

をお試しください。
それでも改善が見られないようであれば、お使いのOS名とバージョン、ブラウザ名とバージョンを併せてお伝えくださいませ。
お手数おかけします。
よろしくお願いします。

2016/08/07 (Sun) 00:56 | EDIT | REPLY |   
さき  
原因が判明いたしました

Akiraさん、大変お忙しいのに、お騒がせいたしました。
原因が分かりました!
私がブラウザを、いつも中型表示にしているのですが、
誤って、「横幅をドラックして、縮め過ぎていた」のが原因でした。
最大化表示にしたら、通常どおりに戻りました(^^ゞ
とんでもなく、お騒がせしてしまって、
大変、申し訳ございませんでしたm(__)m
ごめんなさいです。

因みに、私はWindowsで、Firefoxの最新Verで、
いつも利用させていただいております^^

2016/08/07 (Sun) 01:36 | EDIT | REPLY |   
Akira  
To さきさん

縦並びになるブレイクポイントのサイズまで画面縮小されていた、ということでしょうか。
良かったですー(笑)
レスポンシブですので画面幅に最適なレイアウトに並び替わります(笑)

いずれにしろ大事なくて安心しました。
お疲れ様でした

2016/08/07 (Sun) 01:48 | EDIT | REPLY |   
ぬこぬこ  
No title

こんにちわ。
お世話になります。

・記事本文の内側の部分を(カラム?)、
スマホで表示した場合に、横幅が狭いので幅一杯にしたいんですがどこをいじればよいのでしょうか?

・日付けなどの手書きフォントをすべて手書きでないフォントに戻したいのですがどこをどういじればよいのでしょうか?

・ヘッダーの画像が変わっていく機能をまるごと外すにはhtmlとcssのどこを削れば良いのでしょうか?

・上の部分と記事最後部にあるSNS共有ボタンを消すにはhtml内で解説されている行を消せば良いのだと思いますがなるべくタグを減らしたいので下記をザックリと削って大丈夫でしょうか?

上部のSNSボタンhtml

<div id="sns-navi"><!-- SNSリンク # をアドレスに置き換え 不要行は削除 -->
<ul>
<li><a href="#" target="_blank" class="c-facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
<li><a href="#" target="_blank" class="c-twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
<li><a href="#" target="_blank" class="c-pinterest"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a>
<li><a href="#" target="_blank" class="c-google-plus"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
<li class="sp-hide"><a href="<%url>?xml" target="_blank" class="c-rss"><span class="fa fa-rss" aria-hidden="true"></span></a>
</ul>
</div>

上部のSNSボタンcss

/* SNS on header */
#sns-navi {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}

#sns-navi ul {
display: inline-block;
}

#sns-navi ul li {
display: inline-block;
margin-left: 8px;
text-align: center;
}

#sns-navi ul li a {
display: block;
width: 25px;
height: 25px;
line-height: 25px;
background-color: rgb(209,161,98); /* 注)ヘッダー内SNSアイコン背景色 (approx)Apache */
border-radius: 50%;
color: white;
}




下部のSNSボタンhtml

<footer class="entry-footer">
<ul class="inner-footer-sns">
<li><a href="//www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" target="_blank" title="Share on Facebook" class="c-facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
<li><a href="//twitter.com/intent/tweet?url=<%topentry_link>&text=<%topentry_title>" target="_blank" title="Tweet on Twitter" class="c-twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
<li><a href="//jp.pinterest.com/pin/create/button/?url=<%topentry_link>&description=<%topentry_title>" target="_blank" title="Pin it on Pinterest" class="c-pinterest"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a>
<li><a href="//plus.google.com/share?url=<%topentry_link>" target="_blank" title="Share on Google+" class="c-google-plus"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
<li><a href="//admin.blog.fc2.com/control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" title="Only for admin" class="c-pencil"><span class="fa fa-pencil" aria-hidden="true"></span></a>
</ul>
</footer>



下部のSNSボタンのcssについてはどこからどこまで削れば良いのかよくわかりませんので教えて頂けると幸いです。

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

2016/08/13 (Sat) 17:53 | EDIT | REPLY |   
Akira  
To ぬこぬこさん

ありがとうございます (o'д`o)ゝ
そしてお返事大変遅くなりました (*_ _)

① 記事内側の余白を無くしたい

記事アウトラインとテキスト(記事本文)の間の余白を失くす、ということで合ってますでしょうか。
アウトラインの「内側」か「外側」かによって処理が違ってきます。
内側である、と仮定して進めますね。

● トップページメイソンリーのpadding調整
Ctrl+Fキー検索

.context {
padding: 20px 30px;
}

20pxが上下余白、赤字の30pxが左右余白です。
30の数字を小さくするとアウトライン〜テキスト間の距離が小さくなります。
0で余白なし。
余白なしにされますとアウトラインとテキスト(特に左側)がぴったりくっつきますので非常に読みづらくなります。
適度な調整をお願いします。

● 個別記事のpadding調整
検索

.main-body

2箇所ヒットします。
最初のものが基本設定で、パソコンなど比較的大きな画面の時の設定です。

padding: 30px 40px;

同じく40pxが左右余白です。

2箇所目は

padding: 30px 20px;

こちらは一般的なスマートフォンの画面サイズの時の設定です。
20pxをお好みの数値へ変更。
スマホのみ調整される場合にはこの2箇所目だけを調整してください。

==========

② 手書きフォント削除

Ctrl+Fキー検索

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Give+You+Glory%7CRoboto:400,700">

htmlソースの<head>内に1箇所あります。
赤字部分を削除。
続きまして検索

'Give You Glory'

CSSソース内に14箇所あります。
まず一番最初に出てくるものに対して修正

font: bolder 24px/1.3 'Give You Glory', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif'; text-align: center;

赤字部分を

Roboto

に変更。
残りの13箇所は font-family あるいは font の行ごと削除。

例)
font-family: 'Give You Glory';

末尾のセミコロンまで削除です。
他の文字列を巻き込んだり、記号を残したりされませんようご注意ください。
そして恐らく文字を変更されますと、大きさが気になるかもしれません(大きいと思います)
その場合には各々対象箇所に

font-size: 数値px;

を追加してください。

==========

③ スライド削除

こちらについては当該ページのコメント欄をご参照ください。
2016/07/10 (Sun) 08:25 の私のコメント、ねこみさんへの返信です。
(ぬこぬこさんのコメントの11個上です)

===========

④ SNSボタン削除

SNS関連は全て削除、ということでよろしいでしょうか。
スクショでご確認ください。

★ ヘッダーSNSリンク

Ctrl+Fキー検索。htmlソース内

<div id="sns-navi">

該当部分スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/298rdfuaath__zpswxkrpvok.jpg

★ 記事下SNSリンク

検索。htmlソース内

<footer class="entry-footer">

該当部分スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a9refaowfoth__zpsz4vlfq9i.jpg

★ 共通CSS

検索

/* SNS on header */

スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/w934r8fapth__zpsa1oa2xne.jpg

検索

.entry-footer

スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/ca9rawoth__zps58z8ofz4.jpg

===========

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

注) 記事下のSNS関連を削除されますと、記事編集のボタンも失われますのでご了承くださいね。
(もちろん管理画面からは編集可能です)

2016/08/16 (Tue) 16:35 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

お忙しい中、どうもありがとうございます!

① 記事内側の余白を無くしたい

記事アウトラインとテキスト(記事本文)の間の余白を失くす、ということで合ってますでしょうか。
アウトラインの「内側」か「外側」かによって処理が違ってきます。
内側である、と仮定して進めますね。

内側は無事にできました、ありがとうございます!

① 外側のやり方も教えてほしいです!

他にも教えていただきたいことはいろいろとあるのですが、
一度にお聞きするとややこしくなってしまいますので、今最優先で直したことがいくつかあるのでそれを教えて欲しいです。

②トップページなどの記事一覧のカラム内で、
上から画像→タイトル→本文概要の順となっていますが、それを

タイトル
 ↓
画像
 ↓
本文概要
にしたいのですが、ここはどうも複雑なシステムのようで変数を移動させてみても位置を変えることができませんでしたのでやり方を教えてほしいです。

③記事本文の左右に発生する半透明・半円状の(次ページ、前ページ)リンクを消したいのですが、どこをいじれば良いのか教えて下さい。

今日は以上3点教えて頂けると助かります。
よろしくお願い致します。

2016/08/25 (Thu) 17:34 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん 追記

追記

①と③に関してはスマホ画面を前提としての話です。
書き忘れていました。申し訳ございません。

2016/08/25 (Thu) 17:40 | EDIT | REPLY |   
Akira  
To ぬこぬこさん

お疲れ様です ( ゚Д゚)ノ

① アウトライン外側の余白
Ctrl+Fキー検索

@media screen and (max-width: 568px) {

このすぐ「下」に以下を追加

#primary {
width: 100%;
}

.element-item {
padding: 0 0 20px;
}

先回のカスタマイズで内側のpaddingをどうされたか、私ではわかりませんので、
調整の具合は自己責任でお願いします。

=======

② トップページの記述順変更
Ctrl+Fキー検索

<div class="context">

このすぐ下の

<h2 class="element-title">
から
</h2>
までをカット(Ctrl+X)

カット作業を行なった箇所の上の方、近接にあります

<div class="element-wrapper">

のすぐ「下」にペースト(Ctrl+V)
このままだとタイトル上に余白なしですので、それが気になるようでしたら
先ほどペーストした
<h2 class="element-title">
に対し
<h2 class="element-title adjust-class">
と修正を加え、
CSSソースの末尾に

.adjust-class {
padding-top: 数値px;
}

追加してください。
で、タイトルと画像も近いと感じて画像とタイトルの間に余白が欲しくなるかもしれませんが、これ以上なにか加えると全体レイアウトがおかしくなって負のスパイラルに突入します(笑)
なのでこの部分はご自身の責任でお願いしますね。
(というか基本的に全て自己責任ですが(笑))

========

③ 半透明ページ送りなし

これは「スマートフォンでは無し、PCでは有り」ということでしょうか。
このページ送りは『カテゴリ間移動』であることをご理解頂いた上で
Ctrl+Fキー検索

★ スマホのみカテゴリ間移動ページ送りなし
Ctrl+Fキー検索

if(_ua.Mobile){

このすぐ「後」に続けて(改行は絶対入れないでください)以下を追加。

$('.side-pager-left,.side-pager-right').css('display','none');


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

2016/08/26 (Fri) 10:06 | EDIT | REPLY |   
-  

失礼します。
カテゴリ親や子をクリックすると上部へ強制移動するのは仕様でしょうか?
親をクリックした際には移動せずそのまま、子をクリックするとTOP画の見えない記事一覧
もしくは、そのカテゴリの新しい記事へ直接移動するようにしたいのです。

理由としては、
・画像が場所を大きく取っている為、移動した際に記事一覧が見えない。
・子を折り畳むので、親をクリックして移動するのは不味い。
とりあえず以上ですかね。
このサイトのカテゴリのようにするのも良い手だと思いますが、直感的な操作でとなると
やはり無い方が良いのではないかなという判断に至りました。
ご指導のほど、よろしくお願いします。こちらでも分かる範囲で調べてみますが、分からない確率が高いと思うのでorz

2016/09/01 (Thu) 04:26 | EDIT | REPLY |   
Akira  
To -さん

ちょっとよくわからないのですが、
① ページ遷移+オブジェクト移動
のことでしょうか。それとも
② ページ内移動
のことでしょうか。

> カテゴリ親や子をクリックすると上部へ強制移動

該当ページ(カテゴリ一覧)への遷移が行われますので、移動した先で表示されるのは画面最上部です。

> 子をクリックするとTOP画の見えない記事一覧
もしくは、そのカテゴリの新しい記事へ直接移動

FC2ではそういった仕様は用意されていません。

====

もしかして、カテゴリのプラグインを「展開型」にしたい、ということなんでしょうか。
テンプレートとプラグインとは無関係で、私ができることは
公式プラグインを問題なく表示・動作させる」ことだけです。
共有プラグイン・外部サービスプラグイン・ユーザーさん自作プラグインなど、公式以外のサポートは致しかねます。
そしてプラグイン改造のお手伝いもできません。

現在使用されているプラグインがどういったものかは分かりかねます(URLを頂いていないので目視確認もできません)が、
仮に「展開するはずの動作がページ内移動(画面上部)になってしまう」
ということならば、恐らくそのプラグインは展開動作に
<a>
というタグを割り当てているかと思います。
テンプレート内にページ内スムーススクロールが導入されている場合(ページtop, bottomなどのボタン)はどのテンプレートであっても衝突が起こります。
展開を<a>で行わないタイプの共有プラグインをお選びになると良いと思います。
特定プラグインにテンプレートの仕様を合わせる、といったことは致しかねますので、その節はプラグインの製作者様へ直接お尋ねくださいね。
よろしくお願いします。

2016/09/01 (Thu) 10:22 | EDIT | REPLY |   
-  

何度も失礼します。
自分でもよく分からないのですが、他サイトで同様に試してみました。仕様のようですね。すみません。

展開の件は、やはり競合していたんですね。勉強になりました。
となるとTOP画像の表示を変更するか、言われるように他テンプレートを使うしかないようです。
少し考えてから決めようと思います。丁寧に対応していただき、ありがとうございました。

2016/09/01 (Thu) 16:33 | EDIT | REPLY |   
Akira  
To -さん

お役に立てず申し訳ございません。
はい。比較的早い時期(2013年あたり)にリリースされているhtml4テンプレートだと干渉しないものもあるかと思います。
(<a>のrel属性によるトリガー操作はhtml5では廃止です。というかrelの値が固定化されています)
あるいはJS及びJquery自体が導入されていないか、
スムーススクロールが導入されていないものなど。

よろしくお願いします。

2016/09/01 (Thu) 16:48 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

どうもありがとうございます^^

ご無沙汰しておりますが、放置していたわけではなく、一ヶ月半もテンプレをいじくり回していました。

①②については無事に修正できました。どうもありがとうございます!
③については、あれはカテゴリのページ送りだったのですね。。

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

今回お聞きしたいことなのですが。。

・ブログタイトルは「文字が下から上に上がって来るアニメーション」になっているんだと思いますが、

この機能の削除+そのアニメーションの為に作られている、「ブログタイトル下の、空白スペース」の削除がしたい
 

のですが、特殊な設定なので断念しました。

・それに付随して、フォントもデフォルトにしたいのですが、
自分でcssをいじってみたのですがこれも難しすぎて調整を断念しましたので、ご教示願いたいです。

お手数掛けますがよろしくお願い致します。

P.S. そういえば…
先程INDEX見たら20文字ぐらいしか本文が表示されないんですがなぜですかね?
表示文字増やせないんですか?

2016/10/06 (Thu) 16:00 | EDIT | REPLY |   
Akira  
To ぬこぬこさん

こんにちは ( ゚Д゚)ノ

① アニメーション削除
Ctrl+F(Windows)/ Command+F(Mac) キー検索

#blog-title

この項目の以下の部分を削除。

-webkit-animation: slideInUp 1.5s;
animation: slideInUp 1.5s;


② ブログタイトルとサイト説明との距離調整

同じく#blog-title の項目

margin: 0 auto 30px;

赤字部分の数字を小さく、あるいは 0 に変更。

=======
③ フォントをデフォルトに

ブログタイトルが日本語であるのか英語であるのか、あるいは混合であるのかによって指定の仕方は変わります。
デフォルトフォントというのが記事内で使われるフォントと同じであるならば
#blog-title の項目

font: bolder 24px/1.3 'Give You Glory', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', 'serif';

赤字の部分を

'Roboto', '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';

に変更。
Robotoは欧文フォントですので不要ならば削除 ('Roboto', 後ろのカンマも消してください)
日本語フォントはデバイス依存ですので必ずMac・Windows双方のフォント指定が必要です(該当が無い場合はOSかブラウザのデフォルトになります)
また、OSのバージョンによってバンドルされるフォントが異なりますので、ぬこぬこさんが見ている「デフォルトフォント」が指定第一候補のものであるのか、第二・第三…であるのかにもよります。
初期設定の日本語フォントは記事内のフォントとは異なります。
ブログタイトル --- 明朝
記事内 --- ゴシック

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

2016/10/06 (Thu) 17:30 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

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

後日試してみますね。

お忙しいところありがとうございます!

2016/10/06 (Thu) 18:59 | EDIT | REPLY |   
Akira  
To ぬこぬこさん

はい。ちょっとフォントまわりややこしいですがガンバです

あと、ごめんなさい。
INDEXの文字数のこと伝え忘れました。
全記事リストで本文を出力する変数があるのですが、文字数は20文字までと決まっています。
40バイト、と考えた方が良いかもしれません。
日本語=2バイト
欧文=1バイト

2016/10/06 (Thu) 19:09 | EDIT | REPLY |   
riz-papa  
モカのスライド画像の変更をしたいのですが…

はじめまして
一目で気に入って一度アップしたのですが、スライド画像だけ差し替えたいと思ったのですが、知識が乏しくどこをどう変更したらいいか解らずにいます!

お時間ある時でかまいませんのでアドバイスよろしくお願いしますm(_ _)m

2016/10/07 (Fri) 18:23 | EDIT | REPLY |   
Akira  
To riz-papaさん

ありがとうございます

スライド画像の変更については記事に記してある通りなのですが、わかりづらい点がございましたでしょうか。

注)スライド最初の画像

でCtrl+F(Windows)/ Command+F(Mac) キー検索されまして、該当箇所のガイダンスに従って画像アドレスを差し替えるだけです。
そしてガイドにあります通り、CSS内容も修正をお願いします。

注)スライド最初の1枚

がCSSの対象箇所です。
よろしくお願いします。

2016/10/08 (Sat) 15:13 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

毎度お世話になります。

ブログタイトルとサブタイトルのスペース調整でバランスが良くなったのでアニメーションとフォントは今のところそのままでやってみています。

今回はh2をh1に変更したいのですが、
変更してしまっても大丈夫でしょうか?
プログラム的に。(SEOについては大丈夫です)

というのもインデックスやらサーチがh2になっているようですのでいじったらおかしくなるかなと。。

h2を全て変えるとh1が4つになってしまうのでそれはまずいと思いますので
ブログタイトルと記事タイトルをh1にしたいのですが。。。。。

プログラム的に問題ないですか?

それともインデックスとかサーチでおかしくなるんでしょうか?

よろしくお願いします。

2016/10/10 (Mon) 16:06 | EDIT | REPLY |   
Akira  
To ぬこぬこさん

要素名にダイレクトにCSSを振っていることはありませんので大丈夫のはずです。
id, class名は触らないようにお願いします。

私のテンプレではarticle, section などのhtml5新要素を利用しています。
これらは見出しが必ず必要ですので、ページによってはindexやsearchを大見出しのアウトラインにし、中にh1が入ってしまうカタチになりますのでご了承くださいね。
(validateでは減点対象かと思います)

2016/10/10 (Mon) 17:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/10 (Mon) 17:47 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/10 (Mon) 17:52 | EDIT | REPLY |   
Akira  
To 見出しの件 内緒さん

まず、有償サポートの件、そしてメールでのご相談の件は忘れてくださいね。
私はプロではありませんので有料で請け負うことはありません。
金銭授受はプロとアマの大きな一つの線引きです。
メールについてはどなたとも等しくEメールでの書簡を交わすことはありません。

=====

> 自動的に見出し番号を振れるcss

「見出し番号」というのはcounter-incrementプロパティのことでしょうか。
このプロパティは見出しにしか使えないという性質のものではありません。
見出しで全て行おうと思うと全体の定義がおかしくなってしまいます。
適宜ulあるいはol要素で補うのが通常の使い方です。

h要素には1〜6しかありませんし、記事の中が見出しだらけではGoogle botも意味を拾うことができなくなってしまいます。
見出しはページの一部分だけに係る要素ではなく、ページ全体の構成に影響します。

また、CSS装飾の中でもとりわけ「独自クラス」と呼ばれるものは、別のテンプレートに変更すると全て無効化されます。
該当CSSをしっかり管理し、その都度移植するというメンテナンスの手間も発生します。
現在取り組んでおられる:before, :after 両疑似要素による装飾は「独自クラス」の性質と同じものです。
実際にはクラス名ではありませんが、h2やh3といった要素自体に装飾を施そうとしているわけです。
要素名は装飾のためにあるわけではなく、ページ内の構造として最適と思われるものをコーダーが記述していくことになりますので、全てがご自分の都合に合わせてコード組みが為されるわけではありません。
個人の使い勝手や装飾ではなく、構造を司るのがhtml要素の役割です。
つまり「要素名に直接装飾を振るのはよろしくない」ということです。
強いて言えば引用を意味する blockquote ぐらいでしょうか。
要素に直接CSSを与えても問題がなさそうなのは。

自動連番で混乱するようであれば記事を書かれる際にご自分で番号を記入した方が遥かに合理的にも思います。
「自動」の利点は「作業効率」にもあるわけですが、扱う人間自体が混乱すれば作業効率は逆に大きく落ちてしまいます。
ともかく装飾に操られないことです。

一旦投稿します。

2016/10/10 (Mon) 20:43 | EDIT | REPLY |   
Akira  
To 見出しの件 内緒さん②

counter-incrementを操るには入れ子の状態なども把握しなければいけません。
要素が一旦結ばれると次からはまた初期化(また1からカウント)される点などなど。

記事を書かれる際に例えば

<h2 class="renban">見出しテキスト</h2>

このようにクラスを振るのが面倒で嫌だ、という解釈でお間違いないでしょうか。
装飾というのは基本的に「ID名」「Class名」で以って行うものです。
簡単だからという理由で<hx>に直接装飾をしてしまうために現段階での問題が出ています。

<h2>見出し</h2>

<h2 class="renban">見出し</h2>

クラス名無しの<h2>とクラス名ありの<h2>
両者とも同じ定義を持つものですが、class名にrenbanを持つものだけがCSS装飾を受ける。
これがCSSの正しい使い方です。
要素にダイレクトに装飾を行なってしまっては、その要素を使っただけで当然全て同じ見た目になってしまいます。

まずはこのあたりの考え方を改められるか、あるいは要素名だけで装飾を行うことが最優先であれば、テンプレート構造自体を見直す、という作業が必要かと思います。

ここまでよくお読み頂いた上で。
せっかく書いたCSSをそのままお使いになるには

.inner contents h2:before

に修正されることです。
書いた記事は
.inner contentsというブロックの中に収納されます。
.inner contentsの中にあるh2に装飾、という指定の仕方をすれば、そのブロック以外の箇所に存在するh2は装飾の影響を受けません。
これも1つのやり方です。

==========

別件です。
現在の状態ですと、スマホからの閲覧が困難に思います。
画面両端に空白がありませんのでボタン類も操作しにくいですし、なによりテキストが読みづらいです。
画面幅いっぱい使いたいお気持ちもわかりますが、多少の余白はやはり必要だと思います。
これはアドバイスとして。

2016/10/10 (Mon) 20:53 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

いろいろとありがとうございます。
何度も読み、いろいろ考えましたが…、cssの知識が0なのもあって
ずっと考えても頭の中がぐちゃぐちゃであまり理解できていないですが…

もちろんcssは都度移植するつもりではいました。
もし次に変えるとしたらワードプレスなどになるでしょうし…

それも見越した上でh2などの要素自体に直接装飾しておけば、
例えば修正が必要になったときにcssだけいじれば全ての修正が完了すると考えていたのですが…
やはりそれでは、その要素を使っただけで全てのその要素に装飾がかかってしまうという問題が出てきたりしますよね…
他にも後々問題が出て来る可能性があるってことですよね。(推測するに)


別にhtmlで記述するのは問題ないんです。
コピペツールに登録して都度タグを貼り付けることができるので。

では<h2 class="midasi">見出しテキスト</h2> とクラスを振って、
cssにて.misasiで装飾をして、

そして、上記の<h2 class="midasi">が存在する場合に、
そこにcssで連番を振っていく様にはできないんでしょうか?

しかし、もし振れたとしても、
.midasiにビフォーとアフターを使用している問題で
簡単には行かないような気がします。

もしできるのなら教えて頂きたいですし、
できないのならば、番号振りは諦めます。

よろしくおねがいします。

2016/10/11 (Tue) 11:56 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

お手数をおかけしますし、諦めることにします。
コメントは無視して下さって結構ですよ。

2016/10/11 (Tue) 13:23 | EDIT | REPLY |   
Akira  
To ぬこぬこさん

諦める、というのが最終的なご決断ということでよろしいでしょうか。
そうですね。counter-incrementは「使い方が難しいプロパティ」と言えると思います。
htmlとCSSは切り分けて考えるべきもので、
まずは見出しやリストのhtmlがどういう約割でどんな初期値になるのかを把握。
続いてCSSのcounter-incrementがどういう役割でどんな初期値になるのかを把握。
それからさらに:before, :after疑似要素CSSで装飾、という三段階が必要です。
初期値を知らずして装飾はできませんし、見出しはhtmlだけでも見た目が変化する要素の代表です。(位が下がると文字も小さくなります)
中に収まるであろうulやolなどのリストも同様。(リスト系htmlは特に難しいです)
見た目だけを整えたい時に気軽に使えるhtmlタグではないということです (´・ω・`)
理想と現実との折り合いがなかなか難しいかもしれませんが、頑張ってくださいね ^^;

2016/10/11 (Tue) 14:12 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

そうですね、あまり複雑な仕組みにしてもわけがわからなくなってしまいますからね…

身の丈に合ったカスタマイズやるしかないということですね。

お手数かけまして申し訳ないです。

ありがとうございます^^

2016/10/11 (Tue) 18:09 | EDIT | REPLY |   
Akira  
To ぬこぬこさん

はい。大事なのは記事の内容ですから、あまりカスタマイズに時間をかけるのももったいないような気がします。
お疲れ様でした (●'0'●)/

2016/10/12 (Wed) 16:34 | EDIT | REPLY |   
Akira  
To きろろさん

> トップページ文字数を制限したい件

htmlソース </body> の直前に以下を追加。

<!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area--><!--not_search_area-->
<script>$(function(){var e=40;$('.context p').each(function(){var a=$(this).text();var b=a.length;if(b>e){var c=a.substring(0,e);var d=c;d+='<span class="omit">…</span>';$(this).html(d)}})});</script>
<!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->

赤字の箇所で文字数を指定してください。
よろしくお願いします。

2016/10/19 (Wed) 15:25 | EDIT | REPLY |   
きろろ  
To Akiraさん

ありがとうございます<(_ _)>
無事、できましたw
これで、手抜き記事が書ける! ゲホッゲホッ

2016/10/20 (Thu) 01:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/30 (Sun) 20:45 | EDIT | REPLY |   
Akira  
To Mochaの件 内緒さん

ありがとうございます e-257

まず、お互いの用語の認識に食い違いがあるようなので統一しましょうか。
「折りたたみ」という表現ですが、私の認識では
クリックしたらその場で展開する要素」だと捉えています。
内緒さんの言われる「折りたたみ展開」というのは、クリックしたらページ遷移が行われて個別記事へ移動することを指しておられますでしょうか。
いわゆる「追記」「read more」「続きを読む」ですかね (´・ω・`)
そして恐らく「全文表示」が好ましい(好みである)、とおしゃっているのではないかと推測しております。
Mochaは「要約表示」、記事本文がそのままの形ではなく最大200文字(全角)の抽出文です。
私のテンプレで言うと、
全文表示 --- Arrival, Belong, GirlOnWire, Valparaiso など
要約表示 --- Mocha, Colony, Corridor など

=======

Mochaは要約表示で「メイソンリーレイアウト」です。
メイソンリーというのは各記事をレンガ状に配置するデザインのことです。
記事内の以下の項目
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
こちらについては総じてお断りしています。
なぜならhtmlソースをまるごと書き換えるぐらい大変な作業になるからです。

記事の折りたたみ = 追記以降はページ遷移で個別記事へ誘導
折り畳まずに全面表示 = 要約表示ではなく全文表示に変更

という意味であるのならお断りせざるを得ません。
個人カスタマイズされるとしても相当大変だと思いますー (´・ω・`)
申し訳ございません (_ _;)

2016/10/30 (Sun) 22:03 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/31 (Mon) 03:08 | EDIT | REPLY |   
Akira  
To Mochaの件 内緒さん

恐れ入ります。
お気遣いもありがとうございます

2016/10/31 (Mon) 17:55 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/23 (Thu) 19:50 | EDIT | REPLY |   
Akira  
To Mocha search consoleの件 内緒さん

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

> ①リストタグを使うとスマホでリストの・や番号が表示されません

当該記事内の更新履歴の通り、2016.9.9にリストアイテムを調整しています。
できれば最新版へのアップデートをお願いします。
再DLが困難な場合にはCSSソース末尾に以下を追加。
初期値への引き戻しを行ってください。

/* back to default */
.inner-contents ul {
margin: 1em 0;
padding-left: 40px;
list-style-type: disc;
}

.inner-contents ol {
margin: 1em 0;
padding-left: 40px;
list-style-type: decimal;
}

ご指摘の entry-content というクラス名を私は用いていませんので、inner-contents の間違いでしょうかしら。
現在のページ中にも見つかりませんのでhtml要素を内緒さんが追加したということでもなさそうです。
それとも単に「記事のコンテンツ部分」を表現するために用いた語句でしょうか。
ちょっとよくわからない。ごめんなさい ^^;


> コンテンツの幅が画面の幅を超えています〜

search consoleのモバイルフレンドリーの査定はページ単位ですので、そのページURLを教えて頂かないことには私にできる対処はありません。
デフォルトの状態で何かがはみ出しているといったことはありませんし、正規アドレス(トップページ)が「モバイルフレンドリーです」と認められているのであれば、記事単位で発生している警告のはずです。
なのでどのページで出るのかを教えてください。
この警告は一度出ると修正しても出たままですので、再度Google側に申請を行って解除してもらうことになります。
(クリック送信するだけです)

> クリック可能な要素同士が近すぎます〜

こちらはCtrl+F(Windows)/ Command+F(Mac)キー検索

.dropmenu > li > a

この中の
display: block;

height: 100%;
を削除してください。
その代わりパソコンのマウスによるクリックはちょっとやりづらくなるかもです。

========

search consoleを管理されているようなので、私のカスタマイズカテゴリの一連の記事をお読みいただいた方が良いと思います。

● ブログタイトルに <h1>が指定されていない
● ブログロゴにalt属性が無い
● レスポンシブではみ出す原因とその対処法
● html5テンプレに於いて廃止タグの利用(centerなど)

などが該当です。
SEOは気にしない、ということであればスルーで良いんだけれども、内緒さんの場合は違いますよね ^^;
ブログロゴについては、大抵の場合閲覧者は直感的に「ブログタイトル」をクリックしますので、そこへリンクが付いていないというのはちょっと問題かもしれません (´・ω・`)
いずれにしてもh1, alt属性などがありませんから修正必須です。
記事タイトルにh1を用いたので外した、ということであれば、ページ共通でのh1は評価対象から除外されますので問題にはなりません。
(寧ろブログタイトルにh1指定が無い方が問題)

で、コンテンツ超過のページについては恐らく記事内の「何か」が悪さをしているはずですが、ご自身で導入されたものについては私の方でお手伝いは致しません。
なのでヒントというか原因特定だけになるかと思います。
よろしくお願いします。

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

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

2017/03/24 (Fri) 18:01 | EDIT | REPLY |   
Akira  
To Mocha Search consoleの件 内緒さん②

お疲れ様です (o'ω')ノ

> さきほどサーチコンソールにて「今でもそのページに問題が存在しているかモバイルフレンドリーで調査」というリンクがあったので調査し、モバイルフレンドリーだと表示されました〜

これは既にお伝えしたように、一時的にでもコンテンツ超過があり、その間にインデックスされてしまったものについては継続して警告が出されます。
現在の状態を確認して「モバイルフレンドリーである」という評価が出されたのであれば、その結果をGoogleに送信して評価の再訂を待ちます。
つまり現時点では「問題はない」ということです。
過去にあったよ、ってことですね。

> ブログタイトルをh1にした方がいい理由

ブログタイトルはいわば「看板」です。
お店を出す際にスポットライトを照らすのはどこでしょうか。
そしてこちらも先に述べましたが、共通で設けられているh1については評価対象になりません。
このサイトさんがわかりやすいです ↓

検索サポーター様
http://s-supporter.hatenablog.jp/entry/seo-h1-after-main-contents

そもそも論になりますが、現在ではh1は大きな評価対象というわけではないです。
ユーザーの「読みやすさ」にとって必要である、と考えた方が良いと思います。
Googleのマット・カッツさんなど複数設置どころか順番でさえ「そんなに気にしなくて良い」って言ってます(笑)
でもそれってGoogle botがいかに優れているかってアピールでもあるような気がする(笑)

結局のところhタグの使い方などは情報が錯綜していて、それぞれが独自の判断を下している場合が多いです。
私は私で「納得できる」と思ったものを選んでいるわけで。
だからどうしても演繹法になってしまいがちです。

Wikipediaの例が出ましたので、ちなみにGoogleのofficialページは<h1>なし<h2>から、というものが多いです。
Google Ad関連のページはサイト名が<h1>になってます。
Googleはたぶんですね、画像(ロゴ)に対してh1は使わないという方針みたい。
Wikipediaもそれに倣ってるんじゃないかと思ってみたり。
参考までに。

最後に持論です。
私いつも思ってるんですが、視聴覚障害をお持ちの方の「音声読み上げ機能」ってあるじゃないですか。
たぶんアレとGoogleの bot って同じ感覚だと思うんです。
例えば、「見だしジャンプ機能」
見だしだけを読み上げて、気になるものだけを聞く。
その時にブログタイトルってやっぱ必要じゃないですか?
どのブログを読んでるのか、という情報は。
あとやっぱりhtml構造もそうです。
左にあるものから順番にコーディングしていくのがhtmlの「書き順」としては正しいのですけれど。
左サイドメニューのテンプレートをhtmlで左から書いてしまうと、音声読み上げではメインのコンテンツよりもサイドメニューの方を最初に読むわけです。
いつまで経ってもメインを読んでくれない、そしてページを変えてもまた「コメント」やら「最新記事はこれとこれで…」というところから始まる。
だから「サイドメニューを先に書いてはいけない」という理屈にもなるのではないかと。
Google botは
「htmlの前の方にあるものをより重要視する」= 「サイドメニューから先に書いたらアカン」
というのはこの感覚かと思うんです。
行き詰まったら音声読み上げをイメージしてみると良いのかもしれません。
これあくまでも自論・持論です。

2017/03/24 (Fri) 20:03 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/24 (Fri) 22:02 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/24 (Fri) 22:21 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/24 (Fri) 22:34 | EDIT | REPLY |   
Akira  
To Mocha Search consoleの件 内緒さん③

大変でしたね ^^;

> それとも完全に戻したほうが良いのですか

いえ。そのままでも良いと思います。
私なら直しません(笑)
ここはGoogleの中の人、カッツ氏を信じましょう ╭( ・ㅂ・)و
修正に時間をかけるならばコンテンツの充実に力を注いだほうが有益とも思います。

> リストのマークの左側の余白に押されまくって文章が右によっている

これが一般的なブラウザの初期値なんです。
でも初期値にしなければいけないわけではありませんので、左の余白を調整するのであればul, ol各々

margin: 1em 0;
padding-left: 40px;

この数字を調整してください。
ちなみにpadding-leftは指定せず(削除)に、margin: 1em 0; を

margin-left: 1.5em;

にすると大体記事の左辺と同じ位置にリストマーカーが出ますね。
そして上下の余白も出ません。
上下空白が出ないのはテンプレートのリセットCSSの効力です。
心配であれば

margin: 0 0 0 1.5em;

にされたほうが良いかもしれません。
初期値は上下余白が1em(文字一つ分)、0が左右余白無しを意味しています。
ここはお好みで調整してください。

> PCのクロームで見た場合、アイキャッチ画像の隅に黒線が出る画像がちらほら

こちらは一言で言うと、Chromeのグリッチです。
奇数widthでabsolute要素との位置が1pxずれます。
長く引きずっているものですが、直らないね ^^;

音声読み上げ説に賛同していただいて嬉しいです(笑)
誰もそんなこと言ってないし書いてないのであくまでも自説ですけれど。
感覚的にはそんなところじゃないかと思うんです(笑)

2017/03/24 (Fri) 22:42 | EDIT | REPLY |   
Akira  
To Mocha Search consoleの件 内緒さん④

> 今では見出しの重要性はほとんど無くなってるって解釈でいいんですかね~?

そうかもしれないですね。
ただGoogle様本人のページなんだからどうとでもなるだろう、ってのもあります(笑)
私的には「同一アウトライン内では入れ子構造に準ずる」というのが一番良いのではないかと思います。

多少の溜飲は下がりましたでしょうか。
こちらこそお世話になります。
作業お疲れ様です

2017/03/24 (Fri) 22:45 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/25 (Sat) 00:55 | EDIT | REPLY |   
Akira  
To Mocha リストの件など 内緒さん

こんにちは (●'0'●)/

> リスト行の下が、一行分? 開いてるようなのですが〜

旧投稿画面をお使いでしょうか。
旧投稿画面ではdisplayの初期値がblockのものを改行して書くと一行空いてしまいます。
(div, table などが 代表的なblock で、リストの ul, ol その子要素にあたる li もブロックです)

<ul>
<li>リスト1
<li>リスト2
<li>リスト3
</ul>

(liの終了タグは省略しています)
こういう書き方だとダメなんですね。
blockは前後に改行を含んでいるので行が空いてしまうんです。

<ul><li>リスト1<li>リスト2<li>リスト3</ul>

こうして横繋ぎで書くと空白行はできません。
リスト内容が多いと記事のメンテナンス性は落ちます。
それがお困りの場合には、
① 新投稿画面のHTMLモードを使う(ソース内改行しても空白行ができません)
② 改行の扱いを「HTMLタグのみ」に変更する。
このいずれかが対策です。
②を選択された場合には、通常の文章の末尾にも任意改行の
<br>
を記す必要が生じます。
一長一短(笑)

=======

語彙のことはわかりませんが、私に文才は無いですよ ^^;

2017/03/25 (Sat) 14:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/25 (Sat) 14:54 | EDIT | REPLY |   
Akira  
To Mochaの件 内緒さん

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

いやいや。買いかぶりです ^^;
私はテンプレートにしてもブログにしても、収益を… という頭は全く無いんですよ (´・ω・`)
テンプレについてはお金を頂けるレベルだと思っていない。
自分で言うのも残念だけど(笑)

はい。こちらこそお世話になります。
作業お疲れ様でした

2017/03/27 (Mon) 20:54 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/09 (Sun) 13:37 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/09 (Sun) 14:00 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/09 (Sun) 14:04 | EDIT | REPLY |   
Akira  
To CSSファイルの件 内緒さん

あらら。お困りですよね。
ちょっとごめんなさい。
私これから外出しなくちゃなので、しばらくお待ちください。
ホントごめんね (´・ω・`)
1〜2時間かかるかも。
相方の用事だから車中からなんとかお返事できるかもだけど。
申し訳ないです。しばしの辛抱を (*>д<)

2017/04/09 (Sun) 14:10 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/09 (Sun) 14:23 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/09 (Sun) 14:36 | EDIT | REPLY |   
Akira  
To CSSファイルの件 内緒さん②

遅くなりましたー (*_ _)

キャッシュから内容が取得できた、ということで大丈夫でしょうかね。
セーフ(笑)

robots.txt をユーザーが編集することはできないですよ。
disallowはルートディレクトリに置かなければいけないので、FC2ブログ運営にしか許可されていません。
そして noindex などとバッティングさせてはいけませんので、かなり特殊な場合でなければ使えません。


ごめんなさい。これは既にご存知のようでした。
失礼致しました。

常に最新のhtmlとCSSのファイルをお取り置きしておくか、複製を取っておきましょう (●'0'●)/

2017/04/09 (Sun) 16:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/09 (Sun) 17:03 | EDIT | REPLY |   
Akira  
To シェアボタンバルーンの件 内緒さん

この件については私がお手伝いすることはできませんので、ヒントだけ。

tableというのはセルの垂直位置合わせが middle になるのが初期値です。
ですから、ボタンの高さ・ボタンとバルーンとの距離(空白)・バルーンの高さ
この全てが全く同じでないと絶対に揃いません。
現在では(TweetとLinked in)のボタンの高さが1px違います。
まだ加える予定であれば、その全てのボタンの高さを揃える必要があります。
が、それは難しいでしょうからバルーンとの距離で調整されると良いと思います。

シェアボタンを全て純正のものにしようと思うので苦労します。
何故なら各社の純正ボタンはそれぞれ得手勝手なサイズや形状です。
得手勝手という表現はおかしいかもしれんけど(笑)
バナーなんかは国際規格がありますので簡単に揃えられますが、SNSシェア純正ボタンというのはそうはいきません。
上の内容と同じになりますが、揃えるのならば「高さ」の方を揃えます。
そしてセル(td)のvertical-alignにtopかbottomを指定。
私なら bottom にします。

個人的にはシェア数はそのうちどこも提供しなくなる気がしています。
FBもいつまで表示できるか (´・ω・`)
そしてFC2ブログがSSL化した際には全てリセットされますので最優先事項では無いのではないかなぁ、と。

2017/04/09 (Sun) 18:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/09 (Sun) 19:09 | EDIT | REPLY |   
Akira  
To シェアボタンバルーンの件 内緒さん②

> SSL化した際には全てリセットになるんですか(;´д`) 〜

はい。残念ながら (´・ω・`)
SNSシェアに用いるOGPってご存知ですよね。
このOGPは絶対パスが必須なんです。
//vanillaice000.blog.fc2.com/ --- 相対パス
http://vanillaice000.blog.fc2.com/ --- 絶対パス
http: か https: かのスキーム指定が必ず要りますので、ここが変更された際には別のカウントになります。

> そういえばfc2ブログ、ssl化ってされるんですかね?〜

こればっかりはわかりませんが、「やらないとマズいだろう」という感じですね。
ブラウザ警告も厳しくなっていくようですし。
これまではChromeだけが「保護されていない通信」という警告を表示していましたが、
Firefoxでもそれが実装されました。
Firefoxはhttpスキームのサイトに対して機能を削減するとまで発表しています。
んでもって、閲覧者もこの警告が出るページは徐々に開かなくなると思います。
となるとサービス存亡に関わる事態ですので、半年かかるか1年かはわかりませんが「せざるを得まい」という感じでしょうか。
遅くとも年内には切り替えないとマズいと思うなぁ (´・ω・`)
はてなブログさんの動向も気になるところですね。
たぶんかなり厳しい状況になっていると思うので。
(はてブ連携の点で難しそう)
できればはてなさんに先んじてFC2ブログ頑張れ (=`ェ´=;)

ただなんか見てるとですね、一般ブログでは
「Ameba, Yahoo!, FC2はAOSSL化をするらしいので〜」
ってことになってるんですよ。
たぶんFC2オフィシャルのお知らせを見てのことだと思うのだけれど。
でもFC2ブロガーはその意識が無いですよね(笑)
えー。アクセス解析とかだけ? (´・ω・`)
と思ってる。
でも他サービスの方はそう思ってない。
格差の不思議(笑)

2017/04/09 (Sun) 20:02 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/10 (Mon) 04:59 | EDIT | REPLY |   
-  
承認待ちコメント

このコメントは管理者の承認待ちです

2017/04/10 (Mon) 17:11 | EDIT | REPLY |   
-  
承認待ちコメント

このコメントは管理者の承認待ちです

2017/04/10 (Mon) 17:11 | EDIT | REPLY |   
-  
承認待ちコメント

このコメントは管理者の承認待ちです

2017/04/10 (Mon) 17:12 | EDIT | REPLY |   
Akira  
To FC2ブログSSLの動向の件 内緒さん

ごめんなさい。私内緒さんのコメント見落としてました。
あっぶねー (´・ω・`)

> fc2も収益源のアダルト分野を断たれて存続が危ぶまれるのではないかと心配〜

ですよねー(笑)
なんかもうポリスメンの威信をかけて「お前ら常に監視してるからな。」って感じ。
既に3度のタイーホですか。FC2さん (´・ω・`)
カリビアンなんとかも、なるほどの「共犯タイーホ」ですよね。
もう国外から一歩も出るなよって思う(笑)

もし断たれたら…。
今のFC2ブログは良い感じに「放任」だと思うんですよ。
アダルトの管理についてじゃなくて、一般ブログについて。
稼ぎどころは大人向けコンテンツ、みたいな確たる指針があるじゃないですか(笑)
それが断たれたら、他サービスみたいに
「稼ぎどころはページビュー稼げるやつに便乗」商法に切り替えるかもしれないですね。
エグい引き抜きやってるLivedoorとか、ユーザーの差別化に必死なAmebaみたいに。
ってゆーかさ。一般ブロガーさんを「オフィシャル」「公認」とか仕分けしすぎだよ。
FC2ブログは今のところそういった差別化はやってないですよね。
ボチボチ更新、ゆっくり更新のブロガーさんが蔑ろにされるのは嫌だなぁ (´・ω・`)

人間のそっち系の欲ってキリがないので、FC2はそのあたりを上手く利用して、かつ合法に、上手に運営されることを願う(笑)


* 不適切投稿をくぐり抜けてようやく投稿できた(笑)

2017/04/10 (Mon) 17:12 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/11 (Tue) 06:32 | EDIT | REPLY |   
Akira  
To FC2の件 内緒さん

トラフィック自体はマンモス級だと思います(笑)
サーバーの保持は巨額だと思いますが、広告料はそれを上回る巨額かと。
相当稼いでいると思われ (´・ω・`)

ある日突然ブツっと消滅というのは無いと思います。
身売りは無いとは言い切れませんよね。
FC2のシステム全般、喉から手が出るほど欲しいでしょう。
LI○Eとか。
引き抜いて潰しにかかるか吸収するか。
LI○EとLi○○do○○と2つ抱えてますが、LI○Eが発展途上なので吸収できたら超美味しいと思います。
身売りされたら現在のような放任の心地よさは無くなると思います。
そんなのやだー (´・ω・`)

2017/04/11 (Tue) 12:55 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/11 (Tue) 22:14 | EDIT | REPLY |   
-  
承認待ちコメント

このコメントは管理者の承認待ちです

2017/04/12 (Wed) 08:28 | EDIT | REPLY |   
ぬこぬこ  
To Akiraさん

そもそもあれがマ ○ コだってわかるかな…(;´д`)
不正なキーワードで弾かれたからスペース入れて投稿しなおし笑

2017/04/12 (Wed) 08:30 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/12 (Wed) 08:33 | EDIT | REPLY |   
Akira  
To 吹き出しの件 内緒さん

> 画面幅が広いと、〜なんか気持ち悪いです〜

そうですね。ちょっと見辛いかなぁ、という印象です (´・ω・`)
文字数に関わらず吹き出しが常に横100%になっているのも一因だと思います。
ヒント

方法①
width: 100%;
max-width: 600px;

上記のようにブラウザ幅が広い時の横幅を制限。
19%取っているmarginも不要だと思います。

方法②
display: inline-block;
を指定。

こちらにされる場合には外回りにもう一つアウトラインが必要です。
例)
<div style="text-align: left;">
<div style="display: inline-block;">吹き出し内容</div>
</div>

上記を採用される場合には吹き出しは文章内容量に左右されるようになります。

=====

マツコだってことはわかりますよ(笑)

2017/04/12 (Wed) 22:39 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/13 (Thu) 08:04 | EDIT | REPLY |   
Akira  
To 吹き出しの件 内緒さん②

> 以前リストマークが画面外にはみ出していたように、はみ出してしまう〜
> リストみたいに勝手に空白ができてしまっているんでしょうか〜

勝手に空白、ということはないです。
marginへの19%というのは絶対値ではありませんので、画面幅やブラウザ幅を関連とした相対値です。
画面320pxでの19%と画面1400pxでの19%では全く違いますよね?

アイコンのサイズは80px固定ですので、marginを19%取らずとも100〜120px程度あれば十分かと思います。
100pxならば80pxがアイコン、残り20pxが吹き出しの出っ張り部分及びアイコンとの距離です。
まずは吹き出しの左辺の位置を確定し、そこから何px左 or 右に移動させるかを決めますので、100pxのmarginであれば左側アイコンならばafter疑似要素への位置指定は

left: -100px;

という指定になります。
marginで取った100pxとabsoluteでの左移動で差し引き0、つまり記事アウトラインの左辺とアイコンの左辺が同じになります。

=====

得意というよりも、入ってます。
いわゆる1/4というやつです (´・ω・`)

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

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

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

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

2017/04/15 (Sat) 16:28 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/15 (Sat) 16:33 | EDIT | REPLY |   
Akira  
To Pタグの件 内緒さん

こんにちは ( ゚Д゚)ノ

> 何かfc2側で変更が行われたとしか考えられない〜

FC2の仕様変更は何も無いですよ。
そもそもFC2がpタグに何かしらの指定をしたところで各テンプレートに反映させることはできません。
FC2が操作できるのはブログ個人設定で表示させる一部の要素に対するスタイル程度です。

内緒さんの過去の書き方と現在とでは書き方が変わってますよ。
2件目(古い方)はp同士の間に<br>が入っていますのでかろうじて重なってはいませんが、基本的に<br>での空白調整は完璧なものになり得ません。
ですからmargin-bottomで取っておくか、padding-bottomで取るか。
after疑似要素で顔アイコンを配置していますが、これはabsoluteという絶対配置を用いてます。
absolute子要素というのは親がその子の高さの認識を行いません。
なので重なります。

参考
http://vanillaice000.blog.fc2.com/blog-entry-500.html

参考(こちらは<br>での空白調整に対する啓蒙)
http://vanillaice000.blog.fc2.com/blog-entry-502.html

参考記事は主に「横」について書いていますが、「縦」も同じことです。
例えば親の高さが50pxだとします。内緒さんの内容だと吹き出しの中身を含んだものが親です。
子のアイコンはabsolute配置で高さが80px固定ですので、次の要素(次の吹き出し全体像)は80pxの直後から配置して欲しいところですが、absolute子要素は高さが出ませんので実際には親要素の高さであるところの50pxの直後からの配置になります。
なので重なってます。
これはabsoluteの特性ですので、ある意味「正しい表示」ですよ。
正しくCSS解釈が行われれば現状のように重なった状態になります。

ソース内容を拝見して。
やっぱり根本的にスタイリングができていないように感じる ^^;
widthの80%も修正が入ってないのでアイコンは右に寄りますよね。
そして相対指定ですから画面幅に左右されます。
そして今回のような要素同士の重なりを避けるためには、現状のソースを利用するのであればmin-heightの指定が必須です。
そして<br>を用いた空白調整は行わないことです。
あとはrelativeとabsoluteの関係も危ういなぁ、と。
時間があればこのタイプのソース組みを記事にしますが、時間が取れるかどうかはわかりません (▪⌔▪)

-------- 追記

独自クラスのセレクタ指定ですが、現在だと

.entry-content .r-fuki {
内容
}

のような形になってますよね。
これやらない方が良いですよ。

.r-fuki {
内容
}

だけで十分です。
CSSにはspecificityという概念がありますが、クラス名が他要素と被っていないのならば段階を踏んだ指定はなるべくしない方が良いです。
管理が大変になりますし読み込みが遅くなります。
たぶん段階的セレクタ指定(specificityが高い・強制力が強い)を用いているので文字列が長くなってますよね。
それが混乱する一因にもなっていると思います。
クラス名は被りがなければダイレクト指定で十分です。

box-sizing: border-box;
-webkit-box-sizing: border-box;
も既にテンプレート全体で指定済みなので不要ですが、指定をしておきたいのであれば順序が逆です。

-webkit-box-sizing: border-box;
box-sizing: border-box;

ベンダープレフィックスの付いたものを「先」に書きます。
優位プロパティは最後に書かないと、CSSの基本は「上書き」です。

2017/04/15 (Sat) 16:40 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/15 (Sat) 18:30 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/15 (Sat) 18:36 | EDIT | REPLY |   
Akira  
To 吹き出しの件 内緒さん

記事を書きましたのでそちらをご参照ください。

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

ちょっとやっつけ感がありますけれども (´・ω・`)
急いでやったのでお許しを(笑)

変更点
・ widthが常に100%取らないように
・ transformのrotate数値を変更(135°も傾けずとも45°でOKです)
・ 全体像が記事幅と同等になるように
・ 後続要素(次の吹き出し)と重ならないようにmin-heightを設定
・ htmlのアウトラインを追加(ご希望を叶えるためには外回りにひとつ追加した方が良いと思います)

などなどです。
あとは変更すべき点があればコメントを見ながら頑張ってください。

======

ベンダープレフィックスの件ですが、

-webkit-
-moz-
などが前にくっついているもの、これがベンダープレフィックスです。
製品リリースメーカー = ベンダー
プレフィックス = 前置詞
これらはCSSの正規実装よりも「以前」に各ベンダーが独自にというか先んじて導入していたもので、いずれは正規のものに統合されます。
現在では統合がかなり進んでいますので、ベンダープレフィックス無しで動作する場合がほとんどです。
border-radiusやbox-sizingなどがそうです。
その場合、古いバージョンのブラウザ向けにベンダープレフィックスを保険として書いても良いのですが、CSSは上書きが基本ですので、
正規が先に書いてある = 正しく描画される
ベンダープレフィックス付きが後に書いてある = 描画し直し
ということになりますので、無駄です。
この辺のことはデザイナー分野ですので、内緒さんはともかく記事を書かれることに専念された方が良いと思う ^^;
あまりスタイルにこだわり過ぎても、結局一番大切なのは「記事内容」ですから、見た目に専念しすぎて息切れするようなことになりませんよう。

2017/04/16 (Sun) 00:37 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/16 (Sun) 08:22 | EDIT | REPLY |   
Akira  
To 吹き出しの件 内緒さん

何故Pタグひとつで出来るかと言うと、それは「横幅に緻密な制御をかけないから」です。
でも現状内緒さんの問題点はこの「横幅の制御ができない」点にあるわけですよね?
横に80%を指定したら常に80%です。
また、%を取りやめてpx指定してしまえばレスポンシブですからどこかポイントではみ出します。
それを解消したいのならば制御用アウトラインの追加は必須です。
ですから元のソースが「画期的」なわけではないんです。
可能なことが削られているから簡素なだけで。
「用法・目的が違う」だけですよ。投稿時の面倒は辞書登録を利用すればそれほど苦にならないと思うのですが。
そしてpタグにこだわる必要もありません。
pタグはテンプレートによっては初期値適用になって(公式テンプレなんかはそうかもしれない)、上下に大きくmarginが付いてたりします。
ですから汎用性の高いdivを利用しています。
元の内容が

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

ですよね。
それが

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

になっただけなのですが、そんなに難しいことでしょうか。
そしてそれぞれの記事内容とアウトラインの数を計算してください。
1会話
元のソース
1+1 = 2
私のソース
2
貼り付けられている記事内容
3+1=4

2会話
元ソース
1+1+1 = 3
私のソース
2+2 = 4
貼り付け記事
3+3+1 = 7

3会話

1+1+1+1 = 4

2+2+2 = 6
記事
3+3+3+1 = 10

簡素なhtmlで行いたい --- 横幅制限は諦めてこれまでのソース利用
横幅を制限したい --- 外回りに一つアウトラインを追加

元ソース・今回貼り付けた記事内容 = 横幅に制限はかけられません(おおまかな制限はOK、ただしスマホの狭い画面でもその制限が適用される。widthが80%ならば記事幅から20%削られる。)
私のソース = 横幅に制限をかけられます (スマホでは記事幅いっぱいまで広げられる)
3者のソースコードはそれぞれ視点が違います。
relative, absoluteを利用しているところは共通ですが、着地点が違います。
私のソースの目的は最初に書いてある通り「横幅が『常に100%(あるいは90%や80%』にならない」ことですので、当然お二方のソース内容とは異なります。
目的が違うのですから。

お話の発端が「記事幅が広いと全部横いっぱいになって気持ち悪い。」
だったと思うのですけれど。
元のソースが画期的なのでそのまま使いたい、そしてスマホ画面で狭いのが困るのでなんとかしたい場合の別の方法は
ブレイクポイントをご自分で設定してください。

@media screen and (max-width: ●●px) {
.セレクタ {
width: 100%;
など
}
}

画面幅に応じてwidthを変更します。
ブラウザ幅が広い時・中間(タブレットなど)・スマホ、といった感じで。
これはこれでかなり面倒かつ詳細な設定が必要ですが。

貼り付け記事の主さんが仰ってますよね。
「極限まで簡単に作りました。」と。
この3コードそれぞれがユーザーの利便性を考慮して極限まで簡単に考えてあります。
これ以上簡単・簡素にするには「機能の削減」しかありません。
そもそもhtmlやCSSは難しいものです。
アウトラインの特徴やルールもあります。
簡単にしたいからなんとかしろと言われても限度ある。
目的・行動・結果のバランスをお考え頂ければと思います。

あとは内緒さんご自身の「簡単なことにこだわるか」「デザインにこだわるか」の選択次第です。
ってゆーかさ。基本、定形で貼り付けるだけじゃないですか(笑)
特に何も考えずに貼り付けるだけ。
考えたのはソース提供してくださっている方々であって、しかもすごく親切に作られていると思いますよ。
お二方共。
ただ「視点」が違うので、内緒さんの視点にかなったものを探す必要は出てきますよ。
で、無理なものは無理なんです。
例えばテキストの位置合わせにしても

<span style="text-align: center;">あいうえお</span>

これなら簡単ですよね?
でもこれはhtml的に無理なんです。効きません。
嫌でも

<div style="text-align: center;"><span>あいうえお</span></div>

こうしないと。
内緒さんが仰っているのはこれと同じです。
それがhtml構文ルールであり、CSSボックスモデルのルールです。
使う・使わないは内緒さんの自由ですので、私としてはこれ以上のサポートはできません。
よろしくお願いします。

2017/04/16 (Sun) 08:45 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/16 (Sun) 09:41 | EDIT | REPLY |   
Akira  
To 吹き出しの件 内緒さん

見辛いのはまぁ、しょうがないですね (´・ω・`)
細かなことをするにはどうしたってhtmlの入れ子も複雑になりますし、CSSも難しくなります。
入れ子が複雑なhtmlを扱うには改行の扱いをhtmlのみにしておくのはもちろんのこと、インデントなども使いこなしてなるべく自分がわかりやすいような内容にしておくことも大事です。
それはユーザーさん自身の仕事です。

clibor便利ですよね。
私は使ってませんが、長男はよく使ってるみたい。

2017/04/16 (Sun) 16:24 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/19 (Wed) 00:42 | EDIT | REPLY |   
Akira  
To 吹き出しの件 内緒さん

既にこのテンプレートの内容から大きく逸脱していますので、以下の記事への移動をお願いします。

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

2017/04/19 (Wed) 18:21 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/22 (Sat) 15:17 | EDIT | REPLY |   
Akira  
To Mochaの件 内緒さん

> Mochaテンプレってhtml5とか、今までとは違うテンプレなんですよね?

今までとは違う、というのは「何と比べて」でしょうか (´・ω・`)
htmlのバージョンが4でなく5ってことですか?
それともFC2ブログで共有されている一般的なテンプレートと比べて特殊かってことですか?

> 自動目次作成機能を実装というのを以前にやってみた〜略〜うまく動作しなかったのです〜

この手のJSで最も気をつけるべき点は
● 対象となるクラス名あるいはID名が合致しているか
● JSに含まれる要素(この場合は hタグ)が指定する側とされる側とで合致しているか
● Jqueryライブラリが重複していないか (記事内コードをコピペするとJqueryが重複します。私のテンプレには既にJqueryを導入済みです)

記事に記載されている注意事項がそのままMochaで導入される際の注意事項ですので、よくお読みになって内容に沿ったJSコードに変更する必要はありますよ。
そして内緒さんが独自に行ったカスタマイズとの照らし合わせも当然必要です。
例えば内緒さんのカスタマイズ後のhは

ブログタイトル = h1
記事タイトル = h1

が確定していますので、単純にJSコードの指定を h1 としてしまえばブログタイトルも記事タイトルも含まれることになります。

どんなコードを記載し、どんな結果になったのか実証サンプルもありませんし、そもそもテンプレートとは全く無関係な内容ですのでこれ以上のアドバイスのしようがありません。
よろしくお願いします。

それより木を見て森を見ずというか。
カスタマイズばかりを気にされているようですが、記事書かなくて大丈夫なんですか?

2017/04/22 (Sat) 15:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/22 (Sat) 19:28 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/24 (Mon) 14:10 | EDIT | REPLY |   
Akira  
To Mocha要素位置変更の件 内緒さん

こんばんは (●'0'●)/
以前に運営ブログでご活躍の記事を拝見しました。
お使い頂き光栄です

> カテゴリとタグを
①FC2公式のツイートボタン、いいね!ボタンの上に表示させる
②関連記事リストの上に表示させる

SNS公式ボタンはブログ個人設定で表示させていらっしゃるかと思います。
FC2ブログの仕様上、個人設定でのSNSボタン表示は「追記」に書かれた文章の「直後」と決まっています。

本文

追記

SNSボタン

関連記事リスト

タグ(テンプレートに記載がある場合のみ)

この順序で固定なんですね。
テンプレートのソース内で「追記」を意味する箇所の直後にカテゴリやタグに係るhtmlを書いたとしても、追記とそれらの間にSNSボタンが必ず割り込みます。
なので簡単にできるわけではありません。

対処法はいくつかありますが…
① SNSボタンのJSを個人設定を利用せずに直接テンプレートに書く + 関連記事リストも個人設定でなくテンプレートに直接書く
② JSを用いて本来は挿入できない位置(今回の場合はSNSボタンの「上」にカテゴリとタグを強制移動させる)

②がおすすめですが、描画自体は遅くなります。
①の場合はかなり大掛かりなカスタマイズになりますので、ここでのご説明は不可とさせてください。
申し訳ないです (*_ _)

======= ②の手順

カテゴリとタグのソースコードはご自分で準備されたものだと思いますので、まずそのhtml内容に改行が含まれないようにしておいてください。

例)

X
<div class="cate">
<span>あいうえお<br>
かきくけこ</span>
</div>


<div class="cete"><span>あいうえお<br>かきくけこ</span></div>

htmlの整理ができましたら、以下の通りJSコードを書きます。

<!--permanent_area-->
<script>
$(function() {
$('ここにhtml内容').insertBefore('.fc2_footer');
});
</script>
<!--/permanent_area-->

上記コードをテンプレートhtmlソースの </body> の直前に記載してください。
くれぐれも該当htmlソース内に改行が含まれないようご注意ください(<br>の記載はOK。キーボード改行のことです。)
SNSボタンの上ならば赤字部分はBeforeのままで。
SNSボタンと関連記事リストの間にするならば赤字部分をAfterに変更します。
一度お試しください。
よろしくお願いします。

2017/04/24 (Mon) 19:27 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/24 (Mon) 21:26 | EDIT | REPLY |   
Akira  
To Mocha要素位置変更の件 内緒さん②

大変失礼しました。
FC2独自変数をご利用でしたよね。
こちらでお試しください ↓

<!--permanent_area-->
<!--topentry-->
<script>
$(function() {
$('ここにhtml内容').insertBefore('.fc2_footer');
});
</script>
<!--/topentry-->
<!--/permanent_area-->

変数が含まれる場合には <!--topentry-->〜<!--/topentry-->が必要です。
で、もしこれで上手く行かないようでしたら
貼り付けた該当ソース内容をコピペ
でお伝えください。
独自変数は一旦描画されてしまうと第三者からは目視確認が叶いません。
なので実際に記載した内容を教えてくださいね。
よろしくお願いします。

2017/04/25 (Tue) 15:43 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/04/25 (Tue) 20:22 | EDIT | REPLY |   
Akira  
To Mocha要素位置変更の件 内緒さん(完了のご報告)

お出来になったということで安心しました。
すぐに気づけば良いものを、二度手間になりましてごめんなさいね。
こちらこそありがとうございます

2017/04/25 (Tue) 23:44 | EDIT | REPLY |   

Leave a reply

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