The other way round

ARTICLE PAGE

Synchronisity

author photo

Byvanillaice (Akira)

Synchronisity


名称 Synchronisity
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時・スマホ --- 下
記事幅 可変 最大1050px (内寸 1010px)
サイドバー幅 固定 300px (内寸 260px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
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.4.17


・ iPhoneでfixedされたinputが固定されないバグのApple修正に伴いhackを削除

参考記事
【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

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



更新履歴 2017.1.25


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

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


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



左手中指の爪が折れて傷心のあきらでございます o(`ω´*)o



しんくろにしてぃ
1月7日 申請致しました。
(synchronicity が正しい綴りですがワザとです)


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
FAQ
DOWNLOAD



仕様
・サイドメニューはボトムアンカー
・トップページ以外は記事を探しやすいリスト表示形式


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


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



サイドメニューのSNSリンクについて

今更な感じはしますが仕様のご説明。
記事にくっついているのは「シェア」してもらうためのシェアボタンです。
サイドメニューに並んでいるのは「自分のページへの誘致」ですので、私の方で事前にURLを入れておくことはできません。

注)#をアドレスに書き換え

上記を目印に、各SNSに割り当てられている項目にURLを入れてください。
デフォルトのままの空リンクですと、閲覧者がクリックした際にページの最上部に移動して「???」となりますので、 必要であればしっかりとURLを記載、不要であれば各行単位で削除してください。
全て不要な場合には

注)サイドメニューSNSリンク不要の方ここから削除

を目印にガイダンスに従ってください。



サイト内検索について

こちらも前作同様iPhoneのバグ(or 仕様)あり。
また、iOS版 Google Chromeブラウザでの挙動の件もありますので以下のリンク先で内容をご確認ください。

Juvenile



No image画像について

関連記事サムネイル (ブログ個人設定)と新着記事サムネイル(公式プラグイン)とは若干違いますのでご説明しておきます。

● 関連記事サムネイルで…

① 本文に画像添付なし・アイキャッチ画像設定なし --- 以下の見た目。



② 本文に画像添付なし・アイキャッチ画像設定あり --- 上記のNo imageは表示されずアイキャッチに指定した画像が優先

アイキャッチ設定が優先ですので、テンプレデフォルトのNo imageが表示されてしまうことはありません。
テンプレデフォルトのNo imageについては「No image」のテキストが付きますが、個人のアイキャッチ設定についてはみなさんが準備された画像の内容に依存します(要するに自動でテキストが載ることはありません)
もちろん個人設定でサムネイルなし・テキストのみ表示にされている方はこの内容については対象外です。

● 新着記事サムネイルは…

① 本文に画像添付なし・アイキャッチ画像設定なし --- FC2専用No image画像(ユニコーン)

① 本文に画像添付なし・アイキャッチ画像設定あり --- アイキャッチ指定画像

新着サムネイルの方へはテンプレデフォルトNo imageは準備していません
(2017.1.8現在 当テンプレを適用中ですが、新着サムネイルプラグインの見た目は私が独自にカスタマイズしたものであり、テンプレデフォルトではありません)

また、リスト表示のページに於けるNo imageは関連記事サムネイルのテンプレデフォルトのそれに倣います。
(もちろんアイキャッチが優先)



ドミナントカラー

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

例) 51,51,51


white 全体背景色
rgb(248,245,238) 各記事ヘッダー背景色, サイドメニュー背景色, No image背景色 など
rgb(177,158,149) 基本リンク色
rgb(51,51,51) Read moreボタン背景色, ページ送り背景色 など



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

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




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

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

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

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

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


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。



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

今回はかなり詳細にカスタマイズのガイドをつけてあります。
事前にご確認頂いてから作業を始めてくださいね ^^;


みなさんいつもありがとうございます ( ゚Д゚)ノ
関連記事

Comments 32

hige  

独り言 テンプレート 引越し中

 今まであれこれ改造してきた私のテンプレート。
 ページのトップ・ボトムへ移動の機能とかを追加したりしてきたのですが,サイドカラムのスクロール(サイドカラムがボトムまで行ったらそこでスクロールをストップしてそのまま表示)でついに挫折。
 そんなのが、こちらの Synchronisity で綺麗に機能してます。
 私はページトップ・ボトムへ移動ボタンを追加した上に、サイドカラムスクロールの新たな機能を足すと不具合が一杯。
 ページボトムをクリックするとサイドカラムが全然スクロールしないとか、サイドカラムに貼られたオブジェクトで、ページトップ・ボトムボタンが隠れてしまうとか。

 テンプレートを変更するには、ちょっと今までの積み重ねてきた設定が多すぎて躊躇していたんですが。
 でも、ついに知力の限界を超えたんでこちらのテンプレートへ引越し中。
 当方、70歳前のじぃじぃなんで、Akira氏製作のこのテンプレートが飾りがなくて引っ越しやすい。色もシックだし。
 さらに、オシャレで可愛い部分とか女の子っぽいと思われる印象を消し去りつつ,なおかつ元のイメージを残しつつ・・・・。
 と、時間はかかりそうですが、多分できるはず・・・・?。

 いつも,Akira氏のテンプレートユーザーではないのに,あれこれコメントを書いてきましたが,多分一ヶ月後にはAkira氏のユーザーに取り込まれている模様!

 ださださな改造になってもAkira氏は許してくれるんでしょうか。

2017/01/30 (Mon) 21:27 | EDIT | REPLY |   

Akira  

To higeさん

そうでしたか。
ありがとうございます ^^;

JSは他のJSとの干渉や、aタグ干渉なんかもありますので結構繊細ですよね (´・ω・`)
はい。カスタマイズはどうぞお気に召すまま(笑)

2017/01/30 (Mon) 23:15 | EDIT | REPLY |   

Akira  

Akira To Synchronisity横幅の件 内緒さん(移動先)

まずご質問内容の整理をさせてください。

① 一行あたりの文字量によっては、右側が大きく空きすぎているように感じるのでなんとかしたい。
② なるべく右に寄せたい、という気持ちから、左側にmarginを設定して距離を設けた。
③ 画面幅が変更になると、やはり右側の空きが気になる。

上記のような解釈で合ってますでしょうか。
間違いがあればご指摘くださいね。

=====

①について

一行あたりの文章が長い場合は気にならないと思いますが、文章ですから適宜改行を設けますよね。
するとテキスト行の横幅が短くなりますので、結果として「右が空いているなぁ」という印象になるかと思います。
で、画面幅が違うと〜とご自分で仰る通り、ブラウザやデバイス自体の横幅が変更されれば、意図的に改行した部分以外でもテキストは折り返します。
でないとはみ出してしまいます。
そういった物理的法則から、テキストの横幅を基準としてブロック(テキストが収まる場所)の横幅を決定する、というレイアウトは成り立ちません。

デフォルトでのメインコンテンツとサイドメニューとの距離は50pxです、というのを踏まえ。
現状ですと
<div style="0 5em">
の指定をされていますよね。
これはコンテンツの上下空白は0、左右空白は5文字分、という指定です。
内緒さんの場合にはコンテンツのフォントサイズをデフォルトよりも大きく変更されていますので(13px→16px)、
左右の幅が16pxの文字5つ分削られているわけです。
従って現状では右側の空白は 50px + 5em(約80px) = 130px の距離ができて、デフォルトよりも離れてしまっています。
右との距離を詰めるところが逆に距離が大きくなってしまいましたね ^^;

そして画面サイズが小さくなってもその空白は変化しませんので、モバイル環境から見ると本文が中央にギュっと縮こまった形になってしまっています。
これはもうスマホからはまともに読めませんので、とりあえずmarginの設定は外してください

左寄せで文章の右側空きが気になる方の基本的対処は「文章をセンタリングする」のが最もバランスが取りやすいのですが、
恐らく内緒さんは文章については左寄せで行いたい、というご希望かと思います。

対処
① デフォルトのメイン・サイド間の空きを50pxよりも小さくする。
② 全体コンテンツの幅を縮小する。

併せて行っても良いですし、いずれか一方だけでも良いと思います。
これらについては単純な理屈で、横幅1000pxのブロック内に書いた横500pxのテキスト行と、横幅600pxの中に書いた横500pxのテキスト行、
比べれば前者の方が「右が空きすぎ。左に寄りすぎ。」という印象が強くなるのは当然です。
内緒さんはパソコン(あるいはタブレット)画面だけで検証されていると思いますが、スマホから見るとテキストは至る所に自動折り返しがかかっていますので、「左に寄りすぎている…」という印象は全くないはずです。
レスポンシブデザインですので、スマホでの表示も考慮してレイアウトする必要があります。

一旦投稿します。

2017/02/20 (Mon) 21:03 | EDIT | REPLY |   

Akira  

Akira To Synchronisity横幅の件 内緒さん(移動先)②

②については
margin設定は外してください。

③について。
やはりお困りの内容を全体的に考えますと、全体幅を縮小されるのが一番良いような気がします。
例えば私のこのページですが、文章はセンタリングせずに左詰めで書いています。
ですがところどころに横幅100%の要素(html構文を載せている黒背景のものや写真類)が点在しているので、全体バランスとして「寄りすぎ」という感覚はあまり無いのではないかと思います。
コメント欄にしてもしかり。
内緒さんの場合にはテキスト一行あたりの分量が比較的短い、というのが事前にわかっているわけなので、デフォルトのような広い記事幅は不要のように思います。
こちらについては大きな決定事項ですので、お返事を頂いてから具体的な修正内容をお伝えしようと思います。

対策まとめ
① 全体幅を縮小する YES/ NO
② メインとサイドの間の余白を削る YES/ NO
③ 文章は左寄せでも画像はセンタリングした方がバランスは良いと思いますが、
<center>
というhtmlタグは既に廃止されていますので使わない方が良いと思います。
画像及びテキストのセンタリングは

<div style="text-align: center;">画像 or テキスト内容</div>

で行ってください。
辞書登録しておくとすぐに呼び出せて便利です。
上記2項目(YES/ NO)にお返事をお願いしますね。

2017/02/20 (Mon) 21:19 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/02/21 (Tue) 19:55 | EDIT | REPLY |   

Akira  

To Synchronisity横幅とレイアウト崩れの件 内緒さん

ちょっと今時間が無いので取り急ぎのお返事です。
レイアウトが崩れていますから早急に直したいですよね(笑)

最新記事とその一つ前の記事の「ブログ村」アイコンのすぐ後ろに余分な</div>が付いてます。
この部位です ↓ (一部伏せておきます)

alt="にほんブログ村 xxx活(x) xxxグへ"></a></div>

これを削除すれば正しい状態に戻ると思いますのでお試しください。
で、2件しか見ていませんので、トップページから各記事を個別に開いて、サイドメニューが下へ落ちている記事は同じミスが見られるはずです。
(とりあえず最新から数えて3件目は正常です)

残りの件は後ほど。
明日以降になったらごめんなさいね。なるべく早くお返事します!

2017/02/21 (Tue) 20:29 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/02/21 (Tue) 20:45 | EDIT | REPLY |   

Akira  

To To Synchronisity横幅の件 内緒さん

レイアウト崩れは直ったようで安心しました

注) 修正箇所が多いので、ひとつひとつ確認しながら注意深く作業されてください。
修正するのはCSSソース(管理画面下段)のみです。htmlソース(管理画面上段)は触りません。

