fc2ブログ

漫画を中央に表示させる

大事なお知らせ FC2ブログ非公開変数の領域変更により、一部ページナビが表示されない等 テンプレートに不具合が出ております。ユーザーの皆さまにはご迷惑をおかけして恐縮ですが、 2012.11.10.以前にDLしたテンプレートをご利用の場合は、一旦テンプレートを削除、もしくは名前を変更した上で、再DLして御利用くださいますようお願い申し上げます。詳しくは不具合解消のための再DLのお願い
  • 【検索ツールバーを非表示にし不自然な余白を削除する】へ
  • 【画像クリックで次ページを開く】へ
投稿した漫画(画像)を中央に表示させる方法は二つあります。
(1)スタイルシートに、中央表示の指定を追加する。
(2)記事を投稿するごとに、漫画の前後を中央表示のタグで囲む。

(1)の方法は全ての記事の表示をまとめて指定できるのでかなり省力です。同じテンプレートを使っている限り、記事本文に投稿した漫画は自動的に中央に配置されます。しかし、その場合、追記は平常左寄せ表示ですが、記事本文に文章がある場合はそれも中央寄せで表示されてしまいます。また、テンプレートを変更した場合、変更したテンプレートにも同じカスタマイズを施さないと、画像は元通り左よせに表示されてしまいます。

(2)は、漫画を投稿する度にひと手間かけなければならないので、(1)に比べると少々面倒です。しかし、漫画だけを中央寄せにすることができますし、テンプレートを変更しても漫画はそのまま中央寄せで表示されます。

どちらでも、お好みの方法をどうぞ~
  • 【検索ツールバーを非表示にし不自然な余白を削除する】へ
  • 【画像クリックで次ページを開く】へ

(1)スタイルシートでまとめて指定する


[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く


PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名 のHTML編集
テンプレート名 のスタイルシート編集         こんなふうに上から順番に並んでいます。

スタイルシート編集]部分をカスタマイズします。

スタイルシートの末尾に以下のA. B.C.のいずれかを追加します。

全てのページの記事本文を中央寄せにする

A. 全てのページで記事本文部分を中央寄せにする場合は以下だけでOKです。

.entry_comic {text-align:center;}



漫画掲載カテゴリは中央寄せ、それ以外のカテゴリは左寄せ(通常表示)にする場合

カテゴリ番号は[カテゴリの編集]画面のカテゴリ一覧リストの一番左、# をクリックすると表示される番号がそれですが、カテゴリページのアドレスからも確認できます。
http://comictemplate.blog.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。

B. ほとんどが漫画掲載カテゴリの場合、全体を中央寄せに指定してから、
漫画以外のカテゴリだけを左寄せに指定します

.entry_comic {text-align:center;}
div.kakusi漫画以外のカテゴリ番号 .entry_comic {text-align:left;}



C. 漫画掲載カテゴリの方が漫画以外のカテゴリより少ない場合は、
漫画カテゴリだけを中央寄せに指定します

div.kakusi漫画のカテゴリ番号 .entry_comic {text-align:center;}



漫画カテゴリが複数ある場合は、漫画カテゴリ番号のクラス名を列挙します。
以下はカテゴリ番号1から5までが漫画カテゴリの場合の例

div.kakusi1 .entry_comic, div.kakusi2 .entry_comic, div.kakusi3 .entry_comic,
div.kakusi4 .entry_comic, div.kakusi5 .entry_comic {text-align:center;}



この時、カテゴリ番号を親カテゴリ番号にすると、その親カテゴリに属する全ての子カテゴリの記事本文は中央寄せで表示されます。
上の例でも、もし、カテゴリ番号1から4までが親カテゴリ番号6の子カテゴリの場合は以下でOKです。

div.kakusi5 .entry_comic, div.kakusi6 .entry_comic {text-align:center;}



更新 】 をクリックする。


(2)記事を投稿するごとに中央表示のタグで囲む


漫画を中央寄せにするには、以下のように画像タグの前後を、
<div style="text-align: center">~</div>で囲めばOKです。

<div style="text-align: center"><img border="0" alt="ss_kadeb.jpg" width="幅" height="高さ" src="画像アドレス" /></div>



手打ちでタグを書き込むのが面倒な場合は WYSIWYGテキストエディタを使えばカーソルの操作だけで中央表示にできます。
WYSIWYGテキストエディタは「通常モード」でなければ稼働しないので、「簡易モード」にしている場合はオフにします。

記事編集ページ上部の簡易モードONをダブルクリックして OFF にします。

ツールバーも通常モードになりWYSIWYGテキストエディタのボタンWが表示されるのでクリック。
ss_edit1.jpg
▼WYSIWYGテキストエディタの編集画面に変わります
ss_edit2.jpg
▼画像の上にカーソルをおきクリックしてから、中央揃えボタンをクリック
s_edit3d.jpg
▼画像が反転し中央に移動します。
s_edit4b.jpg
これでOKですが、このまま保存すると、次に編集画面を開いた時もW
YSIWYGテキストエディタの変種画面になってしまうので、
もう一度Wをクリックして通常の編集画面に戻してから
記事を保存 】 をクリック


初期設定を通常モード(簡易モードOFFの状態)に変更する場合は
【環境設定】⇒【環境設定の変更】⇒【その他の設定】⇒【初期ページ設定】
⇒【簡易モード】【簡易モードを初期設定に しない】 ⇒【更新
※「簡易モード / 通常モード」に切り替わらない場合はブラウザのCookieを削除してからブラウザを再起動してから再度試します。詳しくはFC2ブログ公式マニュアル「ブログ簡易モード 」「クッキー・キャッシュの削除方法

関連記事
スポンサーサイト




Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加 Buzzurlにブックマーク
【検索ツールバーを非表示にし不自然な余白を削除する】へ  【画像クリックで次ページを開く】へ

~ Comment ~

管理者のみ表示。 | 非公開コメント投稿可能です。

~ Trackback ~

トラックバックURL


この記事にトラックバックする(FC2ブログユーザー)

【検索ツールバーを非表示にし不自然な余白を削除する】へ  【画像クリックで次ページを開く】へ

WEB漫画(マンガ)専用
Comicテンプレート

風の王国[展示漫画]

全27ページ
  3kaku_s_L.png 初めから読む

カスタマイズ

⇒ もくじ

Home
Comic
SiteMap
『風の王国』 公開サイト▼
展示漫画 『風の王国』の続きは 歌門様 の本家サイト【空色かんづめ】でご覧になれます
掲載漫画,イラストは歌門さつき様からお借りしました。
banner.jpg
管理人の本館▼
banner.jpg
翻訳の底本:Beatrix Potter "The Tale of Peter Rabbit" (1902)
上記の翻訳底本は、著作権が失効しています。
出典:青空文庫
翻訳者:大久保ゆう
※この翻訳は「クリエイティブ・コモンズ 表示 2.1 日本 ライセンス」によって公開されています。

画像をクリックしても次ページは開きません。ページ移動は画面上下右のナビボタンで

カスタマイズ

 もくじ

⇒ もくじ

キーボードの  F11  を
クリックすると全画面で
表示されます。二回押すと元に戻ります。