雑記

サイト作りの話

雑記

サイトで工夫しているポイントや使用しているプラグイン等を紹介します♪

以前、といってももう1年以上前ですが、このサイトを開設した時の記事を書いてましてφ(..)

今ではほとんどページなども固定化しているため、この記事から1年でどういう更新をしてきたのかということと、実際に使っているプラグイン等を紹介しようかな~と思っています🙌

これからWordPressでブログを始めたい人ブログではないけど何かしらのサイトを作りたい人がいらっしゃったら、少しでも参考になれば幸いです( *´艸`)

前の記事でがっつり触れていましたが、私はWordPress.comからWordPressに移行してきました!

大体昨年5月末の1週間くらいをサイトトップやウィジェット関連の設定に費やしていました💦

ちなみにWordPressのテーマはCocoonを利用しており、その中でもCocoon Childという子テーマに設定して、子テーマをメインにCSS関連の編集などを行っています(`・ω・´)

この子テーマを使う理由を私はぼんやりとしか認識していなかったのですが、テーマであるCocoon自体は色んなソフトと同じように定期的にアップデートがあり、その度にサイトを構築するためのCSSが自動的に書き換えられているようです✋

そのため、Cocoon自体のCSSを書き換えても、アップデートの度に初期値に戻されてしまいます…
(実際私も最初はこれがわからなくて、何度か書き直しするという痛い目を見ました🙄)

子テーマの方であればアップデートがないため、CSSに追記したものはずっと残り続けるので、出来る限りサイトのカスタマイズをする際は子テーマに書き込もうねという話でした(;´Д`)

ちょっと難しい話をしてしまったので、次はサイトの見栄えの話を(/・ω・)/

Cocoonの中にはスキンと呼ばれる、いわゆるサイトの見た目を変えられるオシャレセット的なものが30種類ほど入っています✨

その中でも私はCocoonスキン「アリス」のユニコーンカラーを使用しています💪

Cocoonスキン「アリス」の色違いを作りました | メープルの国のアリス
アリススキン、多くの方にかわいがっていただき、ありがたく思っております。 いただいたご質問などを参考に、無料WordPressテーマCocoon専用スキン「アリス」の色違いを作り...

このスキンシリーズはかなり人気で、DQXブロガーさんでも利用されている方が多い印象です♪

私は更にこのスキンを自分好みな色味デザインに変更して利用しています( *´艸`)

ご自身でCSS触れる方なら、バックアップを取ってから前提ですが、色々カラーコードなどを変更してみるとサイト更新する時に気分が上がるようになると思います👏

CSS難しい~わからない!という場合でも、基本的にはCocoon設定からビジュアル面は弄れる部分も多いので、こうしたいけどどうすればいいのかというのは都度調べながらがおススメです👍
(私も基本的にはGoogle先生見ながら、全部カスタマイズしていますw)

個人的にやっておいた方がいいんじゃないかな~と思うCSS追加は見出しのカスタマイズ新着記事の表示カスタマイズですかねぇ🤔

この辺はそのままコピペ出来るCSSコード紹介しているサイトも多いですし、バリエーションも結構豊富なので、カラーコードだけ自分で変更するみたいな感じで行けると思います(*´ω`)

あと、見栄え問題でややこしかったのはサイトトップのヘッダー画像問題ですね(。-`ω-)

ザクっと紹介しておくと、最初は『日々累々』の文字&ウィンドウ背景のみロゴとして取り込み、あとのキャラ写真と背景ヘッダー背景として取り込んでいたのですが、PCでサイズ調整すると、スマホや他のデバイスで確認した時にガッツリ縦横比が変わっちゃってたんです💦

かといって、ロゴのサイズ固定をするとスマホで見た時、やたらヘッダーが大きくなってしまったりとなかなか思うようにいかず、ここの解決でかなり時間がかかった記憶;;

結論としては、背景画像のみヘッダー背景に、それ以外のロゴ/ウィンドウ/文字は全て透過した状態でロゴとして取り込んだ上で、CSS追記で表示位置を固定しています👊

ただその場合、デバイスによってロゴがめちゃくちゃ小さくなってしまうことがあるので、同じくCSS追記でメディアクエリーを使用して、各デバイスに合わせて幅を固定、高さは可変といった形にしたところ、ロゴサイズは見やすい大きさで固定したままで背景画像大きさが変わるように!