=======

● 全体幅の縮小

まずこちらを先にすすめてくださいね。

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

#wrapper

1箇所ヒットします。
この項目の

min-width: 80%;



min-width: 70%;

変更

---- ②
先程修正した #wrapper のすぐ下に

#main-container

というのがありますので、その項目の

width: 80%;
max-width: 1400px;



width: 70%;
max-width: 1100px;


変更

---- ③
さらにこのすぐ下に

@media screen and (max-width: 1280px) {
#main-container


というのがありますので、その項目の

width: 90%;



width: 80%;

変更

---- ④
その下の

@media screen and (max-width: 1160px) {
#main-container {

の項目

width: 95%;



width: 85%;

変更

---- ⑤
検索。

#primary

4箇所ヒットしますが2つ目が対象です。
こうなってます ↓

@media screen and (max-width: 940px) {
#primary {
margin: 0 auto;
width: 90%;
float: none;
}
}

この項目に一部追加で以下の通り。

@media screen and (max-width: 940px) {
#primary {
margin: 0 auto;
width: 90%;
max-width: 650px;
float: none;
}
}



ここまでが全体幅の調整です。
この状態で一度更新をして目視確認をお願いします。
そして、
「ナビゲーションとのバランスが悪い」
と感じられる場合には以下の手順に進んでください。
ナビバランスに問題がなければ全体幅調整については終了です。

