このページの先頭へ

SIRIUSシリウスのHTMLテンプレート編集で記事末尾にサムネイル画像付き記事一覧の表示方法

簡単!SIRIUSシリウスでホームページ作成
SIRIUSシリウス購入ページはこちら
~お知らせ~
要望にお応えしLUREA購入特典もSIRIUSと同じ特典にしました!
購入特典にオリジナルテンプレートを追加しました!

記事最後をサムネイル画像記事一覧にしよう♪

カテゴリーフォルダに入っているエントリーシートは、
記事末尾に”関連記事一覧”でずらずらっと並びますね。

 

このページの最後尾を見ていただくと分かりますが、
カテゴリーページのように、サムネイル画像付きの記事一覧になっていますね。
このように変更しちゃいましょう♪

 

文字だけだと読む気が失せますが、
画像付きだとなんとなく次を読んでしまいます笑

 

手順1

編集メニューからHTMLテンプレートをクリックします。
HTMLテンプレート選択

 

手順2

”エントリーページ”をクリックして、
<!-- ★メインコンテンツここまで★ -->の上あたりにある、
<% entryList_n | tag_replace(h3,h4) %>
を削除します。

 

手順3

削除した部分に、下のソースを貼り付けます。

<デフォルトテンプレートはこちらをコピペ>
<!-- ★エントリーリストここから★ -->
<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<div class="cbox">
<h4><a href="<% permaLink %>"><% pageTitle | shorten(40,true) %></a></h4>
<% pageThumbnail | addAtribute(align="left") | tag_insert(span class="txt-img") %>
<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(150,true) %>
<p class="more"><a href="<% permaLink %>">≫続きを読む</a><br class="FloatEnd" /></p>
</div>
<% /AQEntries %>
</div>
<!-- ★エントリーリストここまで★ -->

 

<ビジネステンプレートはこちらをコピペ>
<!-- ★エントリーリストここから★ -->
<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<div class="cbox">
<h4><a href="<% permaLink %>"><% pageTitle | shorten(40,true) %></a></h4>
<p class="desc">
<% pageThumbnail | addAtribute(align="left") | tag_insert(span class="txt-img") %>
<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(150,true) %>
</p>
<p class="more"><a href="<% permaLink %>">≫続きを読む</a><br class="FloatEnd" /></p>
<div class="bottom">&nbsp;</div>
</div>
<% /AQEntries %>
</div>
<!-- ★エントリーリストここまで★ -->

 

記事末尾にソース貼り付け

 

貼り付けたら保存して終わりです♪
これで全てのエントリーページの末尾に、サムネイル画像付記事一覧が表示されます。

 

googleでは内部リンクもしっかり見てて、クローラーが回りやすくなるみたいな情報もあるので、
元より関連記事一覧が出るようにしてるシリウスは考えられてるなぁと思いました☆

スポンサーリンク
このエントリーをはてなブックマークに追加

指定した画像をへこませる | SIRIUSシリウスカスタマイズ

画像へこむ マウスオーバー時に画像をへこませる方法です。実際には、へこんだように見せているが正しく、微妙に画像をずらしていることでそう見せています。上のボタン画像にマウスカーソルを合わせると、ボタンがへこんだような動きになりますね♪え?だから何だと…(笑)訪問者が一瞬でも「おっ」と思ってくれればいいですし、ここ...

≫続きを読む

リンク付画像をへこませる | SIRIUSシリウスカスタマイズ

画像へこむ2 マウスオーバー時にリンク付きの画像を全てへこませる方法です♪下記の画像に、マウスカーソルを合わせると、画像が凹んだように動きます。正確には、画像をズラしてへこんだように見せています。当サイトでも、リンク付きの画像は全てへこむようになっています。指定した画像のみの場合は下記をご覧くださいませ。指定した...

≫続きを読む

画像を伸縮させる方法 | SIRIUSシリウスカスタマイズ

画像伸縮 マウスオーバー時に画像を伸縮する方法です♪下の画像にマウスカーソルを当ててみてください。  びよーんと大きくなりましたね^^小さくて見にくい写真を拡大させてあげたり、少し大きくしてボタンにしたりといろいろ使えそうです♪逆に縮小させることも可能です。①指定した画像を伸縮させる手順1編集メニューからスタ...

≫続きを読む