言葉だけで説明するのは少しわかりにくいと思うので、もし同じ症状にぶち当たって、このサイトと同じような表示方法にされたい方がいたら、XのDMなどで気軽に聞いて下さい(`・ω・´)

あと、メニューの部分などは1年間でちょこちょこ変えていたりして、当初はハウジング代行などの固定ページを外に出していたのですが、今はStorageといった形でお役立ち系記事募集系などと併せたページとして載せさせてもらっています♪

特にハウジング系の家具紹介や比較などはまとめて載せていますので、ぜひご覧下さい(=゚ω゚)ノ

大体工夫しているところや、こだわったポイントはこんな感じですかね(・・?

初めはブログメインというよりも、自分が作ったものなどをまとめて置けるサイトというのを作りたくて始めたサイトなので、今でもその部分は強く意識しています🙌

Event scheduleが特に当てはまりまずが、ブログ記事を介さなくてもブクマして利用してもらえるようにするのが1番目指している場所だったり(/・ω・)/

ただブログ記事も見て欲しいし、何なら応援ポチも毎日してほしいと思うこともあるんですけどね…😣←

恐らく今見て下さっている方もほとんどがスマホからご覧いただいているかと思いますが、基本的に私はPCでカスタマイズしたり、記事書いたりしてるので、スマホから見た時にレイアウトが崩れたり、一部メニューがわかりづらかったりするのが今後の要改善ポイントですね(;´・ω・)

一応スマホからの見え方はチェックしているのですが、先日タブレットから確認したときは、これまたかなりレイアウトが違って見えたりしたので、どこに合わせていくかどうすれば見やすいのかというのを時間がある時に考えながら、触っていきたいなぁと最近は思っています💪

さて、ここからはオマケみたいなものなのですが、WordPressで入れて良かった便利なプラグインをいくつか紹介しようかなと(∩´∀`)∩

プラグインはWordPressに追加できる便利アプリのようなもので、無料から有料まで幅広く公開されており、簡単に使用することが出来ます♪

ただ、基本英語メインなので、もし入れてみたけど使い方わからないという方がいらっしゃったら、こちらもDMなどで気軽にご質問ください💪

メディア用ファイル整理プラグインです!これは入れてほんと良かったな~と思ってます👏

WordPressのメディアは通常だと1つのファイルにどんどん溜まっていく形なので、このブログのように画像を多く使用する場合だと、前に使った画像がどこにあるのか探すのが困難です💦
(検索はできるのでリネームすればいいのですが、それもなかなか手間なので←)

私はこんな感じでファイルを写真の種類ごとの分けて管理しています(/・ω・)/

不便な点は写真のファイル移動が1枚ずつしかできず、未分類に溜め込むと整理がかなり大変なのと、スマホからだとプラグインのせいで写真選択のレイアウトがガッツリ崩れてスクロールできなくなるくらいですかね、、、

なので、スマホから記事書く時はカメラロールから直接アップロードするようにしてます😫

無料なので不便な点があるのは確かですが、それ以上にファイル整理できるのはかなり便利で、重宝しているプラグインの1つです(`・ω・´)

こちらもメディア関係のプラグインですが、名前の通りペイントソフトのようにアップロード画像を加工できるものになっています( *´艸`)

元来のメディアにも画像編集機能はあるのですが、トリミングや回転など最低限のことしかできず、文字入れなど画像に書き込みたい場合には取り込む前に加工が必要です💦

ただ、このプラグインを入れると基本的なことはこれで出来ちゃうので、特に家具紹介の記事などではかなり使用しています♪

記事のサムネなどは大体スマホで作成しているのですが、家具紹介のような大量の画像に見やすく一定の文字を入れていく場合は、こちらで作業するほうが圧倒的に楽ですね(*´ω`)

レイヤー機能もあるので、図形の上に文字を入れたいという調整も可能となっています✨

WordPressでウィジェットと呼ばれる固定コンテンツの表示設定を変更できるプラグインです🙌

例えばこの記事に上部と下部に出ているブロランの画像バナーサイドバーのカテゴリー選択などがウィジェットに当たります(∩´∀`)∩

ウィジェット設定自体はWordPressの元々の機能であるため、普通に表示する場合にはプラグインを入れずとも簡単に設定できるのですが、私がこれを入れている理由はスマホとの表示を変えたいから!というのが一番の理由ですね✊

PCから見たことない方がほとんどだと思うので、参考に画像を貼っておくと、左側のPC版サイドバーではブロランバナーの下に検索新着記事のウィジェットがありますが、スマホ版サイドバーではバナーのすぐ下にカテゴリーのウィジェットが表示されるようにしています✋

これはスマホ版だと下のメニューに検索ボタンがある&サイドバーが長くなりすぎると見にくくなるので、敢えて表示されないように設定しているわけです(=゚ω゚)ノ
(こういうどうでもいいところに拘るの大好きなので、必死にやり方調べましたw)