---- ⑥ ここからナビゲーション横幅の調整
検索。

.ordinary-nav

6件ヒットしますが、最初のものが対象です。
この項目の

width: 80%;
max-width: 1400px;



width: 70%;
max-width: 1100px;


変更

---- ⑦
そのすぐ下には .dropmenu-ul というのがあり、その下の

@media screen and (max-width: 1280px) {
.ordinary-nav


の項目

width: 90%;



width: 80%;

変更

---- ⑧
その下の

@media screen and (max-width: 1160px) {
.ordinary-nav


の項目

width: 95%;



width: 85%;

変更

---- ⑨
その下の

@media screen and (max-width: 940px) {
.ordinary-nav


の項目は以下のようになってます。

@media screen and (max-width: 940px) {
.ordinary-nav {
width: 90%;
}
}

上記を下記の通り追加

@media screen and (max-width: 940px) {
.ordinary-nav {
width: 90%;
max-width: 650px;
}
}


全体幅調整は以上です。
あくまでも私の感覚で行っていますので、もっと小さくしたい、という場合には
修正した箇所で % になっている部分を 5% 刻み程度で数字を小さくしてみてください。
一箇所行ったら全部やってくださいね。
全ての%指定部位の数字を変更です。
例えば10%減らすなら全ての%数値から10引いてください。
ただ、パソコン画面が大きい方からするとこのあたりがギリギリな気もしますので、あまりご無理なさらずに ^^;

========

● メインとサイドの距離を詰める

検索。

#main {

2箇所ヒットしますが、最初のものが対象です。
この項目の

margin-right: 350px;



margin-right: 320px;

変更
この部位も最低でも20pxは空けておいた方が良いと思います。
(50pxから30px縮めましたので 20px 空いています)

参考スクショ
* 文字サイズを16pxに変更して行いました。
* 画面幅1366pxでの様子です。

① デフォルト
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/0afcpwath_zpsmozprkz1.jpg

② 修正後(全体幅)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/oaieowath_zpsksj4mheh.jpg

③ 修正後(全体幅+メイン・サイド間の詰め)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/aofjoewath_zpstnywkoku.jpg
(記事幅が②よりも広くなりますのでやらない方が良いかもですが。それか②の手順を%で再度調整。)

=========

● 写真を貼られる際にはやはりセンタリングをおすすめします。
人の視線は大きなオブジェクトをまず認識します。
それが左に寄せられていれば自然と左を意識するようになります。

画像のセンタリング
<div style="text-align: center;"><img src="画像アドレス" alt="代替テキスト"></div>

リンクつきセンタリング画像
<div style="text-align: center;"><a href="遷移先URL" target="_blank"><img src="画像アドレス" alt="代替テキスト"></a></div>

画像センタリング+サイズ指定
<div style="text-align: center;"><img src="画像アドレス" alt="代替テキスト" style="width: 任意の数字px;"></div>

● 記事の幅が狭くなりますので、大判の画像を載せる際が難点になりました。
ここは物理的に共存できない部分ですので妥協をお願いします(笑)

● ひとつ気になる点。
CSSに追加されている内容に

#header-banner {
margin: 0 auto;
padding: 70px 0;
background-image: url();
background-repeat: no-repeat; /*繰り返しの指定*/
background-position: center; /*配置の指定*/


}

というのがありますが、
これら3項目のうち repeat 以外は全て初期値ですので記す必要はありません。
また、background-repeat についても画像が存在しない場合に書く必要はありません。
そして、background-imageの指定を url() と空にして置いておくのはよくありません。
誤動作の原因になります。
元の状態

#header-banner {
margin: 0 auto;
padding: 70px 0;
}

に戻されることをおすすめします。
あるいは追加内容をコメントアウトされるか。

#header-banner {
margin: 0 auto;
padding: 70px 0;
/* 追加内容
background-image: url();
background-repeat: no-repeat; *繰り返しの指定*
background-position: center; *配置の指定*
*/
}

