おーとえすとさいと

「おーとえす」が「サイト」を作ったり更新したりしてる時に思う事を書いていければ良いなと思います

*

暇潰しの為のアンテナサイト「6sec.」を少し更新しました

   

antena-site-6sec
前に、「作成中のアンテナサイトがあって、アイディアだけ紹介しておきます。」みたいな記事を書いたんですが、ずっと放置しちゃっていました。
(6秒毎に暇が潰れていく?アンテナサイト「6sec.」)

そのアンテナサイトを久々に更新しました。
6sec.という名前です。

前の記事では、どうしてこんなサイトを作ろうと思っているのかとかそんな話をしたんですが、今回は実装してみて結局どんな感じになったのかっていう紹介をしたいと思います。
ただ、まだ完成という訳ではなく、もう少し調整などするつもりですので、そこのところはまた書きたいなーと思います。

どんなアンテナサイトなのか

まず、6sec.がどんなアンテナサイトなのかということを説明したいと思います。
6sec.は、外出時の暇な時に暇潰しをする為に作ったサイトです。なので、スマートフォン専用のアンテナサイトです。パソコンで見るとなんだか寂しい感じになってます。
一番の特徴は、6秒毎に6つずつ記事が流れて来ることです。なので、眺めてればどんどん記事が流れてきて、気になる記事をクリックして読む、みたいな使い方をします。流れてくる記事はランダムです。新しい順とかじゃないです。情報収集用とかじゃなくて、完全な暇潰し用に作っているので、ランダムに適当に流しています。

どんなサイトを登録しているのか

今回、アンテナサイトに登録したサイトは以下の12個です。

はてなブックマークが多いサイトを参考に選びました。あまり広く情報収集はしないので、どこが良いとか分からず、はてなブックマーク様々ですw(yahooとニコニコ動画は、RSS配信してる物から適当に選びました)
使いながら変更していきたいなと思っています。オススメのサイト(個人的な趣味ではなく、広く受けているサイト)があればコメントやtwitterなどで教えていただけると嬉しいです。

サイト作成時に工夫した点とか

一応、自分がサイト作成する時に工夫したっていうか、こんな風にしてみましたって話を羅列しておきます。大したことは書いてないですw

  • jQuery mobileでスマホ用にしてみた
  • いきなり記事に飛ばず、概要を表示する仕様にしてみた
  • 別記事に移動してから、概要のページに戻ってきたりするとDOMとかの仕様で上手く表示できないので、概要ページに表示させてるリンクは全部テキスト置換で「target=”_blank”」を付けといた(全部、新しいウィンドウで開く)
  • 6つの記事を1つずつ表示させてみた
  • 1つずつ表示させる際にアニメーションを付けてみた、けど重かったのでやめた
  • 概要のページで、フリップしたら戻る仕様にしてみた、けどスクロールが重くなった(反応が悪くなった)のでやめた
  • RSS用の広告を表示しない様にタイトルが「PR:」と「AD:」で始まる記事は表示させないようにした
  • そのページにフォーカスがなければ(別のタブを開いている時とかは)、流れない様に(新たに記事を追加しないように)した
  • 一覧には最高でも36個までしかタイトルが表示されないようにした

とりあえず思い付くのはこんな感じです。

考えてること・今後の展望とか野望とか

今後、どうしていくかとか、どうしていきたいかとか、ちょこっと書いてみます。
まず、SNSボタンを表示した方が良いのかな? ってのを少し考えています。概要ページにSNSボタン付けても良いかもなーとはちょっと思ってます。
あとは、登録するサイトですね。もうちょっと色々調整してみたいと思っています。
あと、何をどれくらい表示するのかっていう割合というか、そういうのを上手いことどうにかして、読んでるうちに少しずつ読みたい記事が表示されやすくなるように、とかしてみたいですけど、ちょっと大変そうですよねw
あと、youtubeの人気動画も登録したいなーと思ったんですが、良さげなRSSを生成できず今回は断念しましたw

あとは、このサイトは50人とか100人とかに使ってもらえるようになったら嬉しいなーなんて思ってます。
それくらいの人には使ってもらえるくらい使いやすいサイトにしていきたいと思います。
よろしくお願いします!

