fc2ブログ

タグエリア 画像の横に冒頭文を表示させる

大事なお知らせ FC2ブログ非公開変数の領域変更により、一部ページナビが表示されない等 テンプレートに不具合が出ております。ユーザーの皆さまにはご迷惑をおかけして恐縮ですが、 2012.11.10.以前にDLしたテンプレートをご利用の場合は、一旦テンプレートを削除、もしくは名前を変更した上で、再DLして御利用くださいますようお願い申し上げます。詳しくは不具合解消のための再DLのお願い
  • 【SiteMapの記事タイトルを横並びで表示させる】へ
  • 【目次を表示させる】へ
Comicテンプレートではタグエリアを三種類の違ったスタイルで表示させることができるように予め、三種類のソースが埋め込まれています。

  • タイプ(1) 通常表示(Ggalleryのように画像が一覧表示されるスタイル)
    初期設定ではComic・Character・Novel以外は全てこのスタイルで表示される
  • タイプ(2) 画像の横に冒頭文を表示させるスタイル
    初期設定では ComicCharacterNovelのみ 
  • タイプ(3) 記事タイトルのみが表示される目次のためのスタイル
    このテンプレートの場合「幸福の王子」「テンプレートについて」等が目次用にカスタマイズしています。


Comic・Character・Novel を設定したページは、タイプ(2) のスタイルで表示されるよう最初から指定してありますが、それ以外のタグで設定したページは全てタイプ(1)のスタイル(Galleryと同じスタイルで表示されます。
Comic・Character・Novel以外のタグワードのページをタイプ(2) やタイプ(3)のスタイルで表示させるためには、テンプレートをカスタマイズする必要があります。

  • 【SiteMapの記事タイトルを横並びで表示させる】へ
  • 【目次を表示させる】へ

タイプ(2)のスタイルに変更する場合



以下は、初期設定ではタイプ(1)で表示されるGalleryを、タイプ(2)のスタイルに変更する場合を例にあげて説明します。

タイプ(3) については次ページをご覧ください。

もしもまだユーザータグを設定している記事がない場合は、画像がある記事を選んでGalleryを設定しておきます。
設定方法はコチラ

カスタマイズの前に、メニューバーやサイドメニューのGalleryをクリックしてタグを設定した記事が表示されていることを確認します。表示されていたらカスタマイズにとりかかります。

 注意!Gallery以外のタグでこのカスタマイズを試す場合、タグワードにハイフン(-)やアンダーバー(_)以外の記号(.,/*&%#「」『』【】[]()●△◆★…等)や機種依存文字(①②③ⅠⅡⅢ…等)を含んでいる場合、カスタマイズできないのでご注意ください。


カスタマイズ


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


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

HTML編集]部分をカスタマイズします。

HTMLをスクロールして<head>~</head>内の以下の個所を探します。


<head>
~ 中略 ~
<style type="text/css"><!--
~ 中略 ~


/* ----タイプ(2)---画像の横に冒頭文を表示させる場合
TTを冒頭文を表示させたいユーザータグワードに変更
但し、タグワードに記号・スペースを含む場合は不可
-------------------------------------------------------------- */

.hidden_tag2_TT { display: none; }
.show_tag2_TT{ display: block ; }

/*この時 カテゴリタイトルではなく記事タイトルを冒頭に表示する場合は以下のaaをそのタグワードに変更*/

.hide_tag22_aa { display: none; }
.show_tag22_aa { display: inline; }

/*この時 画像を非表示にする場合は以下のbbをそのタグワードに変更(Novel は設定済み)*/

.hideimg_bb{ display: none; }

~ 中略 ~
--></style> 
~ 中略 ~
</head>



記述してある説明に従いTTGalleryに変更します。
.hidden_tag2_Gallery { display: none; }
.show_tag2_Gallery { display: block ; }

この時、個々の記事の冒頭にカテゴリタイトルではなく Characterのように記事タイトルを表示させたい場合は
aaGalleryに変更します。
.hide_tag22_Gallery { display: none; }
.show_tag22_Gallery { display: inline; }


画像を非表示にして、冒頭文だけを表示する場合は以下のbbもタグワード、この場合はGalleryに変更します。
.hideimg_Gallery{ display: none; }


更新 】 をクリック


もう一度Galleryをクリックします。
キーボードの  F5   もしくは アドレス欄横の更新ボタンadept_update.pngbutton_blue_repeat.pngをクリックして、ブラウザを更新させます。
画像の横に冒頭文が表示されていればOKです。
関連記事
スポンサーサイト




Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加 Buzzurlにブックマーク
【10/03のツイートまとめ】へ  【目次を表示させる】へ

~ Comment ~

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

~ Trackback ~

トラックバックURL


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

【10/03のツイートまとめ】へ  【目次を表示させる】へ

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  を
クリックすると全画面で
表示されます。二回押すと元に戻ります。