将来的に画像を設定される場合に備えての処置かと思いますが、
実際に作業される時に追加された方が良いですね。

以上です。
手順数が多いですがガンバです ╭( ・ㅂ・)و

2017/02/21 (Tue) 22:42 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/02/22 (Wed) 00:25 | EDIT | REPLY |   

Akira  

To Synchronisity横幅修正の件 内緒さん

お出来になったようで安心しました。
はい。また何かありましたらお気軽にどうぞ。
お疲れ様でした

2017/02/22 (Wed) 01:48 | EDIT | REPLY |   

Akira  

To Subscribe & Followの件 内緒さん(移動先)

> 今まで使っていたテンプレート(他者さんの作品になりますxxxx)が原因だったとは気付きませんでしたが〜

まずこちら、差し出がましいのでご気分を害されたら申し訳ございません。
その製作者さんと個人的交流などは一切ありません、というのをお伝えした上で。
テンプレートがログイン時のアドレスやパスワードなどの表示操作を行うことはありません。
入力項目が自動で表示されるのはキャッシュやクッキーが残っているかどうかによります。
そしてそれらには保持期限がありますので、セッション切れになれば表示されなくなります。
たまたまそのログインの際に期限が切れて空白になったのではないでしょうか。
また、ソフトなどを利用しての「クリーニング」でもキャッシュ・クッキー情報はクリアされます。
ですから「テンプレートが原因」とするには早計かと思います。
くれぐれも、個人的な繋がりはありませんので肩を持つつもりで申し上げているわけではありません。
ご理解頂ければ幸いです ^^;

