忍者ブログ

鈍色のすたるじぃ

Home > ブログ > サイト制作・WP・Mac等

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Wordpressで同人小説サイト【続】

今回のエラーで思い直したこと。
備忘録的な意味で書き留めておくことにします＾＾；サイトと関係ない事なのでどうでもいいかたはスルーして下さいね。

以前書いた記事『Wordpressで同人小説サイト』で紹介したプラグインの中で、記事を書く際に必須だとかなんとか書いていた『PS Disable Auto Formatting』と『TinyMCE Advanced』この二つと後一つのプラグインが原因で小説目次が崩れる現象が起きました。
以前から、上記二つのプラグインはWPをアップデートすると結構かみ合わなくてエラーを吐く可能性が高い物だったのですが、それでもなくてはならないのでその場をだましだまし使っていたわけです。

何故かというとWPには、もの凄い困ったお節介機能が搭載されており；
下記の図のように、記事作成で、見たまま反映されるビジュアルタブ
HTMLを記載して記事を書いていくテキストタブ


 
の二つがあるわけですが、例えば……。
テキストタブでHTML手打ちで書いて、「どんな風に表示されているかな～」とビジュアルタブをクリックして確認すると、タブを切り替えた途端、先程自らが書いていたHTMLのいくつかのタグが勝手に書き換えられてしまうのです。
改行を入れて

こんにちは。
さようなら。
会いたいね。

のように記載したHTMLが

こんにちは。さようなら。会いたいね。

みたいに勝手になってしまうのです。しかも改行タグが全く反映されないかというとそういうわけでもなく、時々残っていたりもします；ほんっとこれ困るのです。

で、そういう勝手にお節介機能を停止させるために『PS Disable Auto Formatting』を導入していたわけですが、このプラグイン事態が問題になって使えなくなると停止せざるを得なくなります。
今回『PS Disable Auto Formatting』が悪さをしているようだったので、思い切ってこのプラグインを削除しました。『PS Disable Auto Formatting』を入れていなくても、勝手にタグ書き換えを停止してくれる機能は『TinyMCE Advanced』にもあるので、ちょっと不安ですが、その一本で賄うことに。

『TinyMCE Advanced』のここにチェックを入れます↓
（予想外の振る舞いをすることがあるとか恐ろしい事が書いてありますがここは見なかった事にしたいｗ）


しかし、今回『PS Disable Auto Formatting』を削除後、『TinyMCE Advanced』で同様の機能にチェックをいれたにも関わらず、少し挙動がおかしくなってしまいました。
勝手にタグ書き換えは停止してくれていますが、連続改行が効かなくなってしまいました。
小説内で連続改行が使えないのは大変です。

良い感じで本編の小説が終わって、余韻を残して、もっとずっと下の方に「後書き」を書いているはずなのに、連続改行が効かないと。



みたいに、空気読めない人みたいな表示になってしまいます（笑）
うざいことこの上ない。
そこで色々試行錯誤したのですが、やはりプラグインに頼ると、そのプラグイン自体の更新が止まってしまった時に頼りすぎてどうにも出来なくなる可能性が高いなぁと思いまして。
別の方法を探してみました。
そこで発見したのが。

 ←コレです。

 という文字列は半角スペースを意味するHTMLタグですが、連続改行の、

</br>
</br>
</br>

が反映されないので、連続改行の部分にのみ【&nbsp;<br/>】こうして書き込みます。
こう書く事で、半角スペース分の透明文字を書いた後に改行という指示に也、見た目は半角スペースは反映されないので連続で改行することが出来ます。

 &nbsp;<br/>
 &nbsp;<br/>
 &nbsp;<br/>
 &nbsp;<br/>
 &nbsp;<br/>

こうHTMLに記載すれば5行の改行を行う事ができ、プラグインの機能は使わないので、何の更新があっても、小説の改行は保持されることになります。
【shift】+【Enter】で<br/>が挿入されますが（ビジュアルエディタの場合）
それは連続改行の時は使わず、テキストエディタで【&nbsp;<br/>】を書き込むのがお勧めです。
いちいち書くのは面倒なので【&nbsp;<br/>】を単語登録でもしておいて、キーひとつで呼び出せるようにしておくと便利かもしれません。

結果、無事このように空間が出来ました↓
ソース


表示すると……。


今も色々なページをこのタグで書き換え中ですが、まだ全部見回っていないので＾＾；
あちこちでおかしな事になっていそうで怖いｗ全ページ確認とか……辛すぎるｗ
プラグインは便利だけど、諸刃の剣でもあるな～としみじみ思いました。
PR

緊急事態（苦笑）