リンク付画像を薄くする | SIRIUSシリウスカスタマイズ

リンク付画像を薄くする マウスカーソルをリンク付き画像に合わせると、画像が薄くなるロールオーバー画像の紹介です。下記画像に、マウスカーソルを合わせると画像が薄くなります。これも画像が変わることで、リンクが付いているなとわかりやすいですよね♪それでは手順~手順1編集メニューからスタイルシートをクリックします。手順2style...

≫続きを読む

リンク付文字をへこませる | SIRIUSシリウスカスタマイズ

リンク付文字 マウスオーバー時にリンク付き文字をへこませる方法です。正確には、”へこんだように見える”で、実際は文字をずらしています。リンク先に飛べることが、よりわかり易くなりますね☆簡単です。手順1編集メニューからスタイルシートをクリックします。手順2styles cssの最後の行に下記ソースを追記します。/*...

≫続きを読む

行間を変える | SIRIUSシリウスカスタマイズ

行間変更 記事の行間のあけ方の説明です♪デフォルトだと行間が詰まってて少し見にくい感じがしますよね(><そこでスタイルシートを修正して、あけらるように出来るんです。文字フォントの修正と一緒に、行間もあけて見やすいサイトをつくりましょう♪手順1編集メニューからスタイルシートをクリックします。手順2スタイルシート...

≫続きを読む

ヘッダー画像にリンクを付ける | SIRIUSシリウスカスタマイズ

ヘッダー画像にリンク デフォルトでは、ヘッダー画像はただの画像ですがクリック率が高めの場所なのでリンクを是非つけたいところ。一般的なのは、トップページをリンク先にすることですね。その手順です!必ずサイトのバックアップを行なってから修正しましょう☆手順1編集メニューからHTMLテンプレートをクリックします。その1.デフォル...

≫続きを読む

h1タグを非表示にする | SIRIUSシリウスカスタマイズ

h1タグを非表示 テンプレートのデフォルトタイプでは、h1タグが最上部に表示されますね。字が小さくて読みにくいしー大きくしてもかっこ悪いしーこの際要らない!と思ってませんか?私がそうです笑でもh1テキストはSEO上、重要なキーで消してしまうと不利><;なので透明にして隠す方法のご紹介です♪手順1編集メニューからスタイ...

≫続きを読む

記事最後にサムネイル画像付記事一覧 | SIRIUSシリウスカスタマイズ

サムネイル画像 カテゴリーフォルダに入っているエントリーシートは、記事末尾に”関連記事一覧”でずらずらっと並びますね。このページの最後尾を見ていただくと分かりますが、カテゴリーページのように、サムネイル画像付きの記事一覧になっていますね。このように変更しちゃいましょう♪文字だけだと読む気が失せますが、画像付きだとな...

≫続きを読む

グローバルメニューの文字大きさ変更 | SIRIUSシリウスカスタマイズ

トップメニュー グローバルメニューの文字大きさ変更方法です。デフォルトは少し小さいかなぁ~なんて思ったり(-ω-手順1編集メニューからスタイルシートをクリックします。手順2/* グローバルメニュー */ 部分を探します。#topmenu内にある、font-sizeの数字を変更します。#topmenu {backgr...

≫続きを読む

記事タイトルの文字大きさ変更 | SIRIUSシリウスカスタマイズ

記事タイトル 記事タイトルの文字大きさ変更方法です♪手順1編集メニューからスタイルシートをクリックします。手順2/* グローバルメニュー */ 部分を探します。#topmenu内にある、font-sizeの数字を変更します。#topmenu&nbsp;{background-repeat:&nbs...

≫続きを読む

サイドメニュー文字中央寄せ | SIRIUSシリウスカスタマイズ

中央寄せ デフォルトでは、サイドメニュー文字が左寄りになっているので、これを中央に寄せる方法のご紹介です♪手順1編集メニューからスタイルシートをクリックします。手順2以下の部分を探します。下記の赤文字箇所を変更します。#menuh4,#rmenuh4,.menutitle{line-height:30px;b...

≫続きを読む

ページ先頭ボタン追加で楽に移動! | SIRIUSシリウスカスタマイズ