======

> 拍手ボタンを消されてしまう(見えなくされている)被害〜

こちらについては「トップページ」と「個別記事(パーマリンク)」の区別がご理解頂けていないように思います。
Synchronisityは「全文表示タイプ」のテンプレートですので、このタイプではトップページと個別記事を混同される方が多いようです。

トップページ = 時系列順、複数記事
個別記事(パーマリンク) = 各記事ひとつあたりの専用記事

内緒さんが仰る
「【新着記事】から見ていると拍手ボタンはありませんが、【新着コメント】から見ると拍手ボタンがあります」というのは

新着記事 = トップページ?
新着コメントからの移動 = 個別記事

内緒さんがどのページを指して「新着記事」と称していらっしゃるのかが不明ですが、時系列で複数の記事が並んでいるのであればそれは「トップページ」です。

トップページでも拍手を表示させるには、
環境設定 > ブログの設定 > 記事の設定 > 拍手ボタンの表示位置
を、「追記の」に変更してください。

==========

> Subscribe & Follow の削除

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

<!-- 注)サイドメニューSNSリンク不要の方ここから削除 -->

上記を目印にガイダンスに従ってください。

==========

> その場所に、できれば四角いカレンダーはいつも欲しいと〜

こちらについては私の方でhtml, CSSの追加のお手伝いは致しかねます。
公式プラグインの「カレンダー」をサイドメニューに追加されてはいかがでしょうか。