使用している３つのプラグインが、アップデートしたWPへの対応が整っていなかったようで不具合が出たので、一気に3つのプラグインを停止した所……。とんでもない事になりました。
小説を更新しようとしたら、小説目次ページが見事に崩壊し、元に戻せない状態です＾＾；
今他のページを弄ると全ページこうなりかねないので、更新ができません。
ああ；折角番外編アップする作業していたのに－；


停止したプラグインを有効にすると、今度は文字が真っ白になって打てないという、これまたやっかいな状況になるので、現在他の代用できそうなプラグインを探しています。

というわけで、暫く直るまでお待ち下さい；
もう……。泣きたい。

もしかしたら明日ひょんな事から復活するかもしれませんが、かなり時間がかかる可能性もあります；私も何とも言えないので……。頑張って直します－；

Wordpressで同人小説サイト

Wordpressに移行して一ヶ月半。
試行錯誤の末、使っているプラグインが絞り込まれてきました(ﾉ^^)ﾉ
同人サイトをWordpressで作るのってどうするの？みたいな記事をよく見かけるので、迷ってる方の参考になるかもしれないので使用プラグインを書いておきます。というのは建前で、自分が書いておかないと忘れそうだから（笑）

拙宅で使用している大元のテンプレート（テーマ）はTwenty Elevenバージョン: 2.4です。
Twentyシリーズは、使っているサイトが沢山あって、わからない部分を検索した際に情報が沢山出てくるので便利です。最初からシンプルであまりお洒落に特化していないのがポイントｗ
最初からお洒落なテーマは、動きや癖のある完成された物が多いのでサイトとして弄り倒すには不向きだと思います。
そのまま流用するなら、お洒落なテーマもいいかも♪


そして現在使用しているプラグイン

★Advanced Code Editor★

★PS Disable Auto Formatting★

★TinyMCE Advanced★


Advanced Code Editorは、元からあるテーマ編集とプラグイン編集のエディタが非常に見づらいので導入。
シンタックスハイライト機能がついているので、間違いや表記ミスを発見しやすくなります（PHP、HTML、JavaScript、CSSに対応）

PS Disable Auto Formattingもエディタ系のプラグインですが、これめっちゃ重要！WPのエディタは何故か勝手に改行タグを挿入してきたり、他のページに行って戻ってくると整形したHTMLが消えていたりと、作業するのにストレスマックスなのです。そこでこのプラグインを入れておくと余計な自動整形機能での崩れを回避できます。なくてはならないプラグイン。

TinyMCE Advancedは、そんな困ったエディタを上記のプラグインで解消した後導入すると、機能拡張が出来ます。HTMLの知識とかが一切なくても、これを導入するとわかりやすいボタンで「太字」とか「絵を挿入」とかがあるので、それを押していくだけでページデザインが作れます。


★Akismet★

スパムメール等が届かないようにガードしてくれるらしい。
最初から入っていたので、そのまま使用（笑）使い始めるには簡易登録が必要です。


★Contact Form 7★

サイトで使用しているメールフォーム。CSSでのカスタマイズが可能で、必要に応じてチェックボックスやラジオボタンも加えられます。一番人気のあるプラグインなので動作も安定している所が安心。


★Dynamic To Top★

サイトが縦長の場合、上へ戻るの面倒になりますよね。そこでこれを入れておくと『TO TOP』というボタンが作れて、それを押すと自動的に上へ上がってくれます。ボタンのデザインは色、形、サイズ共に変更可能。『上へ』等の日本語表記に変えることも出来ます。


★EsAudioPlayer★

MP3 playerです。何度も色々なプラグインを探しましたが、一番シンプルなこれに決定。小説目次で流しているBGMがこれです。一番シンプルな拙宅で使用しているバージョンの他にも、スライドショーのように画像に合わせて曲を変えられる物もあり。これもボタン表示の色や大きさ、曲をループするか、自動で再生するかどうか等事細かに設定できるのでサイトに合わせた物を作れると思います。


★EWWW Image Optimizer★

これはWP内にアップしたイラストや写真を一括で圧縮してくれるプラグインです。何かと重くなるWPですが、時々これでまとめて圧縮すれば多少は軽くなる模様。拙宅では普段は停止させていて、絵をアップする時などに時々有効化して使用しています。


★Foo Gallery★

★FooBox Free Image Lightbox★

イラスト（写真）展示をするギャラリーを作る際に使用しています。WPの元からあるギャラリーはいまいち使いづらいです＾＾；以前は別のギャラリーのプラグインを使用していたのですが、イラストにコメントを表示させたくて探しまくった結果これに落ち着きました。Lightbox系のプラグインにしては自由度も高くシンプルで比較的軽いです。
ちなみにFoo Gallery単体では動きませんので、FooBox Free Image Lightboxもインストール必須。