先頭へ戻る このサイトの右下にある、ページ先頭ボタンの追加方法です♪ボタン画像がサイト右下にありますよね^^(先頭ボタン画像はよかったら好きに使ってください^^)この記事を書いてる時は、即興で作ったボタン画像なのでハリボテ感がハンパないですがそこはスルーで笑ボタンをクリックすると、ページ上部まで一気に戻ります。...

≫続きを読む

文字フォントに影をつけて見やすく! | SIRIUSシリウスカスタマイズ

文字に影 グローバルメニューや見出しテキスト文字に影を付ける方法です♪すでにこのページのタイトル見出しには影がついていますが、これを付けることで文字のエッジが強調されて見やすくなります☆スタイルシートの文字宣言文に、text-shadow: 1px 1px 1px #000000; /* テキスト...

≫続きを読む

ソーシャルボタン追加はSEOに有効! | SIRIUSシリウスカスタマイズ

ソーシャルボタン シリウスのパーツ挿入の標準でFacebookのいいね!やツイッターのツイートボタンが付けられますがこの他に、はてなブックマーク、Google+、LINE、Pocket、linkedinボタンを追加し全ページに適用させる方法のご紹介です。いまや、ソーシャルネットワークは当たり前の時代ですね。いいね!等...

≫続きを読む

文字や画像を点滅させよう! | SIRIUSシリウスカスタマイズ

点滅 スタイルシートCSSへの追記で、文字や画像の点滅方法です♪当サイト購入より特典付きました!このように文字を点滅させることで、メッセージを強調させることができます♪点滅してない場合は、こちらのデモページで確認ください営業トークっぽい、目玉商品や値段の強調に使えそうですね^^では、手順!手順1編集メニュ...

≫続きを読む

CSSでボタンを作る | SIRIUSシリウス

CSSでボタン ボタン画像をCSSで描いてしまう方法です♪シリウスではボタン画像の作成がめちゃくちゃ簡単に出来ますが、それすら面倒くさいという方はどうぞお試し下さい笑↓これをスタイルシートのカスタマイズで描いてますButtonクリックしてね手順1編集メニューからスタイルシートをクリックします。手順2最後のほうに下記...

≫続きを読む

テンプレートレスポンシブ化 | SIRIUSシリウスカスタマイズ

レスポンシブ デフォルトテンプレートとビジネステンプレート(2カラム)を、レスポンシブ化する方法です♪レスポンシブ化をすると、タブレットやスマホ用に画面幅が最適化されます。googleでも推進してますね。今開いているブラウザの横幅を縮めていくと、このサイトも画像がぎゅぎゅっと小さくなっていき、横スクロールが要らな...

≫続きを読む

サブメニュー追尾(フリースペース) | SIRIUSシリウスカスタマイズ

フリースペース追尾 サブメニューのフリースペースに広告表示する人は多いですね。記事が長いと、サブメニューが画面から消えてしまいますが、フリースペースだけ追尾させて来る方法のご紹介です♪このサイトもサブメニューの下には広告を出してます。クリックして見てね!と言わんばかりに、執念で追っかけてきますw実際クリック率上昇にも有...

≫続きを読む

背景画像の固定 | SIRIUSシリウスカスタマイズ

背景固定 シリウスでは、1枚の大きな背景画像で設定した場合、スクロールと同時に背景画像も移動してしまいます。これを固定する方法です♪ちなみに、背景画像の設定は、”サイトオプション”ー”サイトデザイン”ー”背景画像”で好きな画像を指定します。”背景画像の表示”で画像をリピートしてしまえば、背景画像で繋がりますが...

≫続きを読む

見出し背景をCSSで表現 | SIRIUSシリウスカスタマイズ

CSSで見出し シリウスのデフォルトでは、h2やh3等の見出し背景は、画像で表示させて、その上にテキスト文字を書いています。画像が決まらない、背景をいろいろ変えてみたいアナタはスタイルシートのカスタイマイズで表現してみては?たとえば、下はスタイルシートで見出し背景を表現した例になります。スタイルシートで見出し背景を...

≫続きを読む

文字背景の蛍光ペン色指定 | SIRIUSシリウスカスタマイズ

蛍光ペン シリウスでは、デフォルトで黄色の蛍光ペンで文字装飾が出来ますね。黄色だけでは、物足りない!ってあなたは、直接色を指定しましょう。記事本文内で、色を付けたい語句を<span・・・>~</span>で囲むだけです♪背景青<spanstyle="background-color:#00ff...