以上です。
よろしくお願いします (●'0'●)/

2017/03/29 (Wed) 16:54 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/29 (Wed) 19:46 | EDIT | REPLY |   

Akira  

To Subscribe & Followの件 内緒さん②

いえいえー。
私自身が気分を害した、ということはありません。
いろんな事情がおありのようですし、私としては内緒さんがテンプレート作者さんを非難しているとも思っておりません。
こちらこそ言葉足らずで申し訳ないです。

Subscribe&Followの件についてはお任せしますね。
嬉しいお言葉もありがとうございます。
励みになります

2017/03/29 (Wed) 20:35 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/30 (Thu) 00:36 | EDIT | REPLY |   

Akira  

To Subscribe & Followの件 内緒さん③

お出来になったようで安心しました
削除は

注)

でCtrl+F(Windows)/ Command+F(Mac)キー検索するといろいろガイダンスが出てきますので、必要があれば検索してみてください。
作業お疲れ様でした

2017/03/30 (Thu) 03:52 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/30 (Thu) 15:52 | EDIT | REPLY |   

Akira  

To Synchronisityシェアアイコンの件 内緒さん

お疲れ様ですー。

記して頂いているのはCSSですので、修正対象箇所ではありません。
削除対象はhtmlの方です。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

<footer class="entry-footer">

上記を目印に、数行下の

</footer>

までを削除です。

=====

お褒め頂いて光栄です。
ありがとうございます

2017/03/30 (Thu) 23:04 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/31 (Fri) 00:26 | EDIT | REPLY |   

Akira  

To Synchronisityシェアアイコンの件 内緒さん②

わー。そうでしたよね。
せっかく褒めて頂いたのに消してどーすんだ ( ̄∀ ̄;)
とんだヌケサクですみません ←

削除される前で良かったです。
改めまして。
たぶんスクショの方がわかりやすいと思うので、

<!-- 記事フッター -->

で検索されまして、スクショと照らしながらお願いします。

http://blog-imgs-102.fc2.com/v/a/n/vanillaice000/a9fw9ef.jpg

個別記事下にあるEdit(記事編集)も残してあります。
二度手間になり申し訳ないです (*_ _)

2017/03/31 (Fri) 00:57 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/31 (Fri) 01:36 | EDIT | REPLY |   

Akira  

To Synchronisityシェアアイコンの件 内緒さん③

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

お出来になったようで良かったです。
お疲れ様でした

2017/04/01 (Sat) 13:08 | EDIT | REPLY |   

hige  

やっと引越し

 やっと引越しできました。
 素人がテンプレを触るのは大変ですが、なんとか望んでる形に近づきました。
ブログ名の背景画像はしょっちゅう入れ替えるのですが、これを入れるのが一番苦労しました。
 聞けば早いんでしょうが、根が意地っ張りなので自力でなんとかしてみました。もちろんネットであれこれ検索してですが。
 高等なことは出来ないんで、なんだかもっさりしてます。
 Google fonts が反映されたりされなかったりの症状に見舞われて何日も悩んでたんですが、やっと判明。
 シングルクオーテーションとダブルクオーテーションの混在が原因で、これを見つけるのにえらい日数がかかりました。
 link rel="stylesheet" href="//fonts.googleapis.com/css?family=
 元々のテンプレートで ' で括ってたのを途中からコピペしたのが原因でした。
 あとはぼちぼち追加や書き換えをしていく予定です。

 で、Akira氏のオシャレさと、サイドコラムの動きが導入できて満足。
 でも、ブログ名の背景に画像を入れた瞬間、なんかダサイかも・・・・・

 私もAkiraファミリーの一員になりました。
 ありがとうございます。

2017/04/04 (Tue) 20:43 | EDIT | REPLY |   

Akira  

To higeさん

お疲れ様でした (o'ω')ノ

> ダブルとシングルの混合