このPCとスマホで表示設定を分けるのが、プラグインを使用しないと設定できなくて(´・ω・`)

便利なので入れておいた方が良いプラグインだと思いますが、ウィジェットにバナーを入れたい時などカスタムHTMLを使用すると更新できなくなることがあります、、、(グルグルから進まない)
こちらも解決法見つけたので、もし同じ現象当たった方いればお問い合わせください💪

このプラグインを入れることにより、下書き状態の記事やページのURLを公開できます👍

WordPressは仕組み上投稿してしまうと、サイトのどこにも載せないようにしていても検索すれば誰でも見れるようになってしまうので、投稿せず下書きの状態で特定のメンバーなどに確認してもらいたい時にとても便利です( *´艸`)

ヒロイン大作戦のモデル用/スタッフ用のショー概要説明ページを公開する時に利用しました♪

プラグインを入れると、こんな風に投稿設定のサイドバーに外部確認許可のチェック欄が出てくるので、ここにチェックを入れて、表示されたURLを送るだけで他でも見れるようになります!

ただ、通常だと48時間で見れなくなってしまい、概要ページなど長期間に渡っていつでも見れるようにするのはもう1つPublic Post Preview Configuratorというプラグインが必要です😳

これを入れるとURLの有効期限を延ばすことができるので、長めに入れておいてURLを送るのが楽だと思います(`・ω・´)(ちなみに期限は時間表記なので、大体の公開日数×24で計算しましょう!)

現在CocoonでははGutenbergというブロックエディタを利用することで、記事やページを編集できるようになっていて、見た目通り簡単に触ることができます👏
(いわゆる、従来のHTML知識がほとんど不要でサイト作り初心者でも大丈夫な感じです!)

ただ、このブロックエディタの種類自体が非常に多く(; ・`д・´)

絶対このブログで紹介することがないであろう、TEDDailymotionなどの埋め込みブロックも存在している感じです…😅(埋め込み関係やたらバリエーション豊富なんですよね)

埋め込みに限らず、多分このブログではあまり使わないであろうブロックを非表示にしたり、これまた使う頻度で表示場所を変更できるのがこのプラグインになります(*’▽’)

ブロックの表示/非表示設定自体はCocoonの設定から触れるのですが、私がなんで!?と思ったのが、埋め込み関係を全部非表示or全部表示しか選べないんですよね😭

XやYouTubeの埋め込みは残したいけど、他は邪魔だから何とかしたい…と思い、こちらのプラグインを採用することにしました♪

結果的にはブロックの順番を入れ替えられたりして、スムーズな記事作成に役立っています💕

最後に紹介するのはパッと良さが伝わりにくい、最近入れて良かったな~と思うプラグインです✨

何ができるかというと、投稿記事や固定ページの表示順番をドラッグ&ドロップで入れ替えれるようになるプラグインになっています♪

個人的な話なのですが、前に比べて固定ページが増えてきて、更にはEvent Scheduleのような毎日編集するものから、ドレアショー概要など今は触る必要がないものなど……ごちゃ混ぜに並んでいた感じだったんです(;´・ω・)

それをこのように並べ替えたいものだけ設定すると、簡単に表示順を変えれるので、よく使用する固定ページを上に、使ってないのを下にと変えたらかなり見やすくなりました🤗

地味なポイントですが、投稿記事や固定ページ、カテゴリー表示などなど、かなり多くて自分が編集する上で使いにくいなぁと思う方にはぜひ使ってほしいプラグインですね(*´ω`)

ただこのプラグインでも私は躓きまして…最新版を新規プラグイン追加から追加したところ、全く操作を受け付けてくれず、色々調べたところ同じ現象が多発しているということでした💦

解決法としてはちょっと面倒なのですが、1つ前のバージョンをプラグインページから直接ダウンロードして、手作業でWordPressに取り込むと使用できるようになります!
(この方法をする場合は、プラグインを有効化したらすぐ自動アップデートを無効にして下さい)


ドラクエとは全く関係ない話を長々としてしまいましたが、私の無駄こだわり人間っぷりはよく伝わったかと…(白目)

こうしたいと思ったことはとことん突き詰めていくタイプなので、そういった意味でもサイトという形態でブログを始めたのは大正解だったと最近よく思います🙌
(時間はかかりますが、制限なく自分のやりたい表現ができるので)

ブログを継続することもですが、自分でサイトを作り上げるというのはなかなかに難しいことではあるので、気軽に人に勧められるものではありませんが、何かしら自分の好きなもの/やっていることを表現する場所が欲しいな~と思う方はぜひ挑戦してみて欲しいと思います(`・ω・´)

私もかなり微力ですが、いつでも相談には乗るのでぜひ気軽にご連絡ください🥳

それでは最後まで閲覧ありがとうございました♪

コメント

タイトルとURLをコピーしました