2015年01月21日

タグページのカスタマイズ(seesaaブログ)

タグクラウドのタグ名がクリックされたときに開くタグ記事一覧ページは、Seesaaブログのデフォルトのままだと項目が表示されるだけで、ユーザーフレンドリーとは言えません。ユーザーに分かり易いタグページと成るようカスタマイズを行います。

【変更点】
  1. タイトルを分かり易くし、何の記事リストなのか明確にする
  2. 日付形式の変更(時刻の削除)
  3. 記事タイトルに加え、本文の冒頭部分を表示する
  4. 文末のタグクラウド表示内のタグ名に記事数を追記する
【変更前(デフォルト)】
seesaatag1.gif
【変更後(カスタマイズ後)】
seesaatag2.gif

【変更方法】
「デザイン」→「PC」→「HTML」から使用中デザインのタイトル名を選択すると、HTMLソースが表示されます。当ブログの「HTMLソース全文」を参照しながら、以下の5カ所の変更を行います。

※HTMLソースでは、オリジナル行の文頭に「<!--」、文末に「-->」を追記しコメント行に変更しています(変更(4)は逆にコメント行から実行文に変更)。その下の行に変更後のコードが記述されています。(HTMLソースを「変更」というワードで検索すると変更箇所を簡単に見つけられます)

タイトルを分かり易くし、何の記事リストなのか明確にする
  • 「タグ / 四季の花」→「タグ ' 四季の花 ' が登録された記事一覧」に変更(変更(1))
  • 「記事」を削除(変更(2))
日付形式の変更(時刻の削除)
  • 「[2014/12/17 10:44]」→「(2014/12/17)」に変更(変更(3))
記事タイトルに加え、本文の冒頭部分を表示する
  • オリジナルでは「本文の冒頭部分の表示」行がコメント化されてるので実行文に戻す(変更(4))
文末のタグクラウド表示内のタグ名に記事数を追記する
  • 「趣味の園芸」→「趣味の園芸(12)」等に変更(変更(5))


posted by 趣味の園芸 at 19:50 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

2015年01月17日

パソコンでスマートフォン表示を見る方法(Safari/Google Chrome)

パソコン用のブラウザのユーザーエージェント(端末情報)を変更して、パソコンからスマホ版表示を見れるようにすると、スマホでどのようにサイトが表示されるのかが確認でき便利です。

【Safari編】
Safari には標準でユーザーエージェントを変更する機能が用意されています。メニューバーに「開発メニュー」アイコン(赤枠)が表示されてないときは、メニューバーの「歯車アイコン」→「設定」→「詳細」タブを選択 →「メニューバーに"開発"メニューを表示」にチェックを入れると表示されます。

seesaa3.jpg

【使用方法】
  1. メニューバーの「開発メニュー」アイコンをクリックし、「開発」→「ユーザーエージェント」→「iPhone」と選択します。
  2. これで Safari のユーザーエージェントの変更は完了。Safari からスマホ用のサイトが見られるようになります。
  3. 元に戻す時は「開発」→「ユーザーエージェント」→「デフォルト(自動選択)」を選択します。
  4. デフォルトで用意されているユーザーエージェントは、Safari / Safari iOS / IE / Firefox / Opera です。
    新しく追加したい場合は、ユーザーエージェント一覧などを参考に「その他」から追加します。

【Google Chrome編】
seesaa1.jpgGoogle Chromeの拡張機能 Chrome UA Spoofer「User-Agent Switcher for Chrome」をインストールすると、ユーザーエージェントを簡単に変更することができ、iPhoneだけではなく、Androidやタブレット端末でどのように表示されるかをチェックできます。

【使用方法】
  1. Chrome ウエブストアから「User-Agent Switcher for Chrome」をインストールします。
  2. ツールバー上の seesaa2.jpg アイコンをクリックし、目的とするデバイスを選択すればOK です。
  3. 元に戻す時はseesaa2.jpg アイコンをクリック →「Chrome」→「Default」を選択します。
  4. デフォルトで用意されているユーザーエージェントは、IE / Firefox / Opera / Safari / iPhone / iPad / Android / Windows Phone です。
    新しく追加したい場合は、ユーザーエージェント一覧などを参考に「seesaa2.jpg右クリック」→「オプション」から追加します。
posted by 趣味の園芸 at 15:38 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

スマホ版の広告を非表示にする方法(seesaaブログ)

Seesaaブログは、管理画面で広告非表示の設定(方法はこちら)を行うと、PCからの閲覧では広告は表示されませんが、スマートフォンで閲覧した場合、スマホ版ページ、PC版ページとも広告が表示されてしまいます。この広告を非表示にするには、スタイルシートで広告ごとに非表示の設定を行います。

seesaa1.jpgこの方法では、Seesaa側の広告仕様の変更や追加があると、再び新しい広告が表示されてしまいますので、非表示にするためのコードをどんどん更新していかないといけないというイタチごっこの煩わしさもあります。
なお、無料ブログの広告表示を消すことは、利用規約に抵触する可能性があります。広告の非表示化を実装するに当たっては、自己責任でお願いします。

(参考URL)「メモロウ」さんの
      Seesaaブログのスマホ広告を非表示にする方法