これ特にJSでは気をつけないといけないところなんですよね。
JSでhtmlを描画(document write系)だとコード内にhtmlの記述とJSの記述とが混ざるので、明確に区別しないといけないんです。
もちろんhtmlでも然り。
思わぬところで引っかかりましたが、ご存知の方は少ないのでhigeさんの知識として吸収できたのではないでしょうか。

こちらこそいつもありがとうございます

2017/04/05 (Wed) 10:55 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/04/06 (Thu) 15:16 | EDIT | REPLY |   

Akira  

bタグの件 内緒さん

こんばんは (o'ω')ノ
まず、ここでは説明の便宜上、区別のために管理画面下段の内容を「CSS」ではなく「スタイルシート」と表現しますね。
まぁ、本来はそれが正しいのですけれど(笑)

=====

> 今まではずっとリンクには<b></b>をつかって太字にしていました〜

特に問題ないですよ。
html5でのbタグは見た目に文字を太くするだけで意味的強調(強意)ではありません。
<a href=""><b>テキスト</b></a>
でも良いですし、
<b><a href="">テキスト</a><b>
でもOKです。
strongを用いるのは良くないですね。
strongは太字という意味ではなく「強意」です。
構文的なエラーではありませんが、リンクが記事内容の主旨になることはまず無いはずですし、不自然なリンクとしてスパム対象となることもあり得ます。

Q: htmlにリンク太字はよくないものなのか
A: strongによるものでなければ特に「悪い」といったことはありません。

=======

> サイトによってはcssで指定した方が良いと〜

それはスタイルシートに書け、という意味ではなく、
装飾系のhtmlは避けてCSSプロパティ指定しなさい、という意味ではないでしょうか。

例)
<b>テキスト</b>
↓ better
<span style="font-weight: bold;">テキスト</span>

① スタイルシートでaタグを太字操作したい場合

記事内にあるaタグの全てに太字装飾を行う、という形になります。
id名class名での振り分けが無い場合には掲載場所による特定しかできません。
「記事内の」という制限をするにしても、関連記事のリンクやFC2のテキスト広告なども含まれますので(これは仕様上避けられません)、それが良いのかどうかです。

この方法を取られるならばスタイルシート末尾に

.inner-contents a {
font-weight: bold;
}


を追加。

Q: その場合、cssのどこにどういった指定を入れたら良いのか
A: スタイルシート末尾に上記内容を追加します。ただし注意点を理解した上で。

=======

② ①の問題点を避け、かつ、bタグを用いた太字も避けたい場合

<a href="" style="font-weight: bold;">テキスト</a>

スタイルシートは利用せず、記事内の対象リンクを上記のような書き方にしてください。

======

bたぐとaタグを組み合わせることについて特に問題は発生しませんので、今まで通りお書きになるのが一番のように思います。
ただしbタグの定義はhtml4とhtml5とで異なります。
仮に今後html4のテンプレートに変更された場合には多少問題になるかもしれません。
html4のbタグはstrongの類似で意味的強調が含まれます。
html5からわざわざhtml4に後退させることはまず無いかもしれませんが、デザインのみを優先される方にはしばしばこのダウングレードが起こり得ることかもしれません(笑)

