FC2ブログのテンプレート編集画面を使いやすくカスタマイズしてみる

とある案件で、FC2ブログでブログを兼ねたウェブサイトみたいなものを制作していて、それで久しぶりにFC2ブログを触ったのですが、テンプレート編集画面がどうも使いにくい…。

FC2ブログの管理画面は、自分の記憶だともう10年くらい(?)アップデートされておらず、コンテンツ全体の横幅や、文字サイズ設定も小さめに設定されており、時代錯誤な雰囲気なので、せめてテンプレート編集画面だけでもCSSで改良してみます。

関連記事:アメーバブログのテンプレート編集画面を使いやすくカスタマイズしてみる

変更点

イメージ画像

カスタマイズ前

カスタマイズ前

変更点

  • Source Code ProをGoogle Fontsから読み込んで適用させています。不要な場合は削除してください。
  • テンプレート編集中におそらく使わないであろうメニュー類は排除しました。もし必要な場合は、一度ロゴをクリックして環境設定に入ってもらうといいと思います。
  • サイドバー、フッターも同様に削除・簡略化しました。
  • 横幅をウインドウ幅まで広げて、フォントサイズも大きくしてあります。

CSS

今回は、Google Chromeの拡張機能を用いて、サイトにCSSを適用させます。

有名どころには、StylishStylishなどがあります。お好きな拡張機能でCSSを適用させてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasDy2Q8seG17bfDXYR_jUsrzg.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


.header_menu, /* ログアウトのボタン類 */
#tabmenu,#sub_menu2, /* 一番上のタブメニュー */
#left, /* 左サイバドバー */
#f-service_map, /* フッター簡略化 */
#f-service_common {
display: none;
}


#header,
#container,
#f-wrap_inner{
width: 90% !important; /* 全体幅 */
}

#ajaxcontent {
float: none;
width: 100%;
}

#html_textarea_box textarea, #css_textarea_box textarea, #html_textarea_cm, #css_textarea_cm {
width: calc(100% - 24px) !important;
height: 580px !important;
font-size: 16px;
font-family: 'Source Code Pro';
}

.editbox {
font-size: 16px;
font-family: 'Source Code Pro';
}

CSSの適用先は下記のURLに設定してください。

https://admin.blog.fc2.com/control.php

CSSとChrome拡張機能でGoogle Adsenseの自クリックを防止する【全サイト対応】

Google Adsenseは自分で運営しているサイトに貼り付けた広告をクリックすることは規約で禁止しており、クリックするとペナルティを受けてしまいます。

自分のサイトは管理をしていく上で頻繁に開くものなので、うっかりクリックしてしまうこともあるかもしれません。今回は、自分だけ広告をクリックできないように制限をかける方法を紹介します。

この記事で紹介する方法は、Google Chromeの拡張機能を使用するので、ログイン機能のない静的サイトでも有効です。

拡張機能の準備

まず、任意のスタイルシートをブラウザ側でサイトに反映できるブラウザ拡張機能をインストールします。

URLを指定してCSSを設定できるものなら、どれでも可能です。好きなアドオンを選びましょう。

サイト側の設定

まず、Google Adsenseで発行したコードをdivタグで囲みます。

1
2
3
<div class="google-adsense">
// ここにGoogle Adsenseで発行したコードを貼り付ける
</div>

次に拡張機能の設定画面から新しいスタイルを作成します。適用先には自分のブログのURLを設定しましょう。

StylusやStylishの場合はURLを設定する際に「ドメイン上のURL」に設定しておくと、サイト上の全ての広告で有効になるので便利です。

次に、divタグの中にあるリンクをCSSで無効化します。下のCSSをコピペし、保存してください。

1
2
3
.google-adsense {
pointer-events: none;
}

以上で、自分のサイトの広告クリックを防止できます。広告自体は表示されるので、閲覧者と同じ表示でプレビューが可能です。


CSSのみでクリックで画像を拡大する(Lightboxもどき)

CSSのみでクリックで画像を拡大する

画像をクリックするとポップアップで拡大表示するプラグインを、HTMLとCSSのみで再現してみます。いわゆるLightboxやfancyboxのようなものです。

この記事で紹介するコードは実用性は全くありません。遊び半分でご覧ください。

デモ

画像拡大

下の画像をクリックしてみてください。

テキストにも拡大リンクを貼れます。
スイセンの写真を見る

応用 - YouTubeの動画を拡大

YouTubeを拡大して再生することもできます。

come again / m-flo

弱点

記事に表示する画像と、拡大に使用する画像の2つを読み込む必要があります。SEO的にはあまり良くないと思います。

フィルター(黒い部分)は、画像を開いていない状態のときはpointer-eventsを用いてクリックイベントをオフにしていますが、開いていない状態でも常にフィルターは被さっているので、ちょっとキモいです。

また、pointer-eventsをサポートしていないブラウザで閲覧したときは、ページ全体のリンクがクリックできない状態に陥る可能性があります。

さらに、アンカーリンクを利用するので、画像を拡大すると履歴に残り、ブラウザで「戻る」操作が大変になります。

実装方法

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.lb {
display: flex;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.7);
opacity: 0;
transition: .3s opacity ease;
pointer-events: none;
z-index: 100;
}

.lb img {
width: auto !important;
max-height: 100%!important;
cursor: pointer;
}

.lb img,
.lb iframe {
transform: scale(.85);
transition: .3s all ease;
}

.lb:target {
opacity: 1;
pointer-events: auto;
z-index: 101;
}

.lb:target img,
.lb:target iframe {
transform: scale(1);
}

/* なんちゃって閉じるボタン*/
.lb::before,.lb::after {
display: block;
position: fixed;
content: "";
width: 24px;
height:3px;
top: 24px;
right: 12px;
background: #fff;
border-radius: 4px;
}
.lb::before {
transform: rotate(-315deg);
}
.lb::after {
transform: rotate(315deg);
}

HTML

1
2
<a href="#sample01</span>"><img src="記事の画像URL"></a>
<a id="sample01</span>" href="#close" class="lb"><img src="拡大する画像URL"></a>

sample01の二箇所は、画像毎に任意の文字列を指定してください。また、同じページで文字列が被らないようにしてください。

YouTubeは以下のように記述することで拡大できます。

1
2
<a href="#youtube">ここに文字</a>
<a id="youtube" href="#close" class="lb">YouTubeで発行する埋め込みコード</a>