2016年08月26日

Seesaaブログ スマホ版をカスタマイズしました

これまでこのブログは、PC版についてはいろいろカスタマイズしていたのですが、スマホ版については放置していました。

しかし、7月にスマホを買ったので、これを機に見直すことにしました。
(使っているスマホはこれです。→【2016年7月現在】月々700円から! 最も安い「格安SIM」「通話アプリ」「スマホ本体」はこれ!(ライトユーザー向け)


メニューとタイトルロゴの追加


デフォルトだと、メニュー=カテゴリー一覧……なのですが、このブログでは「Lc.ツリーカテゴリー(for Seesaa)」を導入してサブカテゴリーを追加しているため、カテゴリー名がやたらと長く、表示し切れていませんでした。

例えば、「クリエイターとしての集客・収益化」のカテゴリーの中にある小項目は、すべて「クリエイターとしての集客・収益化……」と表示される有様。区別がつきません^^;

これではいけないと思い、メニューは自作することにしました。
ついでにページ上部にPC版と同じタイトルロゴを入れました。

sumaho01.png

メニューはタップすると開きます。

sumaho02.png

スマホを横向きにして表示するとこんな感じ。

sumaho03.png

こうして見るとよく分かりますが、「左寄せ」のリスト全体に対して「中央寄せ」を適用しています。

sumaho04.png


参考ページ:
クリックで開閉する多階層ツリー型リストの作り方(このブログの記事です)
CSS divで囲んだulを左右中央揃え、ulの中身は左揃えにする方法。 - Yahoo!知恵袋
余白も含めて行全体をリンクにする方法 [ホームページ作成] All About

参考ページの情報の他、メニューの見た目を整えるための、背景色・枠色・リンク色・リストのインデント等に関するCSSが必要です。


◆このブログのCSS
/*左寄せリストを中央揃えにする*/

.top-menu {
margin-left:auto;
margin-right:auto;
text-align:left;
}

/*青字リンク&背景白の枠*/

.blue-link{
border:1px solid #dddddd;
padding:5px;
margin: 0 20px;
background-color: #ffffff;
}

.blue-link a{
color:#5282a3;
text-decoration: none;
display: block;
width: 100%;
height:100%;
}

.blue-link ul {
display: table;
padding: 0;
margin: 0 auto;
}

.blue-link li {
text-indent:-2em;
margin-left:2em;
display: table;
}

これで、HTMLの方は
<div class="top-menu">
<div class="blue-link">
リスト
</div>
</div>

と記述しています。


タイトルロゴも、行全体(要素全体)をリンクにすることで、ロゴ画像そのものをタップしなくても反応するようにしてあります!

◆CSS
/*タイトルロゴの背景を白くして行全体をリンクに*/

.title-logo {
background-color: #ffffff;
border-bottom: 1px solid #ccc;
box-shadow:0px 1px 5px 0px #ccc;
}

.title-logo a {
display: block;
width: 100%;
height:100%;
}

なお、「box-shadow」で、この要素の下に影をつけています。


プロフィールページへの誘導


トップページ以外のページの上下には、メニューに加えて、プロフィールページへの誘導もつけました。
(トップページは、リピーターによる閲覧率が高いと思われるので除外しました)

sumaho05.png


ページ下部には、TwitterのフォローボタンやWEB拍手も置いてみました。

sumaho06.png



PC版のCSSを輸入!


スマホ版のCSSをデフォルトのまま放置しておくと、テキストの表示が味気ないことになります。

・リンクの色が灰色(これは好みによりますが)
・見出しタグを使っても、普通の文章と同じ文字で表示される
・表に枠が表示されない
etc...

しかし、CSSはPC版・スマホ版関係なく統一規格なので、PC版のCSSをコピペしておけば大抵はどうにかなります!(笑)

sumaho07.png

フリー素材コーナーのメニューの表示はPC版と同じにはなりませんでしたが、まあギリギリセーフってことで……。

sumaho08.png



HTML5式MP3プレイヤー「audio.js」を導入


※「audio.js」について、詳しいことはこちらの記事をご覧ください。
いろいろ見たけど、埋め込みmp3プレイヤーは「audio.js」がおすすめ! 対応ブラウザ多し、デザイン良し、設置は簡単!

これまでスマホ版には「audio.js」を入れていなかったので、素材コーナーで音声の再生ができない状態でした。

でも、「audio.js」はHTML5式のプレイヤーなので、PC・スマホ関係なく使えます!
この通り!

sumaho09.png

う、うーん? 見にくいぞー?

それは「audio.js」のせいではなく、単純にスマホ画面の幅が狭すぎて、表が見やすく表示できないだけです^^;
スマホを横向きにすれば、そこそこ見れる画面になります。

sumaho10.png



これからは、スキマ時間にでも『145cmの考察』をお楽しみいただけます!


ほとんどの方はPCから見てくださっているので、スマホ版をカスタマイズしてもあまり関係ないと思いますが、これでスキマ時間にでも『145cmの考察』をスマホから気軽に楽しめるようになりました!

広告収入的には、PCから見てくださった方がありがたいのですが(おい)、どちらからアクセスするにしても、Re:Iに興味を持っていただけることが一番嬉しいです。
今後ともよろしくお願いいたしますm(__)m

なお、スマホ版の広告は、Seesaaブログ側が強制的に入れているものです。
これを消す改造方法もネット上には出回っていますが、そのような(Seesaaブログ側の利益を減らすような)使い方は規約違反となり、ある日突然ブログを凍結されても文句を言えない立場になりますので、僕はおすすめしません。
あと、それじゃSeesaaブログさんがかわいそうだと思うので……。

無料ブログなのにPC版の広告を消せるだけでもありがたいと思います。
スポンサーリンク
2016年08月23日

クリックで開閉する多階層ツリー型リストの作り方

今まで、上のメニューバーの「MENU」をクリックすると、サイドバーのカテゴリーツリーの位置まで飛ぶようになっていたのですが、これだとカテゴリーツリーを見る前に「急に画面がスクロールした、何だったんだろう」で終わってしまう方もいらっしゃるかも知れないと思い、本日別途メニューのページを作成しました。

こちらです! →メニュー

自動的に生成しているカテゴリーツリーと違い、カテゴリー編成を変えたらこちらも変えなければならないので注意が必要ですが、見る人によっては「ごちゃごちゃしている」と感じられるかも知れないサイドバーのカテゴリーツリーよりは、シンプルではありますが明快な外観になったのではないかと思います。

見た目はシンプルなのですが、サイト制作についてそんなに詳しくない僕のような人間にとっては、これを作るのも結構一苦労だったりします^^;


リストの中にリストを作る


まず、大カテゴリーの中に中カテゴリー、その中に小項目といったように、リストの中にリストを作る方法。

普通のリストはこうですね。
  • AAAAA
  • BBBBB
  • CCCCC

【HTML】
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
</ul>

それを、こうするだけです。
  • AAAAA
  • BBBBB
    • 項目1
    • 項目2
    • 項目3
  • CCCCC
    • サブカテゴリー1
      • 項目1
      • 項目2
    • サブカテゴリー2
      • 項目1
      • 項目2

【HTML】
<ul>

<li>AAAAA</li>

<li>BBBBB
    <ul>  
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    </ul>
</li>

<li>CCCCC
    <ul>
    <li>サブカテゴリー1
        <ul>
        <li>項目1</li>
        <li>項目2</li>
        </ul>
    </li>
    <li>サブカテゴリー2
        <ul>
        <li>項目1</li>
        <li>項目2</li>
        </ul>
    </li>
    </ul>
</li>

</ul>

要するに、親カテゴリーの<li>と</li>の間に、またリストのHTMLタグを挟んでいけばいいんです。


リストのマークを消す方法


普通、リストのHTMLタグ(<ul>や<li>)を使うと、自動的に「マーカー」と呼ばれる記号がつきます。

しかし、これがあると、自由にマークをつけることができません。
メニューのページのリストは、リストマークが◇であったり▼であったり⇒であったり、ばらばらですよね。こうした方が分かりやすいと思ったので、デフォルトのマークを消して、マークは手動で入れていきました。

<ul>を<ul style="list-style-type: none">にすると、マーカーが表示されなくなります。

なくすだけじゃなくて、何種類かの中からマークを選ぶこともできます。
詳細:スタイルシート[CSS]/リスト/マーカーの種類を指定する - TAG index Webサイト


リストの中の文字にリンクを張る


これは説明するまでもないと思いますが、リストの中の文字にリンクのタグをつけるだけです。


クリックで開閉する折りたたみメニューの作り方


こちらのサイトで紹介されている方法を、そのまま利用しました。
クリックすると展開表示する"折りたたみメニュー"をホームページに簡単に作る方法 | ふかふか交易所


リストタグとクリック開閉タグを併用する!


ここまでで紹介したHTMLタグを組み合わせると、クリックで開閉する多階層ツリー型リストを作ることができます。

※通常リンクのところは、今はリンク先がないので無反応です。

【HTML】
<ul style="list-style-type: none">

<li><a href="">◇ AAAAA(通常リンク)</a></li>

<li>

<!-- 折り畳み展開ポインタ1 -->
<div onclick="obj=document.getElementById('open1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ BBBBB(クリックで展開)</a>
</div>
<!--// 折り畳み展開ポインタ1 -->

    <!-- 折り畳まれ部分1 -->
    <div id="open1" style="display:none;clear:both;">
    <ul style="list-style-type: none">

    <li><a href="">・ 小項目なし(通常リンク)</a></li>

    <!-- 折り畳み展開ポインタ1 -->
    <div onclick="obj=document.getElementById('open2').style; obj.display=(obj.display=='none')?'block':'none';">
    <a style="cursor:pointer;">▽ 小項目あり(クリックで展開)</a>
    </div>
    <!--// 折り畳み展開ポインタ2 -->

        <!-- 折り畳まれ部分2 -->
        <div id="open2" style="display:none;clear:both;">
        <ul style="list-style-type: none">
        <li><a href="">・ 項目1(通常リンク)</a></li>
        <li><a href="">・ 項目2(通常リンク)</a></li>
        </ul>
        </div>
        <!--// 折り畳まれ部分2 -->

    </li>
    </ul>

    </div>
    <!--// 折り畳まれ部分1 -->
</li>
</ul>

こちらのサイトでも説明してくださっていますが、
<div onclick="obj=document.getElementById('ここ').style; obj.display=(obj.display=='none')?'block':'none';">

<div id="ここ" style="display:none;clear:both;">
のIDは、開閉部分を作るたびに新しく自分で任意の文字列を入れる必要があります。

デフォルトの「open」のまま使い回してしまうと、どこをクリックしても1番上の開閉部分だけが開閉するようになってしまうのでご注意ください!


スマホ用サイトにも有効


もっとスマートなやり方があるとは思いますが、HTMLだけで完結するというところが、初心者にとっては分かりやすくていいと思いました。

元々、今回こういうメニューを作ろうと思い立ったのは、スマホ版でのデフォルトのメニューが、このブログに適していなかったためです。(カテゴリー名が長すぎて表示できていませんでした^^;)

つまり、スマホ版用に作ったメニューをPC版に逆輸入したということです。
スマホでもPCでも問題なく動いています!
お悩みの方はぜひ試してみてください^^
スポンサーリンク
2016年08月19日

複数の置換を一括で行う最強の置換ツール「MultiReplace」(フリーソフト)

通常、テキスト編集ソフトの「置換」の機能って、こういう風ですよね。

「ABC」という文字列を「XYZ」に置換する。
→文章中にいくつ「ABC」があろうとも、すべて一括で「XYZ」に置換することが可能。

だから、「一括で置換できるんだよ〜!」と言っても、「ふーん……? 置換が“一括”って普通だよね……?」と思われてしまうかも知れません。
しかし、今日ご紹介するフリーソフト「MultiReplace」でできるのは、こういう意味での“一括”置換なんです!

「ABC」→「XYZ」
「あいう」→「わをん」
「123」→「789」
etc...(パターンは無制限に設定可能)
の置換を“一括”で行う。

ということは、もちろんこういうことも可能!

思いつく限りの表記揺れを列挙し、一括置換により表記を統一する。
「Abc」→「ABC」
「abc」→「ABC」
「あbc」→「ABC」……

置換したい言葉がいっぱいある場合はもちろん、何と言っても、同じ置換パターンを複数の文書に対して使い回したい場合に絶大な威力を発揮します!


実際の画面(クリックで拡大)
MultiReplace.png


置換前・置換後の文字列は、「区切り文字」(自分で設定可能)の左右に置いて区別します。
区切り文字の右側(置換後の文字列)に何も書かないでおくことで、左側の文字列(置換前の文字列)を一括削除することもできます


置換用のフリーソフトをいくつか見てみましたが、僕にとってはこれが最強のツールでした!

「MultiReplace」公式ページ
「MultiReplace」Vectorのページ
スポンサーリンク
*タグ:フリーソフト
posted by Rei Yumesaki at 20:55 | PC関連 おすすめツール紹介 | このブログの読者になる | 更新情報をチェックする
2016年08月14日

黒髪設定でも、ちょっと色を入れるとぐっとイメージに近づくことがある! ミカゼの新キャラデザ公開

ここのところ更新していなくてすみませんでした。
祖父母の家に行ってました。

今日は割とどうでもいい話なのですが、初心者のイラスト上達の過程に興味のある方にとっては、それなりに意味のある記事かも知れません。


前にも言いましたが、僕は「ラノベを書く時は、最初にキャラデザを決める派」なんです。

でも『リコ』のミカゼは、自分の中でいまいちキャラデザが固まらないでいました。
身長が初期設定の144cm→149cm→144cmと揺れ動いたり、ポニーテールかツインテールか定まらなかったり。(まあ髪型についてはいつも同じ髪型じゃない方が自然なんですが)

mikaze1.png
▲キャラデザのブレが端的に表れた一枚


そのためか、文章においてもリコと比べて書きにくいキャラだと感じていました。
(それについては、いまいちミカゼの正義感の強さや信念といったものをアピールするエピソードが足りないまま序盤を書いてしまったという、構成上のミスも大きいのですが。リメイクで改善されるはずです!)


しかし最近、ようやくキャラデザが固まってきたので、またイラストを描いてみました!

※クリックで拡大

mikaze3.png

mikaze1.png

服は適当ですが、容姿そのものはこのイメージで固定できました!
(上はジップアップトレーナーを、下はフリルのついたキュロットを着ています。「おしゃれで可愛いけど活動的」な格好をさせたかった……)

黒髪設定ですが、ちょっと紫を入れたらすごくよくなったんです。
今までしっくりこなかったのは、黒髪だからって彩度0のガチ黒髪にしてたからというのもありそうです。

▼旧キャラデザ
mikaze3.png

しかもこの頃は、もっと発育がいい設定にしていたから顔も大人びていました。

発育に関しては、栄養状態にかかわることであり、作品内での時代考証が必要な問題でした。
しかし、よく考えてみれば、ミカゼが小学校の中学年の頃にはすでに大分景気が悪くなっているのだから、最後の砦である「米」以外は高騰している状態である可能性が高く、肉・魚の摂取量が減って子供の身長の伸びは緩やかになっていると考えた方が自然でした。

「最近の子は発育がいいから〜」とか思ってたけど、旧キャラデザは大人びすぎてましたね。そもそもミカゼは「最近の子」ではなく、多分「その子世代」くらいの近未来人だし。
そして何より、ロリ度を増した新キャラデザの方が可愛い!(笑)


画力については、去年の12月の絵と比べたらすこしは向上した気がします!

May.png

Clarice.png


やっぱり今日の絵の方がいいですね。目が自然になりました。

mikaze3.png


色を消しても割と味があります。
mikaze2.png


相変わらず、線を綺麗に描けないのでちゃんとした絵が描けないのですが、こんな絵でも小説のキャラクターのイメージを伝えるくらいの役目は果たしてくれるでしょう。きっと!
スポンサーリンク
*タグ:リコ
posted by Rei Yumesaki at 21:19 | 制作日記 イラスト | このブログの読者になる | 更新情報をチェックする
2016年08月08日

『リコ』読者の皆様へ 今後の執筆に関するお知らせ

タイトルの通り、ごく一部の方に向けてのご連絡です。
「皆様」って言ってみたけど、もしかしたら1人もいらっしゃらないかも……・ω・;

***

リコ -世界を守り続ける話-』をお読みいただき、誠にありがとうございます。
また、更新が止まってしまっており、大変申し訳ございません。

今後、作品をよりよいものにするため、第一章から大幅な加筆修正を行う予定です。
単なる文章の見直しに留まらず、エピソードの追加・削除、及び精霊・精霊力に関する設定の変更を伴うリメイクになります。(根本的な世界観は変わりません)

その際、現在アップされている文章は取り下げますのでご了承ください。
今後ともどうぞよろしくお願いいたします。

***

ちゃんと完成させる気満々なので、気長に付き合っていただけると嬉しいです。
なお、今公開されているものは没バージョンになるので、「気になってたけどまだ読んでない」という方はまだ読まない方がいいです(笑)
スポンサーリンク
*タグ:リコ
posted by Rei Yumesaki at 21:41 | 制作日記 文芸 | このブログの読者になる | 更新情報をチェックする