サイトの呼び名?

余談ですが、6sec.ってなんて呼ばれるんですかね?w

「ろくせく」「ろくせっく」「ろくびょう」「むびょう」「むせっく」「しくせく」「しっくせっく」「リュックサック」「ナップサック」「サランラップ」「ジップロック」

分かりませんねw


 - ブログデザイン

Comment

  1. かこ より:

    私は「ろくせっく」って心の中で読んでましたw
    バックボタンがついて、使いやすくなりましたねー。
    読んでる間は流れないのも嬉しい。

    ただ、スクロールが前より速くなりました?
    読みたい記事を捕まえられず、何度もその上の記事をクリック
    してしまいましたよー。

  2. おーとえす より:

    >かこさん

    スクロールはちょっと早くしたかもしれないです。
    そんなにクリックしにくかったですか^^;

    そこらへんも使ってみながら再度調整してみますね。
    いつもありがとうございます!

  3. きのみい より:

    ご無沙汰してますー♪
    私もどんくさいのか、違う記事をクリックしてばかりでしたorz

    記事と関係ないことでスミマセン!
    おーとえすさん、ちょっとご相談させて下さい。

    ファンブログのずぼら美肌について、アドセンスから
    「お前のとこの絵文字が重いから、スプライトを使用しなさい」って言われるんです。かなり前から。

    何かでアクセスが急増した後、大抵このメッセージが出ます。
    (アクセスの多いページについてだけ解析してくれてるみたい)
    表示速度に問題があるらしい。

    スプライトって、画像を一つのファイルにまとめて
    後は位置情報で抜き取る、って事だと思うんだけど
    どこをどう触ればいいのか全く検討が付きません(ーー;

    もし、同じお悩みの方が多そうなら
    「ファンブログ絵文字のスプライトの仕方」みたいなエントリあると
    非常にありがたいのではと思い、ダメ元で書かせて頂きました^^;

    メールでご相談してみようかと思ったんだけど
    メルアド分からんかったので、こちらでゴメンナサイ(汗

    実は1年以上前から出てたので、今更な感じで
    コメお返事も全く急いでおりませんので、お暇な時でも宜しくお願い致しますm(_ _)m

  4. おーとえす より:

    >きのみいさん
    やはり流れるの速いですかね^^;
    ちょっと色々考えてみます。

    css spriteについては前に自分も悩みましたw
    ファンブログの場合、絵文字の画像部分はスクリプトで吐き出してるので、スクリプト部分を自分でいじってアップロードすれば多分できるんですよね。

    今度時間ある時に作ってみますね!
    いつになるか分からないですが、早いうちにやってみます。

  5. 春風こむぎ より:

    はじめまして!こむぎと申します^^おーとえすさんのファンブログハックでブログのカスタマイズについて少しだけ勉強させていただきました。テンプレートも利用させていただいています、ありがとうございます!

    私も記事と関係ないことで申し訳ないのですが、今ファンブログのカスタマイズの中で見やすさを追求してグローバルナビを付けたいなぁと思っていろいろ試したのですが、うまくできません><

    一応グローバルナビについて説明しているサイトでCSSやhtmlのコードがあったのでコピペしてみました。でも、メニューバーが一番上に来たり、一番下に来たりうまくいかないのと、横幅960pxを6等分して160pxのメニューを6つ置きたいのに等間隔のきれいなメニューができません^^;

    また配色の変更もよく分からず悩んでいます。CSS,htmlは全くの素人でコードの書き方などもほとんど分かっていません><どのようなコードをどの位置に書けばよいか、ご面倒なことをお願いして申し訳ないですが教えていただけたら嬉しいです。

    それと私のような全くの素人がCSS,htmlを勉強するのにオススメの本などがあれば教えていただけたらと思います。おーとえすさんのようにブログのカスタマイズが自力でできるように私もなりたいです♪

    お忙しいとは思いますが、お時間のあるときにでもお返事いただけたら幸いです^^

  6. おーとえす より:

    >春風こむぎさん

    はじめまして!
    コメントありがとうございます!

    2つの内容にまとめた返答になってしまうのですが、まず、自分はCSSとhtmlはどちらも全てネットで勉強しましたw なので、本とかはほとんど読んだことないですね。オススメできず申し訳ないです^^;

    そして、その勉強方法ですが、基本的には例えば今回の春風こむぎさんの様に「こういうことしてみたいなー」って思った時に、それを色々調べて勉強してやってみる、ってことを色々繰り返したって感じなんです。

    最初は自分もコピペからでしたけど、徐々に、少しずつですが知識も増えて来て今に至る、みたいなw
    なので、グローバルナビについて色々調べてみて、htmlとしてはどんな事をして、cssとしてはどんな事をすれば良いのか、とかをちょっとずつ理解して作ってみると良いんじゃないかなと思いますよ!

    グローバルナビ、と言っても色々あるので(スクロールしてもついてくるとか、ドロップダウン式とか)、現状だと具体的なアドバイとはちょっと難しいのですが^^;
    メニューバーとも言ったりするので、そこらへんで色々調べてみると良いかもですよ!

    また何かあれば気軽にコメントして下さい^^
    もうちょっと具体的にどういうのって書いてくれたりとか、等間隔で出来ない状態でブログに表示させといてくれたりすると、具体的なアドバイスももうちょっとできるかもですので!

  7. 春風こむぎ より:

    おーとえすさん、お早いお返事ありがとうございます^^

    なるほど、ネットで調べていろいろ試して勉強されたんですね。私、JUGEMの有料ブログも持っていまして、いまのサイトに合わせて作り直すつもりなんです。まだ具体的な内容も決めていないので、今朝からそのブログを非公開にしてカスタマイズの練習用にしていろいろやっています♪

    ちなみにファンブログのグローバルナビですが、表示ちょっとかっこ悪いですが、さらしてありますのでお時間あるときにでも見ていただけたらと思います(笑)

    htmlには

    {$BlogName$}
    {$BlogDescription$}

    はじめに
    学習の準備
    スピーキング
    オンライン英会話
    お知らせ

    こんなコードをメイン~プロフィールまで同じ場所に貼り付けていまのようになりました。

    CSSは

    #navigation {
    width: 600px;
    padding: 5px;
    background-color: #000099;
    }

    #navigation ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    text-align: center;
    background-color: #000099;
    }

    #navigation li {
    display: inline;
    white-space: nowrap;
    }

    #navigation a {
    text-decoration: none;
    color: #ffffff;
    background-color: #3399ff;
    padding : 1px 16px;
    }

    #navigation a:hover{
    text-decoration: none;
    color : #ffffff;
    background-color : #3366cc;
    }

    をもともとのスタイルシートの下に貼り付けています。

    アドバイス頂けたら幸いです^^長文失礼しました^^;

  8. おーとえす より:

    >春風こむぎさん

    ありがとうございます!
    もうほとんど完成しているんですねw
    デザインのところは難しいですよね。

    http://weboook.blog22.fc2.com/blog-entry-318.html
    とか、
    http://weboook.blog22.fc2.com/blog-entry-340.html
    とかが少し参考になるかもしれないです。

    ただ、あまり凝ったものにせず、グラデーションとかは無しでシンプルにした方が良いかもです。やはり、デザインはかなり難しいです。自分も未だ全然ですが、なるべくシンプルにしようとした方が素人っぽさは減るかもなーとは思います。
    あと、やはり色々なブログやサイトを見て参考にすると勉強になりますよ!

  9. 春風こむぎ より:

    おーとえすさん、いろいろとありがとうございます^^

    あれから再度チャレンジしてテンプレートを変えてやってみました。

    初めてチャレンジしてみたわりには上出来かなと思っているんですが、どういうわけかどうしてもナビメニューがブログタイトルの上に来ちゃうんですよね^^;

    青いナビを付けていたときには各htmlのBlogDescriptionと書かれてあるすぐ下にソースを付けたらブログ説明文の下に来てくれたんですけど。。。

    <div id=”headerMenu”><ul class=”menu”>
    <li><a href=”該当URL”>タイトル

    このソースの正しい位置はどこなんでしょうか?あと、メニュー押して飛んだ先のブログ説明文の下に縦メニューが現れてますが、これはいったい??

    あまりこちらにコメントを重ねるのもご迷惑かと思いますので、私のブログの一番上の記事を使っていただいてけっこうですので、またお時間のあるときにでも教えていただけたらと思います^^

  10. おーとえす より:

    >春風こむぎさん

    いえいえ^^
    そうですね、かなり良い感じになってると思います!
    メニューが上に行ってしまう理由は
    #headerMenu
    の中の、
    position:absolute;
    が原因だと思います。これを消せば大丈夫です。(ついでにこれの意味も調べておくと良いかもしれないです)

    リンク先や他のページで縦メニューが表示されてしまうのは、ファンブログの場合ページ毎にテンプレートが異なるため、それらを全部正しいコードに直してないからだと思います。
    「メイン」以外の「アーカイブ」など全ても正しいコードを追加するとか、正しいコードに書き直すとかすれば、メニューバーがどのページにもちゃんと表示される様になると思いますよ!

    一応同じ内容を春風こむぎさんのブログの方にも書いておきますね。

  11. 春風こむぎ より:

    おーとえすさん、こんばんは!^^

    ここ最近何度もお世話になっております、本当にありがとうございます♪一応カスタマイズでブログ更新がおろそかになってもいけないのでいったんこれぐらいにしようかと思ってます(笑)

    でも最後の仕上げにメニューの区切りのラインを入れたくて頑張ってCSSいじっているのですが、表示がおかしくなっちゃいます^^;

    border-right: 1px dotted #000000; /* ←各メニューの仕切り線 */

    こうすれば右に区切りのラインが現れるはずとやったのですが、表示がいまのブログのように、、、

    いくつかのサイトを覗いて調べてみたのですが、どうも仕上げがうまくいきません。これは何がいけないのでしょうか??

    ブログは例によっておかしな表示のままにしてあります(笑)

    あ、それともしご迷惑でなければこうしてお世話になっていますので、よろしければおーとえすさんのサイトへのリンクを私のブログに貼らせていただいてもよろしいですか?^^

    きっとカスタマイズ等に興味を持っている方って他にもいらっしゃると思うんですよね。ご迷惑でなれけばでいいので^^

    またお時間のあるときにでもアドバイスいただけたらと思います♪
    一応私のほうでも引き続き研究しておきます(笑)

  12. おーとえす より:

    >春風こむぎさん

    こんばんは!
    そうですねw カスタマイズは凄く面白いのですが、ブログ更新しないとアクセスは伸びてくれないんですよね。。w 自分はそれでもカスタマイズしたくなってしまいますがww

    ブログの表示がくるってしまった理由は2つだと思います。

    まず、divタグの閉じ忘れ。
    headerMenuのdivタグが閉じ忘れてるのではないでしょうか?

    もう1つは、ボーダーを入れた事によってメニュー1つの横幅が1px大きくなってしまったこと。
    ボーダーを付けるとその分横幅が大きくなります。なので、widthをその分小さくしないとメニュー全体の幅に収まらなくなってしまい2列目に移動してしまいます。

    これで解決するんじゃないかなと思うのですが、どうでしょうか?

Message

メールアドレスが公開されることはありません。

  関連記事

no image
blockquoteタグをCSSだけで格好良いデザインにする【画像不要】

こんにちは、面倒臭がりです。 自分は面倒臭がりなので、ちょっとデザインをいじりた …

footer_fixed
フッターの表示をjQueryでほんのちょっと格好良くしてみた

前に、Stocker.jp / diaryのページに行った時に「このサイトのフッ …

css_hover_catch
cssの:hoverの色々な使い方

cssで:hoverって言う類似クラスと呼ばれる物があるんですが、こいつの色々な …

qlookblogdesign2
素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」

時間は万能薬のデザインを少し変更しました! その際、素人ながらに何を考えて、どう …

no image
アクセスが増えてきたのでブログデザインを改良しました

前回、素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」という記 …

open_sidemenu
サイドバーって死んだの? 〜STINGER5のスマホ表示をカスタマイズ〜

こんにちは。 社会人1年目で現実の厳しさを知って参っているおーとえすと申しますw …

no image
記事を読み終えた時に関連記事をさりげなくアピールするスクリプト

自分は、記事を読み終えた時にニョロっと出てくる関連記事とかが苦手です。スクロール …