≫続きを読む

画像キャプションエフェクト | SIRIUSシリウスカスタマイズ

画像エフェクトキャプション 画像のマウスオーバー時にエフェクト付きでキャプションを表示させる動きをスタイルシートのみの編集でシリウスに実装してみました。まずは下の画像にマウスカーソルを当ててみてください☆Caption Titlecaption text here ...画像全体にマスクが掛かり文字が出てきましたね。ショップ等...

≫続きを読む

テーブル幅を変更する方法 | SIRIUSシリウスtable

テーブル幅の変更 シリウスでは、テーブルが簡単に作成設置できますね。テーブル設置は初心者にはやや難しいため、これは嬉しい機能!しいて言えば、あとテーブル幅も決めれたらよかったなぁと思いますがソースを追加することで簡単に幅が決められるので下記、参考にしてください^^テーブル幅の変更手順テーブル作成ツールを用いて、def...

≫続きを読む

特定ページのレイアウト非表示,変更方法 | SIRIUSシリウスCSS

特定メニューの非表示 面白い問い合わせがあったので、ちょっとご紹介^^特定ページでヘッダー画像やグローバルメニュー等を全部消してまっさらにしたい!どうすればいいですか!?なんて質問を頂きました。ほーん、そんな使い方をしたい方もいるんだーと思いながらも、確かにページによってはグローバルメニューなんて要らない!なんて人もいそ...

≫続きを読む

クリックでメニューが開閉する方法 | SIRIUSシリウスとCSS

メニューの開閉方法 ボタンや文章をクリックすると、詳細文やメニューが現れたり隠せたりする方法です。まずは、下の+ボタン1または2をクリックしてみてください♪(例)+ボタン1 (こちらをクリック!)表示されましたか?リンク1リンクリンクリンクリンク+ボタン2 (こちらをクリック!)こちらも表示されてますか?リンク2リンク...

≫続きを読む

画像を回転させる方法 | SIRIUSシリウスとCSS

画像を回転させる マウスオーバーで画像を回転させるエフェクトを付ける方法のご紹介です。まずは下の3枚の画像にマウスオーバーさせてみましょう♪効果1)X軸中心に回転するにゃんこ効果2)Y軸中心に回転するにゃんこ効果3)Θ軸中心に回転するにゃんこにゃんこ画像が回転したでしょうか?例では全て1秒掛けて180度の回転をあたえ...

≫続きを読む

画像に影を付ける方法 | SIRIUSシリウスCSS

画像に影を付ける 画像に影を付ける方法のご紹介です。まず下の左画像は影なし、右は影あり画像になります。 左画像が原画で、これにスタイルシートで影を追加して描写したのが右の画像になります。立体感が出てなんとなく、良い感じですね^^めちゃめちゃ簡単なのですぐできます♪では手順!手順1編集メニューからスタイルシートをクリッ...

≫続きを読む

マウスオ-バーで画像拡大 | SIRIUSシリウスCSS

画像を拡大CSS スタイルシートのカスタマイズのみで、画像をその場で拡大する方法のご紹介です!まずは下のサムネイル画像にマウスを当ててみてください。画像が大きくなりましたね!これは、大きく表示された画像が元サイズの画像でマウスが当たってないときは縮小されている状態です。javascriptを使った方法での画像拡大も紹...

≫続きを読む

マウスオ-バーで画像ポップアップ | SIRIUSシリウスCSS

画像を拡大CSS スタイルシートのカスタマイズのみで、画像にマウスオーバーするとポップアップ拡大させる方法のご紹介です!まずは下のサムネイル画像にマウスを当ててみてください。画像に影付きでポップアップされましたね!javascriptを使った方法での画像拡大も紹介していますが、(紹介記事はこちら)今回はCSSのみで大...

≫続きを読む

マウスオーバーで画像に枠をつける方法 | SIRIUSシリウスCSS

画像に枠をつけるCSS マウスカーソルをリンク付きの画像に合わせると、画像に枠が付く方法のご紹介です。まずは下の画像にマウスを当ててみてください↓画像に赤枠が付きましたね!画像が沢山並ぶ場合や、ショップ等であればどの画像・商品を選択しているかが分かりやすいですね♪とても簡単です。では、手順!手順1編集メニューからスタイルシ...

≫続きを読む


先頭へ戻る