【設置手順】
  1. スマホ版のスタイルシート編集
  2. PC版のスタイルシート編集
【設置方法】
スタイルシートを変更するのは PC版 CSS とスマホ版 CSS の両方です。管理を簡単にするため同じものを PC 版とスマホ版の CSS にそれぞれ追記します。

スマホ版のスタイルシート編集
  1. 「デザイン」→「スマートフォン」→「デザイン一覧」から使用中デザインのタイトル名を選択
  2. スタイルシートが表示されるので、最下部に「広告非表示化のCSS」を追加します。
  3. 保存して完了です。
PC版のスタイルシート編集
  1. 「デザイン」→「PC」→「デザイン設定」から使用中デザインのタイトル名を選択
  2. スタイルシートが表示されるので、最下部に「広告非表示化のCSS」を追加します。
  3. 保存して完了です。
広告非表示化のCSS(2015.1.7時点)
/* 広告非表示(スマホ用) こちらの削除方法は2014年9月27日現在で有効な方法です*/
[id*="adArea"] {visibility:hidden;height:0px;}
[id*="jt:seesaa_seesaa"] {display:none;visibility:hidden;height:0px;}
[class*="adlantis"] {visibility:hidden;}
[id*="adblock"] {display:none;visibility:hidden;height:0px;}
[class*="ad_block"] {display:none;visibility:hidden;height:0px;}
[class*="seesaaAdA"] {display:none;visibility:hidden;height:0px;}
.seesaa-adLink, .adlink, .adBoth, .adText, .adUrl, .adImage, .adSponsor, .adSponsorUrl, .adHr {visibility:hidden;height:0px;width:0px;}
[class*="ad_frame"] {display:none;visibility:hidden;height:0px;}
[class*="adlantis_sticky_zone"] {display:none;}
[id*="androidGame"] {display:none;visibility:hidden;height:0px;}
[class*="ichioshi"] {display:none;visibility:hidden;height:0px;}
[class*="top-ad"] {display:none;visibility:hidden;height:0px;}
[class*="im_ad"] {display:none;visibility:hidden;height:0px;}
[class*="androidgame"] {display:none;visibility:hidden;height:0px;}
[id*="iphonead"] {display:none;visibility:hidden;height:0px;}
[id*="iphoneFooterAd"] {display:none;visibility:hidden;height:0px;}
[id*="androidFooterAd"] {display:none;visibility:hidden;height:0px;}
[id*="adstir_ad"] {display:none;visibility:hidden;height:0px;}
[class*="seesaa-adBox"] {display:none;visibility:hidden;height:0px;}
[class*="adBox"] {display:none;visibility:hidden;height:0px;}
[class*="adTitle"] {display:none;visibility:hidden;height:0px;}
[id*="adcon"] {display:none;visibility:hidden;height:0px;}
[id*="imobile_adspotdiv"] {display:none;visibility:hidden;height:0px;}
[id*="ad_cloud_overlay_space"] {display:none!important;visibility:hidden;height:0px;}
.ad-area, .ad-area div, .ad-area.ad-footer div {display: none!important;visibility: hidden;}
[id*="nend_banner_img"] {display:none!important;visibility:hidden;height:0px;}
[id*="adingoBeagle"] {display:none!important;visibility:hidden!important;height:0px!important;}

/* 以下は2014年10月11日追加 */
[id*="kauli_yad_js_1"]{display:none!important;visibility:hidden;height:0px;}
[id*="yjAdwrapper"]{display:none!important;visibility:hidden;height:0px;}
[id*="adunit"]{display:none!important;visibility:hidden;height:0px;}
[id*="ads"]{display:none!important;visibility:hidden;height:0px;}
[class*="bottom_fixed_ad"] {display:none!important;visibility:hidden;height:0px;}
[class*="soc_dest"] {display:none!important;visibility:hidden;height:0px;}

/* 以下は2015年1月7日の追記 */
[id*="imobile_adspotdiv1"]{display:none!important;visibility:hidden;height:0px;}
[id*="fluct_ad_unit_1000001623"] {display:none!important;visibility:hidden;height:0px;}
[class*="fluct_ad_container"] {display:none!important;visibility:hidden;height:0px;}
[class*="tapone"] {display:none!important;visibility:hidden;height:0px;}

/* 広告非表示(PC用) こちらの削除方法は2014年9月27日現在で有効な方法です*/
[id*="nend_adspace"] {display:none!important;visibility:hidden!important;height:0px!important;}
[class*="adlantis_banner_image"] {display:none!important;visibility:hidden!important;height:0px!important;}
/* 「スマートフォン専用ページを表示」を消す */
#iphone-link { display: none !important; }

(参考)管理画面の広告非表示の設定方法(seesaaブログ)
  • 「設定」→「ブログ設定」→「共通ヘッダー」を「表示しない」に
  • 「設定」→「記事設定」→「広告の表示」を「無効」に
  • 「設定」→「広告設定」→すべての項目を「広告を表示しない」に
  • 「デザイン」→「PC」→「コンテンツ」のピンク色のブログパーツは広告ですので全て削除
    (※スマホ版のコンテンツには広告ブログパーツはありません)

posted by 趣味の園芸 at 01:37 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
Related Posts Plugin for WordPress, Blogger...
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。