★Ktai Style★

何か最初から入ってたやつ（笑）携帯電話用に軽量化したページおよび簡単な管理インターフェースを提供します。だそうですが、確認した事がないのでどういう状態になっているのか不明です。


★Lazy Load★

閲覧する際に、見えていない画像は後から遅延して表示させる事が出来るプラグインです。一気に全部読み込むとページが重くなるので、スクロールしたらジワッと読み込まれるようになっています。WPの重さを少しでも改善したい場合必須かも。


★Meta Slider★

★WP Display Header★

どちらもヘッダーの画像をカスタマイズするプラグインです。Meta SliderはjQuery のスライダーでスマホにも対応。一番最初に『憧れのスライドヘッダーが出来る！』と喜び勇んで使用していました。上部のヘッダーがスライドショーで切り替わっていくのがお洒落で素敵だったのですが、小説を読んでいる際にも画像が動いていて、これは小説をメインにしているうちではちょっと厳しいかな；（目が滑る）と思い、結局WP Display Headerに変えました。

WP Display Headerの方は、エディタの下部に毎回『どのヘッダー画像にする？』みたいなのが表示され、記事ごと、ページごとに違うヘッダーを表示させる事が出来ます。
なので、小説毎にイメージと合ったヘッダーに変えることが出来ます。その都度ヘッダー画像を作成しなくてはいけませんが、小説イメージって大切だと思っているのでお気に入りプラグインです。



★Twenty Eleven Theme Extensions★

これはTwenty Eleven（テーマ）を使用しているサイト以外は関係ないですが、Twenty Elevenのカスタマイズをちょっと手助けしてくれるプラグインです。子テーマにも対応しています。色々な機能があるようですが（サイドバー関係とか）拙宅はサイドバーを設置していないのでそこはわかりません。私的に一番重要なのが、これを導入するとCSSをテーマを弄らずに追記する事が出来るのですが、それが万能！
子テーマのCSSを弄ると親テーマより優先してくれるはずなんですが、所々言う事を聞いてくれなくて困る事があります。そんな時にこのプラグイン内の設定画面の追記CSSに、変えたい部分のCSSを書き込むと、ちゃんと優先して読み込んでくれるのです。理屈は全くわかっていませんが、とりあえずこの方法で事なきを得ているのでなくてはならないプラグインの一つです♪


★WP Maintenance Mode★

サイトを更新する時って、色々弄らないといけないけど、その間も表示はされていて……。その途中を見られると恥ずかしい事ないですか？（笑）
後、実験的にデザインを変えている最中とか。そういう時にこのプラグインを導入しておくと、よくオンラインゲームのメンテナンス中に出てくる『ただいまメンテナンス中です　3：00～5：00』みたいな表示で、全頁が指定したメンテナンス画面に変わり閲覧出来なくなります。管理人はその間も普通に表示がみれるので、WP Maintenance ModeをONにしている間に更新作業が出来ます。
メンテナンス終了の時刻までのカウントダウンを表示させたり本格的なページにも出来ますが、そこまで時間を要さない個人サイトでは『更新作業中です』だけでいいとは思いますが＾＾；
うちも更新時はこれを表示させているので、その画面を見た方もいるかも（笑


★WP Multibyte Patch★

最初から入ってたプラグイン。よくわからないまま有効化しているけど必ずした方がいいという事です（←適当）WordPressで日本語を書く場合マルチバイト文字（漢字とかひらがな）に最適化してくれるそうです。




以上で使っているプラグイン全部です。
あんまりプラグインを増やすのもよくないので、最低限だけしか導入していませんが、今後運営しつつまた増やしたり減らしたり変えたりするかもです。

以上覚え書きでした。


泣きたい；

（愚痴日記ですｗ）

