超初心者ブロガーがブログで個性を出していく為に
・・今週はあまり映画を見るヒマがありません。。
その代わりと言ってはなんですが・・
知人のススメで今回ブログを大幅にリニューアルしてみました。
元々凝り性なので、一度ハマると中々抜け出せません。。
サイドバーの幅変更だけをするつもりが、いつの間にかタイトルまでいじってしまっていて・・
まあでもブログを始めてわかったコトは、有名ブロガーは皆やはりその著者の個性を出すというコトなので、似たような映画紹介サイトが多い中、自分はちょっと映画人らしく、どこかのレイトショーでやっていそうな映画ポスターっぽく変えてみました。
個人的には結構、気に入っているんですが、どうでしょうか・・
サイズ調整や、スマホ用のデザインの改良等まだまだやるコトは多いんですが、私的に変な達成感があるので、しばらくは優しく見守っていて下さいw
今回はそんな超ブログ初心者の自分にも出来た、ブログに個性を出す為に役立った比較的使いやすいカスタマイズサイトを幾つか紹介していきたいと思いますが、あくまでも何も知らないトコロから始めた完全初心者用の紹介ですのであしからず。
- 超初心者ブロガーがブログで個性を出していく為に
- ブログテーマ「 UnderShirt 」
- 画像加工サービスCANVA（キャンバ）
- Font Awesome
- 最上部にメニューバーの設置
- 憧れのコンテンツスライダー
ブログテーマ「 UnderShirt 」
映画やドラマの紹介サイトでは有名なミセスGさんが使用されている「Thumbnail2」のフォーマットをまるパクリして始めたこのブログですが、基本的に大きなアイキャッチの2コラムのデザインは結構気に入っていました。
ですが、初心者がCSSやHtml等のカスタマイズをしようとすると、何故かどうもうまくいきません。
そんな方達の為におすすめしたいのがこのブログテーマ。
UnderShirt - テーマ ストア
「Thumbnail2」を作られた同じろくぜうどんさんが製作されたテーマなんですが、使い心地が中々です。
ずっと手こずっていたアドセンスを載せる為のサイドバーの幅変更も、このテーマでは初期状態から336pxにされているので安心です。
自分はまだ実装していませんが、スマホからの見た目も2カラムに変更出来るようです。
・・心なしか、Thumbnail2よりもCSSのスタイルの競合が少ないような・・
画像加工サービスCANVA（キャンバ）
映画屋って大体写真いじるの好きなんです。
今までフリー素材の写真をあちこちからひっぱっていましたが、IllustratorやPhotoshop等のソフトもないので写真加工が出来ませんでした。
そんな自分に現場のスチールマンの方が教えてくれたのがこのCANVA（キャンバ）のサイト。
www.canva.com
その魅力はもなかさんがバッチリ説明してくれているのでご紹介します。
オーストラリア製のサイトなんですが、2016年より日本語向けのサービスが開始され、日本語のメニュー、フォント等も充実しています。
紙媒体からWeb用のコンテンツまで幅広くデザイン出来るサイトで、自分のブログのヘッダー画像やキャッチ画像等もコレで作成しました。
web知識ゼロでも直感的に使えるのが最大の魅力です。
基本動作はブログ初心者にはお馴染みのサルワカさんのサイトでも紹介されています。
saruwakakun.com
加工した画像はPNG形式で保存し、ブログにあげる前にiLoveIMGのようなオンライン画像編集ツールでサイズを整えてから使用される事をオススメします。
Font Awesome
ブログで文字を加工する際に役だったのがコレ。
Webフォントなのでページを表示する際、少々遅くなるらしいんですが、私的にはまだあまり感じません。
上記のページの中から好みのアイコンを選択し、例えば見出しのHTML内に、
<h5><em class="fa fa-paperclip"> </em>Font Awesome</h5>
といれると、
Font Awesome
のように表示されます。
珠に”fa fa”の部分が”fab fa”になっているアイコンもありますが、”fab”の”b”を取ってしまえば普通に反映されました。・・正しい使用方法かどうかはわかりませんが・・。
詳しい説明はぷるぷるさんのブログで紹介されています。
最上部にメニューバーの設置
様々なブログを見ていると、割合ブログタイトルエリアには何も入れていない方が多いですが、個性を強調する為には是非ココはいじってみたいトコロ。
その為にどうしても最上部にメニューバーを設置したかったのでZENO-TEALのテーマカスタマイズを試してみました。
テーマごと変えようかとも思ったのですが、Thumbnail2の2カラムの雰囲気がどうしても居心地が良く捨てきれませんでした。
まだ試作段階で、詳しいコトは自分でも全く分かっていないのですがsimon's noteさんのブログで丁寧にご説明されていたので参考にしてみて下さい。
自分もそうですが、ZENO-TEAL以外のテーマでも一応使用可能な様です。
メニューバーの検索欄の幅調整だけがどうしても出来ず、今後の大きな課題ですが。。
憧れのコンテンツスライダー
動きのあるブログを作りたい自分としては、コンテンツスライダーは面白そうで是非やってみたかったんですが、超初心者にはあまりにもハードルが高くて・・
ネット界では話題のSwiperどころか、jQueryさえも全然理解していないので諦めかけていましたが、映画紹介の為にも一度は試してみたい！と奮起しました。
一昼夜、食事も取らずネットで狂ったように調べ上げた結果、詳しく解説されているawaさん、ケンヂさん達のサイトで猛勉強をし、どうにか設置するコトが出来ました。
english-apple-diy.hatenablog.com
アニメーションを入れるとブログの表示速度が大分遅くなるようなので、暫く検証してみますが、基本静止画でもスライダー自体は残していくつもりです。
映画紹介ブログの記事自体はどうもまだ堅苦しさが抜けず、有り体のコトしか書けていないのでせめて見た目だけでもと思って・・
今後は少しでもわかりやすく個性的な記事を書ける様日々精進いたしますので、ご愛読宜しくお願い致しますm(__)m