余力があればaタグのstyle属性にCSSのfont-weight: bold;という形も良いと思います。
スタイルシートでの指定にはちょっと無理がありますね (´・ω・`)
スタイルシートにされる場合には

記事内
<a class="任意名称" href="">テキスト</a>

スタイルシート
.任意名称 {
font-weight: bold;
}

と、こうしてidまたはclassでの切り分けは必須かと思います。

2017/04/06 (Thu) 22:36 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/04/07 (Fri) 10:53 | EDIT | REPLY |   

Akira  

bタグの件 内緒さん②

> 問題ないようでしたら今まで通りで〜

そうですね。過去に遡っての修正も大変でしょうし、何ら問題ありませんので今まで通りで(笑)
お疲れ様です。ありがとうございます

2017/04/07 (Fri) 13:55 | EDIT | REPLY |   

hige  

ついにヘルプ

いつもお騒がせしております。
今まで、Synchronisity を使わせてて頂いて、色々自力でカスタマイズし、あがいてきましたが、又々壁に激突。
今回は潔く教えを請うことに致しましました。
なにとぞお教え下さいませ。

やりたいこと
 全記事リスト
( html ではこの部分
 <!-- 全記事リストここから -->
 <!--titlelist_area--> )

 に、記事毎に設定したタグリストを入れたいんですが。

他の記事リスト、検索結果とかカテゴリー記事リストとかは全て
</section> の直前に
<!--topentry_tag-->
<ul class="list-entry-tag">
<li>タグ:
<!--tag_list--><span class="tag">
<a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>
</span><!--/tag_list-->
</ul>
<!--/topentry_tag-->
を入れることにより、記事毎に設定したタグリストを表示させることが出来たのですが、全記事リストだけ同じ事を記入してもなにも表示されません。

どないにか なるんでしょうか?
宜しくご教授下さいませ <(_ _)> 。

2017/05/21 (Sun) 18:54 | EDIT | REPLY |   

hige  

PS:ついにヘルプ

<!--tag_list--><span class="tag">
の class="tag" ってなんか特別の意味がありますか。
参考にしているテンプレには特にCSS の装飾がないような気がするので、不要なのかな。

2017/05/21 (Sun) 19:03 | EDIT | REPLY |   

Akira  

To higeさん

こんばんは ( ゚Д゚)ノ

> 全記事リストに、記事毎に設定したタグリストを入れたい〜

まず、変数が違います。<!--topentry_○○>という、前にtopentryが付いた変数は<!--titlelist_area-->内では無効化されます。
これが何を意味するかというと、書く記事に対してそれぞれにタグ名を抽出することができません。
通常だとこうですよね ↓

記事タイトル1
内容
タグ: A, B, C

記事タイトル2
内容
タグ: A, C, Q

こんな感じ。
これができないので、全記事一覧でできることは「今まで使用したことのあるタグ全てをリスト化」ということになります。

記事1
記事2
記事3

タグ: A, B, C, D,.......,Z

各記事にタグを当てることはできないんです。

======

上記の仕様をご理解頂いた上で、タグを「リストとして」表示されるのであれば以下の通り。

<ul>
<!--ctag-->
<li><a href="<%ctag_url>"><%ctag_name> (<%ctag_count>)</a>
</li>
<!--/ctag-->
</ul>

基本は上記のような形でしょうかね。
設置の仕方はhigeさんの結論を待とうと思います。
html及びCSSの追加も必要です。
そしてhtmlについてはアウトライン(html的な定義)の問題もありますので、セクション化してある各記事とは別のアウトラインで書いた方が良いと思います。
なのでここに数行で書けるものでもないです(笑)
よろしくお願いします ( ゚Д゚)ノ

2017/05/21 (Sun) 23:17 | EDIT | REPLY |   

hige  

あっ やっぱり

多分なんかの絡みで出来ないんやろなと、推測していたのですが。
そうなんですね。
ありがとうございました。
個別記事にリンクした形で表示できないのであれば諦めます。

自分が過去記事をたどる時、見に来てくれる方も多分同じ手順でたどっている。
どうすれば同種の記事を読んでもらえるか?
ここにも書いてますよ、という目印をできるだけ付けたかっただけです。
大昔の記事も一生懸命書いてきたので。
とは、まあ 自己満足で・・・。

自分を一番褒めるのも
一番貶すのも 私自身ではありますが。

2017/05/21 (Sun) 23:57 | EDIT | REPLY |   

Akira  

To higeさん

全記事一覧のページは大層特殊なんですよね (´・ω・`)
ページ送りも通常のものでは動作しませんし。
コメント数やトラックバック数が表示できるようになったのも後発というか、最近のようです。

> 自分を一番褒めるのも 一番貶すのも 私自身

そうですね。
とりあえず、他人に貶されるのはできるだけ避けたい(笑)

2017/05/22 (Mon) 00:40 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)