すみません；更新遅くなっています；
あーーーもうもうもう！！
ここ一週間くらいwordpressでサイトを作ろうと試行錯誤しているのですが、どうにもうまくいかない(ノД`)　wordpressって本来ブログ形式のものなんですよね。
それを普通の同人サイトにしようっていうのがそもそも難易度高い；
htmlとCSSの知識はあるのですが、何せ錆び付くほど古い知識なので……；
フレームのサイト構図が頭から離れず、抜け出せないです。

wordpressにしたら、更新がめっちゃ楽だよ！いちいちファイル作ってfttpであげたりしなくても、テキスト流し込むだけでOK★
↑
この『簡単』な状態になる前に私、死にそう、ってか死にかけ（涙）

今どんな状況かというと……。

データベースを作成する（完了）「簡単じゃん♪」
↓
wordpressを導入しよう　（完了）「へぇ、結構すぐに出来るのね♪」
↓
テーマを選択して形を整えよう（完了）「おぉ！一気にかっこよくなった」
↓
無理矢理サイトっぽくするために、個別ページ作成（半分完了）
「あれ……？何かダサくない？思っているのと違うけど……ま、まぁいいや！進めよう」
↓
小説インデックスを作ろう　（真っ白背景で文字のみのグダグダページ）
「……何かが違う、でもどうしたらいいの」
↓
小説インデックスからそれぞれの小説へ　（失敗の連続）
「あれ？消えた？あぁ……あったあった。というか、これじゃただのブログ記事みたい……；雰囲気がゼロだね。ゼロ。いやもうマイナスかな」
↓
小説以外のページ　（何も手をつけてない）
「私には無理なのかもしれない。昭和人間お断りですか、そうですか」

そして極めつけに、弄りまくっていたらレイアウトが崩れて戻らなくなりました（遠い目

書籍も買ってその通りに一度作ったけど、これ……ただのブログだよ？状態。
そのうちフレームサイトはネットで使えなくなるというのでいつかは変えないと、ここなくなっちゃうんじゃないかとヒヤヒヤしています。

よし、もうお金に物を言わせて作成代行頼もうかな！
って検索したら、安いプランで30000円～。
しかもコンテンツ増やすごとにお金かかるみたいで合計50000以上かかりそう。
そんなの勿体ないし……やっぱり自作で（最初に戻る）

フレームを廃止決定した偉い誰かさん（知らないですが）に怒りが湧いてきます。
うん、完全な八つ当たり。


そして、この件で何が一番まずいかというと
小説にもイラストにも手をつけられない日々になってるという事；
wordpressにかかりっきりで、しかも全く思うように出来ないのでモチベーション下がりまくりで他の事をやる気力がゴリゴリ減っているというｗ
まぁ、書く気力下がってるのはそれだけってわけでもないですが。
これって本末転倒ですよね～＾＾；

ここはもう数日wordplwssは放置して……小説更新に励もうかな；
すみません、なっがい愚痴書きまくってしまって。
ちょっと吐き出したかったのです。

そんなわけで、更新もうちょっとお待ち下さいネ。
寝て起きたら、新しくサイト出来てる魔法とかないのかな（真剣）












フォントって面白い

毎回続けてバイオネタというのもどうかと思い（苦笑）
本日はフォントについて書こうと思う。

まずは下の文字を見て欲しい。


これ、全て拙宅のサイト名『COUNT 0....』と書いてある物なのだが、
フォントが違うだけで、こうも印象が変わってしまう。
上から順にフォントイメージだけでサイト内容を想像すると

アメリカ雑貨のお店　70年代コカコーラのアルミ看板入荷
フレンチのレシピを紹介するサイト　本日のお薦めはシタビラメのムニエル
オカルト・若しくはホラー映画のレビューサイト
HIPPOP好きな管理人がやってるファンサイト
ブログパーツを配布するデザイン会社のサイト
キッチュなアクセサリーを販売するお店　ギャルに人気
インドカレー店　ナマステ〜（笑）お香も売ってます！

こんな感じがしないだろうか？
日頃サイトのデザインをする際に、私もだいぶフォントでは迷いまくっているが、
そういう細かい所も含めてデザインするのって結構楽しかったりする＾＾

サイトのイメージに見合っているか。
自分の好みかどうか。
パッと見た時に読めるかどうか。
周りのデザインに浮かないかどうか。

だいだい上記4つを考えながらチョイスする。
フォントと言っても、サイト内の小説や普通の文章では、Mac/Winでも
個人の設定でも、ブラウザでも変わってしまうので、統一することは出来ないけど、
サイトの入り口にかかげるサイト名だとか、バナーに使うサイト名だとか、
そういう画像内でのフォントは大切にしたいなぁと日頃から思っている。

それにしても、人間の視覚、いや…感覚なのかな＾＾；ってとても不思議。
色や形、それらを全て合計して出来上がった物によって印象って全く違うもの。
誘導看板などは、ゴシック系のしっかりとしたフォントで尚かつ、
配色は対極の物を使用するという大まかな決まりがあるらしい。
物件の誘導看板は特に、赤、黄色、青、蛍光色が多いのはその為。
そのルールに従うことで、車で通りすぎるほんの数秒の間に文字を読み、
インパクトを植え付けるのである。

ただ、例外もあるようで、マンションのコンセプトが「緑のある豊かな暮らし」等だった場合は。
森を思わせる深い緑や心を和ませる木の色を使う場合もある。

フォントは見ているだけで、想像力が湧いて、とても楽しい物である。
大好きなフォントサイトは数あれど、一番楽しいのは
コチラ
何時間も眺めてしまうほど、楽しいサイトである。

たかがフォント。されどフォント（笑）

PAGE TOP